Upgrade "Item" component

[chrislueders]

Issue 1

As a UI kit user, I would love to change the states of the nested components easily, when I use the "item" component.

Now it's complicated, since one need to dig into the component to change the toggle state for example. See image:

We could change this, with "nested instances". See image:

Issue 2

As a UI kit user, I would like to toggle the frame of the "Item" Component on and off, easily."

Now I need to replace the whole component:

It would be easily fixed with a component variant: Frame true/false

[GBKS]

Yes, both are good additions. Would the frame variant get messy if we add more states (hover, selected, disabled, etc)? Similar discussion to the button whether to pack lots into the same component or have many simpler components.

A note about the Item component. It is super configurable because it essentially consists of three sub-components with each one having its own variants. What I have found myself doing often is to not use the Item component directly, but introduce another component layer that is focused on specific use cases and covers content states of that use case via variants. For example:

We have a lot of screens where the user picks a contact for a transaction. Sometimes it's empty, sometimes all we have to show is an on-chain address, etc. When designing screens, I have found this intermediate layer to be super helpful. It's great, because then you don't need to dig up a sample on-chain address from somewhere online, but you just need to pick the variant.

Not sure if that affects anything you suggested, but thought I'd mention it.

[chrislueders]

I think we can keep everything as it is, but adding the nested instances, which doesn't change the structure of the component itself. With adding simply the "frame" as a variant it neither would make things messier

IF we would add new states to the framed version, we would of course add some complexity, but a solution could be to create some kind of "card" element, which is reused for all elements that are "framed". Then we would have the states just once and could reuse them everywhere where it's needed, with a great consistency.

I could build that in a duplicated page, to show exactly what I mean, would that make sense?

[GBKS]

That's a great idea. Before fixed positions, it was impossible to have frames as separate components, but should be doable now. Would love to see what you come up with.

[chrislueders]

Ok! Optimized and fixed the Item component: https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-UI-Kit?node-id=96%3A2639&t=CzQnFelDlCERXRXn-1

[GBKS]

Looks awesome! I noticed a few details I'd like to tweak, I'll leave comments in Figma before doing anything.

Another task now is to update all instances of the previous Item component with this new one. Easiest approach might be to go page by page and use the Select Layers plug-in and select all with the name Item. Then replace the component via the sidebar. What we need to find out though is whether all adjustments transfer perfectly from old to new. I did a super quick test with the Settings page, which has 255 instances of the Item component (because it's pretty much all lists). I think it all translates, but need to do more tests with more unique configurations.

Another thing then is also to update components that are essentially a series of states of the Item, like the Fee item, Recipient item, and Amount item components. But let's do one thing at a time per issue, these can be separate ones.