carbon
carbon copied to clipboard
carbon-design-system
Dividers in Components: Dev Implementation AI Slug
Developer implementation
Important Links Design Solutions and Guidelines for Dividers in Components - Figma (WIP for AI Slug) Design Solutions and Guidelines for Dividers in Components - GitHub
### Tasks
- [ ] Introduce Divider across multiple states for [AI Combobox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--combobox)
- [ ] Introduce Divider across multiple states for [AI Dropdown](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--dropdown)
- [ ] Introduce Divider across multiple states for [AI Filterable Multi-select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--filterable-multiselect)
- [ ] Introduce Divider across multiple states for [AI Multi-select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--multiselect)
- [ ] Introduce Divider across multiple states for [AI Number Input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--number-input)
- [ ] Introduce Divider across multiple states for [AI Select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--select)
- [ ] Subsequently Updated Input Components in [Form](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug-form--overview)
- [ ] Subsequently Updated Input Components in [Modal](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--modal)
- [ ] **_Q: Can there be a Rule created for Dividers (if x, then y)_**
Visual Context to the Solutions
Visual Context to the Solutions (WIP)
@alina-jacob-ibm can you drop an AI design spec into the issue itself. Thx!
https://github.com/carbon-design-system/carbon-design-kit/issues/745#issuecomment-1910657153
https://github.com/carbon-design-system/carbon-design-kit/issues/745#issuecomment-1920568962
I believe we also need to add this to TextInput since it could be both invalid and have the Slug, possibly Textarea as well?
I believe we also need to add this to
TextInputsince it could be both invalid and have theSlug, possiblyTextareaas well?
hi @tw15egan, that's a good question!
As per the guidelines, we won't be introducing a divider between an interactive and a non-interactive item.
Pasting a screenshot with some Do and Don'ts (for vertical divider in input fields)
( Also, just a headsup, as per my last conversation in Carbon Design crit and with Michael Gower, error states should always be the leftmost. However this is yet to be confirmed by Anna and the C4AI team. I can update latest by Tuesday after the crit regarding the same or sooner if possible. )
AI SLUG UPDATE
- There won't be two types of AI Slugs (standard and hollow)
- The hollow slug is now the standard slug with all its associated features.
UPDATE
I did a closer inspection and realised that the spacing that works for the chevron and dismissible icon in the dropdown variants won't work for number input, because in this component the plus and minus items are buttons.
Even though, the icons of these buttons are of 16px, the click area for the button is 48px and that's the same spacing pattern we will have to provide for all subsequent elements coming to the left of the buttons.
Pasting an updated screenshot of the spacing just for the number input component, you can also check out the spacing relation for error and invalid states in the default component here.