Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSF: Update docs for using globals in viewports and background addons #28716

Merged
merged 25 commits into from
Aug 6, 2024
Merged

CSF: Update docs for using globals in viewports and background addons #28716

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
acc974b
changes to backgrounds addon in relation to the globals work
ndelangen Jul 26, 2024
ae7f432
changes to viewport addon in relation to the globals work
ndelangen Jul 26, 2024
f380221
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 26, 2024
eda3f77
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 29, 2024
0678a2a
Update docs/api/main-config/main-config-features.mdx
ndelangen Jul 29, 2024
0d7d389
apply requested changes to docs
ndelangen Jul 29, 2024
d64bff2
Merge branch 'norbert/globals-docs-changes' of https://github.com/sto…
ndelangen Jul 29, 2024
7525fc9
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 29, 2024
693b64d
add mention of `addonToolbarParameters` feature flag
ndelangen Jul 29, 2024
7534db5
remove defaultValue, change toolbars config to use parameters instead…
ndelangen Jul 29, 2024
0ac41ab
adjust title
ndelangen Jul 29, 2024
7cd8de0
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 29, 2024
045d723
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 30, 2024
535a67d
undo work for addon-toolbars
ndelangen Jul 30, 2024
8857944
Merge branch 'norbert/globals-docs-changes' of https://github.com/sto…
ndelangen Jul 30, 2024
e554368
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Jul 30, 2024
05ddecf
Merge branch 'tom/23347-story-globals' into norbert/globals-docs-changes
ndelangen Aug 1, 2024
26bf23b
add migration note
ndelangen Aug 1, 2024
f58b9c8
cleanup
ndelangen Aug 1, 2024
771d94b
fix
ndelangen Aug 2, 2024
9781fbc
Merge branch 'next' into norbert/globals-docs-changes
ndelangen Aug 2, 2024
133c71c
Polish the Background Viewports and Toolbars docs and examples
jonniebigodes Aug 2, 2024
f4bb5a9
Fix incorrect link and table
jonniebigodes Aug 3, 2024
9c8e28f
Adjust API
jonniebigodes Aug 3, 2024
d220802
Merge branch 'next' into norbert/globals-docs-changes
jonniebigodes Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 43 additions & 73 deletions docs/_snippets/my-component-story-configure-viewports.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,16 @@ export default {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};

export const MyStory = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
//👇 Your own default viewport
value: 'iphone6',
},
},
};
Expand All @@ -69,9 +68,7 @@ const meta = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
} satisfies Meta<typeof MyComponent>;
Expand All @@ -80,9 +77,9 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -101,9 +98,7 @@ const meta: Meta<typeof MyComponent> = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};
Expand All @@ -112,9 +107,9 @@ export default meta;
type Story = StoryObj<typeof MyComponent>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -131,17 +126,15 @@ export default {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};

export const MyStory = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -160,9 +153,7 @@ const meta = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
} satisfies Meta<typeof MyComponent>;
Expand All @@ -171,9 +162,9 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -192,9 +183,7 @@ const meta: Meta<typeof MyComponent> = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};
Expand All @@ -203,9 +192,9 @@ export default meta;
type Story = StoryObj<typeof MyComponent>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -222,17 +211,15 @@ export default {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};

export const MyStory = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand Down Expand Up @@ -272,9 +259,7 @@ const meta = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
} satisfies Meta<typeof MyComponent>;
Expand All @@ -283,9 +268,9 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -303,9 +288,7 @@ const meta: Meta<typeof MyComponent> = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};
Expand All @@ -314,9 +297,9 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -333,18 +316,15 @@ export default {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,

//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};

export const MyStory = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -363,10 +343,7 @@ const meta = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,

//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
} satisfies Meta<typeof MyComponent>;
Expand All @@ -375,9 +352,9 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -396,10 +373,7 @@ const meta: Meta<typeof MyComponent> = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,

//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};
Expand All @@ -408,9 +382,9 @@ export default meta;
type Story = StoryObj<typeof MyComponent>;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -425,17 +399,15 @@ export default {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};

export const MyStory = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand All @@ -452,9 +424,7 @@ const meta: Meta = {
//👇 The viewports object from the Essentials addon
viewport: {
//👇 The viewports you want to use
viewports: INITIAL_VIEWPORTS,
//👇 Your own default viewport
defaultViewport: 'iphone6',
options: INITIAL_VIEWPORTS,
},
},
};
Expand All @@ -463,9 +433,9 @@ export default meta;
type Story = StoryObj;

export const MyStory: Story = {
parameters: {
globals: {
viewport: {
defaultViewport: 'iphonex',
value: 'iphone6',
},
},
};
Expand Down
36 changes: 16 additions & 20 deletions docs/_snippets/storybook-addon-backgrounds-configure-backgrounds.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ const meta: Meta<Button> = {
component: Button,
parameters: {
backgrounds: {
default: 'twitter',
values: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998' },
],
options: {
dark: { name: 'Dark', value: '#333' },
light: { name: 'Light', value: '#333' },
},
},
},
};
Expand All @@ -28,11 +27,10 @@ export default {
component: Button,
parameters: {
backgrounds: {
default: 'twitter',
values: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998' },
],
options: {
dark: { name: 'Dark', value: '#333' },
light: { name: 'Light', value: '#333' },
},
},
},
};
Expand All @@ -49,11 +47,10 @@ const meta = {
component: Button,
parameters: {
backgrounds: {
default: 'twitter',
values: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998' },
],
options: {
dark: { name: 'Dark', value: '#333' },
light: { name: 'Light', value: '#333' },
},
},
},
} satisfies Meta<typeof Button>;
Expand All @@ -72,11 +69,10 @@ const meta: Meta<typeof Button> = {
component: Button,
parameters: {
backgrounds: {
default: 'twitter',
values: [
{ name: 'twitter', value: '#00aced' },
{ name: 'facebook', value: '#3b5998' },
],
options: {
dark: { name: 'Dark', value: '#333' },
light: { name: 'Light', value: '#333' },
},
},
},
};
Expand Down
Loading