Multi-column Dropdown Menu design

[cathystoli]

What: Converting the SC multicolumn dropdown design into a SDS design to prepare for eng work

Why: To enable the SC to minimize build time as they adjust all of their dropdowns to have more complex functionality

---

Design Requirements

• Two variants:
  • Independent variant
    • Multiple columns visible, each containing a collection of related Menu Items to pick from, broken out into categories
    • Menu Item categories in each column categorized using column titles
    • Collection of Menu Items in one column do not relate to / interact with Menu Items in other columns
      • If a Menu Item is selected in one column it has no effect on Menu Items in the same or another column
  • Dependent variant
    • Multiple columns visible, each containing a collection of related Menu Items to pick from, broken out into categories
    • Menu Item categories in each column categorized using column titles
    • Collection of Menu Items in one column relate to / interact with Menu Items in other columns
      • When a Menu Item is selected in one column, any unrelated Menu Items from other columns are hidden
  • Each variant in Figma should support 1-3 columns

Explore: Indication of some sort showing when one column is dependent on another

---

• [x] Design component for handoff to eng
• [x] Build Figma component for SDS library