Skip to content

UI Components: Add theme support for FormTokenField and ComboboxControl #69638

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 7 commits into from
Apr 3, 2025
Merged

UI Components: Add theme support for FormTokenField and ComboboxControl #69638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
006c53e
feat: add dark theme support for `form-token-field`
yogeshbhutkar Mar 20, 2025
f9eee13
feat: add dark theme support for `combobox-control`
yogeshbhutkar Mar 20, 2025
77f334c
chore: add CHANGELOG
yogeshbhutkar Mar 20, 2025
30d5a46
chore: use consistent spacing
yogeshbhutkar Mar 20, 2025
ff83a9b
refactor: update `input-style__focus` to support custom accents
yogeshbhutkar Mar 25, 2025
4c9319b
feat: enhance `input-control` mixin to accept custom accent colors
yogeshbhutkar Mar 31, 2025
d63c346
chore: move `CHANGELOG` to unreleased section
yogeshbhutkar Mar 31, 2025
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
10 changes: 5 additions & 5 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,10 @@
}


@mixin input-style__focus() {
border-color: var(--wp-admin-theme-color);
@mixin input-style__focus($accent-color: var(--wp-admin-theme-color)) {
Copy link
Contributor

@ciampo ciampo Mar 28, 2025

Choose a reason for hiding this comment

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

I wonder if we should expose the same $accent-color argument in the input-control mixin too (in the same file) (also cc @mirka for a quick check about this idea making sense)

Copy link
Member

@mirka mirka Mar 28, 2025

Choose a reason for hiding this comment

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

I'm a bit conflicted, now that you bring it up. I'm looking at how these generic mixins are used in the repo, and it's mostly just the components package. Almost as if these shared styles should be internal to the components package now and deprecated from base-styles — I assume they were once used more in other packages, and we've been able to remove them as we've consolidated our component usage better.

However, I like what @yogeshbhutkar is doing here, and I think it's fine to do it in the input-control mixin too, like you suggest. I'm just not sure if that scales to "let's do it for all the base-style mixins with accent colors".

I don't have a strong preference either way, given that I want to eventually overhaul these bits.

Copy link
Contributor

@ciampo ciampo Mar 28, 2025

Choose a reason for hiding this comment

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

Agreed. In a perfect world, @wordpress/component would offer a set of input components that can satisfy all usecases in Gutenberg, allowing us to move the mixing to the component package.

At the same, we need to consider whether the base-style package should exist as a lower-level (even lower that the components package) for literally any UI build in Gutenberg, even when the components from the @wordpress/components package can't be used

Copy link
Contributor Author

@yogeshbhutkar yogeshbhutkar Mar 31, 2025

Choose a reason for hiding this comment

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

Thanks for the great discussions!

I think it's fine to do it in the input-control mixin too.

Following this, I've updated the PR to expose the $accent-color argument in the input-control mixin and made some adjustments to the codebase.

cc: @ciampo @mirka

border-color: $accent-color;
// Expand the default border focus style by .5px to be a total of 1.5px.
box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
box-shadow: 0 0 0 0.5px $accent-color;
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
Expand Down Expand Up @@ -259,7 +259,7 @@
}
}

@mixin input-control {
@mixin input-control($accent-color: var(--wp-admin-theme-color)) {
font-family: $default-font;
padding: 6px 8px;
@include input-style__neutral();
Expand All @@ -275,7 +275,7 @@
}

&:focus {
@include input-style__focus();
@include input-style__focus($accent-color);
}

// Use opacity to work in various editor styles.
Expand Down
5 changes: 5 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@

- `Button`: Fix tertiary variant displaying incorrect text color in pressed and hover states ([#68542](https://github.com/WordPress/gutenberg/pull/68542)).

### Enhancement

- `FormTokenField`: Add theming support ([#69638](https://github.com/WordPress/gutenberg/pull/69638)).
- `ComboboxControl`: Add theming support ([#69638](https://github.com/WordPress/gutenberg/pull/69638)).

## 29.7.0 (2025-03-27)

### Bug Fixes
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/combobox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ input.components-combobox-control__input[type="text"] {
margin: 0;
line-height: inherit;
min-height: auto;
background: $components-color-background;
color: $components-color-foreground;

// Resolves Zooming on iOS devices
// https://github.com/WordPress/gutenberg/issues/27405
Expand All @@ -26,15 +28,15 @@ input.components-combobox-control__input[type="text"] {
}

.components-combobox-control__suggestions-container {
@include input-control;
@include input-control($components-color-accent);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
padding: 0;

&:focus-within {
@include input-style__focus();
@include input-style__focus($components-color-accent);
}

.components-spinner {
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.components-form-token-field__input-container {
@include input-control();
@include input-control($components-color-accent);
width: 100%;
padding: 0;
cursor: text;
Expand All @@ -10,7 +10,7 @@
}

&.is-active {
@include input-style__focus();
@include input-style__focus($components-color-accent);
}

// Token input
Expand All @@ -27,7 +27,7 @@
min-width: 50px;
background: inherit;
border: 0;
color: $gray-900;
color: $components-color-foreground;
box-shadow: none;

// Resolves Zooming on iOS devices
Expand Down Expand Up @@ -168,7 +168,7 @@
}

.components-form-token-field__suggestion {
color: $gray-900;
color: $components-color-foreground;
display: block;
font-size: $default-font-size;
padding: $grid-unit-10 $grid-unit-15;
Expand All @@ -178,7 +178,7 @@

&.is-selected {
background: $components-color-accent;
color: $white;
color: $components-color-foreground-inverted;
}

&[aria-disabled="true"] {
Expand Down
Loading