Address feedback

- Clarify that `options` can only be applied at project level
- Make parameters merge semantics more clear
This commit is contained in:
Kyle Gach 2024-01-08 12:59:30 -07:00
parent 5a23de20cf
commit c4d3fc5c43

View File

@ -77,7 +77,7 @@ Type: `'centered' | 'fullscreen' | 'padded'`
Default: `'padded'`
Specifies how the canvas should lay out the story.
Specifies how the canvas should [lay out the story](../configure/story-layout.md).
- **centered**: Center the story within the canvas
- **padded**: (default) Add padding to the story
@ -93,6 +93,12 @@ Type:
}
```
<Callout variant="warning">
The `options` parameter can _only_ be applied at the [project level](#project-parameters).
</Callout>
#### `options.storySort`
Type: `StorySortConfig | StorySortFn`
@ -161,7 +167,7 @@ When specifying parameters, they are merged together in order of increasing spec
<div class="aside">
Parameters are **merged**, so individual keys are always overwritten, never dropped.
Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
</div>
@ -174,8 +180,9 @@ const preview = {
// 👇 Project-level parameters
parameters: {
layout: 'centered',
viewport: {
viewports: defaultViewports,
demo: {
demoProperty: 'a',
demoArray: [1, 2],
},
},
// ...
@ -191,9 +198,9 @@ const meta = {
// 👇 Meta-level parameters
parameters: {
layout: 'fullscreen',
viewport: {
defaultViewport: 'medium',
viewports: viewportsForDialog,
demo: {
demoProperty: 'b',
anotherDemoProperty: 'b',
},
},
};
@ -206,8 +213,8 @@ export const LargeScreen = {
// 👇 Story-level parameters
parameters: {
layout: 'padded',
viewport: {
defaultViewport: 'large',
demo: {
demoArray: [3, 4],
},
},
};
@ -221,18 +228,20 @@ Will result in the following parameter values applied to each story:
// For the Basic story:
{
layout: 'fullscreen',
viewport: {
defaultViewport: 'medium',
viewports: viewportsForDialog,
demo: {
demoProperty: 'b',
anotherDemoProperty: 'b',
demoArray: [1, 2],
},
}
// For the LargeScreen story:
{
layout: 'padded',
viewport: {
defaultViewport: 'large',
viewports: viewportsForDialog,
demo: {
demoProperty: 'b',
anotherDemoProperty: 'b',
demoArray: [3, 4],
},
}
```