Dividers in Components 🏖️

[thyhmdo]

Dividers in components

Overview

There is currently an inconsistency of the presence or lack of dividers that we provide in our components, specifically in instances where there are multiple icons inside of a component that live next to each other.

We need to decide when and how we use dividers like this across our components to create better consistency. We also need to consider how the AI slug is being used in these situations when AI is present. (Ref: Carbon for AI Figma file)

Here are a couple of examples of where we do and don't use them:

---

Example: Number input

• Enabled state: The number input component dividers help separate the - / + controls visually.
• Hover state: Unlike most of our other form components, the number input - / + controls additionally get a color background change on hover because they are treated as icon buttons instead of just icons.
• Error state: There is an addition of the error icon in the field, and another divider appears next to the - control.

---

Example: Combobox

• Selected state: The combobox component, when an option is selected, the close and chevron icons only get a mouse cursor change and have no dividers between them
• Hover state: The close and chevron icons only get a cursor hover change and no background color change because they are icons, not icon buttons. They also don't have a divider between them.
• Error state: There is an addition of the error icon in the field, and there is no divider.

---

Default component tasks

Beta Give feedback

1. Dividers in components: Audit #14101
   role: design ✏️ type: docs 📖 +2
   
2. Dividers in components: Work on Solutions and final specs #15286
   role: design ✏️ type: enhancement 💡 +2
   
3. Dividers in components: Update Figma Kit carbon-design-kit#745
   kit: figma role: design ✏️ type: enhancement 💡 version: 11 +4
   
4. Dividers in components: Website docs - Dropdown Family carbon-website#3865
   role: design ✏️ type: docs 📖 +2
   
5. Dividers in components: Website docs - Fluid Search Component #15753
   role: design ✏️ type: docs 📖 +2
   
6. Dividers in components: Dev Implementation #15492
   component: combobox component: filterable-multiselect component: search role: dev 🤖 type: enhancement 💡 +5
   

AI component tasks

Beta Give feedback

1. Dividers in AI components: Update Figma Kit #16091
   area: AI role: design ✏️ type: enhancement 💡 +3
   
2. Dividers in AI components: Dev Implementation AI Slug #15552
   area: AI component: combobox component: dropdown component: filterable-multiselect component: form component: modal component: multiselect component: number-input component: select role: dev 🤖 version: 11 +11
   

   
3. Dividers in components: Website docs - Dropdown Family - Dos and don'ts update

[tay1orjones]

Things to answer in refinement:

• Do we want this?
  • How did the discrepancy between figma and storybook happen? Is this part of the original spec, or an updated one?
• How many components would this impact?

[sstrubberg]

Audit the inputs. Where are the dividers? What is the original spec?