Reduce width of "color chip swatches" in the label dropdown/picker
Challenge
Spin off of discussion in #324975 (comment 536136209)
- Color swatches are top aligned to label titles, even when they are wrapped to many lines. This breaks the reading flow since the color swatch and line height of the title aren't perfectly aligned and the height varies.
- We explored vertically centering titles (before & after below), but this also breaks the l-r flow.
- The color chip is using width that could potentially be utilized by the title instead- expanding horizontal real estate and ideally reducing the need for wrapping.
2 lines | 3 lines | Hover |
---|---|---|
Proposal
- Reduce width of the color swatches to allow more real estate for titles and reduce title wrapping while still indicating color expectations.
- The height of the color swatch should span the height of the label title, better grouping the two items.
🎨 From Figma project
- View Figma project
-
Reduce width to 4px -
Retain radius of 4px -
Height of color chip is dynamic and matches the line height of the titled -
Increase title div from 160 to 172 (this can be done if it makes sense due to reduced chip)
🎬 Prototype
Edited by Alexis Ginsberg