Skip to content

UI: Use solid brand highlights for popup items #84087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 17 commits into from
Oct 23, 2026
+35 −39
Merged

UI: Use solid brand highlights for popup items #84087

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7a14684
Storybook: Compare composite focus indicators
ciampo Oct 5, 2026
214df6e
Design system: Use neutral highlights and focus rings for popup items
ciampo Oct 8, 2026
767b479
Design system: Fix changelog section ordering
ciampo Oct 8, 2026
780ecfd
UI: Share popup highlight tracking and handle same-item pointer hover
ciampo Oct 13, 2026
381686a
UI: Keep virtual popup focus rings with the input focus
ciampo Oct 13, 2026
254e4db
Combobox: Align popup search fields with items
ciampo Oct 15, 2026
cf8f20c
Combobox: Inset option highlights without changing the search field
ciampo Oct 16, 2026
1860f06
UI: Share input and list highlight handlers
ciampo Oct 16, 2026
0754fd6
Autocomplete: Restore focus ring at grid boundaries
ciampo Oct 16, 2026
9bda2e2
UI: Extract popup option alignment for separate review
ciampo Oct 16, 2026
3d4170d
UI: Separate keyboard option rings from pointer hover
ciampo Oct 19, 2026
4f042fe
UI: Simplify active option rings to input focus
ciampo Oct 19, 2026
c377271
UI: Use solid brand highlights for popup items
ciampo Oct 22, 2026
567e232
UI: Preserve popup colors for headings and disabled links
ciampo Oct 22, 2026
6ab9459
Menu: Keep open submenu parents neutral when highlighted
ciampo Oct 22, 2026
3ca82f6
UI: Restore submenu hover and join adjacent highlights
ciampo Oct 23, 2026
3465adc
UI: Keep popup highlights on the active item
ciampo Oct 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
UI: Preserve popup colors for headings and disabled links
  • Loading branch information
@ciampo
ciampo committed Oct 23, 2026
commit 567e232d18a88543cb6d4c6d8c311e6d33709254
35 changes: 18 additions & 17 deletions packages/ui/src/menu/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,9 @@
grid-template-columns: subgrid;
}

&[data-popup-open]:not([data-disabled]),
&[data-highlighted]:not([data-disabled]) {
/* Link items expose aria-disabled without a data-disabled state. */
&[data-popup-open]:not([data-disabled], [aria-disabled="true"]),
&[data-highlighted]:not([data-disabled], [aria-disabled="true"]) {
--_gcd-a-color: var(--wpds-color-foreground-interactive-brand-strong-active);

background-color: var(--wpds-color-background-interactive-brand-strong-active);
Expand All @@ -192,7 +193,7 @@
}
}

&[data-disabled] {
&:is([data-disabled], [aria-disabled="true"]) {
--_gcd-a-color: var(--wpds-color-foreground-interactive-neutral-disabled);

background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
Expand Down Expand Up @@ -378,20 +379,20 @@
content: "\2196";
}

.item[data-popup-open]:not([data-disabled]) .item-description,
.item[data-popup-open]:not([data-disabled]) .item-suffix,
.item[data-popup-open]:not([data-disabled]) .item-shortcut,
.item[data-popup-open]:not([data-disabled]) .item-trailing,
.item[data-highlighted]:not([data-disabled]) .item-description,
.item[data-highlighted]:not([data-disabled]) .item-suffix,
.item[data-highlighted]:not([data-disabled]) .item-shortcut,
.item[data-highlighted]:not([data-disabled]) .item-trailing,
.item[data-highlighted]:not([data-disabled]) .item-selection-indicator,
.item[data-disabled] .item-description,
.item[data-disabled] .item-suffix,
.item[data-disabled] .item-shortcut,
.item[data-disabled] .item-trailing,
.item[data-disabled] .item-selection-indicator {
.item[data-popup-open]:not([data-disabled], [aria-disabled="true"]) .item-description,
.item[data-popup-open]:not([data-disabled], [aria-disabled="true"]) .item-suffix,
.item[data-popup-open]:not([data-disabled], [aria-disabled="true"]) .item-shortcut,
.item[data-popup-open]:not([data-disabled], [aria-disabled="true"]) .item-trailing,
.item[data-highlighted]:not([data-disabled], [aria-disabled="true"]) .item-description,
.item[data-highlighted]:not([data-disabled], [aria-disabled="true"]) .item-suffix,
.item[data-highlighted]:not([data-disabled], [aria-disabled="true"]) .item-shortcut,
.item[data-highlighted]:not([data-disabled], [aria-disabled="true"]) .item-trailing,
.item[data-highlighted]:not([data-disabled], [aria-disabled="true"]) .item-selection-indicator,
.item:is([data-disabled], [aria-disabled="true"]) .item-description,
.item:is([data-disabled], [aria-disabled="true"]) .item-suffix,
.item:is([data-disabled], [aria-disabled="true"]) .item-shortcut,
.item:is([data-disabled], [aria-disabled="true"]) .item-trailing,
.item:is([data-disabled], [aria-disabled="true"]) .item-selection-indicator {
--_gcd-heading-color: currentColor;

color: inherit;
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/utils/css/item-popup.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,8 @@
}

.item-label {
--_gcd-heading-color: currentColor;

min-width: 0;
}

Expand Down