-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Change default Storybook layout and improve Story sorting #2807
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
m7kvqbe1
requested changes
Nov 17, 2021
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM - just noticed some naming inconsistencies that could be fixed quickly in this PR.
packages/react-component-library/src/components/CheckboxE/CheckboxE.stories.tsx
Show resolved
Hide resolved
packages/react-component-library/src/components/RadioE/RadioE.stories.tsx
Show resolved
Hide resolved
m7kvqbe1
approved these changes
Nov 17, 2021
ce79d23
to
e1d8f5c
Compare
The `fullscreen` layout is awkward for things like form controls, as shadows (and sometimes borders) are out of view. This changes the default layout from `fullscreen` to the default `padded` layout, and goes through and applies the `fullscreen` layout to components where it makes sense or wasn't getting in the way of borders or shadows.
This makes sure story folders are sorted alphabetically, while keeping individual stories sorted by export order.
This changes the import of the Story and Meta types to be as in the examples in the Storybook docs.
e1d8f5c
to
76df196
Compare
Kudos, SonarCloud Quality Gate passed! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
Package: react-component-library
Package/code type
Type: Development
Related to a design system component
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.
Overview
This makes a couple of changes:
fullscreen
to the default layout (padded
) (while changing certain stories to usefullscreen
where it makes sense)@storybook/react
instead of@storybook/react/types-6-0
Link to preview
https://5e25c277526d380020b5e418-kqmsqxgvha.chromatic.com/
Reason
Layout
For many stories, a full-screen layout was problematic because it caused shadows and borders to be out of view on the Canvas tab:
With padding these can be properly seen:
I've gone through and manually applied the
fullscreen
layout to stories for components where it makes sense or wasn't getting in the way of borders or shadows.(There shouldn't be any change to the Docs tab.)
Sorting
The change to sorting is to stop some story folders being sorted last:
Instead these are sorted alphabetically:
There is no change to the sorting of individual stories, but note that we are currently getting hit by this in production: storybookjs/storybook#15574
This is currently causing some individual stories to be in the wrong order in production e.g. https://storybook.design-system.digital.mod.uk/?path=/docs/range-slider--custom-value-formatter
Imports
This change is to simply make the imports in line with examples in the Storybook docs:
Work carried out
fullscreen
layout overridefullscreen
layout as appropriate