Skip to content
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

UI: Upgrade Icon component #23680

Merged
merged 8 commits into from
Aug 7, 2023
Merged

UI: Upgrade Icon component #23680

merged 8 commits into from
Aug 7, 2023

Conversation

cdedreuille
Copy link
Contributor

@cdedreuille cdedreuille commented Aug 2, 2023

What I did

We introduced a new library for icons. In this PR I'm replacing all icons by the new library. This PR doesn't include the following:

  • Icons that have dynamic names
  • Icons with styling overrides
  • Icons in the legacy component library. Not necessary.

This PR also fixes:

  • Removed dependencies in the Storybook icons
  • Update the versions of React to make sure it works with the versions of React supported by Storybook.

How to test

  1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
  2. Open Storybook in your browser
  3. Access any story and check across addons and the manager if icons are not rendered properly.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

@cdedreuille cdedreuille changed the title Update all icons in the monorepo to use our new Icon component UI: Update all icons in the monorepo to use our new Icon component Aug 2, 2023
@cdedreuille cdedreuille added maintenance User-facing maintenance tasks patch:no labels Aug 2, 2023
Copy link
Contributor

@jonniebigodes jonniebigodes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cdedreuille thanks for taking on this task and updating the snippets we're using. Appreciate it 🙏 ! The documentation changes look good to me, but I'll defer to the rest of the team to see what they say.

So that everyone is aware, I've already followed up with Charles to not only add some changes to the documentation but also a reminder for the addon kit to be updated to factor in these ones as well to prevent the code & documentation fall out of sync.

@@ -109,7 +109,8 @@ Going through the code blocks in sequence:
```ts
import { useGlobals, useStorybookApi } from '@storybook/manager-api';

import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want addon maintainers to do this, given that it's experimental?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally yes. It is experimental mostly because we want to move this at some point to a core package. @ndelangen can talk more about that. But the components inside this package are the real one and should be used.

@@ -144,7 +145,7 @@ export const VisionSimulator = () => {
onDoubleClick={() => setFilter(null)}
>
<IconButton key="filter" active={!!filter} title="Vision simulator">
<Icons icon="accessibility" />
<Icon.Accessibility />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs you wrote:

The meaning can be obvious visually, but it must have a proper text alternative via aria-label for screen readers

Should you make sure every icon in this PR has the proper aria-label applied to it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yannbf That would be great but that would require quite some time to test everything. I would put that effort in a separate PR though with other efforts to improve accessibility.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found a new way to help accessibility in a semi automated way @yannbf. I'll explore this more in a separate PR.

@yannbf yannbf changed the title UI: Update all icons in the monorepo to use our new Icon component UI: Use new Icon component in Storybook packages Aug 3, 2023
@cdedreuille cdedreuille requested a review from yannbf August 6, 2023 13:27
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@shilman shilman changed the title UI: Use new Icon component in Storybook packages UI: Upgrade Icon component Aug 7, 2023
@shilman shilman merged commit 3627472 into next Aug 7, 2023
17 checks passed
@shilman shilman deleted the charles-icons-updates branch August 7, 2023 07:35
@github-actions github-actions bot mentioned this pull request Aug 7, 2023
14 tasks
@ndelangen ndelangen restored the charles-icons-updates branch August 21, 2023 13:34
ndelangen added a commit that referenced this pull request Aug 21, 2023
…tes"

This reverts commit 3627472, reversing
changes made to 998926f.
@cdedreuille cdedreuille deleted the charles-icons-updates branch September 18, 2023 10:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:normal maintenance User-facing maintenance tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants