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

[vanessayuenn]

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:

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]

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]

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

[lunelson]

Why was this issue closed? The official docs for custom toolbar buttons still show the same method of adding an icon, which causes the deprecation warning

[notacouch]

OP is exactly my scenario, following the theme-switching docs and getting the same icon deprecation warning. Using the latest Storybook 8.1.5 w/ Next.js framework in a fresh setup.

[solyane2002]

I have the same deprecation warning and indeed, following the doc of v8.1, we are still recommended to use icons from @storybook/components : https://storybook.js.org/docs/essentials/toolbars-and-globals#advanced-usage https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon

Why this issue has been closed ? is there a workaround ?

[vanessayuenn]

@lunelson @notacouch @solyane2002 thanks for bringing this up. The documentation should indeed be updated. Meanwhile, the same icons should be imported from @storybook/icons instead.

[lunelson]

Thanks @vanessayuenn — how would we work with the globalTypes API to create icons for toolbar items then? These expect a string identifier: https://storybook.js.org/docs/essentials/toolbars-and-globals#globals

[vanessayuenn]

In the documentation, any reference to @storybook/components should be changed to @storybook/icons, but the API itself has not changed. So, the same code snippet in the globalTypes API docs should work without triggering any deprecation warning. Sounds like that's not the case for you, @lunelson @solyane2002? If so, could either of you assist in providing a repro via https://storybook.new/? 🙏🏼

[lunelson]

Actually it does seem to be fixed in the latest version, for me.

In a previous patch version, adding this property to the default export of .storybook/preview.tsx resulted in the deprecation warning, even when that file imported neither @storybook/icons nor @storybook/components, but it now seems to work

  globalTypes: {
    graticule: {
      description: 'Toggle the Graticule in preview area',
      type: 'string',
      defaultValue: 'visible',
      toolbar: {
        icon: 'component', // <--- this line was the problem
        items: [
          { value: 'off', title: 'Off' },
          { value: 'hidden', title: 'Hidden' },
          { value: 'visible', title: 'Visible' },
        ],
      },
    },
  },

[mrginglymus]

Here's a minimal repro:

https://stackblitz.com/edit/github-mqgxvo?file=.storybook%2Fpreview.js

The console warning appears when clicking the 'Click me!' in the toolbar.