Update story globals docs #37
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 the documentation for story globals in Storybook, focusing on the backgrounds and viewport addons. Key changes include:
- Introduced new globals API for backgrounds and viewport configuration
- Updated code snippets for various frameworks (Angular, React, Vue, Svelte, Web Components)
- Added examples for configuring backgrounds and viewports in preview files and component metadata
- Removed outdated examples and consolidated information for clarity
- Updated MIGRATION.md with instructions for transitioning to new parameter formats in version 8.3.x
- Revised API documentation for backgrounds and viewport addons to reflect new functionality
27 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile
| const preview: Preview = { | ||
| parameters: { | ||
| viewport: { | ||
| viewports: INITIAL_VIEWPORTS, |
There was a problem hiding this comment.
logic: viewports set to INITIAL_VIEWPORTS, which is not imported in the TS version
| viewports: INITIAL_VIEWPORTS, | |
| // Replace your-framework with the framework you are using (e.g., react, vue3) | |
| import { Preview } from '@storybook/your-framework'; | |
| import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; |
| export default meta; | ||
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" |
There was a problem hiding this comment.
style: The filename includes both .ts and .tsx extensions, which might be confusing. Consider using separate examples for .ts and .tsx if there are differences.
| export default meta; | ||
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" |
There was a problem hiding this comment.
style: This example is very similar to the previous Vue example. Consider combining them or highlighting the differences more clearly.
| export default meta; | ||
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" |
There was a problem hiding this comment.
style: This example is very similar to the previous Svelte example. Consider combining them or highlighting the differences more clearly.
| | `ipad` | iPad | 768 × 1024 | | ||
| | `ipad10p` | iPad Pro 10.5-in | 834 × 112 | |
There was a problem hiding this comment.
logic: Dimensions for iPad Pro 10.5-in seem incorrect (834 × 112). Verify and update if needed
| | `ipad` | iPad | 768 × 1024 | | |
| | `ipad10p` | iPad Pro 10.5-in | 834 × 112 | | |
| | `ipad` | iPad | 768 × 1024 | | |
| | `ipad10p` | iPad Pro 10.5-in | 834 × 1112 | |
| type: 'desktop' | 'mobile' | 'tablet'; | ||
| }; |
There was a problem hiding this comment.
style: Consider adding 'other' to the type options for consistency with the globals API version
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
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.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>