Fixed radio controls for stories

packages/react/src/Avatar/Avatar.stories.tsx

@@ -17,16 +17,16 @@ export default {
     size: {
       description: 'The size of the Avatar',
       control: {
-        type: 'radio',
-        options: AvatarSizes,
+        type: 'inline-radio',
       },
+      options: AvatarSizes,
     },
     shape: {
       description: 'The shape of the Avatar',
       control: {
-        type: 'radio',
-        options: AvatarShapes,
+        type: 'inline-radio',
       },
+      options: AvatarShapes,
     },
     src: {
       description: 'The url of the image to display',

packages/react/src/Button/Button.stories.tsx

@@ -33,7 +33,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
-      options: [...ButtonVariants],
+      options: ButtonVariants,
     },
     href: {
       name: 'href',
@@ -48,7 +48,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
-      options: [...ButtonSizes],
+      options: ButtonSizes,
     },
     children: {
       name: 'children',

packages/react/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,30 +1,30 @@
 import React from 'react'
 import {Meta, StoryFn} from '@storybook/react'
 import {ButtonGroup} from '.'
-import {Button} from '../Button'
+import {Button, ButtonSizes, defaultButtonSize} from '../Button'
 
 export default {
   title: 'Components/ButtonGroup',
   component: ButtonGroup,
   subcomponents: {Button},
   args: {
-    buttonSize: 'medium',
+    buttonSize: defaultButtonSize,
     buttonsAs: 'button',
   },
   argTypes: {
     buttonSize: {
       description: 'The size of the button elements',
       control: {
-        type: 'radio',
-        options: ['medium', 'large'],
+        type: 'inline-radio',
       },
+      options: ButtonSizes,
     },
     buttonsAs: {
       description: 'The HTML element the button is rendered as',
       control: {
-        type: 'radio',
-        options: ['button', 'a'],
+        type: 'inline-radio',
       },
+      options: ['button', 'a'],
     },
     children: {
       table: {

packages/react/src/CTABanner/CTABanner.stories.tsx

@@ -16,9 +16,9 @@ export default {
     align: {
       description: 'The alignment of the content',
       control: {
-        type: 'radio',
-        options: ['start', 'center'],
+        type: 'inline-radio',
       },
+      options: ['start', 'center'],
     },
     hasBorder: {
       description: 'Toggle to show or hide the border',

packages/react/src/Card/Card.stories.tsx

@@ -20,7 +20,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
-      options: [...CardIconColors],
+      options: CardIconColors,
     },
     iconHasBackground: {
       name: 'iconHasBackground',
@@ -41,7 +41,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
-      options: [...LabelColors],
+      options: LabelColors,
     },
     heading: {
       name: 'heading',

packages/react/src/ComparisonTable/ComparisonTable.stories.tsx

@@ -20,17 +20,17 @@ export default {
       description: 'The HTML element used to render the root component.',
       control: {
         type: 'inline-radio',
-        options: ['section', 'large'],
       },
+      options: ['section', 'large'],
       table: {
         category: 'ComparisonTable',
       },
     },
     variant: {
       control: {
         type: 'inline-radio',
-        options: ['undefined', 'default', 'minimal'],
       },
+      options: ['undefined', 'default', 'minimal'],
       table: {
         category: 'ComparisonTable',
       },

packages/react/src/EyebrowBanner/EyebrowBanner.stories.tsx

@@ -69,7 +69,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
-      options: [...EyebrowBannerIconColors],
+      options: EyebrowBannerIconColors,
       table: {
         category: 'EyebrowBanner.Visual',
       },

packages/react/src/Heading/Heading.stories.tsx

@@ -47,31 +47,31 @@ Playground.argTypes = {
   },
   size: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: HeadingSizes,
   },
   weight: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: HeadingWeights,
   },
   stretch: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: HeadingStretch,
   },
   letterSpacing: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: HeadingLetterSpacing,
   },
   font: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: HeadingFontVariants,
   },

packages/react/src/Image/Image.stories.tsx

@@ -29,16 +29,16 @@ export default {
     as: {
       description: 'Sets the underlying HTML element',
       control: {
-        type: 'radio',
-        options: ['img', 'picture'],
+        type: 'inline-radio',
       },
+      options: ['img', 'picture'],
     },
     aspectRatio: {
       description: 'Sets the image aspect ratio. A custom ratio can be provided in the design tokens.',
       control: {
-        type: 'radio',
-        options: ['1:1', '16:9', '16:10', '4:3', 'custom'],
+        type: 'inline-radio',
       },
+      options: ['1:1', '16:9', '16:10', '4:3', 'custom'],
     },
     width: {
       description: 'The width of the image',
@@ -56,17 +56,17 @@ export default {
       description:
         'The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.',
       control: {
-        type: 'radio',
-        options: ['eager', 'lazy'],
+        type: 'inline-radio',
       },
+      options: ['eager', 'lazy'],
     },
     decoding: {
       description:
         'Sets the image decoding strategy. Representing a hint given to the browser on how it should decode the image.',
       control: {
-        type: 'radio',
-        options: ['auto', 'sync', 'async'],
+        type: 'inline-radio',
       },
+      options: ['auto', 'sync', 'async'],
     },
   },
 } as Meta<typeof Image>

packages/react/src/Label/Label.stories.tsx

@@ -16,15 +16,15 @@ export default {
       description: 'Color of Label',
       control: {
         type: 'inline-radio',
-        options: [...LabelColors],
       },
+      options: LabelColors,
     },
     size: {
       description: 'Size of Label',
       control: {
         type: 'inline-radio',
-        options: [...LabelSizes],
       },
+      options: LabelSizes,
     },
     children: {
       name: 'children',

packages/react/src/Pillar/Pillar.stories.tsx

@@ -15,8 +15,8 @@ export default {
       description: 'Color of Icon',
       control: {
         type: 'inline-radio',
-        options: [...PillarIconColors],
       },
+      options: PillarIconColors,
     },
     heading: {
       name: 'heading',

packages/react/src/SectionIntro/SectionIntro.stories.tsx

@@ -12,9 +12,9 @@ export default {
     align: {
       description: 'The alignment of the SectionIntro',
       control: {
-        type: 'radio',
-        options: ['start', 'center'],
+        type: 'inline-radio',
       },
+      options: ['start', 'center'],
     },
     children: {
       table: {

packages/react/src/Testimonial/Testimonial.stories.tsx

@@ -20,9 +20,9 @@ export default {
   argTypes: {
     quoteMarkColor: {
       control: {
-        type: 'radio',
-        options: TestimonialQuoteMarkColors,
+        type: 'inline-radio',
       },
+      options: TestimonialQuoteMarkColors,
     },
     name: {
       control: {type: 'text'},
@@ -38,7 +38,7 @@ export default {
     },
     type: {
       options: ['avatar', 'logo'],
-      control: {type: 'radio'},
+      control: {type: 'inline-radio'},
     },
     width: {
       control: {

packages/react/src/Text/Text.stories.tsx

@@ -27,13 +27,13 @@ Playground.argTypes = {
   },
   size: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: TextSizes,
   },
   weight: {
     control: {
-      type: 'radio',
+      type: 'inline-radio',
     },
     options: TextWeights,
   },

packages/react/src/animation/Animation.stories.tsx

@@ -35,7 +35,7 @@ Playground.argTypes = {
   variant: {
     control: {
       type: 'inline-radio',
-      options: AnimationVariants,
     },
+    options: AnimationVariants,
   },
 }

packages/react/src/list/UnorderedList/UnorderedList.stories.tsx

@@ -19,9 +19,9 @@ export default {
     variant: {
       description: 'Specify alternative leading visuals for list items',
       control: {
-        type: 'radio',
-        options: ['default', 'checked'],
+        type: 'inline-radio',
       },
+      options: ['default', 'checked'],
     },
     data: {
       name: 'Data',

packages/react/src/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.stories.tsx

@@ -38,7 +38,7 @@ export default {
     accentColor: {
       name: 'theme',
       control: 'radio',
-      options: [...Object.keys(themeDetailsMap)],
+      options: Object.keys(themeDetailsMap),
       table: {
         category: 'Theming',
       },