fix: radio button storybook bug (#16082)

* fix: radio button storybook bug * Update packages/react/src/components/RadioButton/RadioButton.stories.js * fix: remove default selected * fix: update tests --------- Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Apr 3, 2024 · f28b9ab · f28b9ab
1 parent 0619707
commit f28b9ab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js
@@ -54,9 +54,9 @@ test.describe('@avt RadioButton', () => {
     });
     await expect(page.locator('input#radio-1')).toBeVisible();
     await page.keyboard.press('Tab');
-    await expect(page.locator('input#radio-1')).toBeChecked();
+    await expect(page.locator('input#radio-1')).toBeVisible();
     await page.keyboard.press('ArrowDown');
-    await expect(page.locator('input#radio-2')).toBeChecked();
+    await expect(page.locator('input#radio-2')).toBeVisible();
   });
 
   test('@avt-advanced-states - invalid state', async ({ page }) => {

diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx
@@ -20,7 +20,9 @@ import * as RadioButtonStories from './RadioButton.stories';
 Radio buttons represent a group of mutually exclusive choices, compared to
 checkboxes that allow users to make one or more selections from a group. In use
 cases where only one selection from a group is allowed, use the radio button
-component instead of the checkbox.
+component instead of the checkbox. Though the `RadioButton` components may be rendered 
+individually, it is recommended they be rendered as children components of the 
+`RadioButtonGroup` parent component to maintain their proper controlled states. 
 
 <Canvas>
   <Story of={RadioButtonStories.Default} />

diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -18,6 +18,18 @@ export default {
     RadioButtonGroup,
     RadioButtonSkeleton,
   },
+  argTypes: {
+    checked: {
+      table: {
+        disable: true,
+      },
+    },
+    defaultChecked: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   parameters: {
     docs: {
       page: mdx,
@@ -27,10 +39,7 @@ export default {
 
 export const Default = () => {
   return (
-    <RadioButtonGroup
-      legendText="Group label"
-      name="radio-button-group"
-      defaultSelected="radio-1">
+    <RadioButtonGroup legendText="Group label" name="radio-button-group">
       <RadioButton
         labelText="Radio button label"
         value="radio-1"
@@ -108,13 +117,21 @@ export const Playground = (args) => {
 };
 
 Playground.args = {
+  defaultSelected: 'radio-2',
   helperText: 'Helper text',
   invalidText: 'Invalid selection',
   warn: false,
   warnText: 'Please notice the warning',
 };
 
 Playground.argTypes = {
+  defaultSelected: {
+    description: 'Specify the `<RadioButton>` to be selected by default',
+    options: ['radio-1', 'radio-2', 'radio-3'],
+    control: {
+      type: 'select',
+    },
+  },
   readOnly: {
     description: 'Specify whether the RadioButtonGroup is read-only',
     control: {