Change default Storybook layout and improve Story sorting #2807
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
jpveooys
added
Package: react-component-library
m7kvqbe1
requested changes
Nov 17, 2021
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
jpveooys
force-pushed
the
docs/storybook-layout
branch
from
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.
jpveooys
force-pushed
the
docs/storybook-layout
branch
from
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
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:
fullscreento the default layout (padded) (while changing certain stories to usefullscreenwhere it makes sense)@storybook/reactinstead of@storybook/react/types-6-0Link 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
fullscreenlayout 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
fullscreenlayout overridefullscreenlayout as appropriate