Docs: Story globals improvements #24
Conversation
- Improve feature flag callouts
- Add API details to migration notes and clarify examples
- Restructure guides to use sub-heading structure instead of snippet tabs
- Offers ability to explain differences between APIs more thoroughly
- Also a better experience, because users' tab preference will not apply across snippets
- Clarify example snippets
- Only demonstate one concept per snippet
- Adjust heading levels
- Add globals API reference section
- Improve snippet filenames
- Remove redundant `storybook-` prefix
- Prose tweaks
- Explain globals API and feature flag once, at the top
- Reference that callout in consistent manner throughout page
- Wrap entire docs section in "feature flag callout" to better differentiate
- Remove headings for with/without feature flag sections
- Headings will be removed in SB 9+, so they're not a stable reference
- Polish and details - Make Viewport match structure and style of Backgrounds
Co-authored-by: jonniebigodes <[email protected]>
![greptile-apps-local[bot]](https://avatars.githubusercontent.com/u/140149887?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR updates Storybook documentation, focusing on the usage of globals and parameters for addons like backgrounds and viewports, introducing the new globals API, and improving overall clarity and structure.
- Added new
globalsAPI documentation indocs/essentials/toolbars-and-globals.mdx, explaining its impact on addon behavior - Updated
docs/essentials/backgrounds.mdxwith restructured configuration sections and improved API reference - Revised
docs/essentials/viewport.mdxto include detailed device lists and clarify viewport configuration process - Renamed and added multiple snippet files in
docs/_snippets/to reflect new API structures and best practices - Updated
MIGRATION.mdto cover changes from Storybook version 8.2.x to 8.3.x, including new parameter formats for addons
27 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile
| }; | ||
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts" renderer="web-components" language="ts" |
There was a problem hiding this comment.
style: Web Components TypeScript example imports StoryObj but doesn't use it
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| ``` | ||
|
|
||
| ```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="without-globals" | ||
| ```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="With globals API" | ||
| // Replace your-framework with the framework you are using (e.g., react, vue3) | ||
| import { Preview } from '@storybook/your-framework'; |
There was a problem hiding this comment.
style: Inconsistent import style compared to the 'Without globals API' version. Consider using 'import type { Preview }' here as well
| ```ts filename="Button.stories.ts" renderer="web-components" language="ts" | ||
| import type { Meta, StoryObj } from '@storybook/web-components'; | ||
|
|
||
| const meta: Meta = { |
There was a problem hiding this comment.
style: The Meta type for web-components should be more specific, e.g., Meta
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj; |
There was a problem hiding this comment.
style: The Story type for web-components should be more specific, e.g., StoryObj
| const preview: Preview = { | ||
| parameters: { | ||
| viewport: { | ||
| viewports: INITIAL_VIEWPORTS, |
There was a problem hiding this comment.
logic: INITIAL_VIEWPORTS is not imported in this TypeScript example
What I did:
• Further updates to storybookjs#28716
• Improve feature flag callouts
• Add API details to migration notes and clarify examples
Restructure guides to use sub-heading structure instead of snippet tabs - Offers ability to explain differences between APIs more thoroughly - Also a better experience, because users' tab preference will not apply across snippets
Clarify example snippets - Only demonstate one concept per snippet
Adjust heading levels
Add globals API reference section
Improve snippet filenames - Remove redundant storybook- prefix
Prose tweaks
Checklist for Contributors
Testing
Manual testing
Please review in locally running docs site.
Documentation
[x] Add or update documentation reflecting your changes
[ ] If you are deprecating/removing a feature, make sure to update
MIGRATION.MD
[x] When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
[x] Make sure this PR contains one of the labels below:
bug: Internal changes that fixes incorrect behavior.
maintenance: User-facing maintenance tasks.
dependencies: Upgrading (sometimes downgrading) dependencies.
build: Internal-facing build tooling & test updates. Will not show up in release changelog.
cleanup: Minor cleanup style change. Will not show up in release changelog.
documentation: Documentation only changes. Will not show up in release changelog.
feature request: Introducing a new feature.
BREAKING CHANGE: Changes that break compatibility in some way with current major version.
other: Changes that don't fit in the above categories.