Docs: Story globals improvements #33
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 updates the documentation for Storybook's globals API, focusing on the backgrounds and viewport addons. Key changes include:
- Introduced new
globalsAPI for backgrounds and viewport addons in Storybook 8.3+ - Restructured guides to use sub-heading structure instead of snippet tabs for better explanation
- Added API details to migration notes and clarified examples
- Improved feature flag callouts and added globals API reference section
- Renamed and reorganized code snippet files for better clarity and consistency
- Updated MIGRATION.md with new parameter formats for addon-backgrounds and addon-viewport
27 file(s) reviewed, 4 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 unused StoryObj type
Suggested change
| ```ts filename="Button.stories.ts" renderer="web-components" language="ts" | |
| import type { Meta } from '@storybook/web-components'; |
| ```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: Consider adding a more specific type for Meta, such as Meta<HTMLElement> for better type inference.
| const preview: Preview = { | ||
| parameters: { | ||
| viewport: { | ||
| viewports: INITIAL_VIEWPORTS, |
There was a problem hiding this comment.
syntax: INITIAL_VIEWPORTS is used here but not imported in the TypeScript version. Add the import statement.
Suggested change
| viewports: INITIAL_VIEWPORTS, | |
| import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; | |
| import { Preview } from '@storybook/your-framework'; |
Comment on lines
+86
to
+87
| | `ipad` | iPad | 768 × 1024 | | ||
| | `ipad10p` | iPad Pro 10.5-in | 834 × 112 | |
There was a problem hiding this comment.
syntax: The dimensions for iPad Pro 10.5-in are incorrect. It should be '834 × 1112' instead of '834 × 112'.
Suggested change
| | `ipad` | iPad | 768 × 1024 | | |
| | `ipad10p` | iPad Pro 10.5-in | 834 × 112 | | |
| | `ipad10p` | iPad Pro 10.5-in | 834 × 1112 | |
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.