From 427ec4433d6d6cea778c4650237450b8ad7db719 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 21 Dec 2022 21:49:57 +1100
Subject: [PATCH] Rename docsPage to autodocs

And change semantics: `docsPage:true` = `autodocs: 'tag'` and `docsPage: 'automatic'` = `autodocs: true`.
---
 MIGRATION.md                                  | 16 +++----
 code/addons/docs/src/preset.ts                |  2 +-
 .../stories/docspage/autoplay.stories.ts      |  2 +-
 .../stories/docspage/basic.stories.ts         |  2 +-
 .../stories/docspage/description.stories.ts   |  2 +-
 .../docspage/extract-description.stories.ts   |  2 +-
 .../stories/docspage/iframe.stories.ts        |  2 +-
 .../stories/docspage/overflow.stories.ts      |  2 +-
 .../stories/docspage/override.stories.ts      |  2 +-
 .../stories/docspage/source.stories.ts        |  2 +-
 .../angular/template/cli/Button.stories.ts    |  2 +-
 .../angular/template/cli/Header.stories.ts    |  4 +-
 .../nextjs/template/cli/js/Button.stories.js  |  2 +-
 .../nextjs/template/cli/js/Header.stories.js  |  4 +-
 .../template/cli/ts-legacy/Button.stories.ts  |  2 +-
 .../template/cli/ts-legacy/Header.stories.ts  |  4 +-
 ...docsPage-automatic.ts => autodocs-true.ts} | 26 +++++------
 code/lib/cli/src/automigrate/fixes/index.ts   |  4 +-
 code/lib/cli/src/generators/baseGenerator.ts  |  2 +-
 .../src/utils/StoryIndexGenerator.test.ts     | 46 +++++++++----------
 .../src/utils/StoryIndexGenerator.ts          | 10 ++--
 .../utils/__mockdata__/duplicate/A.stories.js |  2 +-
 .../__mockdata__/duplicate/SecondA.stories.js |  2 +-
 .../src/utils/__mockdata__/src/A.stories.js   |  2 +-
 .../src/utils/__mockdata__/src/B.stories.ts   |  2 +-
 .../src/utils/__mockdata__/src/D.stories.jsx  |  2 +-
 .../src/utils/stories-json.test.ts            | 18 ++++----
 .../core-server/src/utils/summarizeIndex.ts   |  6 +--
 .../modules/client-api/StoryStoreFacade.ts    |  8 ++--
 .../src/modules/core-client/start.test.ts     | 38 +++++++--------
 .../template/stories/shortcuts.stories.ts     |  2 +-
 code/lib/types/src/modules/core-common.ts     |  7 +--
 .../html/template/cli/js/Button.stories.js    |  2 +-
 .../html/template/cli/js/Header.stories.js    |  4 +-
 .../html/template/cli/ts/Button.stories.ts    |  2 +-
 .../html/template/cli/ts/Header.stories.ts    |  4 +-
 .../preact/template/cli/Button.stories.jsx    |  2 +-
 .../preact/template/cli/Header.stories.jsx    |  4 +-
 .../react/template/cli/js/Button.stories.js   |  2 +-
 .../react/template/cli/js/Header.stories.js   |  4 +-
 .../react/template/cli/ts/Button.stories.ts   |  2 +-
 .../react/template/cli/ts/Header.stories.ts   |  4 +-
 .../svelte/template/cli/js/Button.stories.js  |  2 +-
 .../svelte/template/cli/js/Header.stories.js  |  4 +-
 .../template/cli/ts-legacy/Button.stories.ts  |  2 +-
 .../template/cli/ts-legacy/Header.stories.ts  |  4 +-
 .../svelte/template/cli/ts/Button.stories.ts  |  2 +-
 .../svelte/template/cli/ts/Header.stories.ts  |  4 +-
 .../vue/template/cli/Button.stories.js        |  2 +-
 .../vue/template/cli/Header.stories.js        |  4 +-
 .../vue3/template/cli/Button.stories.js       |  2 +-
 .../vue3/template/cli/Header.stories.js       |  4 +-
 .../template/cli/js/Button.stories.js         |  2 +-
 .../template/cli/js/Header.stories.js         |  4 +-
 .../template/cli/ts/Button.stories.ts         |  2 +-
 .../template/cli/ts/Header.stories.ts         |  4 +-
 .../blocks/src/controls/Boolean.stories.tsx   |  2 +-
 code/ui/blocks/src/controls/Color.stories.tsx |  2 +-
 code/ui/blocks/src/controls/Date.stories.tsx  |  2 +-
 code/ui/blocks/src/controls/Files.stories.tsx |  2 +-
 .../ui/blocks/src/controls/Number.stories.tsx |  2 +-
 .../ui/blocks/src/controls/Object.stories.tsx |  2 +-
 code/ui/blocks/src/controls/Range.stories.tsx |  2 +-
 code/ui/blocks/src/controls/Text.stories.tsx  |  2 +-
 .../controls/options/CheckOptions.stories.tsx |  2 +-
 .../controls/options/RadioOptions.stories.tsx |  2 +-
 .../options/SelectOptions.stories.tsx         |  2 +-
 .../angular/button-story-auto-docs.ts.mdx     |  2 +-
 .../storybook-auto-docs-full-config.js.mdx    |  4 +-
 .../storybook-auto-docs-full-config.ts.mdx    |  4 +-
 ...torybook-main-config-remark-options.js.mdx |  2 +-
 ...torybook-main-config-remark-options.ts.mdx |  2 +-
 .../react/button-story-auto-docs.js.mdx       |  2 +-
 .../react/button-story-auto-docs.ts.mdx       |  2 +-
 .../svelte/button-story-auto-docs.js.mdx      |  2 +-
 .../vue/button-story-auto-docs.js.mdx         |  2 +-
 .../vue/button-story-auto-docs.ts.mdx         |  2 +-
 docs/writing-docs/docs-page.md                |  4 +-
 78 files changed, 176 insertions(+), 175 deletions(-)
 rename code/lib/cli/src/automigrate/fixes/{docsPage-automatic.ts => autodocs-true.ts} (58%)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2cca9327d9d9..d922d696fabd 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -40,7 +40,7 @@
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
-    - [Docs Page](#docs-page)
+    - [Autodocs](#autodocs)
     - [Configuring the Docs Container](#configuring-the-docs-container)
     - [External Docs](#external-docs)
     - [MDX2 upgrade](#mdx2-upgrade)
@@ -754,32 +754,32 @@ import * as SecondComponentStories from './second-component.stories';
 <Story of={SecondComponentStories.standard} meta={SecondComponentStories} />
 ```
 
-#### Docs Page
+#### Autodocs
 
-In 7.0, rather than rendering each story in "docs view mode", Docs Page operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
+In 7.0, rather than rendering each story in "docs view mode", Autodocs (ex. "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`.
 
-You can configure Docs Page in `main.js`:
+You can configure Autodocs in `main.js`:
 
 ```js
 module.exports = {
   docs: {
-    docsPage: 'automatic', // see below for alternatives
+    autodocs: true, // see below for alternatives
     defaultName: 'Docs', // set to change the name of generated docs entries
   },
 };
 ```
 
-If you are migrating from 6.x your `docs.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export:
+If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export:
 
 ```ts
 export default {
   component: MyComponent
   // Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
-  tags: ['docsPage']
+  tags: ['autodocs']
 }
 ```
 
-You can also set `docsPage: false` to opt-out of docs page entirely.
+You can also set `autodocs: false` to opt-out of Autodocs entirely.
 
 You can change the default template in the same way as in 6.x, using the `docs.page` parameter.
 
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 67ba5aeaeb3d..9438433d3fa0 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -152,7 +152,7 @@ const docs = (docsOptions: DocsOptions) => {
     ...docsOptions,
     disable: true,
     defaultName: 'Docs',
-    docsPage: true,
+    autodocs: 'tag',
   };
 };
 
diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
index 50b01ae74504..7f32348bc00c 100644
--- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts
+++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
@@ -4,7 +4,7 @@ import { within } from '@storybook/testing-library';
 
 export default {
   component: globalThis.Components.Pre,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { text: 'Play has not run' },
   parameters: { chromatic: { disable: true } },
 };
diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
index cf8768751607..72d1059758d7 100644
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };
diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts
index 98ed1de51473..f42edc5901c3 100644
--- a/code/addons/docs/template/stories/docspage/description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/description.stories.ts
@@ -6,7 +6,7 @@ export default {
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {
diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
index bc9033127f68..cb5986ac7dbe 100644
--- a/code/addons/docs/template/stories/docspage/extract-description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {
diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts
index 8a087afca04a..80cff47272c8 100644
--- a/code/addons/docs/template/stories/docspage/iframe.stories.ts
+++ b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Rendered in iframe' },
   parameters: {
     chromatic: { disable: true },
diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts
index 9c3c7f7b70d9..71893031af5b 100644
--- a/code/addons/docs/template/stories/docspage/overflow.stories.ts
+++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Pre,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: {
     text: 'Demonstrates overflow',
     style: { width: 2000, height: 500, background: 'hotpink' },
diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts
index 0f46a108c325..18d2d4e5e25c 100644
--- a/code/addons/docs/template/stories/docspage/override.stories.ts
+++ b/code/addons/docs/template/stories/docspage/override.stories.ts
@@ -15,7 +15,7 @@ const Override = () => 'overridden';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: {
     chromatic: { disable: true },
diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts
index 84d12fe56f1c..9d30522758d2 100644
--- a/code/addons/docs/template/stories/docspage/source.stories.ts
+++ b/code/addons/docs/template/stories/docspage/source.stories.ts
@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };
diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts
index 6bcd3ee47389..85ce82c88270 100644
--- a/code/frameworks/angular/template/cli/Button.stories.ts
+++ b/code/frameworks/angular/template/cli/Button.stories.ts
@@ -5,7 +5,7 @@ import Button from './button.component';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args: Button) => ({
     props: {
       backgroundColor: null,
diff --git a/code/frameworks/angular/template/cli/Header.stories.ts b/code/frameworks/angular/template/cli/Header.stories.ts
index 70852b3205f9..a4be511312bc 100644
--- a/code/frameworks/angular/template/cli/Header.stories.ts
+++ b/code/frameworks/angular/template/cli/Header.stories.ts
@@ -8,8 +8,8 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js
index d9d3e1b70574..116ce20366a9 100644
--- a/code/frameworks/nextjs/template/cli/js/Button.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js
@@ -4,7 +4,7 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: {
       control: 'color',
diff --git a/code/frameworks/nextjs/template/cli/js/Header.stories.js b/code/frameworks/nextjs/template/cli/js/Header.stories.js
index a931a5e8b9f7..d34acd2e7405 100644
--- a/code/frameworks/nextjs/template/cli/js/Header.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Header.stories.js
@@ -3,8 +3,8 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts
index 000d644a4299..382a9ae49a1f 100644
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts
@@ -6,7 +6,7 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: {
       control: 'color',
diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts
index 18a379082fbe..a31fea43f119 100644
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts
@@ -4,8 +4,8 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/lib/cli/src/automigrate/fixes/docsPage-automatic.ts b/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
similarity index 58%
rename from code/lib/cli/src/automigrate/fixes/docsPage-automatic.ts
rename to code/lib/cli/src/automigrate/fixes/autodocs-true.ts
index c7daedf41f89..4b520792057d 100644
--- a/code/lib/cli/src/automigrate/fixes/docsPage-automatic.ts
+++ b/code/lib/cli/src/automigrate/fixes/autodocs-true.ts
@@ -9,15 +9,15 @@ import type { Fix } from '../types';
 
 const logger = console;
 
-interface DocsPageAutomaticFrameworkRunOptions {
+interface AutodocsTrueFrameworkRunOptions {
   main: ConfigFile;
 }
 
 /**
- * Set the docs.docsPage option to automatic if it isn't already set
+ * Set the docs.autodocs option to true if it isn't already set
  */
-export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
-  id: 'docsPageAutomatic',
+export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
+  id: 'autodocsTrue',
 
   async check({ packageManager }) {
     const packageJson = packageManager.retrievePackageJson();
@@ -32,29 +32,29 @@ export const docsPageAutomatic: Fix<DocsPageAutomaticFrameworkRunOptions> = {
     const main = await readConfig(mainConfig);
     const docs = main.getFieldValue(['docs']);
 
-    return docs?.docsPage === undefined ? { main } : null;
+    return docs?.autodocs === undefined ? { main } : null;
   },
 
   prompt() {
-    const docsPageAutomaticFormatted = chalk.cyan(`docs: { docsPage: 'automatic' }`);
+    const AutodocsTrueFormatted = chalk.cyan(`docs: { autodocs: true }`);
 
     return dedent`
-      We've detected that your main.js configuration file has not configured docsPage. In 6.x we
-      we defaulted to having a docsPage for every story, in 7.x you need to opt in per-component.
-      However, we can set the \`docs.docsPage\` to 'automatic' to approximate the old behaviour:
+      We've detected that your main.js configuration file has not configured autodocs. In 6.x we
+      we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
+      However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
 
-      ${docsPageAutomaticFormatted}
+      ${AutodocsTrueFormatted}
 
       More info: ${chalk.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-page'
+        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs'
       )}
     `;
   },
 
   async run({ result: { main }, dryRun }) {
-    logger.info(`✅ Setting 'docs.docsPage' to 'automatic' in main.js`);
+    logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
     if (!dryRun) {
-      main.setFieldValue(['docs', 'docsPage'], 'automatic');
+      main.setFieldValue(['docs', 'autodocs'], true);
       await writeConfig(main);
     }
   },
diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts
index b338cd10e9ca..924c558d3314 100644
--- a/code/lib/cli/src/automigrate/fixes/index.ts
+++ b/code/lib/cli/src/automigrate/fixes/index.ts
@@ -13,7 +13,7 @@ import { nextjsFramework } from './nextjs-framework';
 import { newFrameworks } from './new-frameworks';
 import { removedGlobalClientAPIs } from './remove-global-client-apis';
 import { mdx1to2 } from './mdx-1-to-2';
-import { docsPageAutomatic } from './docsPage-automatic';
+import { autodocsTrue } from './autodocs-true';
 import { sveltekitFramework } from './sveltekit-framework';
 import { addReact } from './add-react';
 import { nodeJsRequirement } from './nodejs-requirement';
@@ -36,6 +36,6 @@ export const fixes: Fix[] = [
   nextjsFramework,
   removedGlobalClientAPIs,
   mdx1to2,
-  docsPageAutomatic,
+  autodocsTrue,
   addReact,
 ];
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index a8b134ef5a18..bfd1ab8ac3e3 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -198,7 +198,7 @@ export async function baseGenerator(
 
   await configureMain({
     framework: { name: frameworkInclude, options: options.framework || {} },
-    docs: { docsPage: true },
+    docs: { autodocs: 'tag' },
     addons: pnp ? addons.map(wrapForPnp) : addons,
     extensions,
     commonJs,
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index 22a41201f099..9996390366c7 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -53,7 +53,7 @@ const options = {
   ] as StoryIndexer[],
   storiesV2Compatibility: false,
   storyStoreV7: true,
-  docs: { disabled: false, defaultName: 'docs', docsPage: false },
+  docs: { disabled: false, defaultName: 'docs', autodocs: false },
 };
 
 describe('StoryIndexGenerator', () => {
@@ -172,7 +172,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "B",
@@ -183,7 +183,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "D",
@@ -304,18 +304,18 @@ describe('StoryIndexGenerator', () => {
       });
     });
 
-    describe('docsPage', () => {
-      const docsPageOptions = {
+    describe('autodocs', () => {
+      const autodocsOptions = {
         ...options,
-        docs: { ...options.docs, docsPage: true },
+        docs: { ...options.docs, autodocs: 'tag' as const },
       };
-      it('generates an entry per CSF file with the docsPage tag', async () => {
+      it('generates an entry per CSF file with the autodocs tag', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/**/*.stories.(ts|js|jsx)',
           options
         );
 
-        const generator = new StoryIndexGenerator([specifier], docsPageOptions);
+        const generator = new StoryIndexGenerator([specifier], autodocsOptions);
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
@@ -329,7 +329,7 @@ describe('StoryIndexGenerator', () => {
                 "storiesImports": Array [],
                 "tags": Array [
                   "component-tag",
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "A",
@@ -353,7 +353,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": false,
                 "storiesImports": Array [],
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "B",
@@ -364,7 +364,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "B",
@@ -377,7 +377,7 @@ describe('StoryIndexGenerator', () => {
                 "standalone": false,
                 "storiesImports": Array [],
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "D",
@@ -388,7 +388,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "D",
@@ -431,17 +431,17 @@ describe('StoryIndexGenerator', () => {
         `);
       });
 
-      it('generates an entry for every CSF file when docsOptions.docsPage = automatic', async () => {
+      it('generates an entry for every CSF file when docsOptions.autodocs = true', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/**/*.stories.(ts|js|jsx)',
           options
         );
 
         const generator = new StoryIndexGenerator([specifier], {
-          ...docsPageOptions,
+          ...autodocsOptions,
           docs: {
-            ...docsPageOptions.docs,
-            docsPage: 'automatic',
+            ...autodocsOptions.docs,
+            autodocs: true,
           },
         });
         await generator.initialize();
@@ -475,7 +475,7 @@ describe('StoryIndexGenerator', () => {
           options
         );
 
-        const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], docsPageOptions);
+        const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], autodocsOptions);
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
@@ -519,7 +519,7 @@ describe('StoryIndexGenerator', () => {
           options
         );
 
-        const generator = new StoryIndexGenerator([specifier], docsPageOptions);
+        const generator = new StoryIndexGenerator([specifier], autodocsOptions);
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
@@ -534,7 +534,7 @@ describe('StoryIndexGenerator', () => {
                   "./duplicate/SecondA.stories.js",
                 ],
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "duplicate/A",
@@ -545,7 +545,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./duplicate/A.stories.js",
                 "name": "Story One",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "duplicate/A",
@@ -556,7 +556,7 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./duplicate/SecondA.stories.js",
                 "name": "Story Two",
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "duplicate/A",
@@ -575,7 +575,7 @@ describe('StoryIndexGenerator', () => {
           options
         );
 
-        const generator = new StoryIndexGenerator([csfSpecifier], docsPageOptions);
+        const generator = new StoryIndexGenerator([csfSpecifier], autodocsOptions);
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 496db833959b..502b87071999 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -67,7 +67,7 @@ const makeAbsolute = (otherImport: Path, normalizedPath: Path, workingDir: Path)
  *
  * A stories file is indexed by an indexer (passed in), which produces a list of stories.
  *   - If the stories have the `parameters.docsOnly` setting, they are disregarded.
- *   - If the indexer is a "docs template" indexer, OR docsPage is enabled,
+ *   - If the indexer is a "docs template" indexer, OR autodocs is enabled,
  *       a templated docs entry is added pointing to the story file.
  *
  * A (modern) docs file is indexed, a standalone docs entry is added.
@@ -235,13 +235,13 @@ export class StoryIndexGenerator {
       });
 
       if (!this.options.docs.disable && csf.stories.length) {
-        const { docsPage } = this.options.docs;
-        const docsPageOptedIn =
-          docsPage === 'automatic' || (docsPage && componentTags.includes('docsPage'));
+        const { autodocs } = this.options.docs;
+        const autodocsOptedIn =
+          autodocs === true || (autodocs === 'tag' && componentTags.includes('autodocs'));
         // We need a docs entry attached to the CSF file if either:
         //  a) it is a stories.mdx transpiled to CSF, OR
         //  b) we have docs page enabled for this file
-        if (componentTags.includes('mdx') || docsPageOptedIn) {
+        if (componentTags.includes('mdx') || autodocsOptedIn) {
           const name = this.options.docs.defaultName;
           const id = toId(csf.meta.title, name);
           entries.unshift({
diff --git a/code/lib/core-server/src/utils/__mockdata__/duplicate/A.stories.js b/code/lib/core-server/src/utils/__mockdata__/duplicate/A.stories.js
index 4dcd5cd6ef0c..072a6eb00438 100644
--- a/code/lib/core-server/src/utils/__mockdata__/duplicate/A.stories.js
+++ b/code/lib/core-server/src/utils/__mockdata__/duplicate/A.stories.js
@@ -2,7 +2,7 @@ const component = {};
 export default {
   component,
   title: 'duplicate/A',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
 };
 
 export const StoryOne = {};
diff --git a/code/lib/core-server/src/utils/__mockdata__/duplicate/SecondA.stories.js b/code/lib/core-server/src/utils/__mockdata__/duplicate/SecondA.stories.js
index f7a2fe743116..dd3b98c69b53 100644
--- a/code/lib/core-server/src/utils/__mockdata__/duplicate/SecondA.stories.js
+++ b/code/lib/core-server/src/utils/__mockdata__/duplicate/SecondA.stories.js
@@ -2,7 +2,7 @@ const component = {};
 export default {
   component,
   title: 'duplicate/A',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
 };
 
 export const StoryTwo = {};
diff --git a/code/lib/core-server/src/utils/__mockdata__/src/A.stories.js b/code/lib/core-server/src/utils/__mockdata__/src/A.stories.js
index 849343a613e6..7469b43dc0e3 100644
--- a/code/lib/core-server/src/utils/__mockdata__/src/A.stories.js
+++ b/code/lib/core-server/src/utils/__mockdata__/src/A.stories.js
@@ -1,7 +1,7 @@
 const component = {};
 export default {
   component,
-  tags: ['component-tag', 'docsPage'],
+  tags: ['component-tag', 'autodocs'],
 };
 
 export const StoryOne = { tags: ['story-tag'] };
diff --git a/code/lib/core-server/src/utils/__mockdata__/src/B.stories.ts b/code/lib/core-server/src/utils/__mockdata__/src/B.stories.ts
index a41f1009ff48..bb14d42c7112 100644
--- a/code/lib/core-server/src/utils/__mockdata__/src/B.stories.ts
+++ b/code/lib/core-server/src/utils/__mockdata__/src/B.stories.ts
@@ -1,7 +1,7 @@
 const component = {};
 export default {
   component,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
 };
 
 export const StoryOne = {};
diff --git a/code/lib/core-server/src/utils/__mockdata__/src/D.stories.jsx b/code/lib/core-server/src/utils/__mockdata__/src/D.stories.jsx
index a41f1009ff48..bb14d42c7112 100644
--- a/code/lib/core-server/src/utils/__mockdata__/src/D.stories.jsx
+++ b/code/lib/core-server/src/utils/__mockdata__/src/D.stories.jsx
@@ -1,7 +1,7 @@
 const component = {};
 export default {
   component,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
 };
 
 export const StoryOne = {};
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index e6499d77ad42..5282091e189c 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -62,7 +62,7 @@ const getInitializedStoryIndexGenerator = async (
     workingDir,
     storiesV2Compatibility: false,
     storyStoreV7: true,
-    docs: { disable: false, defaultName: 'docs', docsPage: false },
+    docs: { disable: false, defaultName: 'docs', autodocs: false },
     ...overrides,
   });
   await generator.initialize();
@@ -163,7 +163,7 @@ describe('useStoriesJson', () => {
               "importPath": "./src/B.stories.ts",
               "name": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "B",
@@ -174,7 +174,7 @@ describe('useStoriesJson', () => {
               "importPath": "./src/D.stories.jsx",
               "name": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "D",
@@ -357,7 +357,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "B",
@@ -374,7 +374,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "D",
@@ -558,7 +558,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "B",
@@ -575,7 +575,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "D",
@@ -726,7 +726,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "B",
@@ -743,7 +743,7 @@ describe('useStoriesJson', () => {
               },
               "story": "Story One",
               "tags": Array [
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "D",
diff --git a/code/lib/core-server/src/utils/summarizeIndex.ts b/code/lib/core-server/src/utils/summarizeIndex.ts
index 0fef5a226101..fca99cb25e97 100644
--- a/code/lib/core-server/src/utils/summarizeIndex.ts
+++ b/code/lib/core-server/src/utils/summarizeIndex.ts
@@ -2,7 +2,7 @@ import type { StoryIndex } from '@storybook/types';
 
 export function summarizeIndex(storyIndex: StoryIndex) {
   let storyCount = 0;
-  let docsPageCount = 0;
+  let autodocsCount = 0;
   let storiesMdxCount = 0;
   let mdxCount = 0;
   Object.values(storyIndex.entries).forEach((entry) => {
@@ -14,13 +14,13 @@ export function summarizeIndex(storyIndex: StoryIndex) {
       } else if (entry.importPath.endsWith('.mdx')) {
         storiesMdxCount += 1;
       } else {
-        docsPageCount += 1;
+        autodocsCount += 1;
       }
     }
   });
   return {
     storyCount,
-    docsPageCount,
+    autodocsCount,
     storiesMdxCount,
     mdxCount,
     version: storyIndex.v,
diff --git a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts
index 1a9b6a88675d..db4fe2ffeb25 100644
--- a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts
+++ b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts
@@ -195,11 +195,11 @@ export class StoryStoreFacade<TRenderer extends Renderer> {
 
     // NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator`
     const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions;
-    const docsPageOptedIn =
-      docsOptions.docsPage === 'automatic' ||
-      (docsOptions.docsPage && componentTags.includes('docsPage'));
+    const autodocsOptedIn =
+      docsOptions.autodocs === true ||
+      (docsOptions.autodocs === 'tag' && componentTags.includes('autodocs'));
     if (!docsOptions.disable && storyExports.length) {
-      if (componentTags.includes('mdx') || docsPageOptedIn) {
+      if (componentTags.includes('mdx') || autodocsOptedIn) {
         const name = docsOptions.defaultName;
         const docsId = toId(componentId || title, name);
         this.entries[docsId] = {
diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts
index e1ff3478fc32..d8b00653c063 100644
--- a/code/lib/preview-api/src/modules/core-client/start.test.ts
+++ b/code/lib/preview-api/src/modules/core-client/start.test.ts
@@ -581,7 +581,7 @@ describe('start', () => {
   const componentCExports = {
     default: {
       title: 'Component C',
-      tags: ['component-tag', 'docsPage'],
+      tags: ['component-tag', 'autodocs'],
     },
     StoryOne: {
       render: jest.fn(),
@@ -635,7 +635,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -756,7 +756,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -776,7 +776,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -847,7 +847,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -919,7 +919,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -1126,7 +1126,7 @@ describe('start', () => {
               },
               "tags": Array [
                 "component-tag",
-                "docsPage",
+                "autodocs",
                 "story",
               ],
               "title": "Component C",
@@ -1148,12 +1148,12 @@ describe('start', () => {
       );
     });
 
-    describe('docsPage', () => {
+    describe('autodocs', () => {
       beforeEach(() => {
-        global.DOCS_OPTIONS = { disable: false, docsPage: true, defaultName: 'Docs' };
+        global.DOCS_OPTIONS = { disable: false, autodocs: 'tag', defaultName: 'Docs' };
       });
 
-      it('adds stories for each component with docsPage tag', async () => {
+      it('adds stories for each component with autodocs tag', async () => {
         const renderToCanvas = jest.fn();
 
         const { configure, clientApi } = start(renderToCanvas);
@@ -1165,7 +1165,7 @@ describe('start', () => {
 
           clientApi
             .storiesOf('Component B', { id: 'file2' } as NodeModule)
-            .addParameters({ tags: ['docsPage'] })
+            .addParameters({ tags: ['autodocs'] })
             .add('Story Three', jest.fn());
 
           return [componentCExports];
@@ -1224,7 +1224,7 @@ describe('start', () => {
                 "standalone": false,
                 "storiesImports": Array [],
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "Component B",
@@ -1245,7 +1245,7 @@ describe('start', () => {
                   "framework": "test",
                 },
                 "tags": Array [
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "Component B",
@@ -1259,7 +1259,7 @@ describe('start', () => {
                 "storiesImports": Array [],
                 "tags": Array [
                   "component-tag",
-                  "docsPage",
+                  "autodocs",
                   "docs",
                 ],
                 "title": "Component C",
@@ -1298,7 +1298,7 @@ describe('start', () => {
                 },
                 "tags": Array [
                   "component-tag",
-                  "docsPage",
+                  "autodocs",
                   "story",
                 ],
                 "title": "Component C",
@@ -1310,12 +1310,12 @@ describe('start', () => {
         `);
       });
     });
-    describe('when docsOptions.docsPage = automatic', () => {
+    describe('when docsOptions.autodocs = true', () => {
       beforeEach(() => {
-        global.DOCS_OPTIONS = { disable: false, docsPage: 'automatic', defaultName: 'Docs' };
+        global.DOCS_OPTIONS = { disable: false, autodocs: true, defaultName: 'Docs' };
       });
 
-      it('adds stories for each component with docsPage tag', async () => {
+      it('adds stories for each component with autodocs tag', async () => {
         const renderToDOM = jest.fn();
 
         const { configure, clientApi } = start(renderToDOM);
@@ -1330,7 +1330,7 @@ describe('start', () => {
 
           clientApi
             .storiesOf('Component B', { id: 'file2' } as NodeModule)
-            .addParameters({ tags: ['docsPage'] })
+            .addParameters({ tags: ['autodocs'] })
             .add('Story Three', jest.fn());
 
           return [componentCExports];
diff --git a/code/lib/store/template/stories/shortcuts.stories.ts b/code/lib/store/template/stories/shortcuts.stories.ts
index a55abe8a9a8f..b72fd88fa2ba 100644
--- a/code/lib/store/template/stories/shortcuts.stories.ts
+++ b/code/lib/store/template/stories/shortcuts.stories.ts
@@ -6,7 +6,7 @@ import type { PlayFunctionContext } from '@storybook/csf';
 
 export default {
   component: globalThis.Components.Form,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
 };
 
 export const KeydownDuringPlay = {
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index cde04dbffd1b..458355fc22e2 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -253,10 +253,11 @@ export type DocsOptions = {
    */
   defaultName?: string;
   /**
-   * Should we generate a docs entry per CSF file with the `docsPage` tag?
-   * Set to 'automatic' to generate an entry irrespective of tag.
+   * Should we generate a docs entry per CSF file?
+   * Set to 'tag' (the default) to generate an entry for every CSF file with the
+   * 'autodocs' tag.
    */
-  docsPage?: boolean | 'automatic';
+  autodocs?: boolean | 'tag';
   /**
    * Only show doc entries in the side bar (usually set with the `--docs` CLI flag)
    */
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
index bdba2f4c7773..7b2348719149 100644
--- a/code/renderers/html/template/cli/js/Button.stories.js
+++ b/code/renderers/html/template/cli/js/Button.stories.js
@@ -3,7 +3,7 @@ import { createButton } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/html/writing-stories/introduction
 export default {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: ({ label, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
index e5f8f59e7878..cc92429941a0 100644
--- a/code/renderers/html/template/cli/js/Header.stories.js
+++ b/code/renderers/html/template/cli/js/Header.stories.js
@@ -2,8 +2,8 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => createHeader(args),
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
diff --git a/code/renderers/html/template/cli/ts/Button.stories.ts b/code/renderers/html/template/cli/ts/Button.stories.ts
index 1a55ba472b1b..9cdb809233ea 100644
--- a/code/renderers/html/template/cli/ts/Button.stories.ts
+++ b/code/renderers/html/template/cli/ts/Button.stories.ts
@@ -5,7 +5,7 @@ import { createButton } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
diff --git a/code/renderers/html/template/cli/ts/Header.stories.ts b/code/renderers/html/template/cli/ts/Header.stories.ts
index 740e913c70e8..cb31aa1cb772 100644
--- a/code/renderers/html/template/cli/ts/Header.stories.ts
+++ b/code/renderers/html/template/cli/ts/Header.stories.ts
@@ -4,8 +4,8 @@ import { createHeader } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => createHeader(args),
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
index 0579c20e3c87..20f34564ffa3 100644
--- a/code/renderers/preact/template/cli/Button.stories.jsx
+++ b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -4,7 +4,7 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
     onClick: { action: 'onClick' },
diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
index 88f9d9dc2d1a..9dbdc4479a43 100644
--- a/code/renderers/preact/template/cli/Header.stories.jsx
+++ b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -3,8 +3,8 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/preact/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/preact/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/preact/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js
index 13eb502b1092..0f57d469c9bb 100644
--- a/code/renderers/react/template/cli/js/Button.stories.js
+++ b/code/renderers/react/template/cli/js/Button.stories.js
@@ -4,7 +4,7 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/code/renderers/react/template/cli/js/Header.stories.js b/code/renderers/react/template/cli/js/Header.stories.js
index ecf3ad03017d..1c326bc0a8f8 100644
--- a/code/renderers/react/template/cli/js/Header.stories.js
+++ b/code/renderers/react/template/cli/js/Header.stories.js
@@ -3,8 +3,8 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/react/template/cli/ts/Button.stories.ts b/code/renderers/react/template/cli/ts/Button.stories.ts
index 8c56e54d78fa..af4e0c310239 100644
--- a/code/renderers/react/template/cli/ts/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts/Button.stories.ts
@@ -6,7 +6,7 @@ import { Button } from './Button';
 const meta = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/code/renderers/react/template/cli/ts/Header.stories.ts b/code/renderers/react/template/cli/ts/Header.stories.ts
index 180acbbae398..919246dbcb06 100644
--- a/code/renderers/react/template/cli/ts/Header.stories.ts
+++ b/code/renderers/react/template/cli/ts/Header.stories.ts
@@ -4,8 +4,8 @@ import { Header } from './Header';
 const meta = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/svelte/template/cli/js/Button.stories.js b/code/renderers/svelte/template/cli/js/Button.stories.js
index 1cffc7520fde..8423ae9aa4af 100644
--- a/code/renderers/svelte/template/cli/js/Button.stories.js
+++ b/code/renderers/svelte/template/cli/js/Button.stories.js
@@ -4,7 +4,7 @@ import Button from './Button.svelte';
 export default {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
     size: {
diff --git a/code/renderers/svelte/template/cli/js/Header.stories.js b/code/renderers/svelte/template/cli/js/Header.stories.js
index 19b968fca930..619063f7c870 100644
--- a/code/renderers/svelte/template/cli/js/Header.stories.js
+++ b/code/renderers/svelte/template/cli/js/Header.stories.js
@@ -3,8 +3,8 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts b/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts
index fac5e73ed105..ab6e25f73727 100644
--- a/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts
@@ -6,7 +6,7 @@ import Button from './Button.svelte';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
     size: {
diff --git a/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts b/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts
index 94fd9ef7625a..b54497aa803c 100644
--- a/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts
@@ -4,8 +4,8 @@ import Header from './Header.svelte';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/svelte/template/cli/ts/Button.stories.ts b/code/renderers/svelte/template/cli/ts/Button.stories.ts
index 1b79fc83b4b4..6145c68d8645 100644
--- a/code/renderers/svelte/template/cli/ts/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts/Button.stories.ts
@@ -6,7 +6,7 @@ import Button from './Button.svelte';
 const meta = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
     size: {
diff --git a/code/renderers/svelte/template/cli/ts/Header.stories.ts b/code/renderers/svelte/template/cli/ts/Header.stories.ts
index def252617ac7..aaa3f5613fb5 100644
--- a/code/renderers/svelte/template/cli/ts/Header.stories.ts
+++ b/code/renderers/svelte/template/cli/ts/Header.stories.ts
@@ -4,8 +4,8 @@ import Header from './Header.svelte';
 const meta = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
     layout: 'fullscreen',
diff --git a/code/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
index bc0b7f4e1787..1c1104fae12a 100644
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ b/code/renderers/vue/template/cli/Button.stories.js
@@ -4,7 +4,7 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { MyButton },
diff --git a/code/renderers/vue/template/cli/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js
index 45d160d8862b..02b8eab08f2a 100644
--- a/code/renderers/vue/template/cli/Header.stories.js
+++ b/code/renderers/vue/template/cli/Header.stories.js
@@ -3,8 +3,8 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: {
diff --git a/code/renderers/vue3/template/cli/Button.stories.js b/code/renderers/vue3/template/cli/Button.stories.js
index d953ca7f3ada..54073b3901ac 100644
--- a/code/renderers/vue3/template/cli/Button.stories.js
+++ b/code/renderers/vue3/template/cli/Button.stories.js
@@ -4,7 +4,7 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: {
       control: 'color',
diff --git a/code/renderers/vue3/template/cli/Header.stories.js b/code/renderers/vue3/template/cli/Header.stories.js
index ae0cde92c75a..3f04f28a2f0c 100644
--- a/code/renderers/vue3/template/cli/Header.stories.js
+++ b/code/renderers/vue3/template/cli/Header.stories.js
@@ -3,8 +3,8 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
     components: {
diff --git a/code/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
index 2f938c94ac6e..9cb2ebf8a2f3 100644
--- a/code/renderers/web-components/template/cli/js/Button.stories.js
+++ b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -3,7 +3,7 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 export default {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },
diff --git a/code/renderers/web-components/template/cli/js/Header.stories.js b/code/renderers/web-components/template/cli/js/Header.stories.js
index f4aef7fde1c7..1f56d163da64 100644
--- a/code/renderers/web-components/template/cli/js/Header.stories.js
+++ b/code/renderers/web-components/template/cli/js/Header.stories.js
@@ -2,8 +2,8 @@ import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => Header(args),
 };
 
diff --git a/code/renderers/web-components/template/cli/ts/Button.stories.ts b/code/renderers/web-components/template/cli/ts/Button.stories.ts
index b647bc45667f..c31f535a18a4 100644
--- a/code/renderers/web-components/template/cli/ts/Button.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Button.stories.ts
@@ -5,7 +5,7 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },
diff --git a/code/renderers/web-components/template/cli/ts/Header.stories.ts b/code/renderers/web-components/template/cli/ts/Header.stories.ts
index 4723f9855175..d99a750322a6 100644
--- a/code/renderers/web-components/template/cli/ts/Header.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Header.stories.ts
@@ -4,8 +4,8 @@ import { Header } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/web-components/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/web-components/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args: HeaderProps) => Header(args),
 };
 
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
index 958a9b7b3595..001a13dcaef7 100644
--- a/code/ui/blocks/src/controls/Boolean.stories.tsx
+++ b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -7,7 +7,7 @@ import { BooleanControl } from './Boolean';
 
 const meta = {
   component: BooleanControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: {
     withRawArg: 'value',
     controls: { include: ['value'] },
diff --git a/code/ui/blocks/src/controls/Color.stories.tsx b/code/ui/blocks/src/controls/Color.stories.tsx
index 386f94d88093..68e0d0d9856e 100644
--- a/code/ui/blocks/src/controls/Color.stories.tsx
+++ b/code/ui/blocks/src/controls/Color.stories.tsx
@@ -4,7 +4,7 @@ import { ColorControl } from './Color';
 export default {
   component: ColorControl,
   parameters: { withRawArg: 'value', controls: { include: ['value', 'startOpen'] } },
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     value: {
       control: {
diff --git a/code/ui/blocks/src/controls/Date.stories.tsx b/code/ui/blocks/src/controls/Date.stories.tsx
index 8ea6fc4c4cf6..2a654b35b4ed 100644
--- a/code/ui/blocks/src/controls/Date.stories.tsx
+++ b/code/ui/blocks/src/controls/Date.stories.tsx
@@ -3,7 +3,7 @@ import { DateControl } from './Date';
 
 export default {
   component: DateControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value'] } },
   argTypes: {
     value: {
diff --git a/code/ui/blocks/src/controls/Files.stories.tsx b/code/ui/blocks/src/controls/Files.stories.tsx
index 81033fe00cf0..4efab1d6250e 100644
--- a/code/ui/blocks/src/controls/Files.stories.tsx
+++ b/code/ui/blocks/src/controls/Files.stories.tsx
@@ -3,7 +3,7 @@ import { FilesControl } from './Files';
 
 export default {
   component: FilesControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'accept'] } },
   argTypes: {
     value: {
diff --git a/code/ui/blocks/src/controls/Number.stories.tsx b/code/ui/blocks/src/controls/Number.stories.tsx
index 15575c7c533f..e287dde96db2 100644
--- a/code/ui/blocks/src/controls/Number.stories.tsx
+++ b/code/ui/blocks/src/controls/Number.stories.tsx
@@ -3,7 +3,7 @@ import { NumberControl } from './Number';
 
 export default {
   component: NumberControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
   args: { name: 'number' },
 } as Meta<typeof NumberControl>;
diff --git a/code/ui/blocks/src/controls/Object.stories.tsx b/code/ui/blocks/src/controls/Object.stories.tsx
index eb0ee1ff1acc..d96844e51646 100644
--- a/code/ui/blocks/src/controls/Object.stories.tsx
+++ b/code/ui/blocks/src/controls/Object.stories.tsx
@@ -3,7 +3,7 @@ import { ObjectControl } from './Object';
 
 export default {
   component: ObjectControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value'] } },
   args: { name: 'object' },
 } as Meta<typeof ObjectControl>;
diff --git a/code/ui/blocks/src/controls/Range.stories.tsx b/code/ui/blocks/src/controls/Range.stories.tsx
index d5a656a97cdf..893d5c1baac5 100644
--- a/code/ui/blocks/src/controls/Range.stories.tsx
+++ b/code/ui/blocks/src/controls/Range.stories.tsx
@@ -3,7 +3,7 @@ import { RangeControl } from './Range';
 
 export default {
   component: RangeControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
   args: { name: 'range' },
 } as Meta<typeof RangeControl>;
diff --git a/code/ui/blocks/src/controls/Text.stories.tsx b/code/ui/blocks/src/controls/Text.stories.tsx
index 638ecd8ff204..45eb0f722505 100644
--- a/code/ui/blocks/src/controls/Text.stories.tsx
+++ b/code/ui/blocks/src/controls/Text.stories.tsx
@@ -3,7 +3,7 @@ import { TextControl } from './Text';
 
 export default {
   component: TextControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: { withRawArg: 'value', controls: { include: ['value', 'maxLength'] } },
   args: { name: 'text' },
 } as Meta<typeof TextControl>;
diff --git a/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx b/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
index 0651a46e02f7..535ff578abb4 100644
--- a/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/CheckOptions.stories.tsx
@@ -16,7 +16,7 @@ const objectOptions = {
 const meta = {
   title: 'Controls/Options/Check',
   component: OptionsControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: {
     withRawArg: 'value',
     controls: { include: ['argType', 'type', 'value', 'labels'] },
diff --git a/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx b/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
index b2f42d0800ea..534752835dff 100644
--- a/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/RadioOptions.stories.tsx
@@ -16,7 +16,7 @@ const objectOptions = {
 const meta = {
   title: 'Controls/Options/Radio',
   component: OptionsControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: {
     withRawArg: 'value',
     controls: { include: ['argType', 'type', 'value', 'labels'] },
diff --git a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
index 1245d0950dff..653b2574d4c8 100644
--- a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
+++ b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx
@@ -24,7 +24,7 @@ const argTypeMultiSelect = {
 const meta = {
   title: 'Controls/Options/Select',
   component: OptionsControl,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   parameters: {
     withRawArg: 'value',
     controls: { include: ['argType', 'type', 'value', 'labels'] },
diff --git a/docs/snippets/angular/button-story-auto-docs.ts.mdx b/docs/snippets/angular/button-story-auto-docs.ts.mdx
index bbeeef5e65c2..8e7bbdd5046d 100644
--- a/docs/snippets/angular/button-story-auto-docs.ts.mdx
+++ b/docs/snippets/angular/button-story-auto-docs.ts.mdx
@@ -9,7 +9,7 @@ const meta: Meta<Button> = {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
index e50fb4c9af21..d8255e1d3c56 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
@@ -17,8 +17,8 @@ module.exports = {
     enabled: false,
     defaultName: 'Documentation',
     //👇 Use only one of the following options to auto-generate documentation
-    docsPage: false,
-    docsPage: 'automatic',
+    autodocs: true,
+    autodocs: 'tag',
   },
 };
 ```
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
index e4017242d0ff..c84780c55032 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
@@ -20,8 +20,8 @@ const config: StorybookConfig = {
     enabled: false,
     defaultName: 'Documentation',
     //👇 Use only one of the following options to auto-generate documentation
-    docsPage: false,
-    docsPage: 'automatic',
+    autodocs: true,
+    autodocs: 'tag',
   },
 };
 
diff --git a/docs/snippets/common/storybook-main-config-remark-options.js.mdx b/docs/snippets/common/storybook-main-config-remark-options.js.mdx
index c88ab9813e42..00237fca51fd 100644
--- a/docs/snippets/common/storybook-main-config-remark-options.js.mdx
+++ b/docs/snippets/common/storybook-main-config-remark-options.js.mdx
@@ -22,7 +22,7 @@ module.exports = {
     options: {},
   },
   docs: {
-    docsPage: true,
+    autodocs: 'tag',
   },
 };
 ```
diff --git a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx b/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
index 903b3b9902d7..b5ee32487c1f 100644
--- a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
+++ b/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
@@ -25,7 +25,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    docsPage: true,
+    autodocs: 'tag',
   },
 };
 
diff --git a/docs/snippets/react/button-story-auto-docs.js.mdx b/docs/snippets/react/button-story-auto-docs.js.mdx
index 298be555d336..c48e89a20803 100644
--- a/docs/snippets/react/button-story-auto-docs.js.mdx
+++ b/docs/snippets/react/button-story-auto-docs.js.mdx
@@ -7,7 +7,7 @@ export default {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/react/button-story-auto-docs.ts.mdx b/docs/snippets/react/button-story-auto-docs.ts.mdx
index 22d309ce63ea..c40e136803df 100644
--- a/docs/snippets/react/button-story-auto-docs.ts.mdx
+++ b/docs/snippets/react/button-story-auto-docs.ts.mdx
@@ -9,7 +9,7 @@ const meta: Meta<typeof Button> = {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/svelte/button-story-auto-docs.js.mdx b/docs/snippets/svelte/button-story-auto-docs.js.mdx
index ab244e98ae0d..92263d7469a2 100644
--- a/docs/snippets/svelte/button-story-auto-docs.js.mdx
+++ b/docs/snippets/svelte/button-story-auto-docs.js.mdx
@@ -7,7 +7,7 @@ export default {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/vue/button-story-auto-docs.js.mdx b/docs/snippets/vue/button-story-auto-docs.js.mdx
index 20eb5e88a778..bfab3dc1edee 100644
--- a/docs/snippets/vue/button-story-auto-docs.js.mdx
+++ b/docs/snippets/vue/button-story-auto-docs.js.mdx
@@ -7,7 +7,7 @@ export default {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/snippets/vue/button-story-auto-docs.ts.mdx b/docs/snippets/vue/button-story-auto-docs.ts.mdx
index ec41d44085e1..2ade7ddea188 100644
--- a/docs/snippets/vue/button-story-auto-docs.ts.mdx
+++ b/docs/snippets/vue/button-story-auto-docs.ts.mdx
@@ -10,7 +10,7 @@ const meta: Meta<typeof Button> = {
   title: 'Button',
   component: Button,
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
diff --git a/docs/writing-docs/docs-page.md b/docs/writing-docs/docs-page.md
index 23514474557c..8375733ca4c7 100644
--- a/docs/writing-docs/docs-page.md
+++ b/docs/writing-docs/docs-page.md
@@ -56,8 +56,8 @@ By default, Storybook offers zero-config support for documentation and automatic
 | Option        | Description                                                                                            |
 | ------------- | ------------------------------------------------------------------------------------------------------ |
 | `disable`     | Toggles support for all documentation pages <br/> `docs: { disable:true }`                            |
-| `docsPage`    | Disables auto-generated documentation pages created via `tags` <br/> `docs: { docsPage: false }`       |
-| `automatic`   | Enables auto-generated documentation pages for every component <br/> `docs: { docsPage: 'automatic' }` |
+| `autodocs`    | Disables auto-generated documentation pages created via `tags` <br/> `docs: { autodocs: false }`       |
+| true   | Enables auto-generated documentation pages for every component <br/> `docs: { autodocs: true }` |
 | `defaultName` | Renames the auto-generated documentation page<br/> `docs: { defaultName: 'Documentation' }`            |
 
 ### Write a custom template