Editable settings type component

[pamelahu]

@tonge495 (Eileen Tong) and I are working on this One Admin page. Currently display pills are used to signify content that is non-editable, editable, linked, linked + editable. We realize this can be confusing for users to decipher (which are editable vs not editable) but we like the compact nature of the component.

We're wondering if you have a solution for how to display these 4 different types of content in a more compact manner than just input field components? Eileen tried with input fields and it got very busy.

For the editable fields, we want them to be selected from a dropdown/date picker.

Ultimately this use case is helpful when there's a lot of settings that need to be edited or displayed or linked on the same page. This will happen a decent bit in One Admin.

Non-editable display pills

• Created on [date]
• Product
• Brand
• Location
• Requester
• Modified on [date]
• Modified by

Editable display pills

• Status
• Pricing update
• Expected to send on [date]

Linked display pills

• Slack channel

Editable & linked display pills

• Link

[pamelahu]

This is an example of the type of component we were hoping to achieve (inspired by Jira) but this also isn't clearly editable....

[loreina]

Hey @pamelahu, can you share a Figma link and/or Loom video? That'll help us understand the intended interaction and we can get back to you shortly, thanks!

[pamelahu]

@loreina https://www.figma.com/proto/e242Xtp1dPvWNL67T2onZw/Communications-Center?type=design&node-id=223-159796&scaling=min-zoom&page-id=223%3A141649&starting-point-node-id=223%3A159796

[pamelahu]

For example, we're hoping that when you click the component... a drop down will appear so the component will change.

This probably isn't how display pills were attended to be used - but wondering if y'all have any other ideas to achieve this effect (that aren't input fields.)

[loreina]

We have a MenuBadge component coming in our release at the end of June that would be great to use here. We can follow up when that's available in Figma to use!

[pamelahu]

^For this example, we want the link to be editable and the link to be clickable once there is a link added.

[loreina]

Hi @pamelahu,

Do you want to come by office hours this week? We can tackle all these questions in one go.

[tonge495]

@loreina I would like to attend as well, if that works for everyone!

[pamelahu]

Yes! See you Thursday for office hours!

[nkrantz]

Hi @pamelahu and @tonge495! Here's the recording from yesterday's Office Hours (password in #help-design-system Slack).

Please follow up with any further explorations or questions!

[tonge495]

Thank you! Appreciate the discussion, will definitely let you know if we have anything else.