Skip to content

DataForm: fix label colors #75730

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
oandregal merged 4 commits into from
Feb 25, 2026
+4 −2
Merged

DataForm: fix label colors #75730

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
8a4bc52
Target label for array control
oandregal Feb 19, 2026
edefe50
Add changelog
oandregal Feb 19, 2026
9521d53
Use gray-900 as color
oandregal Feb 23, 2026
c731c30
Revert color changes for panel
oandregal Feb 25, 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
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 @@ -4,6 +4,7 @@

### Bug Fixes

- DataForm: Fix label color of array control. [#75730](https://github.com/WordPress/gutenberg/pull/75730)
- DataForm: Fix focus loss when collapsing in Card view. [#75689](https://github.com/WordPress/gutenberg/pull/75689)
- DataViews: Fix spacing in first column. [#75693](https://github.com/WordPress/gutenberg/pull/75693)

Expand Down
5 changes: 3 additions & 2 deletions packages/dataviews/src/components/dataform-layouts/regular/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
align-items: flex-start !important;

.components-base-control__label,
.components-input-control__label {
color: $gray-700;
.components-input-control__label,
.components-form-token-field__label {
color: $gray-900;
}
}
Comment on lines 10 to 15
Copy link
Member

@mirka mirka Feb 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Out of curiosity, in what situations do these standard @wordpress/components labels not have the standard gray-900 color, that you would have to define them explicitly here? If there are explicit color styles missing in the basic components themselves, we can address it at the source, not just in DataViews.

Copy link
Member Author

@oandregal oandregal Feb 24, 2026

Choose a reason for hiding this comment

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

There were a few too many. Just did a quick test removing these styles and:

good:

  • input
  • select

bad:

  • textarea
  • combobox
  • radio
  • togglegroup
  • formtoken
  • date
  • datetime

n/a (don't have label):

  • checkbox
  • toggle

Copy link
Member

@mirka mirka Feb 24, 2026

Choose a reason for hiding this comment

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

I guess my question is, even if each label didn't have explicit color styles out of the box, wouldn't it be easier to set gray-900 on the broader container and not on each specific label element? The labels just inherit color from the surrounding context, and the reason they have been generally fine without a explicit color is because gray-900 is the default text color throughout the app. We assume that there is an intentional, default text color set on the overall app. So at first glance, it seems that it would be much simpler to set the color on .dataforms-layouts-regular__field itself, for example (or probably an even wider scope).

Copy link
Member Author

@oandregal oandregal Feb 25, 2026

Choose a reason for hiding this comment

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

That's a good thought, thanks for sharing. I tried the CSS cascade approach (using the red color, for making it clear) and this is what happens:

Screen.Recording.2026-02-25.at.09.59.10.mov

The reason is that the label element for input and select controls have a emotion style attached (color: var(--wp-components-color-foreground, #1e1e1e);) and so the CSS cascade doesn't work for them.

There's a few ways forward here: either we use the same approach as input/select or we use CSS cascade. I suppose the new DS theme styles can also work here. I'm not opinionated about any particular approach and trust your expertise. Though it seems a bigger effort for a place other than this PR that addresses a bugfix for 7.0 beta.

Copy link
Member

@mirka mirka Feb 25, 2026

Choose a reason for hiding this comment

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

The reason is that the label element for input and select controls have a emotion style attached (color: var(--wp-components-color-foreground, #1e1e1e);) and so the CSS cascade doesn't work for them.

And I thought that would be fine in this context, because I thought you wanted all the labels to be gray-900 (which is equivalent to var(--wp-components-color-foreground, #1e1e1e)). So the cascade won't apply to input and select, but that doesn't matter because they are already gray-900.

Copy link
Member Author

@oandregal oandregal Feb 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

That's correct, but only coincidentally. They only fallback to the proper color if --wp-components-color-foreground is unavailable. What if we select/input controls change color? etc. The components are not consistent in a way that generates trust for DataForm as a consumer to rely on them. I'd rather be cautious and prevent regressions before they happen.

Copy link
Member

@mirka mirka Feb 25, 2026

Choose a reason for hiding this comment

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

If we changed the label colors for select/input but not for all the other controls, that is a bug, so you can report it 😄

Anyway my comments are non-blocking, just mainly wanted to figure out if there's anything obviously missing from the @wordpress/components styles.

Copy link
Member Author

@oandregal oandregal Feb 25, 2026

Choose a reason for hiding this comment

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

Anyway my comments are non-blocking, just mainly wanted to figure out if there's anything obviously missing from the @wordpress/components styles.

I'm mostly a bit worried about some having style hooks (--wp-components-color-foreground) and some others not, and how that may impact consumers of DataForm. It'd be ideal that there's consistency among controls, so if that --wp-components-color-foreground changes, it impacts all controls rather than just some. I suppose this would be easier with the new DS theme styles :)

Copy link
Member

@mirka mirka Feb 25, 2026

Choose a reason for hiding this comment

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

And to be clear, --wp-components-color-* are never actually defined anywhere in any official way (aside from like one progress bar in the Gutenberg app), and are completely experimental tokens that will be superseded by the official DS theme tokens pretty soon. So you can basically regard those as equivalent to their fallback values.


Expand Down
Loading