Storybook: Add theme switcher tool #44715
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
23 tasks
ciampo
force-pushed
the
try-component-theme
branch
from
5f5984f
to
ce15b70
Compare
|
Storybook-related code changes look good, but I'll give this PR a final look once #44668 has been merged and this PR rebased.
Good point! This also made me realize that components (like Button) where the background color changes dinamically (i.e. on hover, focus...) may pose a challenge when it comes to text color contrast: would there ever be a situation in which the test has enough contrast in the button's default state, but doesn't have enough contrast when the button is hovered? Is that something that we'd need to take care of, or can we ignore it at least for now? |
It's an interesting problem! I wouldn't say it's a requirement, given that one can always unhover or unfocus, and there will be by definition a very limited number of primary buttons on any given page. Let's see what happens in practice and decide if it's worth the extra complexity to address. |
mirka
force-pushed
the
storybook-theme-tool
branch
from
67ec72d
to
f2d504f
Compare
|
Size Change: 0 B Total Size: 1.27 MB ℹ️ View Unchanged
|
ciampo
reviewed
Oct 13, 2022
ciampo
reviewed
Oct 13, 2022
mirka
force-pushed
the
storybook-theme-tool
branch
from
a38b6d3
to
a4697c8
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.
Part of #44116
Based on #44668
What?
Adds a theme switcher tool to the Storybook toolbar to test component support of the new experimental
Themecomponent.Why?
We need to test whether the new configurable colors we introduce are supported correctly by all components.
How?
Adds a new toolbar add-on with some preset accent colors.
The orange accent color ("Sunrise") was chosen intentionally, because for sufficient contrast, the foreground text should be black when this orange is used as a background color. As can be seen with the primary variant of the Button component in the video, we don't support automatic text color switching yet. This is one of our next steps to work on.
Testing Instructions
npm run storybook:devScreenshots or screencast
CleanShot.2022-10-05.at.17.27.21.mp4