[Bug]: Globals in Toolbar show as selected even when default value is selected

[JoshTumath]

Describe the bug

When a button is in the toolbar (such as the vision simulator), it appears with a transparent background by default and blue when something is selected.

However, when making a Global, all of the options appear blue when selected - even the default value. You would expect that when the default value is selected, the button would be marked as transparent/unselected.

To Reproduce

Add the following to the `preview.js`:


// .storybook/preview.js

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark'],
      showName: true,
      dynamicTitle: true,
    },
  },
};


Run storybook.

You will see the 'Theme' button appears with a blue background in the toolbar.

System

No response

Additional context

No response

[sneko]

I agree with you @JoshTumath , I didn't check the addons code to see the difference but this does not exist on the viewport addon for example...