[Selectable Components: Tile & Structured List] Figma Kit

[Kritvi-bhatia]

Acceptance criteria

Update the All themes Figma kit with any changes that came out of the final design specs for selectable components.

• [x] Consult @juanencalada about the build of current Figma components and with any outstanding questions.

---

Tiles

• [x] Update the radio button icon in tiles
• [x] Update the inconsistencies, bugs, miss
  • [x] Add the disabled state for enabled state in both single & multi-select
  • [x] Update all the Titles' and Descriptions' fonts as "body-compact-1"
  • [x] Link all the text styles
  • [x] For the disabled states, fix the border color as $border-disabled

---

Structured list

• [x] Update the icon in the structured list (from checkmark to radio button)
• [x] Add the state where the icon will be on the left
• [x] Along with the transparent structured list, add the whole set of structured list with background too
• [x] Remove the flush state from the non-selectable structured list
• [x] Update all the inconsistencies, bugs, miss
  • [x] Headers' height inconsistencies
  • [x] Add all the different states (selected, enabled, hover, focus, disabled)
  • [x] Link all the text styles

---

Review

• [x] Review (carbon designer)
• [x] Review (figma expert/Juan)

[juanencalada]

Hey @Kritvi-bhatia,

1. I updated the order and placement of some of the accessible borders

2. I would reset defaults on the icons so that the vector layer remains locked as is intended from the icon library:

3. I would lock this frame and also consider setting up icon swap properties for them and include preferred values based on what IBM Dotcom is doing. I would ask @laurenmrice for her thoughts on this to see if she also feels this is something we'd like to offer to users as a nice to have. At the very least I'd lock the layers to reduce selectability distraction

   

4. There are conflicting variants from having the same properties. I would consider removing the bottom half:

[juanencalada]

For Structured list:

1. I renamed the second one to Structured list - Selectable

[juanencalada]

Depending on why we need the background, we might be able to move the background layer out of the rows, and directly into the whole table as a boolean property that's available only for the hang variants. This would get rid of 2 variants for each of the components

[Kritvi-bhatia]

Hi @juanencalada!! (in reply to your first comment)

1. Thanks for doing that
2. I've done that, thanks for pointing out
3. So I've locked the icon layer but regarding adding the icon swap and all will consider in the next update / issue as currently I'm just focusing only on the selectable components. So regarding the icon swap thing that you were mentioning, did you mean something like this - (example of data table)

   

4. Not sure, nothing is conflicting for me though 🤔

   

[Kritvi-bhatia]

(In reply to your third comment) I've updated it now as you recommended, can you please check now!?

[juanencalada]

Hey @Kritvi-bhatia What is the background layer for exactly? Is layer-selected-hover-01 the correct token?

[Kritvi-bhatia17]

Heyy @juanencalada In reply to the above comment, I've updated it!