Addon-controls: Update style of Boolean control #12515
Conversation
There was a problem hiding this comment.
Love this design @mattrothenberg 😍
@domyen @ndelangen can you help fix up the hard-coded color value to comply with our dark and light themes?
|
Thanks @shilman ! I can't get over how great V6 is 🥂 |
|
Thanks so much! 🙏 6.0 is still very WIP but it feels like we're going in the right direction! |
|
@ghengeveld might want to merge this into the SB UI work you're doing? |
|
@mattrothenberg You are the real MVP. |
|
Damn. Looks like you beat me to it by 5 hours. https://github.com/storybookjs/storybook/compare/improve-boolean-toggle-ux
What I'm gonna do is merge your PR so you'll get credit for the new UI. Then I'll apply some tweaks originating from my version, because it was made in collaboration with @domyen to make sure it follows the Storybook visual style. |
|
One more thing to consider is the dark theme (see Chromatic tests). It looks out of place right now. Admittedly so does mine. Let's collaborate on that. |
|
@ghengeveld Let me know specifically what you need from me, happy to help |
|
@mattrothenberg I've updated your branch with some tweaks and made sure it looks good in the dark theme as well:
|
|
@ghengeveld wow, that looks amazing! great work |
| textAlign: 'center', | ||
| fontSize: theme.typography.size.s1, | ||
| fontWeight: theme.typography.weight.bold, | ||
| lineHeight: '1', | ||
| cursor: 'pointer', | ||
| display: 'inline-block', | ||
| padding: '8px 16px', | ||
| padding: '7px 15px', |
There was a problem hiding this comment.
All inputs are 28px in height. Reducing the padding makes this control 28px tall as well.
shilman
changed the title
|
@shilman I'm not sure what's up with the Docs build on TeamCity, but other than that I think this PR is good to merge. WDYT? |
|
Don't forget @domyen 👍 |
Issue:
https://twitter.com/mattrothenberg/status/1306952200619466763?s=20
What I did
Updated the visual style of the
Booleancontrol to look more like @dizzyup's mockup.@domyen I couldn't quite figure out how to get the gray colors to match up (since y'all are relying heavily on transparency + opacity to reduce the lightness of the base gray color). For the sake of expediency, I hard-coded a gray value of #d9d9d9.