Skip to content

Support secondary text on Combobox options - #3866

Open
rossnelson wants to merge 1 commit into
mainfrom
rossnelson/fe-435-combobox-secondary-text
Open

Support secondary text on Combobox options#3866
rossnelson wants to merge 1 commit into
mainfrom
rossnelson/fe-435-combobox-secondary-text

Conversation

@rossnelson

Copy link
Copy Markdown
Collaborator

Adds an optional secondary line to combobox options, so an option can carry disambiguating context beneath its label.

What changed

  • ComboboxOption takes an optional description, passed straight through to MenuItem.
  • Combobox takes an optional optionDescriptionKey for custom (object) options, mirroring the existing optionValueKey / optionLabelKey pair. String options don't accept it — there's nothing to derive it from.
  • New Custom Options With Descriptions story.

MenuItem already renders a styled description line (.menu-item-description), so this threads the existing primitive through rather than introducing new rendering. Styling, spacing and truncation come along for free.

Decisions worth a look

  • Filtering still matches the label only, never the description. That keeps getDisplayValue as the single source of what a user is typing against. The new story asserts it, so if we ever want description-aware filtering it'll be a deliberate change with a failing test to update.
  • Naming follows MenuItem (description) rather than something like secondaryText, so the prop means the same thing at both layers.
  • Secondary text stays in the accessible name. It's meaningful content, and the axe run over the story reports no violations.

Verification

  • pnpm check — 0 errors
  • pnpm test -- --run — 3026 passed
  • test-storybook scoped to Combobox — 15/15 play tests pass, no accessibility violations
  • eslint, stylelint, prettier clean on the changed files

Context

Needed by FE-224 (namespace description in the cloud-ui namespace selector), but useful on its own. Tracked as FE-435.

Draft until reviewed — cloud-ui can't consume it until it's packed.

Note: fix/combobox-hint-text also touches combobox.svelte and combobox.stories.svelte. Different concern (hint text under the input), but worth landing in a deliberate order.

Adds an optional description to ComboboxOption, rendered as a secondary
line beneath the label, and an optionDescriptionKey prop on Combobox to
supply it per option for custom (object) options.

MenuItem already renders a styled description line, so this threads the
existing primitive through rather than adding new rendering. Filtering
continues to match the label only.

Closes FE-435
@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview Aug 26, 2026 5:51pm

Request Review

@rossnelson
rossnelson marked this pull request as ready for review August 27, 2026 17:56
@rossnelson
rossnelson requested a review from a team as a code owner August 27, 2026 17:56
@rossnelson
rossnelson enabled auto-merge (squash) August 27, 2026 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant