Svelte: Fix union types generating invalid labels in argTypes #31980

grantralls · 2025-07-07T19:53:35Z

Relates to #30142

What I did

When extracting the type args, props with union types were creating a labels array. Labels should be key-value maps that map an option to a new label. I compared to the other renderers and they don't generate labels at all from union types. I'm assuming it was a mistake. If that isn't the case I would love some direction.

In the tests for extractArgTypes Storybook uses "sveltedoc-parser" which is insufficient. It doesn't support typescript or new svelte features. When running storybook, it uses an internal docgen tool here to generate the type structure. In the future, to properly test extractArgTypes, Storybook may want to consider using the internal doc generator instead of sveltedoc-parser.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
end-to-end tests
integration tests

Manual testing

Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template svelte-vite/default-ts
Open Storybook in your browser
Access Example Button Primary story
Check the Controls Window to verify "flat" does not show as function flat() { [native code] }

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

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-storybook/src/sandbox-templates.ts
Make 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.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Fixes Svelte union type extraction for improved Controls panel display in Storybook, replacing label arrays with proper key-value maps.

Changes Button component from boolean primary prop to tri-state variant prop ('primary', 'secondary', 'flat') for better control options
Fixes Controls panel display issue where 'flat' was incorrectly showing as function flat() { [native code] }
Removes incorrect label array generation for union types during type extraction
Introduces variantToClass mapping for cleaner CSS class assignment based on variant selection
Improves type inference by using internal docgen tool instead of sveltedoc-parser

greptile-apps

LGTM

