feat: storybook for Icon component #10515
Conversation
| export const SupersetIcon = () => { | ||
| return ( | ||
| <> | ||
| {Object.keys(iconsRegistry).map(iconName => ( |
There was a problem hiding this comment.
A bit of a nit, do you think we could display these icons in such a way that they take up a bit less space? I've liked a design like this lately: https://airbnb.io/lunar/?path=/story/icons--icon-gallery
| {Object.keys(iconsRegistry).map(iconName => ( | ||
| <> | ||
| {iconName}: <br /> | ||
| <Icon |
There was a problem hiding this comment.
Should we add a knob for size as well?
There was a problem hiding this comment.
Hmm... I don't see a size prop in use in the codebase, or explicitly supported by the Icon component.
There was a problem hiding this comment.
Otherwise, I'm down to add knobs for all the things
There was a problem hiding this comment.
width and height are svg props which can be passed into the Icon component, along with viewBox to properly scale to svg.
There was a problem hiding this comment.
perhaps we should consider abstracting width, height, and viewBox away into a size prop? But regardless, that's for a future pr. This is good as is then
|
🏷 svg |
rusackas
force-pushed
the
storybook-for-icon
branch
from
db451a8 to
2f8c588
Compare
|
Oh the label bot is working again!? Came back to life!?!?!! About the storybook, I'd go for much more density, maybe in a grid? Small text? |
|
Ok, icons are now in a nice little grid... sorry for being a lazy bum :P And hooray label bot! |
|
I also sorted the icons alphabetically, so it doesn't hurt people's brains. |
|
🏷️ storybook |
|
🏷 storybook |
|
WHAT? bot only listens to you!? |
|
🗑️ 🏷️ storybook |
|
🗑🏷 svg |
|
🏷️ .ui |
|
|
|
That's super offensive. Bot revolts against its maker. |
|
I'll go tag some random PR I'm NOT the author of to see if it works there. |
|
🏷️ css |
* storybook for Icon component * fixing webpack aliases * linting ✨ * Icons are now in a nice little grid. * lint * EOF fix for alert.txt. Ugh.
* storybook for Icon component * fixing webpack aliases * linting ✨ * Icons are now in a nice little grid. * lint * EOF fix for alert.txt. Ugh.
mistercrunch
added
🏷️ bot
SUMMARY
Adds a storybook entry for the Icon component, and puts that Icon component in a folder.
Sadly, the knobs for the color palette are relying on the
SupersetTheme... I was having some issues gettingwithThemeto work here, but I'd rather use theThemeProviderto do this. I'll give that another shot later, as it'll be handy in other stories, I'm sure.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TEST PLAN
ADDITIONAL INFORMATION