Storybook: Add stories for the ContrastChecker component#68120
Storybook: Add stories for the ContrastChecker component#68120t-hamano merged 2 commits intoWordPress:trunkfrom
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Hi @t-hamano, Thanks! |
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR!
This component is a bit special in that it doesn't render anything if the contrast is sufficient. This may confuse developers seeing this component for the first time.
How about setting a default value to intentionally cause insufficient contrast?
export const Default = {
args: {
backgroundColor: ...,
textColor: ...,
},
};
packages/block-editor/src/components/contrast-checker/stories/index.story.js
Show resolved
Hide resolved
|
Thanks, @t-hamano for the wonderful suggestions. I have addressed all your comments. Please let me know if it tests well for you. |
t-hamano
left a comment
There was a problem hiding this comment.
LGTM! Works as expected.
d6887a6f4eee9592e69715b2bef89f87.mp4
…8120) * Storybook: Add stories for the contrast-checker component * Storybook: Add default color values for initial component visibility Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Part of #67165
What?
This PR adds the Storybook stories for the ContrastChecker component in the block editor. It includes comprehensive stories demonstrating different text alignment states.
Testing Instructions
npm run storybook:devScreencast
Screen.Recording.2024-12-19.at.13.22.09.mov