Merge pull request #22970 from storybookjs/api-reference-arg-types

Docs: Add ArgTypes API reference

docs/snippets/angular/arg-types-control.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+
+export default meta;
+```

docs/snippets/angular/arg-types-default-value.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+
+export default meta;
+```

docs/snippets/angular/arg-types-description.ts.mdx

@@ -0,0 +1,18 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+
+export default meta;
+```

docs/snippets/angular/arg-types-if.ts.mdx

@@ -0,0 +1,40 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+
+export default meta;
+```

docs/snippets/angular/arg-types-in-meta.ts.mdx

@@ -0,0 +1,20 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+
+export default meta;
+```

docs/snippets/angular/storybook-customize-argtypes.ts.mdx → docs/snippets/angular/arg-types-in-story.ts.mdx

@@ -7,21 +7,19 @@ import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
   argTypes: {
+    // 👇 This story expects a label arg
     label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
+      control: 'text',
+      description: 'Overwritten description',
     },
   },
 };
-
-export default meta;
 ```

docs/snippets/angular/my-component-argtypes-with-mapping.ts.mdx → docs/snippets/angular/arg-types-mapping.ts.mdx

@@ -1,12 +1,12 @@
 ```ts
-// MyComponent.stories.ts
+// Example.stories.ts
 
 import type { Meta } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent';
+import { Example } from './Example';
 
-const meta: Meta<MyComponent> = {
-  component: MyComponent,
+const meta: Meta<Example> = {
+  component: Example,
   argTypes: {
     label: {
       options: ['Normal', 'Bold', 'Italic'],