jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
109 stars 78 forks source link

Multi-select list item sync in Code and Design #3546

Open yunjungyeh opened 3 weeks ago

yunjungyeh commented 3 weeks ago

Area

UI Components, Documentation

The problem

About adding secondary labels for components, we can achieve Checkbox as what we’ve had in code. However, multi-select list item is using Checkbox in build and Figma, the alignment would be different (as screenshot shown below), so need to discuss how to sync (e.g. in Figma consumers can manually adjust it for the List item?) Another difference is in code there can be an Avatar between the box and the Value container, for now this can't be achieved in design as the same in code.

The solution

### Tasks
- [x] Update the storybook example (#3556)
- [ ] Create a complex Sticker - put a swap between checkbox & text, the custom checkbox + Avatar or guidance for Figma overwrite  cc @ben

Alternatives and examples

@joshwooding has been updating the example in other issue.

Are you a JPMorgan Chase & Co. employee?