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: Restore submenu hover and join adjacent highlights
  • Loading branch information
@ciampo
ciampo committed Oct 23, 2026
commit 3ca82f626dda6e430c47bb14a8911c7c0b10fb12
2 changes: 1 addition & 1 deletion packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

### Enhancements

- `Menu`, `Select`, `Combobox`, `Autocomplete`, and searchable select controls: Use solid brand highlights for hovered and keyboard-highlighted popup items and their supporting content ([#84087](https://github.com/WordPress/gutenberg/pull/84087)).
- `Menu`, `Select`, `Combobox`, `Autocomplete`, and searchable select controls: Use solid brand highlights for hovered and keyboard-highlighted popup items and their supporting content, and join the touching corners of consecutive highlighted rows. Open submenu parents retain their subtle background at rest ([#84087](https://github.com/WordPress/gutenberg/pull/84087)).
Comment thread
ciampo marked this conversation as resolved.
Outdated
- `SelectControl`: Warn in development when an item has an empty string `value`, which shows the placeholder instead of the item's label when selected ([#85172](https://github.com/WordPress/gutenberg/pull/85172)).

### Documentation
Expand Down
31 changes: 29 additions & 2 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,7 +175,7 @@
grid-template-columns: subgrid;
}

&[data-popup-open]:not([data-disabled], [aria-disabled="true"]) {
&[data-popup-open]:not(:hover, [data-highlighted], [data-disabled], [aria-disabled="true"]) {
background-color: var(--wpds-color-background-interactive-neutral-weak-active);

@media ( forced-colors: active ) {
Expand All @@ -184,7 +184,7 @@
}

/* Link items expose aria-disabled without a data-disabled state. */
&[data-highlighted]:not([data-popup-open], [data-disabled], [aria-disabled="true"]) {
&:is(:hover, [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 @@ -200,6 +200,28 @@
}
}

/* Join consecutive filled rows, including resting submenu parents. */
&:is(:hover, [data-highlighted], [data-popup-open]):not([data-disabled], [aria-disabled="true"]) {
&:has(+ .item:is(:hover, [data-highlighted], [data-popup-open]):not([data-disabled], [aria-disabled="true"])) {
--_gcd-a-border-radius: var(--wpds-border-radius-sm) var(--wpds-border-radius-sm) 0 0;

border-end-start-radius: 0;
border-end-end-radius: 0;
}

& + .item:is(:hover, [data-highlighted], [data-popup-open]):not([data-disabled], [aria-disabled="true"]) {
--_gcd-a-border-radius: 0 0 var(--wpds-border-radius-sm) var(--wpds-border-radius-sm);

border-start-start-radius: 0;
border-start-end-radius: 0;

/* The link defense uses a shorthand, including for middle rows. */
&:has(+ .item:is(:hover, [data-highlighted], [data-popup-open]):not([data-disabled], [aria-disabled="true"])) {
--_gcd-a-border-radius: 0;
}
}
}

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

Expand Down Expand Up @@ -390,6 +412,11 @@
.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:hover:not([data-disabled], [aria-disabled="true"]) .item-description,
.item:hover:not([data-disabled], [aria-disabled="true"]) .item-suffix,
.item:hover:not([data-disabled], [aria-disabled="true"]) .item-shortcut,
.item:hover:not([data-disabled], [aria-disabled="true"]) .item-trailing,
.item:hover:not([data-disabled], [aria-disabled="true"]) .item-selection-indicator,
.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,
Expand Down
17 changes: 15 additions & 2 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 @@ -187,7 +187,7 @@
}
}

&[data-highlighted]:not([data-disabled]) {
&:is(:hover, [data-highlighted]):not([data-disabled]) {
Comment thread
mirka marked this conversation as resolved.
Outdated
background-color: var(--wpds-color-background-interactive-brand-strong-active);
color: var(--wpds-color-foreground-interactive-brand-strong-active);
outline: none; /* Disable user agent focus ring */
Expand All @@ -199,6 +199,19 @@
}
}

/* Grid cells are horizontal siblings, so do not join their block edges. */
&:is(:hover, [data-highlighted]):not([data-disabled], [role="gridcell"]) {
&:has(+ .item:is(:hover, [data-highlighted]):not([data-disabled], [role="gridcell"])) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}

& + .item:is(:hover, [data-highlighted]):not([data-disabled], [role="gridcell"]) {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
}

&[data-disabled] {
background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
color: var(--wpds-color-foreground-interactive-neutral-disabled);
Expand Down Expand Up @@ -243,7 +256,7 @@
color: var(--wpds-color-foreground-content-neutral-weak);
}

.item[data-highlighted]:not([data-disabled]) .item-description,
.item:is(:hover, [data-highlighted]):not([data-disabled]) .item-description,
.item[data-disabled] .item-description {
--_gcd-heading-color: currentColor;

Expand Down
Loading