[Selectable Components] Design Solutions & Final Specs

[laurenmrice]

Acceptance criteria

• This issue is a follow-on to what came out of the Audit.
• We need to take the insights found from the audit and research and create design solutions for how we display selectable controls in components.

---

Design solution

• Create design solutions for the following components below of how to display selectable controls in components in different states. (particularly looking into the visuals of how we treat this in the enabled, hover, and selected states)

Tile

• Single select
• Multi-select

Structured list

• Single select
• Researching on whether Multi-select can be added or not (will research separately)

Data table

• Single select
• Multi-select

---

Other considerations

Icon

• Decide on single & multi-select icon
  • Should it be the actual radio button or whether it can have circular checkmark?
  • Should the icon be on all the options or should it be only on the selected one?
  • Should it be already there or should it only shows up when it is selected?
• Decide on alignment rationale
  • Should selections controls always be on the left? on the right?
  • Is this alignment dependent on the component of what makes the most logical sense?
  • Would this be an option on having the control on the left or right depending on the use-case?

Cell selection

• Decide on cell selection rationale
  • Should it be filled without strokes or just the strokes?
  • Consider the hover scenario also

Pre-selection decisions

• Determine if we should have or should not have one option pre-selected (in tile, radio button, structured list, etc.)
  • Should it be an option depending on the usecase? (Ex: legal requirements?) This could just be a prop in code and written guidance on our website if we decide to do this.

Disabled state

• Decide on whether the helper & warning text should get removed or disabled when the component is disabled

---

In context examples

• Show recommended design solutions in context of where components that have selectable controls might live close together in one flow, like in a form or provisioning page. (@laurenmrice will give you examples to work with).
• Maybe get in touch with Juan about his explorations for w3 just so we are aware of his work.

---

Playback and finalize specs

• Playback in a crit to Carbon designers and A11y rep
• Align on a direction to move forward with

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[laurenmrice]

We can size this once the Audit is completed.

[Kritvi-bhatia]

Final Design Solution

1. Tiles

Figma file link

---

2. Structured List

Figma file link

---

3. Data Table

Figma file link

---