Skip to content

docs(storybook): restore story defaults dropped by the Storybook 9 upgrade#1093

Open
frankieyan wants to merge 9 commits into
mainfrom
frankie/storybook-crash
Open

docs(storybook): restore story defaults dropped by the Storybook 9 upgrade#1093
frankieyan wants to merge 9 commits into
mainfrom
frankie/storybook-crash

Conversation

@frankieyan

@frankieyan frankieyan commented Jul 9, 2026

Copy link
Copy Markdown
Member

Short description

Box's Margin Story crashes because it expected a margin arg to be provided, but it was never supplied. This is because it was passed in through argTypes.margin.defaultValue, and Storybook dropped defaultValue as a source of initial args in v7, in favour of args.

On top of fixing the crash, we also remove all other defaultValues, and move them into args instead.

Reference

Demo

Margin Story crashed on mount. The empty margin control in the "before" screenshot is the root cause:

Before After
before-margin after-margin

Interactive Props Story didn't crash, but rendered an empty canvas with every control unset:

Before After
before-interactive after-interactive

Padding Story rendered, but with padding undefined:

Before After
before-padding after-padding

Test plan

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

frankieyan and others added 9 commits July 8, 2026 22:43
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
@frankieyan frankieyan marked this pull request as ready for review July 9, 2026 07:52

@doistbot doistbot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR fixes a Storybook 9 crash by migrating all argTypes.defaultValue entries into args blocks, and simplifies the storybook helper functions by dropping their defaultValue parameter.

Few things worth tightening:

  • A few stories still rely on selectWithNone()/selectSize() without matching args (e.g., Columns/AlignmentStory, Stack/InteractivePropsStory, heading/text playgrounds). They'll still open with blank controls in Storybook 9 — either keep the helper default or add explicit args: { …: 'none' } at each remaining site.
  • space: 'medium' is now repeated across four story-level args blocks in columns.stories.tsx. Hoisting it to export default.args would give a single source of truth and make future stories easier to get right.

I also included a few optional follow-up notes in the details below.

Optional follow-up notes (2)
  • P3 src/utils/storybook-helper.tsx:24: Removing the implicit 'none' default here leaves a few stories regressed, because they still inherit selectWithNone()/selectSize() argTypes without defining matching args. For example, Columns/AlignmentStory (space, align, alignY), Stack/InteractivePropsStory (space, align, dividers), and the heading/text playgrounds (size, lineClamp, align) will still load with empty controls in Storybook 9. Either keep the helper default until each caller has explicit args, or add args: { ...: 'none' } at the remaining story/meta sites.
  • P3 src/columns/columns.stories.tsx:287: space: 'medium' is now repeated in four story-level args blocks in this file. Since space is already a file-level control and AlignmentStory uses the same prop, hoisting this to export default.args would give the file one source of truth for the initial spacing and make future story additions less easy to miss.

Share FeedbackReview Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants