Add `inline-editable` to `input` component and deprecate `inline-editable` component

[geospatialem]

Description

Add support of inline-editable to the input-named components, and deprecate and remove the inline-editable component.

If removal of the component takes place as part of any PRs from this issue, we should add the breaking change label in for tracking purposes.

Proposed Advantages

The existing inline-editable component is not straightforward and confusing as an input is slotted for use. Providing support to input for inline-editable would make it easier to use and in line with consistent use across our components.

Update input-* components with inline-editable behavior common for all inputs. cc https://github.com/Esri/calcite-design-system/issues/5144

Which Component

Enhancements to input-named components (listed below) and deprecation of inline-editable.

• Input
• Input number
• Input text
• Input date picker
• Input time picker

[Anastasiia-Boleiko]

Interested in this change👍 I wonder if other properties will still be available after such a change (for example: suffix, etc). Would it be possible to keep them, something similar to:

https://user-images.githubusercontent.com/119309703/225736657-40578569-2d0f-4180-beb6-2cd389dfacae.mov

[brittneytewks]

The scope of this issue can be done without any design change

[RSantosGIS]

Thought about making a new issue, but I think it probably belongs on this thread instead if this is the direction calcite is going

If inline editable is rolled in to input, then we'd also like it to dynamically resize to width based on the width of the input text, or at a minimum have an easy way to have it interact with dynamic styling so that developers can set this up ourselves. We had a requirement to do this for an element, and I was able to get it working by detecting when the text changes and then changing the width of both the CalciteInlineEdtiable and Input elements based on the pixel width of the current font plus some extra spacing.

However, this solution is brittle. For one thing, it pushes the pencil icon out of the inline editable div. For another, I was not able to achieve the width I actually wanted because inlined editable has some funky behavior when it comes to when it decides to truncate text into an elipsis for overflow - it seems like it consistently does it way too early and I have no way to adjust the pencil to be closer, so the two problems compound.

Also, as I type, I notice that for some reason the inline editable input box does not grow as fast as the typed text, which may be an issue with the code assuming monospace but this not being the reality of the font. Here are some samples to show what I hope I can achieve cleanly in the new version:

[RSantosGIS]

CC @macandcheese

[brittneytewks]

Removed figma changes label, will track progress for this work in monday.com

[geospatialem]

Re-evaluate the effort for future planning in 2025 in late 2024.