Skip to content

Components: Align legacy form control focus rings with WPDS #80417

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

Open
ciampo wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Components: Align legacy form control focus rings with WPDS #80417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0f134e5
Components: Align legacy form control focus rings
ciampo Jul 17, 2026
35a9009
Components: Add focus ring changelog entry
ciampo Jul 17, 2026
f680f1d
DataViews: Prevent focus ring clipping
ciampo Jul 17, 2026
1b83fe9
DataViews: Add focus ring changelog entry
ciampo Jul 17, 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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- `InputControl`, `SelectControl`, `CustomSelectControl`: Align focus rings with the design system. ([#80417](https://github.com/WordPress/gutenberg/pull/80417)).

### Bug Fixes

- `SearchControl`: Render suffix only if there is one. ([#80356](https://github.com/WordPress/gutenberg/pull/80356), [#80406](https://github.com/WordPress/gutenberg/pull/80406)).
Expand Down
11 changes: 11 additions & 0 deletions packages/components/src/input-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@use "@wordpress/base-styles/mixins";

.components-input-control__container {
// Don't show the input's focus ring when an auxiliary control in a prefix
// or suffix has focus.
&:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) {
.components-input-control__backdrop {
@include mixins.outset-ring__focus();
}
}
}
11 changes: 0 additions & 11 deletions packages/components/src/input-control/styles/input-control-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,17 +79,6 @@ export const Root = styled( Flex )`
position: relative;
border-radius: ${ CONFIG.radiusSmall };
padding-top: 0;

// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
${ BackdropUI } {
border-color: ${ COLORS.ui.borderFocus };
box-shadow: ${ CONFIG.controlBoxShadowFocus };
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: -2px;
}
}
`;

const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
@use "./form-token-field/style.scss" as *;
@use "./guide/style.scss" as *;
@use "./higher-order/navigate-regions/style.scss" as *;
@use "./input-control/style.scss" as *;
@use "./menu-group/style.scss" as *;
@use "./menu-item/style.scss" as *;
@use "./menu-items-choice/style.scss" as *;
Expand Down
1 change: 1 addition & 0 deletions packages/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

### Bug Fix

- DataViews: Prevent the filter operator select focus ring from being clipped. [#80417](https://github.com/WordPress/gutenberg/pull/80417)
- DataViews: Fix the `list` layout ignoring the density setting, the refreshing state, and the loading state when `groupBy` is set. [#80255](https://github.com/WordPress/gutenberg/pull/80255)
- Fix Dataviews popover hover text color readability issue on WordPress 7.0. [#80105](https://github.com/WordPress/gutenberg/pull/80105)
- DataViews: Fix the unintended gap between `list` layout items when `groupBy` is set. [#80254](https://github.com/WordPress/gutenberg/pull/80254)
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataviews-filters/style.scss
View file
Open in desktop

@ciampo ciampo Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying out a different approach that doesn't cut off the focus ring, but still lets SelectControl shrink inside the flex row despite white-space: nowrap

Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@

.dataviews-filters__summary-operators-filter-select {
width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
}
}

Expand Down
Loading