Merge pull request #26715 from storybookjs/tags-docs

Docs: Add docs for story tags

docs/api/cli-options.md

@@ -1,5 +1,6 @@
 ---
 title: 'CLI options'
+hideRendererSelector: true
 ---
 
 The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.

docs/snippets/angular/tags-autodocs-in-meta.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// Button.stories.ts
+import type { Meta } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```

docs/snippets/angular/tags-autodocs-remove-component.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Page } from './Page';
+
+const meta: Meta<Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```

docs/snippets/angular/tags-autodocs-remove-story.ts.mdx

@@ -0,0 +1,20 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```

docs/snippets/angular/tags-combo-example.ts.mdx

@@ -0,0 +1,41 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    template: `
+      <div>
+        <demo-button variant={1}>
+        <demo-button variant={2}>
+        <!-- Etc... -->
+      </div>
+    `,
+  }),
+};
+```

docs/snippets/angular/tags-docs-only-in-meta.ts.mdx

@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```

docs/snippets/angular/tags-in-meta-and-story.ts.mdx

@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```

docs/snippets/angular/tags-remove-in-story.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```

docs/snippets/common/storybook-auto-docs-full-config.js.mdx

@@ -8,7 +8,6 @@ export default {
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
-    autodocs: 'tag',
     defaultName: 'Documentation',
   },
 };

docs/snippets/common/storybook-auto-docs-full-config.ts.mdx

@@ -10,7 +10,6 @@ const config: StorybookConfig = {
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
-    autodocs: 'tag',
     defaultName: 'Documentation',
   },
 };

docs/snippets/common/tags-autodocs-in-meta.js.mdx

@@ -0,0 +1,10 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```

docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx

@@ -0,0 +1,14 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```

docs/snippets/common/tags-autodocs-in-meta.ts.mdx

@@ -0,0 +1,14 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```

docs/snippets/common/tags-autodocs-in-preview.js.mdx

@@ -0,0 +1,8 @@
+```js
+// .storybook/preview.js
+export default {
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+};
+```

docs/snippets/common/tags-autodocs-in-preview.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import type { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+};
+
+export default preview;
+```

docs/snippets/common/tags-autodocs-remove-component.js.mdx

@@ -0,0 +1,10 @@
+```js
+// Page.stories.js
+import { Page } from './Page';
+
+export default {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```

docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx

@@ -0,0 +1,14 @@
+```ts
+// Page.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Page>;
+export default meta;
+```

docs/snippets/common/tags-autodocs-remove-component.ts.mdx

@@ -0,0 +1,14 @@
+```ts
+// Page.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```

docs/snippets/common/tags-autodocs-remove-story.js.mdx

@@ -0,0 +1,15 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```

docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx

@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```

docs/snippets/common/tags-autodocs-remove-story.ts.mdx

@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```