Skip to main content

Select ghost trigger variant (WEB-1277)

Version: 0.9.0 · Type: ✨ Feature

WEB-1277

Problem​

Select only shipped one trigger form — the form-style (outline) trigger: bordered, w-full, left-aligned value. Inline / toolbar / low-emphasis selection scenarios (e.g. an in-line "by week / by month" switcher) need a borderless, content-width, right-aligned compact trigger, which was not expressible.

Changed Files​

  • packages/design/src/components/Select/styles.ts
  • packages/design/src/components/Select/Select.tsx
  • packages/design/src/components/ui/select.tsx
  • packages/design/src/components/Select/__tests__/Select.test.tsx
  • packages/design-site/src/icons/plaud-icon-registry.tsx (SortIcon neutral-state currentColor)
  • packages/design-site/docs/components/select.mdx (block-level flow example)
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/select.mdx

Changes​

  • Select / SelectTrigger gain a variant prop ('outline' | 'ghost'), defaulting to 'outline' — existing usage is unchanged.
  • variant="ghost" renders a borderless, content-width, right-aligned trigger with a trailing sort (up/down) arrow and a gray Grays/Gray-1 background on hover / open; text color is Labels/Tertiary, dimming to Labels/Disabled when disabled.
  • ui/select.tsx SelectTrigger gains an optional icon prop to override the default ChevronDownIcon (internal capability passthrough); default behavior is unchanged when icon is omitted.
  • SortIcon neutral state (sortDirection === null) now renders with currentColor instead of a hard-coded Labels/Tertiary, so the icon follows its parent text color — this lets the ghost disabled state dim the arrow correctly. The asc / desc active-highlight logic is unchanged.
  • Fixed a width bug: the ghost base class only overrode width (w-full → w-auto) but not display. The underlying ui/select.tsx primitive is a block-level flex container, so width: auto alone still stretched to fill the parent width outside a flex/grid parent, making the hover/focus gray background span the full line. Added inline-flex alongside w-auto so the trigger truly shrink-to-fits its content in any layout context.

Impact​

  • New API only; variant defaults to 'outline', so all existing Select usage is visually and behaviorally unchanged.
  • The dropdown panel and menu items are fully reused from the existing SelectContent — ghost only changes the trigger.
  • The SortIcon neutral-state change was verified against every neutral-state consumer (Table / TimePicker / Calendar / routine selects); all resolve to Labels/Tertiary or the hex-identical Labels/Placeholder, so there is no visual regression.