Docs: Story globals improvements #28
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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 significantly updates and improves the documentation for Storybook's globals API, focusing on background and viewport configurations.
- Added new files (
addon-backgrounds-options-in-preview.md,addon-backgrounds-values-in-meta.md) demonstrating usage of the new globals API for backgrounds - Introduced
addon-viewport-options-in-preview.mdandaddon-viewport-viewports-in-preview.mdto clarify viewport configuration - Updated
MIGRATION.mdwith changes from version 8.2.x to 8.3.x, including new parameters format for addons - Significantly revised
docs/essentials/backgrounds.mdxanddocs/essentials/viewport.mdxto incorporate the new globals API and improve overall clarity - Removed several outdated or redundant files to streamline documentation structure
27 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
|
|
||
| ```ts filename=".storybook/preview.ts" renderer="common" language="ts" | ||
| // 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: Import INITIAL_VIEWPORTS in TypeScript example for consistency
Suggested change
| import { Preview } from '@storybook/your-framework'; | |
| import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; | |
| import { Preview } from '@storybook/your-framework'; |
Comment on lines
1
to
3
|
|
||
| ```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="globals-api" | ||
| // Replace your-framework with the framework you are using (e.g., react, vue3) | ||
| import { Preview } from '@storybook/your-framework'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| backgrounds: { | ||
| options: { | ||
| dark: { name: 'Dark', value: '#333' }, | ||
| light: { name: 'Light', value: '#F7F9F2' }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
There was a problem hiding this comment.
style: If this file is intentionally being emptied, it may be more appropriate to delete it entirely rather than leaving it as an empty file in the repository.
Comment on lines
114
to
120
| const meta: Meta = { | ||
| component: 'demo-button', | ||
| globals: { | ||
| // 👇 Set background value for all component stories | ||
| backgrounds: { value: 'gray', grid: false }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
style: For consistency with other examples, consider adding a type annotation for 'meta', e.g., 'const meta: Meta<HTMLElement> = {'.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.