Skip to main content

Select left-checkmark option item variant, MultiSelect prop rename (WEB-1310)

Version: 0.9.0 · Type: ✨ Feature (⚠️ includes a breaking rename)

WEB-1310

Problem​

Single Select's combinatorial SelectContent/SelectItem (also reused by the declarative non-searchable options branch) always rendered the selected-state checkmark on the right, with no way to move it to the left. The Ghost trigger menu item Figma variant defaults to a left-aligned checkmark, and searchable single Select / MultiSelect already support left placement via SearchableOptionItem's variant — this combinatorial/declarative-non-searchable path was the one gap left, so a Ghost-trigger Select couldn't be paired with a left-checkmark menu.

Separately, MultiSelect's existing equivalent prop was named menuItemVariant — but a dropdown row is a SelectOptionItem, not a "menu item", so the name itself was wrong. This change renames it to optionItemVariant so Select and MultiSelect share one naming convention.

Changed Files​

  • packages/design/src/components/Select/Select.tsx
  • packages/design/src/components/Select/MultiSelect.tsx
  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/__tests__/Select.test.tsx
  • packages/design/src/components/Select/__tests__/MultiSelect.test.tsx
  • packages/design/src/components/Select/SelectDesignSpec.md
  • packages/design/src/components/Select/SelectTriggerGhostDesignSpec.md
  • packages/design-site/docs/components/select.mdx
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/select.mdx

Changes​

  1. Breaking: MultiSelect.menuItemVariant is renamed to optionItemVariant (same meaning, same accepted values, same default 'checkmark'). Verified no consumer in this monorepo (apps/, web3/) references the old name.
  2. styles.ts: split the previously hard-coded right-side SELECT_ITEM_TOKEN_CLASS / SELECT_ITEM_INDICATOR_TOKEN_CLASS into getSelectItemTokenClass(variant) / getSelectItemIndicatorTokenClass(variant), dispatching on a new SelectOptionItemVariant ('checkmark' | 'checkmark-right'). checkmark-right (default) keeps the original right-(--Spacing_16) position plus pr-[calc(var(--Spacing_16)+28px)] right-side reservation; the new checkmark uses left-(--Spacing_16) plus pl-[calc(var(--Spacing_16)+28px)] left-side reservation.
  3. Select.tsx: optionItemVariant is not placed on SelectItem itself. It's added to SelectContent (default 'checkmark-right', zero regression) and propagated via an internal context (SelectOptionItemVariantContext) to every SelectItem rendered inside it — every row in one dropdown must share the same checkmark placement (no Figma variant mixes left/right within a single menu), so a per-item prop would let a caller silently produce an inconsistent menu by forgetting it on one row.
  4. SelectProps gains a matching optionItemVariant prop (default 'checkmark-right'), threaded through the declarative non-searchable branch to the SelectContent it renders.
  5. Tests: Select.test.tsx gains 3 unit tests (default checkmark-right assertions, SelectContent optionItemVariant="checkmark" applying consistently to every item inside it, and declarative optionItemVariant="checkmark" pass-through); MultiSelect.test.tsx existing tests updated to the renamed prop.
  6. Docs site gains a left-checkmark demo (bilingual); SelectDesignSpec.md / SelectTriggerGhostDesignSpec.md updated to record the breaking rename, the context-based design rationale, and check off the previously-open Ghost trigger menu item checklist item.

Impact​

  • Breaking: MultiSelect.menuItemVariant → optionItemVariant. No consumer in this repo; any already-published version's external consumers need to rename accordingly.
  • Select's new optionItemVariant is purely additive; 'checkmark-right' remains the default with unchanged output, so all existing Select usage is visually and behaviorally unchanged.
  • Only affects the combinatorial SelectContent/SelectItem and the declarative non-searchable branch — searchable single Select is unaffected (already covers left/right checkmark via SearchableOptionItem).