Design System: InteractiveItem

[mica000]

As part of the effort to consolidate our components, we will need these elements to be added to our design system.

Once added, we should replace them on the following steps:

• Assets list
• Activity list
• Send
• Receive
• Swap asset list
• Accounts list

---

https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=2081-3746&mode=design

[markmhendrickson]

@mica000 to update so that name and content is more generic

[mica000]

@fbwoolf @markmhendrickson ticket has been updated, please review it and let me know

[kyranjamie]

To rename everywhere to content menu (we don't use context menu's anywhere in the app currently).

[kyranjamie]

From a development perspective, this is quite a broad task to tackle as it touches content from many different components.

I wonder if "ActionItem" might be a better name as it suggests interactivity. Suggesting waiting until Storybook is merged so these can be created and reviewed in the tool.

I'm not sure what "Section" means here. Is this content for within an input? If so, I don't think we need a component for this?

[mica000]

@kyranjamie thanks for the review.

Section is the equivalent of " <Select.Label>Vegetables</Select.Label>" in radix: https://www.radix-ui.com/themes/docs/components/select

[mica000]

@kyranjamie in relation to the naming, if we could keep the initial root the same for all would be helpful for Figma documentation.

[kyranjamie]

Can we follow the same naming as Radix, and call it Select.Label?

[fbwoolf]

I believe this touches the Dropdown Menu and Select components I've built already? I have built the basic list item here and the select label: #4765

EDIT: I was a bit unclear about the label naming too so can change from ...SectionLabel.

[mica000]

Cool. let us know which names you will be using on the frontend so we can also update on Figma

[fabric-8]

@kyranjamie @fbwoolf Just checking in: Did you already settle on the names?

[fbwoolf]

@kyranjamie @fbwoolf Just checking in: Did you already settle on the names?

We followed what @kyranjamie mentioned ^ Select.Label and DropdownMenu.Label.

[fbwoolf]

@mica000 is this ready to work on as a possible first step here? #4313

For context, Pete asked me to start with rebuilding the settings menu.

[pete-watters]

To give context here. I'll be happy if we can even just swap out the settings menu components without doing a big re-style now if they mostly look the same.

I need to change the app Header and the settings menu is a part of that. At the moment, clicking to show the menu touches some logic in the state using jotai atoms (useShowSettingsStore).

That logic is a bit complex so I would like to put efforts into instead adding the new menu and then making things work

[mica000]

@fbwoolf how are we re-naming item-interactive, item–buttons and item-address?

[kyranjamie]

Would decompose issue as follows:

Notes from call

1. Create reusable styles for a kind of InteractiveRow component, that can be shared between Radix and our own uses
2. Create reusable layout-only components to handle the repeating layout patterns
3. Create new buttons for the item buttons