Dividers in AI components: Dev Implementation AI Slug about carbon HOT 9 CLOSED

I believe we also need to add this to TextInput since it could be both invalid and have the Slug, possibly Textarea as 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. )

from carbon.

@alina-jacob-ibm can you drop an AI design spec into the issue itself. Thx!

from carbon.

carbon-design-system/carbon-design-kit#745 (comment)

from carbon.

I believe we also need to add this to TextInput since it could be both invalid and have the Slug, possibly Textarea as well?

from carbon.

carbon-design-system/carbon-design-kit#745 (comment)

from carbon.

@alina-jacob ah right! Thanks for pointing that out 😄

from carbon.

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.

• General Specs (Carbon Components)
  

• AI Combobox

• AI Dropdown

• AI Filterable Multi-select

• AI Multi-select

• AI Number Input

• AI Select

from carbon.

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.

Figma ref link

from carbon.

All components should have the divider implemented

from carbon.