_{1 file reviewed, no comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps

_{2 files reviewed, 4 comments}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-07-07T20:21:59Z

code/frameworks/sveltekit/template/cli/ts/Button.svelte

  interface Props {
    /** Is this the principal call to action on the page? */
-    primary?: boolean;
+    variant?: 'primary' | 'secondary' | 'flat';


style: Consider adding @default 'primary' in the JSDoc since there's a default value in the code

greptile-apps · 2025-07-07T20:22:00Z

code/frameworks/sveltekit/template/cli/ts/Button.svelte

+  const variantToClass = {
+    primary: 'storybook-button--primary',
+    secondary: 'storybook-button--secondary',
+    flat: '',


style: Empty string for 'flat' variant might be unclear - consider adding a comment explaining why flat variant has no class

greptile-apps · 2025-07-07T20:22:01Z

code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte


 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+<Story name="Primary" args={{ variant: 'primary', label: 'Button' }} />


logic: Verify that Button.svelte component accepts 'variant' prop, as this was changed from 'primary' without corresponding component changes visible

There were component changes. Try not to hallucinate please.

greptile-apps · 2025-07-07T20:22:02Z

code/frameworks/sveltekit/template/cli/ts/Button.stories.svelte

-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+<Story name="Primary" args={{ variant: 'primary', label: 'Button' }} />

 <Story name="Secondary" args={{ label: 'Button' }} />


logic: Secondary story should explicitly set variant='secondary' for consistency with Primary story's pattern

…storybook into fix-svelte-extract-arg-types

storybook-app-bot · 2025-07-14T13:25:54Z

Package Benchmarks

^{Commit: 477ca9e, ran on 16 July 2025 at 15:02:50 UTC}

The following packages have significant changes to their size or dependencies:

`storybook`

	Before	After	Difference
Dependency count	51	51	0
Self size	31.76 MB	31.75 MB	🎉 -16 KB 🎉
Dependency size	17.43 MB	17.43 MB	0 B
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	52	52	0
Self size	1 KB	1 KB	0 B
Dependency size	49.20 MB	49.18 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	217	217	0
Self size	582 KB	582 KB	0 B
Dependency size	93.68 MB	93.66 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	186	186	0
Self size	31 KB	31 KB	0 B
Dependency size	77.77 MB	77.75 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

grantralls · 2025-07-14T14:40:04Z

I'll look into these CI/CD fails later today.

JReinhold

Thanks for the PR!

Indeed you are right, the added labels is wrong, and I have confirmed that removing them fixes the original issue with a "reverse" literal.

However we don't want to change any stories here. These stories are the default stories that all users get when creating a Storybook. For clarity and consistency, we want them to be the same across all our frameworks, so changing the Svelte stories to be a button with a variant prop would misalign it with all the other frameworks.

And we actually don't need to! We have heavy E2E testing for this, as we have stories that include every type of prop imaginable, where we can see the actual arg types being generated and the controls it generates:

In the future, to properly test extractArgTypes, Storybook may want to consider using the internal doc generator instead of sveltedoc-parser.

I agree, the unit tests here could use an update, as it relies on the old way of extracting arg types.

So if you update the PR to only include the change in extarctArgTypes.ts, then we can merge it :)

JReinhold · 2025-07-16T09:00:58Z

Also, this doesn't close #30142 as that is a general problem for all frameworks, while this PR only changes the Svelte. So I've updated the PR description to not close that issue on merge.

nx-cloud · 2025-07-16T09:03:01Z

View your CI Pipeline Execution ↗ for commit 477ca9e

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 5s	View ↗

☁️ Nx Cloud last updated this comment at 2025-07-16 18:19:42 UTC

grantralls · 2025-07-16T15:32:14Z

@JReinhold Thank you for the informative and constructive review. I've made the suggested changes.

JReinhold

LGTM ✨

Svelte: Fix union types generating invalid labels in argTypes (cherry picked from commit 628f30c)

removing labels from type unions

5de7c3e

greptile-apps bot reviewed Jul 7, 2025

View reviewed changes

grantralls marked this pull request as draft July 7, 2025 19:55

grantralls added 2 commits July 7, 2025 16:11

adding union type to button for manual tests

f532b91

remove trailing comma

cea8ce1

grantralls marked this pull request as ready for review July 7, 2025 20:21

greptile-apps bot reviewed Jul 7, 2025

View reviewed changes

grantralls added 2 commits July 7, 2025 16:27

adding comments and fixing secondary story

6b63b02

Merge branch 'fix-svelte-extract-arg-types' of github.com:grantralls/…

4c4a30b

…storybook into fix-svelte-extract-arg-types

grantralls changed the title ~~removing labels from type unions~~ Svelte: removing labels from type unions Jul 7, 2025

grantralls changed the title ~~Svelte: removing labels from type unions~~ Svelte: removing label generation with union-type props Jul 7, 2025

grantralls changed the title ~~Svelte: removing label generation with union-type props~~ Svelte: fixing label generation with union-type props Jul 8, 2025

adding explanation for empty flat mapping

f27837d

valentinpalkovic added bug argtypes ci:normal labels Jul 14, 2025

valentinpalkovic assigned yannbf and JReinhold Jul 14, 2025

grantralls and others added 2 commits July 14, 2025 10:40

Merge branch 'next' into fix-svelte-extract-arg-types

3c9376d

Merge branch 'next' into fix-svelte-extract-arg-types

73f030d

JReinhold requested changes Jul 16, 2025

View reviewed changes

JReinhold added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jul 16, 2025

grantralls added 2 commits July 16, 2025 10:51

reverting component & story changes

b7d3a49

reverting component & story changes

477ca9e

grantralls requested a review from JReinhold July 16, 2025 15:11

JReinhold approved these changes Jul 16, 2025

View reviewed changes

JReinhold changed the title ~~Svelte: fixing label generation with union-type props~~ Svelte: Fix union types generating invalid labels in argTypes Jul 16, 2025

JReinhold merged commit 628f30c into storybookjs:next Jul 16, 2025
50 of 51 checks passed

This was referenced Jul 16, 2025

Release: Patch 9.0.18 #32059

Merged

Release: Prerelease 9.1.0-alpha.9 #32060

Merged

yannbf pushed a commit that referenced this pull request Jul 22, 2025

Merge pull request #31980 from grantralls/fix-svelte-extract-arg-types

f72524b

Svelte: Fix union types generating invalid labels in argTypes (cherry picked from commit 628f30c)

github-actions bot mentioned this pull request Jul 22, 2025

Release: Patch 9.0.18 #32098

Closed

8 tasks

github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jul 22, 2025

github-actions bot mentioned this pull request Aug 13, 2025

[master] Michijs Dependabot changes michijs/michijs-storybook-template#68

Closed

ndelangen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Oct 28, 2025

Uh oh!

Svelte: Fix union types generating invalid labels in argTypes #31980

Svelte: Fix union types generating invalid labels in argTypes #31980

Uh oh!

Conversation

grantralls commented Jul 7, 2025 • edited by JReinhold Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

grantralls Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

storybook-app-bot bot commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

storybook

sb

@storybook/cli

@storybook/codemod

Uh oh!

grantralls commented Jul 14, 2025

Uh oh!

JReinhold left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JReinhold commented Jul 16, 2025

Uh oh!

nx-cloud bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

grantralls commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JReinhold left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

grantralls commented Jul 7, 2025 •

edited by JReinhold

Loading

storybook-app-bot bot commented Jul 14, 2025 •

edited

Loading

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

JReinhold left a comment •

edited

Loading

nx-cloud bot commented Jul 16, 2025 •

edited

Loading

grantralls commented Jul 16, 2025 •

edited

Loading