ColorPalette: Make selected color more obvious #20258
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
mtias
reviewed
Feb 17, 2020
| value === color | ||
| ? { | ||
| fill: tinycolor | ||
| .mostReadable( color, [ '#111', '#fff' ] ) |
There was a problem hiding this comment.
Should we use #000 instead? cc @jasmussen
There was a problem hiding this comment.
We should. How much more black could it be? And the answer is none. None more black.
|
Looks great to me. I will remove the feedback label as this works well. Thanks for this @johnwatkins0. It will need a code review but once gets that let's merge! |
youknowriad
approved these changes
Feb 18, 2020
|
Agree on the prop, also seems like it shouldn't be computed so high up the chain. |
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
This would resolve #17332. Currently when selecting a color from the ColorPalette it can be hard to tell which color you have selected:
This is especially true working with the Text Color format, which doesn't have the "Background Color" indicator that appears other places.
This update adds a new
selectedIconPropsprop to the CircularOptionPicker. This allows extra props to be passed to the check icon that shows over the selected color. We then use this prop to pass down style overrides from the ColorPalette component. The style override uses the tinycolormostReadablefunction to determine whether the icon should be white or dark gray.How has this been tested?
Ran Jest tests, which passed when snapshots were updated. Tested locally in the browser using several components that use the ColorPalette, including the table block and pull quote block.
Screenshots
After:
Types of changes
This is a backward-compatible improvement to the display of the color picker.
Checklist: