Merge pull request #27144 from storybookjs/shilman/27143-fix-stories-…

…block-in-mdx

Docs: Fix MDX Stories block tag-filtering behavior
(cherry picked from commit ce3d0d5)

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
         );
       },
     },

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'],
+  },
+};

code/ui/blocks/src/blocks/Stories.tsx

@@ -34,6 +34,17 @@ export const Stories: FC<StoriesProps> = ({ 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);
 

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<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};

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<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  tags: ['autodocs'],
+  args: {
+    label: 'Button',
+  },
+};