fix(web): add design-system search clear

[SomSamantray]

Fixes #2697

Why

While using the design-system picker, entering a search query and using the existing Clear action could also clear the selected design system. This made it difficult to reset search results without losing the current design-system choice.

What users will see

The picker now shows a query-only Clear search icon when text is entered. It resets the search query, restores the default results, preserves the selected design system, and returns focus to the search field. The existing row-level Clear action remains available for clearing the selected design system.

Surface area

• UI — design-system picker search interaction in apps/web
• Keyboard shortcut
• CLI / env var
• API / contract
• Extension point
• i18n keys
• New top-level dependency
• Default behavior change
• None

Screenshots

The screenshots use the same project, selected design system, search query, viewport, and Chromium capture flow. The before image is from origin/main (85d2e4893); the after image is from this PR (2ac0df63c).

Before PR	After PR

Difference: with Aurora UI selected and aur entered, the PR adds the inline Clear search icon while leaving the selected design system unchanged.

Bug fix verification

• Test path: apps/web/tests/components/DesignSystemPicker.test.tsx covers entering a query, showing Clear search, clearing only the query, preserving the selected design system, hiding the action when the query is empty, and not calling onChange for query-only clearing.
• Browser path: select Aurora UI → enter aur → click Clear search → query resets and default results return → Aurora UI remains selected → focus returns to the search input.

Preserved selection path: query entered → clear icon clicked → results reset while the selected design system stays unchanged.

Validation

• corepack pnpm exec vitest run -c vitest.config.ts --maxWorkers=1 tests/components/DesignSystemPicker.test.tsx — passed
• corepack pnpm --filter @open-design/web typecheck — passed
• corepack pnpm guard — passed in PR review checks
• Chromium + Chrome DevTools MCP browser verification — passed for the interaction path above

Contributor: Som Samantray

[lefarcen]

Thanks @SomSamantray — the query-only clear behavior here looks like a nicely scoped follow-up to #2697.

Since this updates the picker UI, we’ve marked the PR for the normal design/QA path before merge. Could you also add a quick screenshot or before/after to the PR body? That’ll make the visual pass faster for everyone.

[nettee]

@SomSamantray

I reviewed the query-only clear affordance in DesignSystemPicker, including the focused picker, flow, and brand-preview coverage. The clear button resets only the query, preserves the selected system, restores the default result list, and returns focus to the search field. Local validation passed: picker tests (8/8), related flow/brand-preview tests (44 passed, 6 skipped), web typecheck, and pnpm guard.

Nice, focused fix—thanks for preserving the selection semantics while adding the missing search affordance.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

[github-actions]

Visual regression review

Head: 813cd5e · Base: 85d2e48

4 changed · 45 unchanged · 0 new without baseline · 0 failed

Changed cases

Case	Main	PR	Diff
visual-home 538 px (0.04%)
visual-home-plugin-use-staged 4,470 px (0.34%)
visual-home-staged-attachment 4,001 px (0.31%)
visual-topbar-local-cli-model-list 2,434 px (0.19%)

Unchanged cases

Case	Main	PR	Diff
visual-avatar-local-agent-list 142 px (0.01%)
visual-avatar-local-agent-list-panel 34 px (0.04%)
visual-avatar-menu 104 px (0.01%)
visual-avatar-menu-panel 0 px (0.00%)
visual-avatar-open-design-model-picker 144 px (0.01%)
visual-critical-settings 0 px (0.00%)
visual-critical-workspace 345 px (0.03%)
visual-critical-workspace-preview 191 px (0.01%)
visual-design-system-detail 0 px (0.00%)
visual-design-systems 1 px (0.00%)
visual-home-catalog 0 px (0.00%)
visual-home-context-picker 124 px (0.01%)
visual-home-context-picker-popover 15 px (0.00%)
visual-home-plugin-filter 0 px (0.00%)
visual-home-plugin-use-with-query 0 px (0.00%)
visual-integrations 0 px (0.00%)
visual-integrations-mcp 0 px (0.00%)
visual-integrations-use-everywhere 0 px (0.00%)
visual-new-project-modal 0 px (0.00%)
visual-onboarding-cloud 0 px (0.00%)

Visual diff is advisory only and does not block merging.

[lefarcen]

Hey @SomSamantray — the PR body is already clear on the intent, and @nettee’s approval helps confirm the behavior. Before this moves further, could you add two small PR-body pieces: (1) a screenshot or before/after for the new clear affordance, and (2) a short bug-fix verification note that explicitly calls out the preserved selection path (for example: query entered → clear icon clicked → results reset while the selected design system stays unchanged).