Fix <Text> component text color value to correct color value for Link UI preview description text
#35851
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
getdave
added
the
[Feature] Link Editing
7 tasks
|
Size Change: +309 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
Very fast work, thank you! And it solves the problem: This PR specifies the right color. But it also overrides an existing black color, which I'd challenge to not be useful in the first place:
As it turns out, we do need to provide a baseline color for the component, as even if we were to remove that black color, the text would inherit all the way back to wp-admin styles. But I was thinking something along the lines of adding the color to My line of thinking is that the text component should be agnostic about what color it offers, and inherit that of its surroundings. That may be incorrect? In any case, the black color appears to come from https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/text/styles.js#L12. A different fix might be to assign the gray-900 variable there? Thanks again! |
Yeh I guess that could work? I'm going to ping someone working on components to try and get some insight into the decisions there. Are you saying |
|
Marco is AFK these days, but perhaps @mirka can provide input?
Yes, for the current visual setup, we shouldn't actually use true black for anything but drop shadows and edgecases. |
getdave
added
the
[Feature] UI Components
|
👍🏻 In the original context in G2 the Text component was assigned |
getdave
force-pushed
the
fix/link-ui-description-text-color
branch
from
e2945c7
to
a2fcdbe
Compare
getdave
changed the title
getdave
changed the title
<Text> component text color value to correct color value for Link UI preview description text
|
@jasmussen @griffbrad I've updated the Is this good to 🚢 ? |
jasmussen
approved these changes
Oct 25, 2021
There was a problem hiding this comment.
"darkGray.primary" suggests to me we need a refreshed naming scheme, ideally one that can either inspire/upgrade the existing SCSS one, or just plain adopt it:
$black: #000; // Use only when you truly need pure black. For UI, use $gray-900.
$gray-900: #1e1e1e;
$gray-800: #2f2f2f;
$gray-700: #757575; // Meets 4.6:1 text contrast against white.
$gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
$gray-400: #ccc;
$gray-300: #ddd; // Used for most borders.
$gray-200: #e0e0e0; // Used sparingly for light borders.
$gray-100: #f0f0f0; // Used for light gray backgrounds.
$white: #fff;
But that's a separate issue.
Another solution is color: inherit; — I'm actualy not sure why we need to bake colors into the Text component at all. What if it's used in dark mode?
I'll give this one a green check, because the component currently ships with the wrong color, and this rectifies that. But I would appreciate if @griffbrad could also just sanity check this one, especially whether we can move straight on to inherit or not.
|
I’m hesitant to jump straight to |
|
@griffbrad We can always merge this fix now and look to refactor to |
|
Yeah. I think it’s totally fine to proceed with this fix and then revisit |
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.
Description
In #35833 (comment) @jasmussen noticed we are using the wrong text color in the description text of the Link UI preview.
This was because the
<Text>component uses black and not darkGray from the available color values.This PR corrects the underlying Text component from
#000to$gray-900. This has the knock on effect of fixing the LinkControl preview.How has this been tested?
$gray-900(#1e1e1e).<Text>component (as opposed to any styles applied directly to<LinkControl>).Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).