Skip to main content

MultiSelect expose menuItemVariant='checkmark' and default to it (WEB-1201)

Version: 0.7.0 · Type: ✨ Feature

WEB-1201

Problem​

SearchableOptionItem already implements three menu-item styles — 'checkmark' | 'checkmark-right' | 'checkbox' — where 'checkmark' renders the check on the left (and moves to the right when the item has a leading icon). But MultiSelect.menuItemVariant narrowed the union via Extract to 'checkmark-right' | 'checkbox', which excluded 'checkmark' from the public API. As a result, multi-select could not show a left-aligned checkmark on items. Per the design conclusion, checkmark / checkbox are left-aligned by default, yet MultiSelect defaulted to the right-aligned checkmark-right.

Changed Files​

  • packages/design/src/components/Select/MultiSelect.tsx
  • packages/design/src/components/Select/SelectDesignSpec.md
  • packages/design/src/components/Select/__tests__/MultiSelect.test.tsx

Changes​

  1. Widen the Extract union of MultiSelect.menuItemVariant from 'checkmark-right' | 'checkbox' to 'checkmark' | 'checkmark-right' | 'checkbox', and document the indicator position of each value in JSDoc. No rendering change — MultiSelect already forwards menuItemVariant straight to SearchableOptionItem's variant.
  2. Change the default menuItemVariant from 'checkmark-right' to 'checkmark' (left-aligned check), matching the design default. Behavior change: callers that relied on the implicit right-aligned checkmark must now pass menuItemVariant="checkmark-right" explicitly (no usage in this repo, so no regression).
  3. Sync the prop value list and default in SelectDesignSpec.md.
  4. Add unit tests: the default (checkmark) shows the check on the left without an icon, leaves the left slot empty when unselected, and moves the check to the right when a leading icon is present.
  5. Rework the "Menu Item Variants" section in select.mdx into a variant × icon matrix, and update the Props table type and default (see design-site docs).