docs: Vertical dividers doc update (Dropdown family) (#3916)

* docs: Vertical dividers doc update (Dropdown family)

* Update usage.mdx

* resolving comments

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Kritvi <158570656+Kritvi-bhatia17@users.noreply.github.com>

* 3865-divider

* 3865-divider

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/dropdown/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update style.mdx

Updated spacing information for vertical dividers in input fields.

* 3865-divider

* 3865-divider

---------

Co-authored-by: Alina Jacob <alina.jacob@ibm.com>
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Co-authored-by: Kritvi <158570656+Kritvi-bhatia17@users.noreply.github.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

src/pages/components/dropdown/style.mdx

@@ -17,6 +17,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Field              | background-color | `$field` \*                  |
 |                    | border-bottom    | `$border-strong` \*          |
 | Chevron icon       | svg              | `$icon-primary`              |
+| Vertical divider   | border           | `$border-subtle` \*          |
 | Menu option        | text-color       | `$text-secondary`            |
 |                    | background-color | `$layer` \*                  |
 |                    | border-top       | `$border-subtle` \*          |
@@ -70,7 +71,10 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 | Warning       | Warning message      | text-color       | `$text-primary`       |
 |               | Warning icon         | svg              | `$support-warning`    |
 | Active        | Menu option          | background-color | `$layer-active` \*    |
-| Selected      | Menu option          | background-color | `$layer-selected` \*  |
+| Selected      | Chevron icon         | svg              | `$icon-primary`       |
+|               | Vertical divider     | border           | `$border-subtle` \*   |
+|               | Close icon           | svg              | `$icon-primary`       |
+|               | Menu option          | background-color | `$layer-selected` \*  |
 |               | Menu option          | checkmark        | `$icon-primary`       |
 | Multiselected | Tag                  | background-color | `$background-inverse` |
 |               | Tag                  | text-color       | `$text-inverse`       |
@@ -222,6 +226,9 @@ be the same width and appropriately fit the design, layout, and content.
 
 ### Fluid dropdown
 
+Fluid components for all dropdown variants would adhere to the same specs as the
+dropdown fluid component.
+
 | Element      | Property                    | px / rem   | Spacing token |
 | ------------ | --------------------------- | ---------- | ------------- |
 | Label        | margin-bottom               | 4 / 0.25   | `$spacing-02` |
@@ -244,13 +251,14 @@ be the same width and appropriately fit the design, layout, and content.
 
 ### Combo box
 
-| Element      | Property      | px / rem | Spacing token |
-| ------------ | ------------- | -------- | ------------- |
-| Label        | margin-bottom | 8 / 0.5  | `$spacing-03` |
-| Field        | padding-left  | 16 / 1   | `$spacing-05` |
-|              | padding-right | 72 / 4.5 | –             |
-| Chevron icon | padding-right | 16 / 1   | `$spacing-05` |
-| Clear icon   | padding-right | 8 / 0.5  | `$spacing-03` |
+| Element          | Property                    | px / rem | Spacing token |
+| ---------------- | --------------------------- | -------- | ------------- |
+| Label            | margin-bottom               | 8 / 0.5  | `$spacing-03` |
+| Field            | padding-left                | 16 / 1   | `$spacing-05` |
+|                  | padding-right               | 72 / 4.5 | –             |
+| Chevron icon     | padding-right               | 16 / 1   | `$spacing-05` |
+| Vertical divider | padding-right, padding-left | 8 / 0.5  | `$spacing-03` |
+| Clear icon       | padding-right               | 8 / 0.5  | `$spacing-03` |
 
 <div className="image--fixed">
 

src/pages/components/dropdown/usage.mdx

@@ -394,6 +394,42 @@ visit the
 [interactive states](https://carbondesignsystem.com/components/dropdown/style#interactive-states)
 guidance on the style tab.
 
+### Vertical dividers in input fields
+
+Vertical dividers act as a visual separator between interactive elements in an
+input field. These vertical dividers are only present between two interactive
+elements, they should not be introduced between non-interactive elements like
+error states, other non-interactive icons, or buttons.
+
+A divider will also be present to the left of the leftmost interactive item set,
+even if it's next to a non-interactive item.
+
+<DoDontRow>
+  <DoDont caption="Do introduce a vertical divider between two interactive elements in an input field.">
+
+![Do introduce a vertical divider between two interactive elements in an input field.](images/usage-combobox-vertical-divider-do-1.png)
+
+  </DoDont>
+  <DoDont type="dont" caption="Do not introduce a vertical divider between interactive and non-interactive elements in an input field.">
+
+![Do not introduce a vertical divider between interactive and non-interactive elements in an input field.](images/usage-combobox-vertical-divider-dont.png)
+
+  </DoDont>
+</DoDontRow>
+
+<DoDontRow>
+  <DoDont caption="Do introduce a vertical divider to the left of the leftmost interactive set in an input field.">
+
+![Do introduce a vertical divider to the left of the leftmost interactive set in an input field.](images/usage-combobox-vertical-divider-do-3.png)
+
+  </DoDont>
+  <DoDont type="dont" caption="Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.">
+
+![Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.](images/usage-combobox-vertical-divider-dont-4.png)
+
+  </DoDont>
+</DoDontRow>
+
 ### Interactions
 
 #### Mouse