Skip to main content

Select menu item indicator moves to the right with a leading icon (WEB-1174)

Version: 0.6.5 ยท Type: ๐Ÿ› Bug Fix

WEB-1174

Problemโ€‹

Per the Figma spec (Select Menu/Select Menu Item), when a menu item has a leading icon (Show Icon=True), the selection indicator must move to the right so the icon can take the left slot: [icon][text][indicator].

The checkbox variant already implemented this flip, but the internal checkmark (left) variant kept the checkmark on the left even when an icon was present โ€” inconsistent with Figma. The design-site also had no case demonstrating the rule.

Figma ruleโ€‹

StyleShow IconLayoutIndicator
CheckmarkFalse[Check][Content]left
CheckmarkTrue[icon][Content][Check]right
CheckboxFalse[Checkbox][Content]left
CheckboxTrue[icon][Content][Checkbox]right
Checkmark Rightany[Content][Check]right

Changed Filesโ€‹

  • packages/design/src/components/Select/SearchableOptionItem.tsx
  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/__tests__/MultiSelect.test.tsx
  • packages/design/src/components/Select/__tests__/SearchableOptionItem.test.tsx
  • packages/design-site/docs/components/select.mdx

Changesโ€‹

  1. Generalized the "icon โ†’ indicator on the right" logic in SearchableOptionItem to cover both the checkmark and checkbox variants (previously checkbox-only).
  2. Confirmed the right-side indicator supports two forms โ€” checkmark (checkmark-right) and checkbox (checkbox) โ€” both reachable via MultiSelect.menuItemVariant with leading icons.
  3. Added an "Indicator Position with Icons" case to the docs demonstrating both right-side forms (checkmark + checkbox with icons) plus the left-side checkbox for contrast.