jpmorganchase / salt-ds

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

Pill v1 #488

Closed joshwooding closed 1 year ago

joshwooding commented 2 years ago
### Checklist
- [x] Density (HD, MD, LD, TD)
- [x] Mode (Light, Dark)
- [x] State (Default, Hover, Selected/Active, Disabled, Read-only(Static?), Other)
- [x] Controlled API
- [x] UITK accessibility parity (screen reader + keyboard interactions)
### Deliverables
- [x] Characteristics spec
- [x] Interactions spec, where necessary
- [x] In Code & Figma (Component + Guide)
- [x] Supporting site documentation
### Features
- [x] Optional icon descriptor
- [x] ~Optional Clickable pill~ Move to [V2](https://github.com/jpmorganchase/salt-ds/issues/1873) readonly feature
mikearildbrown commented 1 year ago

Deadline? For the basic v1 pill, can easily say within 2 weeks can turn around basic pill with icon and text, closable maybe. Unless a design issue comes along.

Who are the expected users of the component? Who will adopt the component? Salt website to display some basic categories. Mosaic. Commonly used. Annia and Tara likely to have to speak with sponsor teams and steering committee, so they’re aware that Pill is going to be worked on and kept up to date and see who’d be interested in using after. David: would be good to find a key stakeholder for each component. May be chances where MCP needs this, see some designs with pill acting as category.

When will they use the component? Unsure about key stakeholders right now so unclear.

What solutions/products/uses are we hoping to support with this component? Multi-selection combo box and tagging of content.

What design work needs to be completed? No work has been done yet. Not yet had a chance to speak with Ben.

What the proposed API might look like. Can either keep the UITK API or change to a more compsable API like we’ve done with other components in Salt. Zarko to open a PR.

Any functionality/design changes from UITK? Icon usage of pill in UITK it is on left hand side, which is reason why API choice could impact it. Not sure if it will be the same, but if not need to work out the difference. MCP putting icon on right hand side, make sure we have the right recommendation first. Questions for @bhoppers2008 : will it be clickable as it is in UITK? Also can some of these things be composed together i.e. closable and selectable? Should we apply hover styles only when it’s clickable?

Any foreseeable issues/challenges? Closable pill has an accessibility challenge. If pill is clickable and closeable, can’t have nested buttons. Can’t have an icon as clickable thing, need to be semantically a button. Maybe a design issue.

Any dependencies? No. Josh: would probably not choose build pill on top of button.

Content considerations for component documentation? Any guidance needed? Only thing for content side, similar to stepped tracker, labelling. Worth checking with design. Would expect a fairly short label.

Roles and responsibilities. Who are the designers/developers working on this? Zarko and Yun with Ben assisting.

Is the component related to any other components? Button perhaps. When confused about usage, we can provide guidance about similarity and difference. Button/checkbox/badge.

Delivery date? Are all owners (dev, design, content) comfortable with the ask and the date that is being published? Yes

Any specific desktop considerations? I.e. does it need native window support? No.

yunjungyeh commented 1 year ago

5 July Discussions with @bhoppers2008 @ZarkoPernar

@ZarkoPernar feel free to update/add anything important I miss! Thanks

yunjungyeh commented 1 year ago

✅20 July - Merge changes in both light and dark libraries ✅20 July - Update QA playground / Update Characteristics Spec / Component set URL & Description & prototype interactions ✅19 July - New Characteristics “--actionable-primary-background-readOnly” to be created by Paul @pseys and attached to component sets ✅19/20 July - Ben @bhoppers2008 to review Component sets / Characteristics spec / Interaction spec / Figma Component Guide


✅19 July - Component Doc with Zarko @ZarkoPernar and hand over to content team ✅19 July - Create Salt Figma Component Guides ✅18/19 July - Start interaction spec ✅18 July - adding component sets to the library & QA Playground ✅18 July - Update Paul the new Characteristics --actionable-primary-background-readOnly is being used in Pill. ✅18 July - Based on the new change - Characteristics spec / Component Sets (All actionable, remove static, add Read-only variant) ✅18 July - Update Characteristics spec: Pill group ✅18 July - Update the characteristics spec based on the new changes (Both Pill and Close button use taggable characteristics) ✅17/18 July - Update Component Sets - Create Close button sets

✅14/17 July - Update Characteristics spec: Min/Max spec ✅17 July - Discussed characteristics change with Ben/Josh/Zarko ✅14/17 July - Update component sets using min width feature

✅12/13 July - Question to be discussed: Should clickable and closable be at the same time? What should the interaction be? ✅13 July - Characteristics spec need to be reviewed with @ZarkoPernar @bhoppers2008 @pseys

✅11/12 July - Create Component sets Light mode ✅10/11/12/13 July - Update Characteristics Spec (from UITK to Salt) & Check if there are gaps ✅11/12 July - Catch up with Paul/Ben/Zarko to discuss Characteristics and dependencies

✅10 July - Catch up with Zarko ✅7/10 July - Review other people's files and research ✅5/6 July - Research: reach out to the team to discuss Pill usage ✅5/6 July - Talk to other people to explore Pill Usage and how do they use Pill, understand if there are more interaction usage

✅5 July - Pill Design Catch up with Ben & Zarko
ask questions and tell them I’m going to do research and update characteristics from UITK to Salt ✅ 4 July - Kick off call ✅ 3/4 July - UITK Pill research & Questions for component kickoff

dplsek commented 1 year ago

07/07 - Zarko opened pr today, can someone please review?

joshwooding commented 1 year ago

Moved to Amber due to the Pill vs Badge conversation

parsakhan21 commented 1 year ago

July 19 - all design assets awaiting review from Ben ; dev - completed component doc - tagged content team for review July 17 - characteristics changes in progress; dev - PR is mostly done - need review July 14 - designs - characteristics specs reviewed with zarko/ben - feedback to be addressed; pill/badge mtg next tuesday dev - changes being made per designs docs may be affected based on convo next week

ZarkoPernar commented 1 year ago

July 18 - Moving closable to V2

yunjungyeh commented 1 year ago

@jpmorganchase/salt-content Please review the Component doc for Pill @ZarkoPernar and I have completed in the folder Component Docs, thank you!

bhoppers2008 commented 1 year ago

Have reviewed the figma artefacts. Some small changes before merging.

yunjungyeh commented 1 year ago

Figma artefacts updated! have merged Pill component sets in both light and dark libraries.

joshwooding commented 1 year ago

21/07 - Merged into labs and ready to be released today

Will look at plan to move to core

parsakhan21 commented 1 year ago

July 31 - docs ready to be converted to MDX (James)

james-nash commented 1 year ago

PR for docs conversion to MDX is here: https://github.com/jpmorganchase/salt-ds/pull/2108