Merge pull request #14999 from storybookjs/argtype-options-snippets

Update code snippets to use `argTypes[key].options` instead of `control.options`

docs/snippets/angular/component-story-custom-args-icons.ts.mdx

@@ -15,10 +15,7 @@ export default {
   component: Icon,
   argTypes: {
     icon: {
-      control: {
+      options: Object.keys(iconMap),
-        type: 'select',
-        options: Object.keys(iconMap),
-      },
     },
   },
 } as Meta;

docs/snippets/common/badge-story-custom-argtypes.js.mdx

@@ -8,16 +8,13 @@ export default {
     status: {
       name: 'Badge Status',
       description: 'Available options available to the Badge',
-      control: {
+      options: [
-        type: 'select',
+        'positive',
-        options: [
+        'negative',
-          'positive',
+        'warning',
-          'negative',
+        'error',
-          'warning',
+        'neutral'
-          'error',
+      ],
-          'neutral'
-        ],
-      },
       table: {
         defaultValue: {
           summary: 'positive'
@@ -43,4 +40,4 @@ export default {
     }
   }
 };
-```
+```

docs/snippets/common/badge-story-custom-argtypes.mdx.mdx

@@ -11,16 +11,13 @@ import { Badge } from './Badge';
     status: {
       name: 'Badge Status',
       description: 'Available options available to the Badge',
-      control: {
+      options: [
-        type: 'select',
+        'positive',
-        options: [
+        'negative',
-          'positive',
+        'warning',
-          'negative',
+        'error',
-          'warning',
+        'neutral'
-          'error',
+      ],
-          'neutral'
-        ],
-      },
       table: {
         defaultValue: {
           summary: 'positive'
@@ -54,4 +51,4 @@ Let's define a story for our `Badge` component
 <ArgsTable of={Badge} />
 
 <!-- remainder story implementation -->
-```
+```

docs/snippets/common/button-story-controls-radio-group.js.mdx

@@ -6,11 +6,9 @@ export default {
   component: Button,
   argTypes: {
     variant: {
-      control: {
+      options: ['primary', 'secondary'],
-        type: 'radio',
+      control: { type: 'radio' }
-        options: ['primary', 'secondary']
-      }
     }
   }
 };
-```
+```

docs/snippets/common/button-story-controls-radio-group.mdx.mdx

@@ -6,11 +6,9 @@
   component={Button}
   argTypes={{
     variant: {
-      control: {
+      options: ['primary', 'secondary'],
-        type: 'radio',
+      control: { type: 'radio' }
-        options: ['primary', 'secondary']
-      }
     }
   }}
 />
-```
+```

docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx

@@ -12,9 +12,7 @@
   component={Table}
   argTypes={{
     size: {
-      control: { 
+      options: ['small', 'medium', 'large'],
-        type: 'select', 
-        options: ['small', 'medium', 'large'] },
     },
   }}
 />
@@ -44,4 +42,4 @@
     size: 'large',
   }}
 />
-```
+```

docs/snippets/vue/component-story-custom-args-icons.2.js.mdx

@@ -14,10 +14,7 @@ export default {
   //👇 Creates specific argTypes with options
   argTypes: {
     icon: {
-      control: {
+      options: Object.keys(iconMap),
-        type: 'select',
-        options: Object.keys(iconMap),
-      },
     },
   },
 };
@@ -39,4 +36,4 @@ const Template = (args, { argTypes }) => {
     template: '<YourComponent v-bind="$props"/>',
   };
 };
-```
+```

docs/snippets/vue/component-story-custom-args-icons.3.js.mdx

@@ -14,10 +14,7 @@ export default {
   //👇 Creates specific argTypes with options
   argTypes: {
     icon: {
-      control: {
+      options: Object.keys(iconMap),
-        type: 'select',
-        options: Object.keys(iconMap),
-      },
     },
   },
 };