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

[Bug]: deprecation warnings when older icons are being used #25760

Closed
vanessayuenn opened this issue Jan 25, 2024 · 2 comments · Fixed by #25822
Closed

[Bug]: deprecation warnings when older icons are being used #25760

vanessayuenn opened this issue Jan 25, 2024 · 2 comments · Fixed by #25822
Assignees
Milestone

Comments

@vanessayuenn
Copy link
Contributor

Describe the bug

Project: MealDrop
Version: 8.0.0-alpha.14
Bug/feedback:

It seems that not all parts of Storybook are using the new icons, so the browser console gets many deprecation warnings when older icons are being used such as:

Use of deprecated props in the button component detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components

Use of the deprecated Icons (check) component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated

Use of the deprecated Icons (play) component detected. Please use the @storybook/icons component directly. For more informations, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated

Scenario 1:

When using addon-interactions and accessing a story that contains a play function. The addon interactions panel seems to be using old icons (check, play).

Scenario 2:

When creating your own toolbar (from official docs), you can define icons via their name like so:

const preview = {
  //... other properties,
  globalTypes: {
    theme: {
      name: 'Theme',
      description: 'Theme for the components',
      defaultValue: 'light',
      toolbar: {
        icon: 'circlehollow',
        items: [
          { value: 'light', icon: 'circlehollow', title: 'light' },
          { value: 'dark', icon: 'circle', title: 'dark' },
          { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
        ],
      },
    },
  },
};

export default preview;

When clicking on the newly created toolbar button, you will get as many warnings as the amount of icons you create:
image

To Reproduce

  1. Go to https://stackblitz.com/edit/github-csg7tu
    2.1 Open the Page - Logged In story
    2.2 Click on the circle toolbar
  2. See the warnings

System

No response

Additional context

No response

@shilman
Copy link
Member

shilman commented Jan 26, 2024

Tempted to make this a beta blocker if we can squeeze it in. It's an easy fix and will reduce the noise, allowing us and users to flag other error/warning messages more easily @vanessayuenn

@cdedreuille
Copy link
Contributor

I'm working on it now @shilman so hopefully it should be done for Beta.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

3 participants