essentials/globals

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Globals are not passed in args, accessed via context.globals

Globals in Storybook represent global inputs to story rendering that are not story-specific. They are not passed in the args argument to the story function. Instead, they are accessible as context.globals and are typically used in decorators which apply to all stories.

When globals change, story re-renders and decorators rerun

When the globals change in Storybook, the story re-renders and the decorators rerun with the new global values.

Configure globalTypes with toolbar annotation in preview

In .storybook/preview.*, you can add custom toolbars by creating globalTypes with a toolbar annotation. This creates a declarative syntax for configuring toolbar menus.

globalTypes and initialGlobals can only be set in preview

As globals are global, you can only set globalTypes and initialGlobals in .storybook/preview.*. They cannot be set at the story level.

Access global value in decorator using context.globals

To consume a global value in a decorator, access it via context.globals.[globalName]. For example, context.globals.theme retrieves the theme global value.

Set globals annotation on story to override project-level settings

To ensure a story always uses a specific global value regardless of toolbar selection, set the globals annotation on a story or component. This overrides the global value for those stories and disables the toolbar menu for that global when viewing the stories.

Story-level globals disable interactive exploration of combinations

Setting globals at the story level disables toolbar control for those globals, preventing users from exploring every combination of global values and args. Globals not defined at story level remain interactively selectable.

MenuItem configuration options for toolbar items

Toolbar menu items support the following configuration options: value (String, required) - the string value set in globals; title (String, required) - the main text of the title; right (String, optional) - text displayed on the right side of the menu; icon (String, optional) - an icon shown in the toolbar if this item is selected.

Access globals from story using context parameter

While consuming globals from decorators is recommended, you can also retrieve a global from within a story by accessing it from the story context parameter.

useGlobals hook for addons to retrieve globals

The storybook/manager-api module provides the useGlobals() hook that allows Storybook addons to retrieve any globals they need.

updateGlobals function for addons to update globals

The storybook/manager-api module provides the updateGlobals function that allows Storybook addons to update global values and refresh the UI.

Icons loaded from @storybook/icons package

The icon element used in toolbar globalTypes loads icons from the @storybook/icons package. The documentation FAQ provides a list of available icons that can be used.

right configuration displays text on right side of toolbar menu

Adding the configuration element 'right' to a MenuItem will display text on the right side in the toolbar menu once connected to a decorator.

Give your agent this brain