fix(web): replace native select dropdowns with a design-system listbox - #2231
Open
PBnicad wants to merge 1 commit into
Open
fix(web): replace native select dropdowns with a design-system listbox#2231PBnicad wants to merge 1 commit into
PBnicad wants to merge 1 commit into
Conversation
🦋 Changeset detectedLatest commit: 32b3cb0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Resolve #2229
Problem
The settings dialogs and the KAP debug panel use native HTML
<select>elements. The closed control is styled to match the design system, but the opened option list is rendered by the browser/OS and ignores it: in dark mode the popup stays a light native list, and it shares none of the surface/radius/shadow/hover tokens used by the app's other popups (Menu/MenuItem).What changed
ui/Select.vueas a fully custom dropdown: the trigger keeps the Input sizing/surface/focus ring, and the popup reuses the Menu surface + MenuItem row styling, so the open state follows the design system in both themes. Options are data-driven (flat list with an optionalgroupheader), and the selected option is marked with an accent check.aria-activedescendant). Escape stops propagation so it cannot close an enclosing dialog; the popup closes on outside click, scroll, and resize, and flips above the trigger when the viewport bottom doesn't fit.<select>: the Agent-settings default model (keeping the provider grouping from feat(web): group default model dropdown by provider in settings #861 as group headers), the Archived-sessions workspace filter, the provider type in the provider manager, and the two KAP debug-panel filters. The design-system specimen now renders the real component, and its dead.p-selectCSS is removed.<Select>call sites using the old slot-based<option>API — whichever PR lands second should migrate those call sites to the data-drivenoptionsprop.Checklist
typecheck,check:style,test,build, and manual light/dark browser checks (open state, option groups, keyboard navigation, Escape behavior).gen-changesetsskill (patch,web:entry).gen-docsnot needed — no user-facing docs describe these controls.