What are parameters in Storybook
Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.
Storybook · Writing and testing · all subjects
parameters
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Story parameters are set with parameters key on CSF export
Parameters for a single story are set with the parameters key on a CSF (Component Story Format) named export.
Component parameters apply to all stories in a file
To define parameters for all stories of a component, use the parameters key on the default CSF export. This applies the parameters to every story in that component's story file.
Global parameters set in .storybook/preview.ts|tsx
Global parameters that apply to all stories in the project are set via the parameters export of the .storybook/preview.ts or .storybook/preview.tsx configuration file.
Parameter inheritance precedence rules
More specific parameters take precedence over less specific ones. Story parameters overwrite component parameters, which overwrite global parameters. When conflicts occur, more specific values override less specific values.
Parameters are merged, not replaced
Parameters from different levels (global, component, story) are merged together. Only specific keys are overwritten; other keys are retained. This allows overriding a single sub-parameter on a per-story basis while keeping most global parameters.
parameters.backgrounds controls backgrounds toolbar
The parameters.backgrounds parameter is used to customize the backgrounds feature by defining which backgrounds appear in the backgrounds toolbar when a story is selected.
globals renamed to initialGlobals
In Storybook 9, the globals annotation has been renamed to initialGlobals. In .storybook/preview.js, instead of export default { globals: { theme: 'light' } }, use export default { initialGlobals: { theme: 'light' } };