Using controls with svelte children

[brendan-morin]

Summary

Hi! I'm trying to sort out how to use controls in conjunction with e.g. defaults for values that are used in svelte children. I have this working for a default for stories where I have a Button component. But the way the button component accepts text is via svelte's children (e.g a snippet), and not e.g. a simple text parameter.

<script context="module" lang="ts">
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import { Mail } from 'lucide-svelte';

	import Button from '$lib/components/ui/button/button.svelte';

	/**
	 * Displays a button or a component that looks like a button.
	 */
	const { Story } = defineMeta({
		title: 'ui/Button',
		component: Button,
		tags: ['autodocs'],
		parameters: {
			layout: 'centered'
		},
		args: {
			variant: 'default',
			size: 'default',
			children: defaultChildren
		}
	});
</script>

{#snippet defaultChildren()}
	Button
{/snippet}

<!--
 The default form of the button, used for primary actions and commands.
 -->
<Story name="Default" />

<!--
 Use the "icon" size for a button with only an icon. Example of overriding children with non-text.
 -->
<Story name="Icon" args={{ variant: 'secondary', size: 'icon', title: 'Mail' }}>
  <Mail />
</Story>

So this does work for setting the default value to Button for everything, but it seems to preclude me from also using Control to set button text. It's really a minor thing (and I understand this doesn't fully generalize), but I was wondering if there is some way to pass values in using controls here. I tried this and it does not seem to work:

		argTypes: {
			children: {
				control: 'Button'
			}
		},

I also tried a few variants of using snippets here to no avail. Any advice or thoughts on this would be welcome. This is non-blocking, but I am just trying to understand how to more fluently use the framework in this case.

Additional information

main.ts

import type { StorybookConfig } from '@storybook/sveltekit';

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
	addons: [
		'@storybook/addon-svelte-csf',
		'@chromatic-com/storybook',
		'@storybook/addon-docs',
		'@storybook/addon-a11y',
		'@storybook/addon-vitest'
	],
	framework: {
		name: '@storybook/sveltekit',
		options: {}
	}
};
export default config;

Create a reproduction

No response

[dosubot[bot]]

Hi @brendan-morin! I'm Dosu and I’m helping the storybook team.

Storybook controls haven't traditionally worked with Svelte slot content (children) because controls/args are mapped to props, not slots. That's why your attempts to control the button text via the children arg didn't work out of the box.

However, there's now a new feature that lets you control the default slot using the children arg—just like you would with a prop. To enable this, add the following to your .storybook/main.ts under the framework.options section:

framework: {
  name: '@storybook/sveltekit',
  options: {
    childrenArgAsDefaultSlot: true
  }
}

With this enabled, you can use controls to set the children arg, and it will populate the default slot of your Svelte component. For example:

<Story
  name="Default"
  args={{ children: 'Button' }}
/>

Now, the controls panel will let you edit the button text live. The children arg can be a string, HTML, or even a Svelte component with props. Just make sure the value is JSON serializable for controls to work smoothly.

This feature is opt-in for now and will be enabled by default in a future Storybook major release. More details and examples are in the pull request and docs.

Let me know if you want a more detailed example or run into any issues!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[brendan-morin]

From what I can tell this feature was abandoned with this PR: #28393