Description

InlineEdit is a wrapper component that enables a smooth transition between viewing and editing data.

Use this component when:

• You need to effortlessly switch between read-only and text editing modes without requiring a page reload.
• The interface is spatially constrained, necessitating efficient use of space.
• Transmitting data to the system isn't the primary focus of the interface (for example, providing supplementary information and notes within cards).

Appearance

It's important to note that the example below serves merely as an illustration and isn't the default configuration. Any control component, whether it's a Button, an Icon, or text with an icon, can be utilized as a trigger.

The placeholder's color aligns with that of a typical input element, using the --text-placeholder token. The text and icon share a single clickable zone.

Interaction

• The user clicks the trigger, which opens an input of any type you need for your case (InlineInput, Input, Textarea, Select, ColorPicker or TimePicker).
• The input gets immediate focus.
• The user enters data and can submit it. Alternatively, the user can revert to view mode by using the Cancel button or the Esc key.
• When the input loses focus (for instance, if the user switches to another screen), the onBlur event saves the entered value.

Below is an example demonstrating how this component functions with one of the possible triggers.

InlineEdit states

State	Appearance example	Styles
Normal		The placeholder's color matches that of a default input --text-placeholder.
Hover		The cursor changes to a pointer.
Focus		Display any input type required for data entry (InlineInput, Input, Textarea, Select, ColorPicker, TimePicker, for example).
Entered data		Text color changes to --text-primary.
Entered data with hover		The cursor changes to a pointer. The interactive trailing addon's color shifts to the darker one with CSS filters.

Animation

The transition between the wrapped trigger and the input field can be accomplished with an ease-in-out effect lasting 50ms.

UX/UI use

In view mode, ensure that the text size matches the size of the edit input you've selected.

For instance, if the heading you wish to edit employs a font size of 24px, maintain the same font size of 24px when transitioning to edit mode.