-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove all dashicon
usages from Storybook stories
#33984
Conversation
Size Change: 0 B Total Size: 1.06 MB ℹ️ View Unchanged
|
b6eefae
to
d3de340
Compare
This PR has been stale for a while. I've just rebased and pushed a couple of tweaks, it'd be great if it could get reviewed soon 🙇♂️ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, sorry for the delay.
d3de340
to
34dcd8e
Compare
Thank you for the review! I've rebased, will merge as soon as all checks pass Noticing failing React Native tests, but they don't seem related (and have been affecting other branches too) — going to merge this PR. |
Description
Since the
dashicons
styles are not included in Storybook, currently all instances ofDashicon
in Storybook are not being displayed (an empty<span />
is rendered without any associated icon styles). Furthermore, although Dashicons are not deprecated, their use is currently not encouraged.Since the
Dashicon
component is rendered when theicon
prop of the<Icon />
component is passed as astring
type, this PR aims at fixing the Storybook stories by swapping all those string values with SVG icons from the@wordpress/icons
package.How has this been tested?
Compare the Storybook stories in this PR's branch (
npm run storybook:dev
) against what's currently in production, and confirm that all stories using an icon are now rendering correctly.Affected components:
Button
DropdownMenu
Icon
Modal
Panel
RangeControl
ToolbarButton
Screenshots
Example: the
Icon
componentTypes of changes
Bug fix (storybook)
Checklist:
*.native.js
files for terms that need renaming or removal).