Docs: Story globals improvements #28856
Merged
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
kylegach
commented
Aug 9, 2024
kylegach
commented
Aug 9, 2024
☁️ Nx Cloud ReportCI is running/has finished running commands for commit f73a7df. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
kylegach
commented
Aug 9, 2024
- 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
jonniebigodes
requested changes
Aug 13, 2024
- Polish and details - Make Viewport match structure and style of Backgrounds
* next: (281 commits) fix add `node:` prefixes move nx cache dir up to avoid vite watching it for our main storybook Bump version from "8.3.0-alpha.5" to "8.3.0-alpha.6" [skip ci] Write changelog for 8.3.0-alpha.6 [skip ci] minor fixes Yeah... don't look at this simplify eslint config further more fixes cleanup `no-extraneous-dependencies` fix style change pool options in sandboxes revamp sandbox setup to move to a workspace file fix typescript issue skip vitest integration in nextjs sandbox skip sveltekit tests fix script increase test timeout fix parallelism and skip more stories fix windows unit tests ...
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
27 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings
* next: (27 commits) apply fix for #28883 fixes apply linting to scripts update snapshots cleanup remove duplicate comment more fixes jsdoc linting fixes misc fixes remove invalid syntax remove duplicate comment remove duplicate comment remove duplicate comment remove duplicate comment remove duplicate comment move comment move comment remove redundant comment fix linting of jsdoc comments example blocks fix snapshots ...
jonniebigodes
requested changes
Aug 19, 2024
Comment on lines
90
to
98
| To ensure that a story always uses a specific global value, regardless of what has been chosen in the toolbar, you can set the `globals` annotation on a story or component. This overrides the global value for those stories and disables the toolbar menu for that global when viewing the stories. | ||
|
|
||
| {/* prettier-ignore-start */} | ||
|
|
||
| <CodeSnippets path="component-story-theme-override-globals.md" /> | ||
| <CodeSnippets path="addon-backgrounds-define-globals.md" /> | ||
|
|
||
| {/* prettier-ignore-end */} | ||
|
|
||
| When Storybook loads the stories, it applies the selected theme to every story except the `Dark` story, which automatically applies the `dark` theme. It also turns off the toolbar dropdown with the theme options, preventing them from being changed and notifying that this story requires a specific value to be used. | ||
| In the example above, Storybook will force all Button stories to use a gray background color, except the `OnDark` story, which will use the dark background. For all Buttons stories, the toolbar menu will be disabled for the `backgrounds` global, with a tooltip explaining that the global is set at the story level. |
There was a problem hiding this comment.
When you're able, can you adjust the first paragraph or the one after the example, as we're repeating the same information, specifically that the toolbar is disabled when the user sets the globals option with the only caveat that it shows a tooltip.
There was a problem hiding this comment.
I'm OK with a little repetition here. The first paragraph explains the behavior in general, and the second explains it as it specifically relates to the code snippet. I think having both is helpful.
There was a problem hiding this comment.
I have no issue with repetition, but my aim here would be to change the wording a bit so that we repeat the exact same information in both places
* next: (60 commits) Version it Make sure local @storybook/cli packages is used in linked mode add default options for addon-viewports via parameters Fix tests Fix default viewports Bump version from "8.3.0-alpha.7" to "8.3.0-alpha.8" [skip ci] Write changelog for 8.3.0-alpha.8 [skip ci] fix lint fix lint fix lint fix types Addon Vitest: Improve transformation logic to avoid duplicate tests fix lint fix lint fix formatting SvelteKit: Add portable stories vite plugin add vite plugin to sveltekit increase CI class for vitest integration Addon-docs: Remove babel dependency Bump version from "8.3.0-alpha.6" to "8.3.0-alpha.7" [skip ci] ...
jonniebigodes
approved these changes
Aug 26, 2024
|
I'm good with it, and I approved it to unblock you. I left one item for you to look into when you have a moment. |
9 tasks
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 #28716
storybook-prefixChecklist for Contributors
Testing
Manual testing
Please review in locally running docs site.
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.Greptile Summary
This PR updates the documentation for the Backgrounds and Viewport addons in Storybook, introducing the new
globalsAPI and feature flags. Key changes include:optionspropertyoptionsinstead ofviewportsbackgroundsStoryGlobalsandviewportStoryGlobalsfeature flags