[EuiInlineEdit] Creating the EuiInlineEdit Component

[jloleysens]

In the Ingest Node Pipelines plugin in Kibana (Home > Stack Management > Ingest Node Pipelines) there is a component that provides an "in-place" or "inline" text editing UX. Specifically when editing a pipeline (see gif).

This component/behaviour seems well suited to living in EUI and should have an accompanying style guide explaining where it can be useful.

For instance, a capability like this can help make certain editing experiences more streamlined while not cluttering up the UI with text boxes or sending users through multiple clicks to edit a value. This is different to the more typical flow of see a thing, click to expand the details, then click edit. Only then is the user presented with a text field to enter or edit a value.

At an implementation level, this could be part of the existing text field component and simply be a prop that gets set to adapt the appearance.

Gif

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[myasonik]

++ If Elastic products are going to have this type of pattern, would love to see it handled in EUI because I worry about individual implementation a11y

[hbharding]

I noticed we do this in a few places in Observability. It looked a little off to me, so I decided to mock up a concept of what this could look like. Perhaps we could have an editable wrapper like this for EuiTitle and EuiText.

GIF

Figma

Explortatory view GIF

[elizabetdev]

There is also a request for in-place title editing in tabs: #6066 (comment)

Something to note that isn't completely reflected in this early design is that we'd like to have as much of the behaviour inline as possible. As in, the naming / editing of tabs, rearranging, deleting etc.

[ThomThomson]

This is such a cool component! Another use case that could be helpful for this is allowing the user to change the title of a visualization when editing it in Lens. The breadcrumb itself could become editable using this component.

elastic/kibana#140637 (comment)

[MichaelMarcialis]

Hey, gang! Is this inline editing component something that's been prioritized for development by the EUI team? Or is it still in the spec definition/discussion phase? I could swear that I heard somewhere that this was being worked on, I could be misremembering. This proposed component came to mind in discussions I was in with the visualization and dashboard teams regarding whether we could perform inline editing on things like visualization titles, legend labels, etc.

[elizabetdev]

Hi @MichaelMarcialis,

Is this inline editing component something that's been prioritized for development by the EUI team?

It is currently in progress as you can see here: https://github.com/orgs/elastic/projects/1079/views/3

@breehall is the developer working on this, but she's on PTO. She was working with Henry. As soon as she's back we can see what is the current status.

[elizabetdev]

@daveyholler do you have any update on this?

[breehall]

Development is rapidly coming to a close on EuiInlineEdit. Here are a few things that should happen after Inline Edit has merged into main.

✨ What's Up Next?

• EuiInlineEdit will need to be added to our Figma library (will create a request in the design-system-team repo)
• We'll work with teams to implement Inline Edit in Kibana and beyond ([EuiInlineEdit] Implement EuiInlineEdit in Kibana #6778)