diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 7a352b15b0a6..991a7811b472 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -22,9 +22,7 @@ export const parameters: any = { filter: (story: PreparedStory) => { const tags = story.tags || []; return ( - tags.includes('autodocs') && - tags.filter((tag) => excludeTags[tag]).length === 0 && - !story.parameters.docs?.disable + tags.filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable ); }, }, diff --git a/code/ui/blocks/src/blocks/Stories.stories.tsx b/code/ui/blocks/src/blocks/Stories.stories.tsx index 9462f5f2a2dd..0c91aec638e6 100644 --- a/code/ui/blocks/src/blocks/Stories.stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.stories.tsx @@ -26,3 +26,13 @@ export const DifferentToolbars: Story = { relativeCsfPaths: ['../examples/StoriesParameters.stories'], }, }; +export const NoAutodocs: Story = { + parameters: { + relativeCsfPaths: ['../examples/ButtonNoAutodocs.stories'], + }, +}; +export const SomeAutodocs: Story = { + parameters: { + relativeCsfPaths: ['../examples/ButtonSomeAutodocs.stories'], + }, +}; diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index 8681e4151c4d..c2b5c53dc729 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -34,6 +34,17 @@ export const Stories: FC = ({ title = 'Stories', includePrimary = if (filter) { stories = stories.filter((story) => filter(story, getStoryContext(story))); } + // NOTE: this should be part of the default filter function. However, there is currently + // no way to distinguish a Stories block in an autodocs page from Stories in an MDX file + // making https://github.com/storybookjs/storybook/pull/26634 an unintentional breaking change. + // + // The new behavior here is that if NONE of the stories in the autodocs page are tagged + // with 'autodocs', we show all stories. If ANY of the stories have autodocs then we use + // the new behavior. + const hasAutodocsTaggedStory = stories.some((story) => story.tags?.includes('autodocs')); + if (hasAutodocsTaggedStory) { + stories = stories.filter((story) => story.tags?.includes('autodocs')); + } if (!includePrimary) stories = stories.slice(1); diff --git a/code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx b/code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx new file mode 100644 index 000000000000..c934e70753f2 --- /dev/null +++ b/code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './Button'; + +const meta = { + title: 'examples/ButtonNoAutodocs', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, + parameters: { + chromatic: { disable: true }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; diff --git a/code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx b/code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx new file mode 100644 index 000000000000..dd5f7d227f49 --- /dev/null +++ b/code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './Button'; + +const meta = { + title: 'examples/ButtonSomeAutodocs', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, + parameters: { + chromatic: { disable: true }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + tags: ['autodocs'], + args: { + label: 'Button', + }, +};