Components: Normalize font-family #38969
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +112 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
ciampo
approved these changes
Feb 23, 2022
| @@ -237,6 +237,10 @@ | |||
| } | |||
| } | |||
|
|
|||
| .components-datetime__time-field-integer-field { | |||
There was a problem hiding this comment.
Tiny nit: looks like this class is also applied to the Months dropdown in the date time picker, so maybe we should rename it to a name that doesn't refer to "integer" ?
There was a problem hiding this comment.
Good catch, I didn't even notice! I considered renaming it to "form", but looking at the code again, the "integer" in the internal component <UpdateOnBlurAsIntegerField> seems to be about handling integer validation concerns. So the fact that the Months dropdown is using it looks like an abstraction failure, rather than just inappropriate naming 😬 I think we should keep this as is for now, until it causes issues.
mirka
force-pushed
the
fix/font-family-inherit
branch
from
b5b74f9
to
d69e495
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #37555
Description
This fixes a
font-familyinconsistency that causes some environments to render certain control elements in an unintended font.Directly affected components
Anything relying on these components will be fixed as well.
Background
Chrome has user agent styles that make
input,select, andbuttondefault to Arial (not sure if this is the same font for everyone). This basically makes these control elements render in a different font from the surrounding UI.This problem doesn't manifest in contexts where the core WP
forms.cssis loaded (i.e. wp-admin), since that includes these normalizing rules:The presence of
forms.cssis obviously not guaranteed, as has surfaced in Storybook.I briefly considered adding some kind of global reset styles for the wp-components package, but I think we should be adding them explicitly in each relevant component because ultimately we're aiming for complete tree-shakeable encapsulation. Thoughts?
Testing Instructions
npm run storybook:devScreenshots
CleanShot.2022-02-22.at.05.13.24.mp4
Types of changes
Bug fix
Checklist:
*.native.jsfiles for terms that need renaming or removal).