From 3f33d6a9f8d9286dda43364b5a03e96f8d33d4cb Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 4 Dec 2024 16:55:54 -0300
Subject: [PATCH 1/9] feat: converted all stories from Playground to Default

---
 .../components/Accordion/Accordion.stories.js | 143 +++---
 .../AspectRatio/AspectRatio.stories.js        |  35 +-
 .../Breadcrumb/Breadcrumb.stories.js          |  43 +-
 .../components/Checkbox/Checkbox.stories.js   | 262 +++++-----
 .../components/ComboBox/ComboBox.stories.js   | 217 ++++----
 .../ComboButton/ComboButton.stories.js        | 106 ++--
 .../ComposedModal/ComposedModal.stories.js    | 125 ++---
 .../ContainedList/ContainedList.stories.js    |  49 +-
 .../ContentSwitcher/ContentSwitcher.mdx       |   2 +-
 .../ContentSwitcher.stories.js                |  71 +--
 .../src/components/CopyButton/CopyButton.mdx  |   2 +-
 .../CopyButton/CopyButton.stories.js          |   6 +-
 .../stories/DataTable-ai-label.stories.js     |  79 ++-
 .../stories/DataTable-basic.stories.js        | 185 ++-----
 .../DataTable-batch-actions.stories.js        | 124 +----
 .../stories/DataTable-filtering.stories.js    |  97 +---
 .../stories/DataTable-selection.stories.js    | 141 ++---
 .../stories/DataTable-sorting.stories.js      |  33 +-
 .../stories/DataTable-toolbar.stories.js      | 115 ++---
 .../DataTable-dynamic-content.stories.js      | 183 +------
 .../expansion/DataTable-expansion.stories.js  |  83 +--
 .../DataTableSkeleton.stories.js              |  17 +-
 .../src/components/DatePicker/DatePicker.mdx  |   2 +-
 .../DatePicker/DatePicker.stories.js          | 318 +++++++-----
 .../components/Dropdown/Dropdown.stories.js   |  99 ++--
 .../FileUploader/FileUploader.stories.js      |  26 +-
 .../FluidComboBox/FluidComboBox.stories.js    | 202 ++++----
 .../FluidDatePicker.stories.js                | 233 ++++-----
 .../FluidDropdown/FluidDropdown.stories.js    | 198 ++++---
 .../FluidMultiSelect.stories.js               | 215 ++++----
 .../FluidNumberInput.stories.js               |  74 +--
 .../FluidSearch/FluidSearch.stories.js        |  24 +-
 .../FluidSelect/FluidSelect.stories.js        | 161 +++---
 .../FluidTextArea/FluidTextArea.stories.js    | 134 +++--
 .../FluidPasswordInput.stories.js             |  20 +-
 .../FluidTextInput/FluidTextInput.stories.js  |  48 +-
 .../FluidTimePicker.stories.js                | 101 +---
 .../components/FormGroup/FormGroup.stories.js |  24 +-
 .../src/components/Grid/FlexGrid.stories.js   |   6 +-
 .../react/src/components/Grid/Grid.stories.js |  97 ++--
 .../IconButton/IconButton.stories.js          |  16 +-
 .../src/components/Icons/Icons.stories.js     |  32 +-
 .../InlineLoading/InlineLoading.stories.js    |  14 +-
 .../src/components/Layer/Layer.stories.js     |  22 +-
 .../react/src/components/Link/Link.stories.js |  19 +-
 .../src/components/Loading/Loading.stories.js |  10 +-
 .../react/src/components/Menu/Menu.stories.js |   6 +-
 .../MenuButton/MenuButton.stories.js          | 106 ++--
 .../src/components/Modal/Modal.stories.js     | 481 +++++++-----------
 .../MultiSelect/MultiSelect.stories.js        |  63 +--
 .../stories/ActionableNotification.stories.js |  22 +-
 .../stories/InlineNotification.stories.js     |  13 +-
 .../stories/ToastNotification.stories.js      |  16 +-
 .../components/NumberInput/NumberInput.mdx    |   2 +-
 .../NumberInput/NumberInput.stories.js        | 159 +++---
 .../components/OrderedList/OrderedList.mdx    |   2 +-
 .../OrderedList/OrderedList.stories.js        |  90 ++--
 .../OverflowMenu/OverflowMenu.stories.js      |  17 +-
 .../Pagination/Pagination.stories.js          | 104 ++--
 .../PaginationNav/PaginationNav.stories.js    |  12 +-
 .../src/components/Popover/Popover.stories.js |  78 +--
 .../ProgressBar/ProgressBar.stories.js        |  15 +-
 .../ProgressIndicator.stories.js              |  37 +-
 .../RadioButton/RadioButton.stories.js        |  31 +-
 .../src/components/Search/Search.stories.js   |  26 +-
 .../src/components/Select/Select.stories.js   |  55 +-
 .../react/src/components/Slider/Slider.mdx    |   4 +-
 .../src/components/Slider/Slider.stories.js   | 271 +++++-----
 .../react/src/components/Tabs/Tabs.stories.js | 137 ++---
 .../components/TextArea/TextArea.stories.js   | 138 ++---
 .../TextInput/PasswordInput.stories.js        |  21 +-
 .../components/TextInput/TextInput.stories.js | 202 ++++----
 .../TimePicker/TimePicker.stories.js          |  55 +-
 .../src/components/Toggle/Toggle.stories.js   |  36 +-
 .../components/Toggletip/Toggletip.stories.js |  61 +--
 .../Tooltip/DefinitionTooltip.stories.js      |  19 +-
 .../src/components/Tooltip/Tooltip.stories.js |  98 ++--
 .../components/TreeView/Treeview.stories.js   |  38 +-
 78 files changed, 2636 insertions(+), 3992 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index 85ac311d7976..822fbb5e948a 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -29,8 +29,35 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Accordion>
+const sharedArgTypes = {
+  align: {
+    options: ['start', 'end'],
+    control: { type: 'select' },
+  },
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  isFlush: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+};
+
+export const Default = (args) => (
+  <Accordion {...args}>
     <AccordionItem title="Section 1 title">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -48,14 +75,14 @@ export const Default = () => (
       </p>
     </AccordionItem>
     <AccordionItem title="Section 3 title">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
-      </p>
+      <Button>This is a button.</Button>
     </AccordionItem>
-    <AccordionItem title="Section 4 title">
+    <AccordionItem
+      title={
+        <span>
+          Section 4 title (<em>the title can be a node</em>)
+        </span>
+      }>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
@@ -66,7 +93,14 @@ export const Default = () => (
   </Accordion>
 );
 
-export const Controlled = () => {
+Default.args = {
+  disabled: false,
+  isFlush: false,
+};
+
+Default.argTypes = { ...sharedArgTypes };
+
+export const Controlled = (args) => {
   const [expandAll, setExpandAll] = React.useState(false);
   return (
     <>
@@ -89,7 +123,7 @@ export const Controlled = () => {
         </Button>
       </ButtonSet>
 
-      <Accordion>
+      <Accordion {...args}>
         <AccordionItem title="Section 1 title" open={expandAll}>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
@@ -127,8 +161,15 @@ export const Controlled = () => {
   );
 };
 
-export const _WithLayer = () => (
-  <WithLayer>
+Controlled.args = {
+  disabled: false,
+  isFlush: false,
+};
+
+Controlled.argTypes = { ...sharedArgTypes };
+
+export const _WithLayer = (args) => (
+  <WithLayer {...args}>
     <Accordion>
       <AccordionItem title="Section 1 title">
         <p>
@@ -166,6 +207,13 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+WithLayer.args = {
+  disabled: false,
+  isFlush: false,
+};
+
+WithLayer.argTypes = { ...sharedArgTypes };
+
 export const Skeleton = (args) => (
   <AccordionSkeleton open count={4} {...args} />
 );
@@ -174,75 +222,6 @@ Skeleton.decorators = [
   (story) => <div style={{ width: '500px' }}>{story()}</div>,
 ];
 
-export const Playground = (args) => (
-  <Accordion {...args}>
-    <AccordionItem title="Section 1 title">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
-      </p>
-    </AccordionItem>
-    <AccordionItem title="Section 2 title">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
-      </p>
-    </AccordionItem>
-    <AccordionItem title="Section 3 title">
-      <Button>This is a button.</Button>
-    </AccordionItem>
-    <AccordionItem
-      title={
-        <span>
-          Section 4 title (<em>the title can be a node</em>)
-        </span>
-      }>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
-      </p>
-    </AccordionItem>
-  </Accordion>
-);
-
-Playground.args = {
-  disabled: false,
-  isFlush: false,
-};
-
-Playground.argTypes = {
-  align: {
-    options: ['start', 'end'],
-    control: { type: 'select' },
-  },
-  children: {
-    control: false,
-  },
-  className: {
-    control: false,
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  isFlush: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  size: {
-    options: ['sm', 'md', 'lg'],
-    control: { type: 'select' },
-  },
-};
-
 Skeleton.args = {
   isFlush: false,
 };
diff --git a/packages/react/src/components/AspectRatio/AspectRatio.stories.js b/packages/react/src/components/AspectRatio/AspectRatio.stories.js
index 3b79039d16fd..05fec5396137 100644
--- a/packages/react/src/components/AspectRatio/AspectRatio.stories.js
+++ b/packages/react/src/components/AspectRatio/AspectRatio.stories.js
@@ -29,26 +29,7 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <Grid>
-      <Column sm={1} md={2} lg={4}>
-        <AspectRatio ratio="1x1">Content</AspectRatio>
-      </Column>
-      <Column sm={1} md={2} lg={4}>
-        <AspectRatio ratio="1x1">Content</AspectRatio>
-      </Column>
-      <Column sm={1} md={2} lg={4}>
-        <AspectRatio ratio="1x1">Content</AspectRatio>
-      </Column>
-      <Column sm={1} md={2} lg={4}>
-        <AspectRatio ratio="1x1">Content</AspectRatio>
-      </Column>
-    </Grid>
-  );
-};
-
-export const Playground = {
+export const Default = {
   render: ({ ratio, ...args }) => {
     return (
       <Grid {...args}>
@@ -69,21 +50,15 @@ export const Playground = {
   },
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   as: {
-    table: {
-      disable: true,
-    },
+    control: false,
   },
   children: {
-    table: {
-      disable: true,
-    },
+    control: false,
   },
   className: {
-    table: {
-      disable: true,
-    },
+    control: false,
   },
   ratio: {
     control: {
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
index d1605545a3f7..5bf74f259764 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -27,8 +27,16 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Breadcrumb>
+const sharedArgTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Breadcrumb {...args}>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
     </BreadcrumbItem>
@@ -38,8 +46,12 @@ export const Default = () => (
   </Breadcrumb>
 );
 
-export const BreadcrumbWithOverflowMenu = () => (
-  <Breadcrumb noTrailingSlash>
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const BreadcrumbWithOverflowMenu = (args) => (
+  <Breadcrumb noTrailingSlash {...args}>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
     </BreadcrumbItem>
@@ -55,23 +67,8 @@ export const BreadcrumbWithOverflowMenu = () => (
   </Breadcrumb>
 );
 
-export const Skeleton = () => <BreadcrumbSkeleton />;
-
-export const Playground = (args) => (
-  <Breadcrumb {...args}>
-    <BreadcrumbItem>
-      <a href="/#">Breadcrumb 1</a>
-    </BreadcrumbItem>
-    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-    <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
-    <BreadcrumbItem href="#">Breadcrumb 4</BreadcrumbItem>
-  </Breadcrumb>
-);
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
+BreadcrumbWithOverflowMenu.argTypes = {
+  ...sharedArgTypes,
 };
+
+export const Skeleton = () => <BreadcrumbSkeleton />;
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index 1c6da060394c..252cd3aae4fd 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -39,21 +39,139 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <CheckboxGroup {...fieldsetCheckboxProps()}>
-      <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
-      <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
-    </CheckboxGroup>
-  );
+const sharedArgs = {
+  helperText: 'Helper text goes here',
+  invalid: false,
+  invalidText: 'Invalid message goes here',
+  readOnly: false,
+  warn: false,
+  warnText: 'Warning message goes here',
+};
+
+const sharedArgTypes = {
+  helperText: {
+    description: 'Provide text for the form group for additional help',
+    control: {
+      type: 'text',
+    },
+  },
+  invalid: {
+    description: 'Specify whether the form group is currently invalid',
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    description:
+      'Provide the text that is displayed when the form group is in an invalid state',
+    control: {
+      type: 'text',
+    },
+  },
+  legendText: {
+    description:
+      'Provide the text to be rendered inside of the fieldset <legend>',
+    control: {
+      type: 'text',
+    },
+  },
+  readOnly: {
+    description: 'Specify whether the CheckboxGroup is read-only',
+    control: {
+      type: 'boolean',
+    },
+  },
+  warn: {
+    description: 'Specify whether the form group is currently in warning state',
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    description:
+      'Provide the text that is displayed when the form group is in warning state',
+    control: {
+      type: 'text',
+    },
+  },
+  checked: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  defaultChecked: {
+    table: {
+      disable: true,
+    },
+  },
+  hideLabel: {
+    table: {
+      disable: true,
+    },
+  },
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  indeterminate: {
+    table: {
+      disable: true,
+    },
+  },
+  labelText: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    table: {
+      disable: true,
+    },
+  },
+  title: {
+    table: {
+      disable: true,
+    },
+  },
+  orientation: {
+    description: 'Provide how checkbox should be displayed',
+    control: 'select',
+    options: ['horizontal', 'vertical'],
+  },
+};
+
+export const Default = (args) => (
+  <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
+    <Checkbox
+      defaultChecked
+      {...checkboxEvents}
+      id="checkbox-0"
+      helperText="hello"
+    />
+    <Checkbox {...checkboxEvents} id="checkbox-1" />
+    <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
+  </CheckboxGroup>
+);
+
+Default.args = {
+  ...sharedArgs,
 };
 
-export const Horizontal = () => {
+Default.argTypes = { ...sharedArgTypes };
+
+export const Horizontal = (args) => {
   return (
     <CheckboxGroup
       orientation="horizontal"
       {...fieldsetCheckboxProps()}
-      helperText="Helper text goes here">
+      helperText="Helper text goes here"
+      {...args}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
@@ -61,6 +179,10 @@ export const Horizontal = () => {
   );
 };
 
+Horizontal.args = { ...sharedArgs };
+
+Horizontal.argTypes = { ...sharedArgTypes };
+
 export const Single = () => {
   return (
     <>
@@ -122,15 +244,15 @@ const AILabelFunc = (kind) => (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div className="ai-label-check-radio-container">
-    <CheckboxGroup legendText="Group Label" decorator={AILabelFunc()}>
+    <CheckboxGroup legendText="Group Label" decorator={AILabelFunc()} {...args}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
     </CheckboxGroup>
 
-    <CheckboxGroup legendText="Group Label">
+    <CheckboxGroup legendText="Group Label" {...args}>
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-4"
@@ -144,7 +266,7 @@ export const withAILabel = () => (
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-6" />
     </CheckboxGroup>
 
-    <CheckboxGroup legendText="Group Label">
+    <CheckboxGroup legendText="Group Label" {...args}>
       <Checkbox
         labelText={`Checkbox label`}
         id="checkbox-label-7"
@@ -160,21 +282,7 @@ export const withAILabel = () => (
   </div>
 );
 
-export const Playground = (args) => (
-  <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
-    <Checkbox
-      defaultChecked
-      {...checkboxEvents}
-      id="checkbox-0"
-      helperText="hello"
-    />
-    <Checkbox {...checkboxEvents} id="checkbox-1" />
-    <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
-  </CheckboxGroup>
-);
-
-Playground.args = {
-  helperText: 'Helper text goes here',
+withAILabel.args = {
   invalid: false,
   invalidText: 'Invalid message goes here',
   readOnly: false,
@@ -182,100 +290,4 @@ Playground.args = {
   warnText: 'Warning message goes here',
 };
 
-Playground.argTypes = {
-  helperText: {
-    description: 'Provide text for the form group for additional help',
-    control: {
-      type: 'text',
-    },
-  },
-  invalid: {
-    description: 'Specify whether the form group is currently invalid',
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    description:
-      'Provide the text that is displayed when the form group is in an invalid state',
-    control: {
-      type: 'text',
-    },
-  },
-  legendText: {
-    description:
-      'Provide the text to be rendered inside of the fieldset <legend>',
-    control: {
-      type: 'text',
-    },
-  },
-  readOnly: {
-    description: 'Specify whether the CheckboxGroup is read-only',
-    control: {
-      type: 'boolean',
-    },
-  },
-  warn: {
-    description: 'Specify whether the form group is currently in warning state',
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    description:
-      'Provide the text that is displayed when the form group is in warning state',
-    control: {
-      type: 'text',
-    },
-  },
-  checked: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  defaultChecked: {
-    table: {
-      disable: true,
-    },
-  },
-  hideLabel: {
-    table: {
-      disable: true,
-    },
-  },
-  id: {
-    table: {
-      disable: true,
-    },
-  },
-  indeterminate: {
-    table: {
-      disable: true,
-    },
-  },
-  labelText: {
-    table: {
-      disable: true,
-    },
-  },
-  onChange: {
-    table: {
-      disable: true,
-    },
-  },
-  title: {
-    table: {
-      disable: true,
-    },
-  },
-  orientation: {
-    description: 'Provide how checkbox should be displayed',
-    control: 'select',
-    options: ['horizontal', 'vertical'],
-  },
-};
+withAILabel.argTypes = { ...sharedArgTypes };
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
index 451ace723902..d29c9ff6e0a5 100644
--- a/packages/react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -65,19 +65,111 @@ export default {
   },
 };
 
-export const Default = () => (
+const sharedArgTypes = {
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
+  ariaLabel: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  downshiftProps: {
+    table: {
+      disable: true,
+    },
+  },
+  initialSelectedItem: {
+    table: {
+      disable: true,
+    },
+  },
+  invalidText: {
+    control: 'text',
+  },
+  items: {
+    table: {
+      disable: true,
+    },
+  },
+  itemToElement: {
+    table: {
+      disable: true,
+    },
+  },
+  itemToString: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    action: 'changed',
+  },
+  onToggleClick: {
+    action: 'clicked',
+  },
+  onInputChange: {
+    table: {
+      disable: true,
+    },
+  },
+  selectedItem: {
+    table: {
+      disable: true,
+    },
+  },
+  shouldFilterItem: {
+    table: {
+      disable: true,
+    },
+  },
+  translateWithId: {
+    table: {
+      disable: true,
+    },
+  },
+  titleText: {
+    table: {
+      disable: true,
+    },
+  },
+  type: {
+    table: {
+      disable: true,
+    },
+  },
+  warnText: {
+    control: 'text',
+  },
+};
+
+export const Default = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
-      onChange={() => {}}
       id="carbon-combobox"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       titleText="ComboBox title"
       helperText="Combobox helper text"
+      {...args}
     />
   </div>
 );
 
+Default.argTypes = { ...sharedArgTypes };
+
 export const AllowCustomValue = (args) => {
   const filterItems = (menu) => {
     return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
@@ -120,7 +212,7 @@ export const AutocompleteWithTypeahead = (args) => {
     </div>
   );
 };
-export const ExperimentalAutoAlign = () => (
+export const ExperimentalAutoAlign = (args) => (
   <div style={{ width: 400 }}>
     <div style={{ height: 300 }}></div>
     <ComboBox
@@ -131,16 +223,19 @@ export const ExperimentalAutoAlign = () => (
       titleText="ComboBox title"
       helperText="Combobox helper text"
       autoAlign={true}
+      {...args}
     />
     <div style={{ height: 800 }}></div>
   </div>
 );
 
+ExperimentalAutoAlign.argTypes = { ...sharedArgTypes };
+
 AllowCustomValue.argTypes = {
   onChange: { action: 'onChange' },
 };
 
-export const _WithLayer = () => (
+export const _WithLayer = (args) => (
   <WithLayer>
     {(layer) => (
       <div style={{ width: 300 }}>
@@ -151,12 +246,15 @@ export const _WithLayer = () => (
           itemToString={(item) => (item ? item.text : '')}
           titleText="ComboBox title"
           helperText="Combobox helper text"
+          {...args}
         />
       </div>
     )}
   </WithLayer>
 );
 
+_WithLayer.argTypes = { ...sharedArgTypes };
+
 const aiLabel = (
   <AILabel className="ai-label-container">
     <AILabelContent>
@@ -188,7 +286,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
@@ -198,11 +296,14 @@ export const withAILabel = () => (
       titleText="ComboBox title"
       helperText="Combobox helper text"
       decorator={aiLabel}
+      {...args}
     />
   </div>
 );
 
-export const _fullyControlled = () => {
+withAILabel.argTypes = { ...sharedArgTypes };
+
+export const _fullyControlled = (args) => {
   const options = [
     {
       id: 'option-1',
@@ -232,6 +333,7 @@ export const _fullyControlled = () => {
         itemToString={(item) => (item ? item.text : '')}
         titleText="Fully Controlled ComboBox title"
         helperText="Combobox helper text"
+        {...args}
       />
       <div
         style={{
@@ -248,109 +350,8 @@ export const _fullyControlled = () => {
   );
 };
 
-export const Playground = (args) => (
-  <div style={{ width: 300 }}>
-    <ComboBox
-      id="carbon-combobox"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      titleText="ComboBox title"
-      helperText="Combobox helper text"
-      {...args}
-    />
-  </div>
-);
+_fullyControlled.argTypes = { ...sharedArgTypes };
 
 AutocompleteWithTypeahead.argTypes = {
   onChange: { action: 'onChange' },
 };
-
-Playground.argTypes = {
-  ['aria-label']: {
-    table: {
-      disable: true,
-    },
-  },
-  ariaLabel: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  id: {
-    table: {
-      disable: true,
-    },
-  },
-  downshiftProps: {
-    table: {
-      disable: true,
-    },
-  },
-  initialSelectedItem: {
-    table: {
-      disable: true,
-    },
-  },
-  invalidText: {
-    control: 'text',
-  },
-  items: {
-    table: {
-      disable: true,
-    },
-  },
-  itemToElement: {
-    table: {
-      disable: true,
-    },
-  },
-  itemToString: {
-    table: {
-      disable: true,
-    },
-  },
-  onChange: {
-    action: 'changed',
-  },
-  onToggleClick: {
-    action: 'clicked',
-  },
-  onInputChange: {
-    table: {
-      disable: true,
-    },
-  },
-  selectedItem: {
-    table: {
-      disable: true,
-    },
-  },
-  shouldFilterItem: {
-    table: {
-      disable: true,
-    },
-  },
-  translateWithId: {
-    table: {
-      disable: true,
-    },
-  },
-  titleText: {
-    table: {
-      disable: true,
-    },
-  },
-  type: {
-    table: {
-      disable: true,
-    },
-  },
-  warnText: {
-    control: 'text',
-  },
-};
diff --git a/packages/react/src/components/ComboButton/ComboButton.stories.js b/packages/react/src/components/ComboButton/ComboButton.stories.js
index fed5415c0d8e..2d7d4335df03 100644
--- a/packages/react/src/components/ComboButton/ComboButton.stories.js
+++ b/packages/react/src/components/ComboButton/ComboButton.stories.js
@@ -28,22 +28,56 @@ export default {
   },
 };
 
-export const Default = () => (
-  <ComboButton label="Primary action">
-    <MenuItem label="Second action with a long label description" />
-    <MenuItem label="Third action" />
-    <MenuItem label="Fourth action" disabled />
-  </ComboButton>
-);
+const sharedArgs = {
+  onClick: action('onClick'),
+  label: 'Primary action',
+};
+
+const sharedArgTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  translateWithId: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => {
+  const onClick = action('onClick (MenuItem)');
+
+  return (
+    <ComboButton {...args}>
+      <MenuItem
+        label="Second action with a long label description"
+        onClick={onClick}
+      />
+      <MenuItem label="Third action" onClick={onClick} />
+      <MenuItem label="Fourth action" disabled onClick={onClick} />
+      <MenuItemDivider />
+      <MenuItem label="Danger action" kind="danger" onClick={onClick} />
+    </ComboButton>
+  );
+};
+Default.args = { ...sharedArgs };
+Default.argTypes = { ...sharedArgTypes };
 
-export const ExperimentalAutoAlign = () => (
+export const ExperimentalAutoAlign = (args) => (
   <div style={{ width: '5000px', height: '5000px' }}>
     <div
       style={{
         position: 'absolute',
         bottom: '20px',
       }}>
-      <ComboButton label="Primary action">
+      <ComboButton label="Primary action" {...args}>
         <MenuItem label="Second action with a long label description" />
         <MenuItem label="Third action" />
         <MenuItem label="Fourth action" disabled />
@@ -52,8 +86,10 @@ export const ExperimentalAutoAlign = () => (
   </div>
 );
 
-export const WithDanger = () => (
-  <ComboButton label="Primary action">
+ExperimentalAutoAlign.argTypes = { ...sharedArgTypes };
+
+export const WithDanger = (args) => (
+  <ComboButton label="Primary action" {...args}>
     <MenuItem label="Second action with a long label description" />
     <MenuItem label="Third action" />
     <MenuItem label="Fourth action" />
@@ -62,13 +98,17 @@ export const WithDanger = () => (
   </ComboButton>
 );
 
-export const WithIcons = () => (
-  <ComboButton label="Save record">
+WithDanger.argTypes = { ...sharedArgTypes };
+
+export const WithIcons = (args) => (
+  <ComboButton label="Save record" {...args}>
     <MenuItem label="Save as a copy" renderIcon={Copy} />
     <MenuItem label="Export" renderIcon={Export} />
   </ComboButton>
 );
 
+WithIcons.argTypes = { ...sharedArgTypes };
+
 export const WithMenuAlignment = () => (
   <>
     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -123,43 +163,3 @@ export const WithMenuAlignment = () => (
     </div>
   </>
 );
-
-export const Playground = (args) => {
-  const onClick = action('onClick (MenuItem)');
-
-  return (
-    <ComboButton {...args}>
-      <MenuItem
-        label="Second action with a long label description"
-        onClick={onClick}
-      />
-      <MenuItem label="Third action" onClick={onClick} />
-      <MenuItem label="Fourth action" disabled onClick={onClick} />
-      <MenuItemDivider />
-      <MenuItem label="Danger action" kind="danger" onClick={onClick} />
-    </ComboButton>
-  );
-};
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  translateWithId: {
-    table: {
-      disable: true,
-    },
-  },
-};
-
-Playground.args = {
-  onClick: action('onClick'),
-  label: 'Primary action',
-};
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index 157d8d883ace..1705eb90c7fb 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -44,13 +44,51 @@ export default {
   },
 };
 
-export const Default = () => {
+const sharedArgTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  containerClassName: {
+    table: {
+      disable: true,
+    },
+  },
+  onClose: {
+    action: 'onClose',
+  },
+  onKeyDown: {
+    action: 'onKeyDown',
+  },
+  selectorPrimaryFocus: {
+    table: {
+      disable: true,
+    },
+  },
+  selectorsFloatingMenus: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => {
   const [open, setOpen] = useState(true);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
-      <ComposedModal open={open} onClose={() => setOpen(false)}>
-        <ModalHeader label="Account resources" title="Add a custom domain" />
+      <ComposedModal {...args} open={open} onClose={() => setOpen(false)}>
+        <ModalHeader
+          label="Account resources"
+          title="Add a custom domain"
+          {...args}
+        />
         <ModalBody>
           <p style={{ marginBottom: '1rem' }}>
             Custom domains direct requests for your apps in this Cloud Foundry
@@ -69,12 +107,18 @@ export const Default = () => {
             <SelectItem value="us-east" text="US East" />
           </Select>
         </ModalBody>
-        <ModalFooter primaryButtonText="Add" secondaryButtonText="Cancel" />
+        <ModalFooter
+          primaryButtonText="Add"
+          secondaryButtonText="Cancel"
+          {...args}
+        />
       </ComposedModal>
     </>
   );
 };
 
+Default.argTypes = { ...sharedArgTypes };
+
 export const FullWidth = () => {
   const [open, setOpen] = useState(true);
   return (
@@ -449,76 +493,3 @@ export const _withAILabel = {
     );
   },
 };
-
-export const Playground = (args) => {
-  const [open, setOpen] = useState(true);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
-      <ComposedModal {...args} open={open} onClose={() => setOpen(false)}>
-        <ModalHeader
-          label="Account resources"
-          title="Add a custom domain"
-          {...args}
-        />
-        <ModalBody>
-          <p style={{ marginBottom: '1rem' }}>
-            Custom domains direct requests for your apps in this Cloud Foundry
-            organization to a URL that you own. A custom domain can be a shared
-            domain, a shared subdomain, or a shared domain and host.
-          </p>
-          <TextInput
-            data-modal-primary-focus
-            id="text-input-1"
-            labelText="Domain name"
-            placeholder="e.g. github.com"
-            style={{ marginBottom: '1rem' }}
-          />
-          <Select id="select-1" defaultValue="us-south" labelText="Region">
-            <SelectItem value="us-south" text="US South" />
-            <SelectItem value="us-east" text="US East" />
-          </Select>
-        </ModalBody>
-        <ModalFooter
-          primaryButtonText="Add"
-          secondaryButtonText="Cancel"
-          {...args}
-        />
-      </ComposedModal>
-    </>
-  );
-};
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  containerClassName: {
-    table: {
-      disable: true,
-    },
-  },
-  onClose: {
-    action: 'onClose',
-  },
-  onKeyDown: {
-    action: 'onKeyDown',
-  },
-  selectorPrimaryFocus: {
-    table: {
-      disable: true,
-    },
-  },
-  selectorsFloatingMenus: {
-    table: {
-      disable: true,
-    },
-  },
-};
diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js
index 92deeed6da64..32851cccbfbc 100644
--- a/packages/react/src/components/ContainedList/ContainedList.stories.js
+++ b/packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -60,23 +60,26 @@ export default {
   },
 };
 
-export const Default = () => (
+const DefaultStory = (args) => (
   <>
-    <ContainedList label="List title" kind="on-page">
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-    </ContainedList>
-    <ContainedList label="List title" kind="on-page">
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-      <ContainedListItem>List item</ContainedListItem>
-    </ContainedList>
+    {[...Array(4)].map((_, i) => (
+      <ContainedList key={i} {...args}>
+        {[...Array(8)].map((_, j) => (
+          <ContainedListItem key={`${i}-${j}`}>List item</ContainedListItem>
+        ))}
+      </ContainedList>
+    ))}
   </>
 );
 
+export const Default = DefaultStory.bind({});
+
+Default.args = {
+  label: 'List title',
+  kind: 'on-page',
+  size: 'lg',
+};
+
 export const Disclosed = () => (
   <>
     <ContainedList label="List title" kind="disclosed">
@@ -352,23 +355,3 @@ export const UsageExamples = () => {
     </>
   );
 };
-
-const PlaygroundStory = (args) => (
-  <>
-    {[...Array(4)].map((_, i) => (
-      <ContainedList key={i} {...args}>
-        {[...Array(8)].map((_, j) => (
-          <ContainedListItem key={`${i}-${j}`}>List item</ContainedListItem>
-        ))}
-      </ContainedList>
-    ))}
-  </>
-);
-
-export const Playground = PlaygroundStory.bind({});
-
-Playground.args = {
-  label: 'List title',
-  kind: 'on-page',
-  size: 'lg',
-};
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
index cfab008cd933..d52de1e5c7ad 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
@@ -39,7 +39,7 @@ Content switchers allow users to toggle between two or more content sections
 within the same space on screen. Only one content section is shown at a time.
 Create Switch components for each section in the content switcher.
 
-<Canvas of={ContentSwitcherStories.Playground} />
+<Canvas of={ContentSwitcherStories.Default} />
 
 ## Component API
 
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js
index 87b331e8bdc5..bccf75da9636 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js
@@ -11,7 +11,12 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import ContentSwitcher from './ContentSwitcher';
 import { Switch, IconSwitch } from '../Switch';
 import mdx from './ContentSwitcher.mdx';
-import { TableOfContents, Workspace, ViewMode_2 } from '@carbon/icons-react';
+import {
+  TableOfContents,
+  Workspace,
+  ViewMode_2,
+  Icon,
+} from '@carbon/icons-react';
 
 export default {
   title: 'Components/ContentSwitcher',
@@ -34,17 +39,36 @@ export default {
   },
 };
 
-export const Default = () => (
-  <ContentSwitcher onChange={() => {}}>
+const sharedArgTypes = {
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
+  onChange: {
+    action: 'onChange',
+  },
+  size: {
+    options: ['sm', 'md', 'lg'],
+  },
+};
+
+export const Default = (args) => (
+  <ContentSwitcher {...args}>
     <Switch name="one" text="First section" />
-    <Switch name="two">Second section</Switch>
+    <Switch name="two" text="Second section" />
     <Switch name="three" text="Third section" />
   </ContentSwitcher>
 );
 
-export const _WithLayer = () => (
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const _WithLayer = (args) => (
   <WithLayer>
-    <ContentSwitcher onChange={() => {}}>
+    <ContentSwitcher onChange={() => {}} {...args}>
       <Switch name="one" text="First section" />
       <Switch name="two" text="Second section" />
       <Switch name="three" text="Third section" />
@@ -52,6 +76,10 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+_WithLayer.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const IconOnly = (args) => (
   <ContentSwitcher onChange={() => {}} {...args}>
     <IconSwitch name="one" text="Table of Contents">
@@ -66,6 +94,10 @@ export const IconOnly = (args) => (
   </ContentSwitcher>
 );
 
+IconOnly.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const IconOnlyWithLayer = (args) => (
   <WithLayer>
     <ContentSwitcher onChange={() => {}} {...args}>
@@ -82,29 +114,6 @@ export const IconOnlyWithLayer = (args) => (
   </WithLayer>
 );
 
-export const Playground = (args) => (
-  <ContentSwitcher {...args}>
-    <Switch name="one" text="First section" />
-    <Switch name="two" text="Second section" />
-    <Switch name="three" text="Third section" />
-  </ContentSwitcher>
-);
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  onChange: {
-    action: 'onChange',
-  },
-  size: {
-    options: ['sm', 'md', 'lg'],
-  },
+IconOnlyWithLayer.argTypes = {
+  ...sharedArgTypes,
 };
diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx
index d6ae3b7a23ce..f7c53d3650c4 100644
--- a/packages/react/src/components/CopyButton/CopyButton.mdx
+++ b/packages/react/src/components/CopyButton/CopyButton.mdx
@@ -25,7 +25,7 @@ The copy button should be accompanied by a tooltip. Tooltip feedback text should
 be concise and describe the action taken when the user clicks the copy button.
 By default we display the text “Copied!”.
 
-<Canvas of={CopyButtonStories.Playground} />
+<Canvas of={CopyButtonStories.Default} />
 
 ## Component API
 
diff --git a/packages/react/src/components/CopyButton/CopyButton.stories.js b/packages/react/src/components/CopyButton/CopyButton.stories.js
index aeb89a0dcaef..d59cafec1929 100644
--- a/packages/react/src/components/CopyButton/CopyButton.stories.js
+++ b/packages/react/src/components/CopyButton/CopyButton.stories.js
@@ -20,11 +20,9 @@ export default {
   },
 };
 
-export const Default = () => <CopyButton />;
+export const Default = (args) => <CopyButton {...args} />;
 
-export const Playground = (args) => <CopyButton {...args} />;
-
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
index 4420a233a33d..1c4affdc9db7 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
@@ -51,6 +51,49 @@ export default {
   },
 };
 
+const sharedArgTypes = {
+  filterRows: {
+    table: {
+      disable: true,
+    },
+  },
+  headers: {
+    table: {
+      disable: true,
+    },
+  },
+  isSortable: {
+    table: {
+      disable: true,
+    },
+  },
+  overflowMenuOnHover: {
+    table: {
+      disable: true,
+    },
+  },
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
+  rows: {
+    table: {
+      disable: true,
+    },
+  },
+  translateWithId: {
+    table: {
+      disable: true,
+    },
+  },
+  sortRow: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
 const columnAILabelHeaders = [
   {
     key: 'name',
@@ -143,8 +186,8 @@ const aiLabel = (
   </AILabel>
 );
 
-export const AILabelWithSelection = () => (
-  <DataTable rows={rows} headers={headers}>
+export const AILabelWithSelection = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -189,8 +232,10 @@ export const AILabelWithSelection = () => (
   </DataTable>
 );
 
-export const AILabelWithRadioSelection = () => (
-  <DataTable rows={rows} headers={headers} radio>
+AILabelWithSelection.argTypes = { ...sharedArgTypes };
+
+export const AILabelWithRadioSelection = (args) => (
+  <DataTable rows={rows} headers={headers} radio {...args}>
     {({
       rows,
       headers,
@@ -235,8 +280,10 @@ export const AILabelWithRadioSelection = () => (
   </DataTable>
 );
 
-export const AILabelWithSelectionAndExpansion = () => (
-  <DataTable rows={rows} headers={headers}>
+AILabelWithRadioSelection.argTypes = { ...sharedArgTypes };
+
+export const AILabelWithSelectionAndExpansion = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -296,8 +343,10 @@ export const AILabelWithSelectionAndExpansion = () => (
   </DataTable>
 );
 
-export const AILabelWithExpansion = () => (
-  <DataTable rows={rows} headers={headers}>
+AILabelWithSelectionAndExpansion.argTypes = { ...sharedArgTypes };
+
+export const AILabelWithExpansion = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -354,8 +403,10 @@ export const AILabelWithExpansion = () => (
   </DataTable>
 );
 
-export const ColumnAILabelWithSelectionAndExpansion = () => (
-  <DataTable rows={rows} headers={columnAILabelHeaders}>
+AILabelWithExpansion.argTypes = { ...sharedArgTypes };
+
+export const ColumnAILabelWithSelectionAndExpansion = (args) => (
+  <DataTable rows={rows} headers={columnAILabelHeaders} {...args}>
     {({
       rows,
       headers,
@@ -423,8 +474,10 @@ export const ColumnAILabelWithSelectionAndExpansion = () => (
   </DataTable>
 );
 
-export const ColumnAILabelSort = () => (
-  <DataTable rows={rows} headers={columnAILabelHeaders}>
+ColumnAILabelWithSelectionAndExpansion.argTypes = { ...sharedArgTypes };
+
+export const ColumnAILabelSort = (args) => (
+  <DataTable rows={rows} headers={columnAILabelHeaders} {...args}>
     {({
       rows,
       headers,
@@ -465,3 +518,5 @@ export const ColumnAILabelSort = () => (
     )}
   </DataTable>
 );
+
+ColumnAILabelSort.argTypes = { ...sharedArgTypes };
diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
index 0a1c81fbe9de..e102e5201b65 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
@@ -40,7 +40,50 @@ export default {
   },
 };
 
-export const Default = () => {
+const sharedArgTypes = {
+  filterRows: {
+    table: {
+      disable: true,
+    },
+  },
+  headers: {
+    table: {
+      disable: true,
+    },
+  },
+  isSortable: {
+    table: {
+      disable: true,
+    },
+  },
+  overflowMenuOnHover: {
+    table: {
+      disable: true,
+    },
+  },
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
+  rows: {
+    table: {
+      disable: true,
+    },
+  },
+  translateWithId: {
+    table: {
+      disable: true,
+    },
+  },
+  sortRow: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => {
   const rows = [
     {
       id: 'load-balancer-1',
@@ -102,7 +145,7 @@ export const Default = () => {
   const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
 
   return (
-    <Table size="lg" useZebraStyles={false} aria-label="sample table">
+    <Table {...args} aria-label="sample table">
       <TableHead>
         <TableRow>
           {headers.map((header) => (
@@ -127,7 +170,11 @@ export const Default = () => {
   );
 };
 
-export const XLWithTwoLines = () => {
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const XLWithTwoLines = (args) => {
   const rows = [
     {
       id: 'load-balancer-1',
@@ -224,7 +271,7 @@ export const XLWithTwoLines = () => {
   const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
 
   return (
-    <Table size="xl" useZebraStyles={false} aria-label="sample table">
+    <Table size="xl" useZebraStyles={false} aria-label="sample table" {...args}>
       <TableHead>
         <TableRow>
           {headers.map((header) => (
@@ -249,132 +296,6 @@ export const XLWithTwoLines = () => {
   );
 };
 
-export const Playground = (args) => {
-  const rows = [
-    {
-      id: 'load-balancer-1',
-      name: 'Load Balancer 1',
-      rule: 'Round robin',
-      Status: 'Starting',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-2',
-      name: 'Load Balancer 2',
-      rule: 'DNS delegation',
-      status: 'Active',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-3',
-      name: 'Load Balancer 3',
-      rule: 'Round robin',
-      status: 'Disabled',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-4',
-      name: 'Load Balancer 4',
-      rule: 'Round robin',
-      status: 'Disabled',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-5',
-      name: 'Load Balancer 5',
-      rule: 'Round robin',
-      status: 'Disabled',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-6',
-      name: 'Load Balancer 6',
-      rule: 'Round robin',
-      status: 'Disabled',
-      other: 'Test',
-      example: '22',
-    },
-    {
-      id: 'load-balancer-7',
-      name: 'Load Balancer 7',
-      rule: 'Round robin',
-      status: 'Disabled',
-      other: 'Test',
-      example: '22',
-    },
-  ];
-  const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
-
-  return (
-    <Table {...args} aria-label="sample table">
-      <TableHead>
-        <TableRow>
-          {headers.map((header) => (
-            <TableHeader id={header.key} key={header}>
-              {header}
-            </TableHeader>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {rows.map((row) => (
-          <TableRow key={row.id}>
-            {Object.keys(row)
-              .filter((key) => key !== 'id')
-              .map((key) => {
-                return <TableCell key={key}>{row[key]}</TableCell>;
-              })}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-Playground.argTypes = {
-  filterRows: {
-    table: {
-      disable: true,
-    },
-  },
-  headers: {
-    table: {
-      disable: true,
-    },
-  },
-  isSortable: {
-    table: {
-      disable: true,
-    },
-  },
-  overflowMenuOnHover: {
-    table: {
-      disable: true,
-    },
-  },
-  radio: {
-    table: {
-      disable: true,
-    },
-  },
-  rows: {
-    table: {
-      disable: true,
-    },
-  },
-  translateWithId: {
-    table: {
-      disable: true,
-    },
-  },
-  sortRow: {
-    table: {
-      disable: true,
-    },
-  },
+XLWithTwoLines.argTypes = {
+  ...sharedArgTypes,
 };
diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
index fccb21d44ccc..e914ded5efe4 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
@@ -61,127 +61,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <DataTable rows={rows} headers={headers}>
-    {({
-      rows,
-      headers,
-      getHeaderProps,
-      getRowProps,
-      getSelectionProps,
-      getToolbarProps,
-      getBatchActionProps,
-      onInputChange,
-      selectedRows,
-      getTableProps,
-      getTableContainerProps,
-      selectRow,
-    }) => {
-      const batchActionProps = {
-        ...getBatchActionProps({
-          onSelectAll: () => {
-            rows.map((row) => {
-              if (!row.isSelected) {
-                selectRow(row.id);
-              }
-            });
-          },
-        }),
-      };
-
-      return (
-        <TableContainer
-          title="DataTable"
-          description="With batch actions. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan mauris sed congue egestas. Integer varius mauris vel arcu pulvinar bibendum non sit amet ligula. Nullam ut nisi eu tellus aliquet vestibulum vel sit amet odio."
-          {...getTableContainerProps()}>
-          <TableToolbar {...getToolbarProps()}>
-            <TableBatchActions {...batchActionProps}>
-              <TableBatchAction
-                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
-                renderIcon={TrashCan}
-                onClick={batchActionClick(selectedRows)}>
-                Delete
-              </TableBatchAction>
-              <TableBatchAction
-                hasIconOnly
-                iconDescription="Add"
-                tooltipPosition="bottom"
-                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
-                renderIcon={Add}
-                onClick={batchActionClick(selectedRows)}>
-                Delete
-              </TableBatchAction>
-              <TableBatchAction
-                hasIconOnly
-                iconDescription="Save"
-                tooltipPosition="bottom"
-                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
-                renderIcon={Save}
-                onClick={batchActionClick(selectedRows)}>
-                Save
-              </TableBatchAction>
-              <TableBatchAction
-                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
-                renderIcon={Download}
-                onClick={batchActionClick(selectedRows)}>
-                Download
-              </TableBatchAction>
-            </TableBatchActions>
-            <TableToolbarContent
-              aria-hidden={batchActionProps.shouldShowBatchActions}>
-              <TableToolbarSearch
-                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
-                onChange={onInputChange}
-              />
-              <TableToolbarMenu
-                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}>
-                <TableToolbarAction onClick={() => alert('Alert 1')}>
-                  Action 1
-                </TableToolbarAction>
-                <TableToolbarAction onClick={() => alert('Alert 2')}>
-                  Action 2
-                </TableToolbarAction>
-                <TableToolbarAction onClick={() => alert('Alert 3')}>
-                  Action 3
-                </TableToolbarAction>
-              </TableToolbarMenu>
-              <Button
-                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
-                onClick={action('Add new row')}
-                kind="primary">
-                Add new
-              </Button>
-            </TableToolbarContent>
-          </TableToolbar>
-          <Table {...getTableProps()} aria-label="sample table">
-            <TableHead>
-              <TableRow>
-                <TableSelectAll {...getSelectionProps()} />
-                {headers.map((header, i) => (
-                  <TableHeader key={i} {...getHeaderProps({ header })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row, i) => (
-                <TableRow key={i} {...getRowProps({ row })}>
-                  <TableSelectRow {...getSelectionProps({ row })} />
-                  {row.cells.map((cell) => (
-                    <TableCell key={cell.id}>{cell.value}</TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      );
-    }}
-  </DataTable>
-);
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
@@ -288,7 +168,7 @@ export const Playground = (args) => (
   </DataTable>
 );
 
-Playground.argTypes = {
+Default.argTypes = {
   filterRows: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js
index 45dfd722d767..9d5c559fe586 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js
@@ -69,100 +69,7 @@ export default {
   },
 };
 
-export const Default = () => {
-  const [renderedRows, setRenderedRows] = useState(rows);
-
-  const handleTableFilter = (selectedCheckboxes) => {
-    setRenderedRows([]);
-
-    for (let i = 0; i < selectedCheckboxes.length; i++) {
-      // Filter the items inside the rows list
-      const filteredRows = rows.filter((row) => {
-        return Object.values(row).some((value) =>
-          String(value)
-            .toLowerCase()
-            .includes(selectedCheckboxes[i].toLowerCase())
-        );
-      });
-
-      setRenderedRows((prevData) => {
-        // Filter out duplicate rows
-        const uniqueRows = filteredRows.filter((row) => {
-          return !prevData.some((prevRow) => {
-            return Object.keys(row).every((key) => {
-              return row[key] === prevRow[key];
-            });
-          });
-        });
-        return [...prevData, ...uniqueRows];
-      });
-    }
-  };
-
-  const handleOnResetFilter = () => {
-    setRenderedRows(rows);
-  };
-
-  return (
-    <DataTable rows={renderedRows} headers={headers}>
-      {({
-        rows,
-        headers,
-        getHeaderProps,
-        getRowProps,
-        getTableProps,
-        onInputChange,
-      }) => (
-        <TableContainer title="DataTable" description="With filtering">
-          <TableToolbar>
-            <TableToolbarContent>
-              {/* pass in `onInputChange` change here to make filtering work */}
-              <TableToolbarSearch onChange={onInputChange} />
-              <TableToolbarFilter
-                onApplyFilter={handleTableFilter}
-                onResetFilter={handleOnResetFilter}
-              />
-              <TableToolbarMenu>
-                <TableToolbarAction onClick={action('Action 1 Click')}>
-                  Action 1
-                </TableToolbarAction>
-                <TableToolbarAction onClick={action('Action 2 Click')}>
-                  Action 2
-                </TableToolbarAction>
-                <TableToolbarAction onClick={action('Action 3 Click')}>
-                  Action 3
-                </TableToolbarAction>
-              </TableToolbarMenu>
-              <Button onClick={action('Button click')}>Primary Button</Button>
-            </TableToolbarContent>
-          </TableToolbar>
-          <Table {...getTableProps()} aria-label="sample table">
-            <TableHead>
-              <TableRow>
-                {headers.map((header) => (
-                  <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => (
-                <TableRow key={row.id} {...getRowProps({ row })}>
-                  {row.cells.map((cell) => (
-                    <TableCell key={cell.id}>{cell.value}</TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-    </DataTable>
-  );
-};
-
-export const Playground = (args) => {
+export const Default = (args) => {
   const [renderedRows, setRenderedRows] = useState(rows);
 
   const handleTableFilter = (selectedCheckboxes) => {
@@ -260,7 +167,7 @@ export const Playground = (args) => {
   );
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   filterRows: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js
index 655e53ffb87e..2654837af94b 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js
@@ -42,8 +42,29 @@ export default {
   },
 };
 
-export const Default = () => (
-  <DataTable rows={rows} headers={headers}>
+const sharedArgTypes = {
+  filterRows: {
+    control: false,
+  },
+  headers: {
+    control: false,
+  },
+  overflowMenuOnHover: {
+    control: false,
+  },
+  rows: {
+    control: false,
+  },
+  translateWithId: {
+    control: false,
+  },
+  sortRow: {
+    control: false,
+  },
+};
+
+export const Default = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -60,7 +81,11 @@ export const Default = () => (
         <Table {...getTableProps()} aria-label="sample table">
           <TableHead>
             <TableRow>
-              <TableSelectAll {...getSelectionProps()} />
+              {args.radio ? (
+                <th scope="col" />
+              ) : (
+                <TableSelectAll {...getSelectionProps()} />
+              )}
               {headers.map((header, i) => (
                 <TableHeader key={i} {...getHeaderProps({ header })}>
                   {header.header}
@@ -70,8 +95,16 @@ export const Default = () => (
           </TableHead>
           <TableBody>
             {rows.map((row, i) => (
-              <TableRow key={i} {...getRowProps({ row })}>
-                <TableSelectRow {...getSelectionProps({ row })} />
+              <TableRow
+                key={i}
+                {...getRowProps({ row })}
+                onClick={(evt) => {
+                  action('TableRow onClick')(evt);
+                }}>
+                <TableSelectRow
+                  {...getSelectionProps({ row })}
+                  onChange={action('TableSelectRow - onChange')}
+                />
                 {row.cells.map((cell) => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}
@@ -84,8 +117,10 @@ export const Default = () => (
   </DataTable>
 );
 
-export const WithRadioSelection = () => (
-  <DataTable rows={rows} headers={headers} radio>
+Default.argTypes = { ...sharedArgTypes };
+
+export const WithRadioSelection = (args) => (
+  <DataTable rows={rows} headers={headers} radio {...args}>
     {({
       rows,
       headers,
@@ -126,8 +161,10 @@ export const WithRadioSelection = () => (
   </DataTable>
 );
 
-export const WithSelectionAndSorting = () => (
-  <DataTable rows={rows} headers={headers} isSortable>
+WithRadioSelection.argTypes = { ...sharedArgTypes };
+
+export const WithSelectionAndSorting = (args) => (
+  <DataTable rows={rows} headers={headers} isSortable {...args}>
     {({
       rows,
       headers,
@@ -167,89 +204,5 @@ export const WithSelectionAndSorting = () => (
     )}
   </DataTable>
 );
-export const Playground = (args) => (
-  <DataTable rows={rows} headers={headers} {...args}>
-    {({
-      rows,
-      headers,
-      getHeaderProps,
-      getRowProps,
-      getSelectionProps,
-      getTableProps,
-      getTableContainerProps,
-    }) => (
-      <TableContainer
-        title="DataTable"
-        description="With selection"
-        {...getTableContainerProps()}>
-        <Table {...getTableProps()} aria-label="sample table">
-          <TableHead>
-            <TableRow>
-              {args.radio ? (
-                <th scope="col" />
-              ) : (
-                <TableSelectAll {...getSelectionProps()} />
-              )}
-              {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row, i) => (
-              <TableRow
-                key={i}
-                {...getRowProps({ row })}
-                onClick={(evt) => {
-                  action('TableRow onClick')(evt);
-                }}>
-                <TableSelectRow
-                  {...getSelectionProps({ row })}
-                  onChange={action('TableSelectRow - onChange')}
-                />
-                {row.cells.map((cell) => (
-                  <TableCell key={cell.id}>{cell.value}</TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
-  </DataTable>
-);
 
-Playground.argTypes = {
-  filterRows: {
-    table: {
-      disable: true,
-    },
-  },
-  headers: {
-    table: {
-      disable: true,
-    },
-  },
-  overflowMenuOnHover: {
-    table: {
-      disable: true,
-    },
-  },
-  rows: {
-    table: {
-      disable: true,
-    },
-  },
-  translateWithId: {
-    table: {
-      disable: true,
-    },
-  },
-  sortRow: {
-    table: {
-      disable: true,
-    },
-  },
-};
+WithSelectionAndSorting.argTypes = { ...sharedArgTypes };
diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js
index 0298aef6dcba..1705194bd6c8 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js
@@ -37,36 +37,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <DataTable rows={rows} headers={headers} isSortable>
-    {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
-      <TableContainer title="DataTable" description="With sorting">
-        <Table {...getTableProps()} aria-label="sample table">
-          <TableHead>
-            <TableRow>
-              {headers.map((header) => (
-                <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id} {...getRowProps({ row })}>
-                {row.cells.map((cell) => (
-                  <TableCell key={cell.id}>{cell.value}</TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
-  </DataTable>
-);
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <DataTable isSortable rows={rows} headers={headers} {...args}>
     {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
       <TableContainer title="DataTable" description="With sorting">
@@ -95,7 +66,7 @@ export const Playground = (args) => (
   </DataTable>
 );
 
-Playground.argTypes = {
+Default.argTypes = {
   filterRows: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js
index e430cc02bed9..aafb32e1e25d 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js
@@ -47,8 +47,21 @@ export default {
   },
 };
 
-export const Default = () => (
-  <DataTable rows={rows} headers={headers}>
+const sharedArgTypes = {
+  size: {
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    control: { type: 'select' },
+  },
+  useZebraStyles: {
+    control: { type: 'boolean' },
+  },
+  isSortable: { control: { type: 'boolean' } },
+  persistent: { control: { type: 'boolean' } },
+  radio: { table: { disable: true } },
+};
+
+export const Default = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -105,8 +118,10 @@ export const Default = () => (
   </DataTable>
 );
 
-export const PersistentToolbar = () => (
-  <DataTable rows={rows} headers={headers}>
+Default.argTypes = { ...sharedArgTypes };
+
+export const PersistentToolbar = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -163,8 +178,10 @@ export const PersistentToolbar = () => (
   </DataTable>
 );
 
-export const SmallPersistentToolbar = () => (
-  <DataTable rows={rows} headers={headers}>
+PersistentToolbar.argTypes = { ...sharedArgTypes };
+
+export const SmallPersistentToolbar = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -224,69 +241,9 @@ export const SmallPersistentToolbar = () => (
   </DataTable>
 );
 
-export const WithOverflowMenu = () => (
-  <DataTable rows={rows} headers={headers}>
-    {({
-      rows,
-      headers,
-      getHeaderProps,
-      getRowProps,
-      getTableProps,
-      getToolbarProps,
-      onInputChange,
-    }) => (
-      <TableContainer title="DataTable" description="With overflow menu">
-        <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
-          <TableToolbarContent>
-            <TableToolbarSearch onChange={onInputChange} />
-            <TableToolbarMenu>
-              <TableToolbarAction onClick={action('Action 1 Click')}>
-                Action 1
-              </TableToolbarAction>
-              <TableToolbarAction onClick={action('Action 2 Click')}>
-                Action 2
-              </TableToolbarAction>
-              <TableToolbarAction onClick={action('Action 3 Click')}>
-                Action 3
-              </TableToolbarAction>
-            </TableToolbarMenu>
-            <Button onClick={action('Button click')}>Primary Button</Button>
-          </TableToolbarContent>
-        </TableToolbar>
-        <Table {...getTableProps()} aria-label="sample table">
-          <TableHead>
-            <TableRow>
-              {headers.map((header) => (
-                <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-              <TableHeader aria-label="overflow actions" />
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id} {...getRowProps({ row })}>
-                {row.cells.map((cell) => (
-                  <TableCell key={cell.id}>{cell.value}</TableCell>
-                ))}
-                <TableCell className="cds--table-column-menu">
-                  <OverflowMenu size="sm" flipped>
-                    <OverflowMenuItem itemText="Stop app" />
-                    <OverflowMenuItem itemText="Restart app" />
-                    <OverflowMenuItem itemText="Rename app" />
-                  </OverflowMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
-  </DataTable>
-);
+SmallPersistentToolbar.argTypes = { ...sharedArgTypes };
 
-export const Playground = (args) => (
+export const WithOverflowMenu = (args) => (
   <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
@@ -300,12 +257,7 @@ export const Playground = (args) => (
       <TableContainer title="DataTable" description="With overflow menu">
         <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
           <TableToolbarContent>
-            <TableToolbarSearch
-              onChange={(evt) => {
-                action('TableToolbarSearch - onChange')(evt);
-                onInputChange(evt);
-              }}
-            />
+            <TableToolbarSearch onChange={onInputChange} />
             <TableToolbarMenu>
               <TableToolbarAction onClick={action('Action 1 Click')}>
                 Action 1
@@ -328,7 +280,7 @@ export const Playground = (args) => (
                   {header.header}
                 </TableHeader>
               ))}
-              <TableHeader />
+              <TableHeader aria-label="overflow actions" />
             </TableRow>
           </TableHead>
           <TableBody>
@@ -353,18 +305,9 @@ export const Playground = (args) => (
   </DataTable>
 );
 
-Playground.argTypes = {
-  size: {
-    options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    control: { type: 'select' },
-  },
-  useZebraStyles: {
-    control: { type: 'boolean' },
-  },
-  isSortable: { control: { type: 'boolean' } },
-  persistent: { control: { type: 'boolean' } },
+WithOverflowMenu.argTypes = {
+  ...sharedArgTypes,
   overflowMenuOnHover: {
     control: { type: 'boolean' },
   },
-  radio: { table: { disable: true } },
 };
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
index 6413dca871c3..28376ddd2fde 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -38,186 +38,7 @@ export default {
   component: DataTable,
 };
 
-export const Default = () => {
-  const insertInRandomPosition = (array, element) => {
-    const index = Math.floor(Math.random() * (array.length + 1));
-    return [...array.slice(0, index), element, ...array.slice(index)];
-  };
-
-  class DynamicRows extends React.Component {
-    state = {
-      rows,
-      headers: headers,
-      id: 0,
-    };
-
-    handleOnHeaderAdd = () => {
-      const length = this.state.headers.length;
-      const header = {
-        key: `header_${length}`,
-        header: `Header ${length}`,
-      };
-
-      this.setState((state) => {
-        const rows = state.rows.map((row) => {
-          return {
-            ...row,
-            [header.key]: header.header,
-          };
-        });
-        return {
-          rows,
-          headers: state.headers.concat(header),
-        };
-      });
-    };
-
-    handleOnRowAdd = () => {
-      this.setState((state) => {
-        const { id: _id, rows } = state;
-        const id = _id + 1;
-        const row = {
-          id: '' + id,
-          name: `New Row ${id}`,
-          protocol: 'HTTP',
-          port: id * 100,
-          rule: id % 2 === 0 ? 'Round robin' : 'DNS delegation',
-          attached_groups: `Row ${id}'s VM Groups`,
-          status: 'Starting',
-        };
-
-        state.headers
-          .filter((header) => row[header.key] === undefined)
-          .forEach((header) => {
-            row[header.key] = header.header;
-          });
-
-        return {
-          id,
-          rows: insertInRandomPosition(rows, row),
-        };
-      });
-    };
-
-    render() {
-      return (
-        <DataTable
-          rows={this.state.rows}
-          headers={this.state.headers}
-          render={({
-            rows,
-            headers,
-            getHeaderProps,
-            getSelectionProps,
-            getToolbarProps,
-            getBatchActionProps,
-            getRowProps,
-            getExpandedRowProps,
-            onInputChange,
-            selectedRows,
-            getTableProps,
-            getTableContainerProps,
-          }) => {
-            const batchActionProps = getBatchActionProps();
-            return (
-              <TableContainer
-                title="DataTable"
-                description="Use the toolbar menu to add rows and headers"
-                {...getTableContainerProps()}>
-                <TableToolbar {...getToolbarProps()}>
-                  <TableBatchActions {...getBatchActionProps()}>
-                    <TableBatchAction
-                      renderIcon={TrashCan}
-                      iconDescription="Delete the selected rows"
-                      onClick={batchActionClick(selectedRows)}
-                      tabIndex={
-                        batchActionProps.shouldShowBatchActions ? 0 : -1
-                      }>
-                      Delete
-                    </TableBatchAction>
-                    <TableBatchAction
-                      renderIcon={Save}
-                      iconDescription="Save the selected rows"
-                      onClick={batchActionClick(selectedRows)}
-                      tabIndex={
-                        batchActionProps.shouldShowBatchActions ? 0 : -1
-                      }>
-                      Save
-                    </TableBatchAction>
-                    <TableBatchAction
-                      renderIcon={Download}
-                      iconDescription="Download the selected rows"
-                      onClick={batchActionClick(selectedRows)}
-                      tabIndex={
-                        batchActionProps.shouldShowBatchActions ? 0 : -1
-                      }>
-                      Download
-                    </TableBatchAction>
-                  </TableBatchActions>
-                  <TableToolbarContent
-                    aria-hidden={batchActionProps.shouldShowBatchActions}>
-                    <TableToolbarSearch
-                      tabIndex={
-                        batchActionProps.shouldShowBatchActions ? -1 : 0
-                      }
-                      onChange={onInputChange}
-                    />
-                    <TableToolbarMenu
-                      tabIndex={
-                        batchActionProps.shouldShowBatchActions ? -1 : 0
-                      }>
-                      <TableToolbarAction onClick={this.handleOnRowAdd}>
-                        Add row
-                      </TableToolbarAction>
-                      <TableToolbarAction onClick={this.handleOnHeaderAdd}>
-                        Add header
-                      </TableToolbarAction>
-                    </TableToolbarMenu>
-                  </TableToolbarContent>
-                </TableToolbar>
-                <Table {...getTableProps()} aria-label="sample table">
-                  <TableHead>
-                    <TableRow>
-                      <TableExpandHeader aria-label="expand row" />
-                      <TableSelectAll {...getSelectionProps()} />
-                      {headers.map((header, i) => (
-                        <TableHeader key={i} {...getHeaderProps({ header })}>
-                          {header.header}
-                        </TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <React.Fragment key={row.id}>
-                        <TableExpandRow {...getRowProps({ row })}>
-                          <TableSelectRow {...getSelectionProps({ row })} />
-                          {row.cells.map((cell) => (
-                            <TableCell key={cell.id}>{cell.value}</TableCell>
-                          ))}
-                        </TableExpandRow>
-                        <TableExpandedRow
-                          colSpan={headers.length + 3}
-                          className="demo-expanded-td"
-                          {...getExpandedRowProps({ row })}>
-                          <h6>Expandable row content</h6>
-                          <div>Description here</div>
-                        </TableExpandedRow>
-                      </React.Fragment>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            );
-          }}
-        />
-      );
-    }
-  }
-  return <DynamicRows />;
-};
-
-export const Playground = (args) => {
+export const Default = (args) => {
   const insertInRandomPosition = (array, element) => {
     const index = Math.floor(Math.random() * (array.length + 1));
     return [...array.slice(0, index), element, ...array.slice(index)];
@@ -414,7 +235,7 @@ export const Playground = (args) => {
   return <DynamicRows />;
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   filterRows: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js
index 9074bac72815..9f8e4b6dd9e9 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js
@@ -45,8 +45,16 @@ export default {
   },
 };
 
-export const Default = () => (
-  <DataTable rows={rows} headers={headers}>
+const sharedArgTypes = {
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => (
+  <DataTable rows={rows} headers={headers} {...args}>
     {({
       rows,
       headers,
@@ -74,7 +82,9 @@ export const Default = () => (
           <TableBody>
             {rows.map((row) => (
               <React.Fragment key={row.id}>
-                <TableExpandRow {...getRowProps({ row })}>
+                <TableExpandRow
+                  {...getRowProps({ row })}
+                  onClick={action('onClick')}>
                   {row.cells.map((cell) => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
@@ -95,8 +105,13 @@ export const Default = () => (
   </DataTable>
 );
 
-export const BatchExpansion = () => (
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const BatchExpansion = (args) => (
   <DataTable
+    {...args}
     rows={rows}
     headers={headers}
     render={({
@@ -151,62 +166,6 @@ export const BatchExpansion = () => (
   />
 );
 
-export const Playground = (args) => (
-  <DataTable rows={rows} headers={headers} {...args}>
-    {({
-      rows,
-      headers,
-      getHeaderProps,
-      getRowProps,
-      getExpandedRowProps,
-      getTableProps,
-      getTableContainerProps,
-    }) => (
-      <TableContainer
-        title="DataTable"
-        description="With expansion"
-        {...getTableContainerProps()}>
-        <Table {...getTableProps()} aria-label="sample table">
-          <TableHead>
-            <TableRow>
-              <TableExpandHeader aria-label="expand row" />
-              {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <React.Fragment key={row.id}>
-                <TableExpandRow
-                  {...getRowProps({ row })}
-                  onClick={action('onClick')}>
-                  {row.cells.map((cell) => (
-                    <TableCell key={cell.id}>{cell.value}</TableCell>
-                  ))}
-                </TableExpandRow>
-                <TableExpandedRow
-                  colSpan={headers.length + 1}
-                  className="demo-expanded-td"
-                  {...getExpandedRowProps({ row })}>
-                  <h6>Expandable row content</h6>
-                  <div>Description here</div>
-                </TableExpandedRow>
-              </React.Fragment>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
-  </DataTable>
-);
-
-Playground.argTypes = {
-  radio: {
-    table: {
-      disable: true,
-    },
-  },
+BatchExpansion.argTypes = {
+  ...sharedArgTypes,
 };
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
index 54385af5de35..24990c0fe6ff 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
@@ -23,25 +23,14 @@ export default {
   component: DataTableSkeleton,
 };
 
-export const Skeleton = () => {
+export const Skeleton = (args) => {
   const { ...rest } = props();
-  return (
-    <div style={{ width: '800px' }}>
-      <DataTableSkeleton
-        {...rest}
-        headers={headers}
-        aria-label="sample table"
-      />
-      <br />
-    </div>
-  );
-};
 
-export const Playground = (args) => {
   return (
     <div style={{ width: '800px' }}>
       <DataTableSkeleton
         {...args}
+        {...rest}
         headers={headers}
         aria-label="sample table"
       />
@@ -50,7 +39,7 @@ export const Playground = (args) => {
   );
 };
 
-Playground.argTypes = {
+Skeleton.argTypes = {
   headers: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx
index 951870770afe..5340b36218d9 100644
--- a/packages/react/src/components/DatePicker/DatePicker.mdx
+++ b/packages/react/src/components/DatePicker/DatePicker.mdx
@@ -46,7 +46,7 @@ picker is best to use. Each picker’s format can be customized depending on
 location or need. The `DatePicker` component expects a `DatePickerInput` as a
 child.
 
-<Canvas of={DatePickerStories.Playground} />
+<Canvas of={DatePickerStories.Default} />
 
 ### Simple DatePicker
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 8da60efe423e..11c54fd8d0d8 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -41,97 +41,258 @@ export default {
   },
 };
 
-export const Simple = () => (
-  <DatePicker datePickerType="simple">
+const sharedArgTypes = {
+  appendTo: {
+    table: {
+      disable: true,
+    },
+  },
+  datePickerType: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  disable: {
+    table: {
+      disable: true,
+    },
+  },
+  enable: {
+    table: {
+      disable: true,
+    },
+  },
+  inline: {
+    table: {
+      disable: true,
+    },
+  },
+  locale: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    action: 'onChange',
+  },
+  onClose: {
+    action: 'onClose',
+  },
+  onOpen: {
+    action: 'onOpen',
+  },
+  readOnly: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  value: {
+    table: {
+      disable: true,
+    },
+  },
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  disabled: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  invalid: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  invalidText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  placeholder: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  warn: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  warnText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+  helperText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
+};
+
+export const Default = ({ readOnly, ...args }) => {
+  return (
+    <DatePicker datePickerType="single" {...args} readOnly={readOnly}>
+      <DatePickerInput
+        placeholder="mm/dd/yyyy"
+        labelText="Date Picker label"
+        id="date-picker-single"
+        {...args}
+      />
+      {args.datePickerType === 'range' && (
+        <DatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+          size="md"
+          id="date-picker-input-2"
+          {...args}
+        />
+      )}
+    </DatePicker>
+  );
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  datePickerType: {
+    options: ['sigle', 'simple', 'range'],
+    control: { type: 'select' },
+  },
+};
+
+export const Simple = (args) => (
+  <DatePicker datePickerType="simple" {...args}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
       id="date-picker-simple"
+      {...args}
     />
   </DatePicker>
 );
 
-export const SingleWithCalendar = () => (
-  <DatePicker datePickerType="single">
+Simple.argTypes = { ...sharedArgTypes };
+
+export const SingleWithCalendar = (args) => (
+  <DatePicker datePickerType="single" {...args}>
     <DatePickerInput
       placeholder="mm/dd/yyyy"
       labelText="Date Picker label"
       id="date-picker-single"
       size="md"
+      {...args}
     />
   </DatePicker>
 );
 
-export const RangeWithCalendar = () => {
+SingleWithCalendar.argTypes = { ...sharedArgTypes };
+
+export const RangeWithCalendar = (args) => {
   return (
-    <DatePicker datePickerType="range">
+    <DatePicker datePickerType="range" {...args}>
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
         labelText="Start date"
         size="md"
+        {...args}
       />
       <DatePickerInput
         id="date-picker-input-id-finish"
         placeholder="mm/dd/yyyy"
         labelText="End date"
         size="md"
+        {...args}
       />
     </DatePicker>
   );
 };
 
-export const SimpleWithLayer = () => (
+RangeWithCalendar.argTypes = { ...sharedArgTypes };
+
+export const SimpleWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
-      <DatePicker datePickerType="simple">
+      <DatePicker datePickerType="simple" {...args}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
           id={`date-picker-simple-${layer}`}
           size="md"
+          {...args}
         />
       </DatePicker>
     )}
   </WithLayer>
 );
 
-export const SingleWithCalendarWithLayer = () => (
+SimpleWithLayer.argTypes = { ...sharedArgTypes };
+
+export const SingleWithCalendarWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
-      <DatePicker datePickerType="single">
+      <DatePicker datePickerType="single" {...args}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
           id={`date-picker-single-${layer}`}
           size="md"
+          {...args}
         />
       </DatePicker>
     )}
   </WithLayer>
 );
 
-export const RangeWithCalendarWithLayer = () => (
+SingleWithCalendarWithLayer.argTypes = { ...sharedArgTypes };
+
+export const RangeWithCalendarWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
-      <DatePicker datePickerType="range">
+      <DatePicker datePickerType="range" {...args}>
         <DatePickerInput
           id={`date-picker-input-id-start-${layer}`}
           placeholder="mm/dd/yyyy"
           labelText="Start date"
           size="md"
+          {...args}
         />
         <DatePickerInput
           id={`date-picker-input-id-finish-${layer}`}
           placeholder="mm/dd/yyyy"
           labelText="End date"
           size="md"
+          {...args}
         />
       </DatePicker>
     )}
   </WithLayer>
 );
 
+RangeWithCalendarWithLayer.argTypes = { ...sharedArgTypes };
+
 export const Skeleton = () => <DatePickerSkeleton range />;
 
 const aiLabel = (
@@ -165,144 +326,19 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: 400 }}>
-    <DatePicker datePickerType="single">
+    <DatePicker datePickerType="single" {...args}>
       <DatePickerInput
         placeholder="mm/dd/yyyy"
         labelText="Date Picker label"
         size="md"
         id="date-picker"
         decorator={aiLabel}
+        {...args}
       />
     </DatePicker>
   </div>
 );
 
-export const Playground = ({ readOnly, ...args }) => {
-  return (
-    <DatePicker datePickerType="single" {...args} readOnly={readOnly}>
-      <DatePickerInput
-        placeholder="mm/dd/yyyy"
-        labelText="Date Picker label"
-        id="date-picker-single"
-        {...args}
-      />
-      {args.datePickerType === 'range' && (
-        <DatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="End date"
-          size="md"
-          id="date-picker-input-2"
-          {...args}
-        />
-      )}
-    </DatePicker>
-  );
-};
-
-Playground.argTypes = {
-  appendTo: {
-    table: {
-      disable: true,
-    },
-  },
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  disable: {
-    table: {
-      disable: true,
-    },
-  },
-  enable: {
-    table: {
-      disable: true,
-    },
-  },
-  inline: {
-    table: {
-      disable: true,
-    },
-  },
-  locale: {
-    table: {
-      disable: true,
-    },
-  },
-  onChange: {
-    action: 'onChange',
-  },
-  onClose: {
-    action: 'onClose',
-  },
-  onOpen: {
-    action: 'onOpen',
-  },
-  readOnly: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  value: {
-    table: {
-      disable: true,
-    },
-  },
-  size: {
-    options: ['sm', 'md', 'lg'],
-    control: { type: 'select' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  disabled: {
-    control: { type: 'boolean' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  invalid: {
-    control: { type: 'boolean' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  invalidText: {
-    control: { type: 'text' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  placeholder: {
-    control: { type: 'text' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  warn: {
-    control: { type: 'boolean' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  warnText: {
-    control: { type: 'text' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-  helperText: {
-    control: { type: 'text' },
-    table: {
-      category: 'DatePickerInput',
-    },
-  },
-};
+withAILabel.argTypes = { ...sharedArgTypes };
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
index 0fed948f478c..2c845a78a23c 100644
--- a/packages/react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -87,40 +87,7 @@ const items = [
   },
 ];
 
-export const ExperimentalAutoAlign = () => (
-  <div style={{ width: 400 }}>
-    <div style={{ height: 300 }}></div>
-    <Dropdown
-      autoAlign={true}
-      id="default"
-      titleText="Dropdown label"
-      helperText="This is some helper text"
-      initialSelectedItem={items[1]}
-      label="Option 1"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      direction="top"
-    />
-    <div style={{ height: 800 }}></div>
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: 400 }}>
-    <Dropdown
-      id="default"
-      titleText="Dropdown label"
-      helperText="This is some helper text"
-      initialSelectedItem={items[1]}
-      label="Option 1"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      {...args}
-    />
-  </div>
-);
-
-Playground.args = {
+const sharedArgs = {
   invalid: false,
   invalidText: 'invalid selection',
   disabled: false,
@@ -132,7 +99,7 @@ Playground.args = {
   type: 'default',
 };
 
-Playground.argTypes = {
+const sharedArgTypes = {
   invalid: {
     control: {
       type: 'boolean',
@@ -188,9 +155,34 @@ Playground.argTypes = {
   },
 };
 
-export const Default = () => (
+export const Default = (args) => (
+  <div style={{ width: 400 }}>
+    <Dropdown
+      id="default"
+      titleText="Dropdown label"
+      helperText="This is some helper text"
+      initialSelectedItem={items[1]}
+      label="Option 1"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      {...args}
+    />
+  </div>
+);
+
+Default.args = {
+  ...sharedArgs,
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const ExperimentalAutoAlign = (args) => (
   <div style={{ width: 400 }}>
+    <div style={{ height: 300 }}></div>
     <Dropdown
+      autoAlign={true}
       id="default"
       titleText="Dropdown label"
       helperText="This is some helper text"
@@ -198,11 +190,18 @@ export const Default = () => (
       label="Option 1"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      direction="top"
+      {...args}
     />
+    <div style={{ height: 800 }}></div>
   </div>
 );
 
-export const Inline = () => (
+ExperimentalAutoAlign.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const Inline = (args) => (
   <div style={{ width: 600 }}>
     <Dropdown
       id="inline"
@@ -212,11 +211,16 @@ export const Inline = () => (
       type="inline"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      {...args}
     />
   </div>
 );
 
-export const _WithLayer = () => (
+Inline.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const _WithLayer = (args) => (
   <WithLayer>
     {(layer) => (
       <div style={{ width: 400 }}>
@@ -228,13 +232,18 @@ export const _WithLayer = () => (
           label="Option 1"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
+          {...args}
         />
       </div>
     )}
   </WithLayer>
 );
 
-export const InlineWithLayer = () => (
+_WithLayer.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const InlineWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
       <div style={{ width: 600 }}>
@@ -246,12 +255,17 @@ export const InlineWithLayer = () => (
           type="inline"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
+          {...args}
         />
       </div>
     )}
   </WithLayer>
 );
 
+InlineWithLayer.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const Skeleton = () => (
   <div style={{ width: 300 }}>
     <DropdownSkeleton />
@@ -289,7 +303,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: 400 }}>
     <Dropdown
       id="default"
@@ -300,6 +314,11 @@ export const withAILabel = () => (
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       decorator={aiLabel}
+      {...args}
     />
   </div>
 );
+
+withAILabel.argTypes = {
+  ...sharedArgTypes,
+};
diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js
index f19f241e92c7..39a450c6b0a0 100644
--- a/packages/react/src/components/FileUploader/FileUploader.stories.js
+++ b/packages/react/src/components/FileUploader/FileUploader.stories.js
@@ -32,26 +32,6 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <div className="cds--file__container">
-      <FileUploader
-        labelTitle="Upload files"
-        labelDescription="Max file size is 500 MB. Only .jpg files are supported."
-        buttonLabel="Add file"
-        buttonKind="primary"
-        size="md"
-        filenameStatus="edit"
-        accept={['.jpg', '.png']}
-        multiple={true}
-        disabled={false}
-        iconDescription="Delete file"
-        name=""
-      />
-    </div>
-  );
-};
-
 export const _FileUploaderItem = (args) => {
   return (
     <FileUploaderItem
@@ -177,14 +157,14 @@ export const Skeleton = () => (
   </div>
 );
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <div className="cds--file__container">
       <FileUploader {...args} />
     </div>
   );
 };
-Playground.args = {
+Default.args = {
   labelTitle: 'Upload files',
   labelDescription: 'Max file size is 500 MB. Only .jpg files are supported.',
   buttonLabel: 'Add file',
@@ -197,7 +177,7 @@ Playground.args = {
   iconDescription: 'Delete file',
   name: '',
 };
-Playground.argTypes = {
+Default.argTypes = {
   onChange: { action: 'onChange' },
   onClick: { action: 'onClick' },
   onDelete: { action: 'onDelete' },
diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
index aefd4f0794aa..15f8593a56c9 100644
--- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
+++ b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
@@ -54,6 +54,100 @@ const items = [
   },
 ];
 
+const sharedArgTypes = {
+  className: {
+    control: {
+      type: 'text',
+    },
+  },
+  isCondensed: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  titleText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <FluidComboBox
+      onChange={() => {}}
+      id="default"
+      titleText="Label"
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      {...args}
+    />
+    <br />
+    <FluidComboBox
+      {...args}
+      onChange={() => {}}
+      id="default-3"
+      titleText={ToggleTip}
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
+Default.args = {
+  defaultWidth: 400,
+  className: 'test-class',
+  isCondensed: false,
+  disabled: false,
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  label: 'Choose an option',
+  titleText: 'Label',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+};
+
 const ToggleTip = (
   <>
     <ToggletipLabel>Label</ToggletipLabel>
@@ -68,19 +162,6 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidComboBox
-      onChange={() => {}}
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
-  </div>
-);
-
 export const Condensed = () => (
   <div style={{ width: '400px' }}>
     <FluidComboBox
@@ -126,7 +207,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: '400px' }}>
     <FluidComboBox
       onChange={() => {}}
@@ -136,102 +217,17 @@ export const withAILabel = () => (
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       decorator={aiLabel}
-    />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <FluidComboBox
-      onChange={() => {}}
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidComboBox
-      {...args}
-      onChange={() => {}}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
+withAILabel.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const Skeleton = () => (
   <div style={{ width: 400 }}>
     <FluidComboBoxSkeleton />
   </div>
 );
-
-Playground.args = {
-  playgroundWidth: 400,
-  className: 'test-class',
-  isCondensed: false,
-  disabled: false,
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  label: 'Choose an option',
-  titleText: 'Label',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
-  className: {
-    control: {
-      type: 'text',
-    },
-  },
-  isCondensed: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  label: {
-    control: {
-      type: 'text',
-    },
-  },
-  titleText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-};
diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
index e992d8e91fb5..ef6849c289df 100644
--- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
+++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
@@ -25,143 +25,14 @@ export default {
   },
 };
 
-const ToggleTip = (
-  <>
-    <ToggletipLabel>Label</ToggletipLabel>
-    <Toggletip align="top-left">
-      <ToggletipButton label="Show information">
-        <Information />
-      </ToggletipButton>
-      <ToggletipContent>
-        <p>Additional field information here.</p>
-      </ToggletipContent>
-    </Toggletip>
-  </>
-);
-
-export const Simple = () => (
-  <div style={{ width: '288px' }}>
-    <FluidDatePicker datePickerType="simple">
-      <FluidDatePickerInput
-        placeholder="mm/dd/yyyy"
-        labelText={ToggleTip}
-        id="date-picker-simple"
-      />
-    </FluidDatePicker>
-  </div>
-);
-
-export const Single = () => (
-  <div style={{ width: '288px' }}>
-    <FluidDatePicker datePickerType="single">
-      <FluidDatePickerInput
-        style={{ width: '288px' }}
-        placeholder="mm/dd/yyyy"
-        labelText={ToggleTip}
-        id="date-picker-single"
-      />
-    </FluidDatePicker>
-  </div>
-);
-
-export const RangeWithCalendar = () => {
-  return (
-    <div style={{ width: '288px' }}>
-      <FluidDatePicker datePickerType="range">
-        <FluidDatePickerInput
-          id="date-picker-input-id-start"
-          placeholder="mm/dd/yyyy"
-          labelText={ToggleTip}
-          size="md"
-        />
-        <FluidDatePickerInput
-          id="date-picker-input-id-finish"
-          placeholder="mm/dd/yyyy"
-          labelText="End date"
-          size="md"
-        />
-      </FluidDatePicker>
-    </div>
-  );
-};
-
-export const Skeleton = () => (
-  <div style={{ width: '300px' }}>
-    <FluidDatePickerSkeleton
-      datePickerType="simple"
-      labelText="Label"
-      placeholder="Placeholder text"
-      id="input-1"
-    />
-    <br />
-    <br />
-    <FluidDatePickerSkeleton
-      datePickerType="single"
-      labelText="Label"
-      placeholder="Placeholder text"
-      id="input-2"
-    />
-    <br />
-    <br />
-    <FluidDatePickerSkeleton
-      datePickerType="range"
-      labelText="Label"
-      placeholder="Placeholder text"
-      id="input-3"
-    />
-  </div>
-);
-
-export const Playground = (args) => {
-  const { invalid, invalidText, warn, warnText, disabled, readOnly } = args;
-  return (
-    <div style={{ width: '288px' }}>
-      <FluidDatePicker
-        datePickerType="range"
-        invalid={invalid}
-        invalidText={invalidText}
-        warn={warn}
-        warnText={warnText}
-        readOnly={readOnly}>
-        <FluidDatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="Date Picker label"
-          id="date-picker-range-1"
-          disabled={disabled}
-        />
-        <FluidDatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="End date"
-          id="date-picker-range-2"
-          disabled={disabled}
-        />
-      </FluidDatePicker>
-      <br />
-      <br />
-      <FluidDatePicker datePickerType="single" readOnly={readOnly}>
-        <FluidDatePickerInput
-          placeholder="mm/dd/yyyy"
-          labelText="Date Picker label"
-          id="date-picker-single"
-          invalid={invalid}
-          invalidText={invalidText}
-          disabled={disabled}
-          warn={warn}
-          warnText={warnText}
-        />
-      </FluidDatePicker>
-    </div>
-  );
-};
-
-Playground.args = {
+const sharedArgs = {
   invalidText:
     'Error message that is really long can wrap to more lines but should not be excessively long.',
   warnText:
     'Warning message that is really long can wrap to more lines but should not be excessively long.',
 };
 
-Playground.argTypes = {
+const sharedArgTypes = {
   appendTo: {
     table: {
       disable: true,
@@ -263,3 +134,103 @@ Playground.argTypes = {
     },
   },
 };
+
+const ToggleTip = (
+  <>
+    <ToggletipLabel>Label</ToggletipLabel>
+    <Toggletip align="top-left">
+      <ToggletipButton label="Show information">
+        <Information />
+      </ToggletipButton>
+      <ToggletipContent>
+        <p>Additional field information here.</p>
+      </ToggletipContent>
+    </Toggletip>
+  </>
+);
+
+export const Simple = (args) => (
+  <div style={{ width: '288px' }}>
+    <FluidDatePicker datePickerType="simple" {...args}>
+      <FluidDatePickerInput
+        placeholder="mm/dd/yyyy"
+        labelText={ToggleTip}
+        id="date-picker-simple"
+        {...args}
+      />
+    </FluidDatePicker>
+  </div>
+);
+
+Simple.args = { ...sharedArgs };
+Simple.argTypes = { ...sharedArgTypes };
+
+export const Single = (args) => (
+  <div style={{ width: '288px' }}>
+    <FluidDatePicker datePickerType="single" {...args}>
+      <FluidDatePickerInput
+        style={{ width: '288px' }}
+        placeholder="mm/dd/yyyy"
+        labelText={ToggleTip}
+        id="date-picker-single"
+        {...args}
+      />
+    </FluidDatePicker>
+  </div>
+);
+
+Single.args = { ...sharedArgs };
+Single.argTypes = { ...sharedArgTypes };
+
+export const RangeWithCalendar = (args) => {
+  return (
+    <div style={{ width: '288px' }}>
+      <FluidDatePicker datePickerType="range" {...args}>
+        <FluidDatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText={ToggleTip}
+          size="md"
+          {...args}
+        />
+        <FluidDatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+          size="md"
+          {...args}
+        />
+      </FluidDatePicker>
+    </div>
+  );
+};
+
+RangeWithCalendar.args = { ...sharedArgs };
+RangeWithCalendar.argTypes = { ...sharedArgTypes };
+
+export const Skeleton = () => (
+  <div style={{ width: '300px' }}>
+    <FluidDatePickerSkeleton
+      datePickerType="simple"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+    <br />
+    <br />
+    <FluidDatePickerSkeleton
+      datePickerType="single"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-2"
+    />
+    <br />
+    <br />
+    <FluidDatePickerSkeleton
+      datePickerType="range"
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-3"
+    />
+  </div>
+);
diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
index fa4d1cf440f8..0ff9908006c0 100644
--- a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
+++ b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
@@ -54,6 +54,98 @@ const items = [
   },
 ];
 
+const sharedArgTypes = {
+  className: {
+    control: {
+      type: 'text',
+    },
+  },
+  isCondensed: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  titleText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <FluidDropdown
+      id="default"
+      titleText="Label"
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      {...args}
+    />
+    <br />
+    <FluidDropdown
+      {...args}
+      id="default-3"
+      titleText={ToggleTip}
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
+Default.args = {
+  defaultWidth: 400,
+  className: 'test-class',
+  isCondensed: false,
+  disabled: false,
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  label: 'Choose an option',
+  titleText: 'Label',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+};
+
 const ToggleTip = (
   <>
     <ToggletipLabel>Label</ToggletipLabel>
@@ -68,19 +160,6 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidDropdown
-      initialSelectedItem={items[2]}
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
-  </div>
-);
-
 export const Condensed = () => (
   <div style={{ width: '400px' }}>
     <FluidDropdown
@@ -125,7 +204,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: '400px' }}>
     <FluidDropdown
       initialSelectedItem={items[2]}
@@ -135,100 +214,17 @@ export const withAILabel = () => (
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       decorator={aiLabel}
-    />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <FluidDropdown
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidDropdown
-      {...args}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
+withAILabel.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const Skeleton = () => (
   <div style={{ width: 400 }}>
     <FluidDropdownSkeleton />
   </div>
 );
-
-Playground.args = {
-  playgroundWidth: 400,
-  className: 'test-class',
-  isCondensed: false,
-  disabled: false,
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  label: 'Choose an option',
-  titleText: 'Label',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
-  className: {
-    control: {
-      type: 'text',
-    },
-  },
-  isCondensed: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  label: {
-    control: {
-      type: 'text',
-    },
-  },
-  titleText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-};
diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
index e06050611ab9..650166c0027e 100644
--- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
+++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
@@ -59,6 +59,106 @@ const items = [
   },
 ];
 
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <FluidMultiSelect
+      onChange={() => {}}
+      id="default"
+      titleText="Label"
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      {...args}
+    />
+    <br />
+    <FluidMultiSelect
+      {...args}
+      onChange={() => {}}
+      id="default-3"
+      titleText={ToggleTip}
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
+const sharedArgTypes = {
+  className: {
+    control: {
+      type: 'text',
+    },
+  },
+  isCondensed: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  isFilterable: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  titleText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+Default.args = {
+  defaultWidth: 400,
+  className: 'test-class',
+  isCondensed: false,
+  isFilterable: false,
+  disabled: false,
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  label: 'Choose an option',
+  titleText: 'Label',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+};
+
 const ToggleTip = (
   <>
     <ToggletipLabel>Label</ToggletipLabel>
@@ -73,20 +173,6 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidMultiSelect
-      onChange={() => {}}
-      initialSelectedItem={items[2]}
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
-  </div>
-);
-
 export const Filterable = () => (
   <div style={{ width: '400px' }}>
     <FluidMultiSelect
@@ -164,7 +250,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: '400px' }}>
     <FluidMultiSelect
       onChange={() => {}}
@@ -175,108 +261,17 @@ export const withAILabel = () => (
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       decorator={aiLabel}
-    />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <FluidMultiSelect
-      onChange={() => {}}
-      id="default"
-      titleText="Label"
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidMultiSelect
-      {...args}
-      onChange={() => {}}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
+withAILabel.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const Skeleton = () => (
   <div style={{ width: 400 }}>
     <FluidMultiSelectSkeleton />
   </div>
 );
-
-Playground.args = {
-  playgroundWidth: 400,
-  className: 'test-class',
-  isCondensed: false,
-  isFilterable: false,
-  disabled: false,
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  label: 'Choose an option',
-  titleText: 'Label',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
-  className: {
-    control: {
-      type: 'text',
-    },
-  },
-  isCondensed: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  isFilterable: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  label: {
-    control: {
-      type: 'text',
-    },
-  },
-  titleText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-};
diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
index bb1b94407630..ed116a06276a 100644
--- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
+++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
@@ -37,77 +37,27 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidNumberInput
-      label={ToggleTip}
-      placeholder="Placeholder text"
-      id="input-default"
-      step={10}
-      min={0}
-      max={100}
-      defaultValue={50}
-    />
-    <br />
-    <br />
-    <FluidNumberInput
-      label={ToggleTip}
-      placeholder="Placeholder text"
-      id="input-invalid"
-      step={10}
-      min={0}
-      max={100}
-      defaultValue={50}
-      invalid
-      invalidText="Warning message that is really long can wrap to more lines but should not be excessively long."
-    />
-    <br />
-    <br />
-    <FluidNumberInput
-      label={ToggleTip}
-      placeholder="Placeholder text"
-      id="input-warning"
-      step={10}
-      min={0}
-      max={100}
-      defaultValue={50}
-      warn
-      warnText="Warning message that is really long can wrap to more lines but should not be excessively long."
-    />
-  </div>
-);
-
-export const Skeleton = () => (
-  <div style={{ width: '400px' }}>
-    <FluidNumberInputSkeleton
-      label="Label"
-      placeholder="Placeholder text"
-      id="input-skeleton"
-    />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
     <FluidNumberInput {...args} />
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 400,
+Default.args = {
+  defaultWidth: 400,
   defaultValue: 50,
   invalid: false,
   invalidText:
     'Error message that is really long can wrap to more lines but should not be excessively long.',
   disabled: false,
-  label: 'Label',
+  label: ToggleTip,
   warn: false,
   warnText:
     'Warning message that is really long can wrap to more lines but should not be excessively long.',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   defaultValue: {
@@ -146,3 +96,13 @@ Playground.argTypes = {
     },
   },
 };
+
+export const Skeleton = () => (
+  <div style={{ width: '400px' }}>
+    <FluidNumberInputSkeleton
+      label="Label"
+      placeholder="Placeholder text"
+      id="input-skeleton"
+    />
+  </div>
+);
diff --git a/packages/react/src/components/FluidSearch/FluidSearch.stories.js b/packages/react/src/components/FluidSearch/FluidSearch.stories.js
index 32fc233402d0..d41a3e14fc28 100644
--- a/packages/react/src/components/FluidSearch/FluidSearch.stories.js
+++ b/packages/react/src/components/FluidSearch/FluidSearch.stories.js
@@ -16,40 +16,28 @@ export default {
   },
 };
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidSearch
-      size="lg"
-      labelText="Search"
-      closeButtonLabelText="Clear search input"
-      id="fluid-search-1"
-      placeholder="Prompt text"
-    />
-  </div>
-);
-
 export const Skeleton = () => (
   <div style={{ width: '400px' }}>
     <FluidSearchSkeleton />
   </div>
 );
 
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
     <FluidSearch {...args} />
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 400,
+Default.args = {
+  defaultWidth: 400,
   closeButtonLabelText: 'Clear search input',
   disabled: false,
   labelText: 'Search',
   placeholder: 'Prompt text',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   className: {
diff --git a/packages/react/src/components/FluidSelect/FluidSelect.stories.js b/packages/react/src/components/FluidSelect/FluidSelect.stories.js
index 633e9308ab08..f3507d116388 100644
--- a/packages/react/src/components/FluidSelect/FluidSelect.stories.js
+++ b/packages/react/src/components/FluidSelect/FluidSelect.stories.js
@@ -66,6 +66,44 @@ export default {
   },
 };
 
+const sharedArgTypes = {
+  className: {
+    control: {
+      type: 'text',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
 const ToggleTip = (
   <>
     <ToggletipLabel>Select an option</ToggletipLabel>
@@ -80,33 +118,9 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ width: '400px' }}>
-    <FluidSelect id="select-1" labelText={ToggleTip}>
-      <SelectItem value="" text="" />
-      <SelectItem value="option-1" text="Option 1" />
-      <SelectItem value="option-2" text="Option 2" />
-      <SelectItem value="option-3" text="Option 3" />
-      <SelectItem value="option-4" text="Option 4" />
-    </FluidSelect>
-    <br /> <br />
-    <FluidSelect
-      id="select-2"
-      labelText={ToggleTip}
-      invalid
-      invalidText="Error message that is really long can wrap to more lines but should not be excessively long.">
-      <SelectItem value="" text="" />
-      <SelectItem value="option-1" text="Option 1" />
-      <SelectItem value="option-2" text="Option 2" />
-      <SelectItem value="option-3" text="Option 3" />
-      <SelectItem value="option-4" text="Option 4" />
-    </FluidSelect>
-    <br /> <br />
-    <FluidSelect
-      id="select-3"
-      labelText={ToggleTip}
-      warn
-      warnText="Warning message that is really long can wrap to more lines but should not be excessively long.">
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <FluidSelect {...args} id="select-1">
       <SelectItem value="" text="" />
       <SelectItem value="option-1" text="Option 1" />
       <SelectItem value="option-2" text="Option 2" />
@@ -116,6 +130,26 @@ export const Default = () => (
   </div>
 );
 
+Default.args = {
+  labelText: ToggleTip,
+  defaultWidth: 400,
+  className: 'test-class',
+  disabled: false,
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+};
+
 const aiLabel = (
   <AILabel className="ai-label-container">
     <AILabelContent>
@@ -147,9 +181,13 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: 400 }}>
-    <FluidSelect id="select-1" labelText="Select an option" decorator={aiLabel}>
+    <FluidSelect
+      id="select-1"
+      labelText="Select an option"
+      decorator={aiLabel}
+      {...args}>
       <SelectItem value="" text="" />
       <SelectItem
         value="An example option that is really long to show what should be done to handle long text"
@@ -162,73 +200,10 @@ export const withAILabel = () => (
   </div>
 );
 
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <FluidSelect {...args} id="select-1">
-      <SelectItem value="" text="" />
-      <SelectItem value="option-1" text="Option 1" />
-      <SelectItem value="option-2" text="Option 2" />
-      <SelectItem value="option-3" text="Option 3" />
-      <SelectItem value="option-4" text="Option 4" />
-    </FluidSelect>
-  </div>
-);
+withAILabel.argTypes = { ...sharedArgTypes };
 
 export const Skeleton = () => (
   <div style={{ width: 400 }}>
     <FluidSelectSkeleton />
   </div>
 );
-
-Playground.args = {
-  playgroundWidth: 400,
-  className: 'test-class',
-  disabled: false,
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
-  className: {
-    control: {
-      type: 'text',
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  labelText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-};
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
index b60f4c9360e9..2685bb7507b1 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -59,75 +59,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <FluidTextArea
-    labelText="Text Area label"
-    placeholder="Placeholder text"
-    id="text-area-1"
-  />
-);
-
-export const DefaultWithLayers = () => (
-  <WithLayer>
-    {(layer) => (
-      <FluidTextArea
-        labelText="Text Area label"
-        placeholder="Placeholder text"
-        id={`text-area-${layer}`}
-      />
-    )}
-  </WithLayer>
-);
-
-const ToggleTip = (
-  <>
-    <ToggletipLabel>Text Area label</ToggletipLabel>
-    <Toggletip align="top-left">
-      <ToggletipButton label="Show information">
-        <Information />
-      </ToggletipButton>
-      <ToggletipContent>
-        <p>Additional field information here.</p>
-      </ToggletipContent>
-    </Toggletip>
-  </>
-);
-
-export const DefaultWithTooltip = () => (
-  <FluidTextArea labelText={ToggleTip} placeholder="Placeholder text" />
-);
-
-export const Skeleton = () => (
-  <div style={{ width: '300px' }}>
-    <FluidTextAreaSkeleton />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <FluidTextArea {...args} />
-  </div>
-);
-
-Playground.args = {
-  playgroundWidth: 300,
-  className: 'test-class',
-  placeholder: 'Placeholder text',
-  invalid: false,
-  invalidText:
-    'Error message that is really long can wrap to more lines but should not be excessively long.',
-  disabled: false,
-  enableCounter: false,
-  labelText: 'Text Area label',
-  maxCount: 500,
-  warn: false,
-  warnText: 'This is a warning message.',
-};
-
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
+const sharedArgTypes = {
   className: {
     control: {
       type: 'text',
@@ -179,3 +111,67 @@ Playground.argTypes = {
     },
   },
 };
+
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <FluidTextArea {...args} />
+  </div>
+);
+
+Default.args = {
+  defaultWidth: 300,
+  className: 'test-class',
+  placeholder: 'Placeholder text',
+  invalid: false,
+  invalidText:
+    'Error message that is really long can wrap to more lines but should not be excessively long.',
+  disabled: false,
+  enableCounter: false,
+  labelText: 'Text Area label',
+  maxCount: 500,
+  warn: false,
+  warnText: 'This is a warning message.',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+};
+
+export const DefaultWithLayers = () => (
+  <WithLayer>
+    {(layer) => (
+      <FluidTextArea
+        labelText="Text Area label"
+        placeholder="Placeholder text"
+        id={`text-area-${layer}`}
+      />
+    )}
+  </WithLayer>
+);
+
+const ToggleTip = (
+  <>
+    <ToggletipLabel>Text Area label</ToggletipLabel>
+    <Toggletip align="top-left">
+      <ToggletipButton label="Show information">
+        <Information />
+      </ToggletipButton>
+      <ToggletipContent>
+        <p>Additional field information here.</p>
+      </ToggletipContent>
+    </Toggletip>
+  </>
+);
+
+export const DefaultWithTooltip = () => (
+  <FluidTextArea labelText={ToggleTip} placeholder="Placeholder text" />
+);
+
+export const Skeleton = () => (
+  <div style={{ width: '300px' }}>
+    <FluidTextAreaSkeleton />
+  </div>
+);
diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js b/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js
index f226380d2526..5db3a124f170 100644
--- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js
+++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.stories.js
@@ -15,16 +15,8 @@ export default {
   component: FluidPasswordInput,
 };
 
-export const Default = () => (
-  <FluidPasswordInput
-    id="input-1"
-    labelText="Label"
-    placeholder="Placeholder text"
-  />
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
     <FluidPasswordInput
       {...args}
       id="input-1"
@@ -34,8 +26,8 @@ export const Playground = (args) => (
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 300,
+Default.args = {
+  defaultWidth: 300,
   className: 'test-class',
   placeholder: 'Placeholder text',
   showPasswordLabel: 'Show password label',
@@ -51,8 +43,8 @@ Playground.args = {
     'Warning message that is really long can wrap to more lines but should not be excessively long.',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   className: {
diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
index c95298da0f4f..5a9145bdb082 100644
--- a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
+++ b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
@@ -25,14 +25,6 @@ export default {
   },
 };
 
-export const Default = () => (
-  <FluidTextInput
-    labelText="Label"
-    placeholder="Placeholder text"
-    id="input-1"
-  />
-);
-
 const ToggleTip = (
   <>
     <ToggletipLabel>Label</ToggletipLabel>
@@ -47,28 +39,14 @@ const ToggleTip = (
   </>
 );
 
-export const DefaultWithTooltip = () => (
-  <FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
-);
-
-export const Skeleton = () => (
-  <div style={{ width: '300px' }}>
-    <FluidTextInputSkeleton
-      labelText="Label"
-      placeholder="Placeholder text"
-      id="input-1"
-    />
-  </div>
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
     <FluidTextInput {...args} />
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 300,
+Default.args = {
+  defaultWidth: 300,
   className: 'test-class',
   placeholder: 'Placeholder text',
   invalid: false,
@@ -81,8 +59,8 @@ Playground.args = {
     'Warning message that is really long can wrap to more lines but should not be excessively long.',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   className: {
@@ -141,3 +119,17 @@ Playground.argTypes = {
     },
   },
 };
+
+export const DefaultWithTooltip = () => (
+  <FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
+);
+
+export const Skeleton = () => (
+  <div style={{ width: '300px' }}>
+    <FluidTextInputSkeleton
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+  </div>
+);
diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
index 82b8ed096f2e..819c884fbaff 100644
--- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
+++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
@@ -41,101 +41,6 @@ const ToggleTip = (
   </>
 );
 
-export const Default = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <div style={{ width: '350px' }}>
-      <FluidTimePicker id="time-picker-1" labelText="Time" placeholder="hh:mm">
-        <FluidTimePickerSelect id="select-1" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-        <FluidTimePickerSelect id="select-2" labelText="Timezone">
-          <SelectItem value="et" text="Eastern Time (ET)" />
-          <SelectItem value="ct" text="Central Time (CT)" />
-          <SelectItem value="mt" text="Mountain Time (MT)" />
-          <SelectItem value="pt" text="Pacific Time (PT)" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-      <br />
-      <br />
-      <FluidTimePicker id="time-picker-2" labelText="Time" placeholder="hh:mm">
-        <FluidTimePickerSelect id="select-3" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-    </div>
-    <br />
-    <br />
-    <div style={{ width: '350px' }}>
-      <FluidTimePicker
-        id="time-picker-3"
-        labelText="Time"
-        placeholder="hh:mm"
-        invalid
-        invalidText="Error message goes here">
-        <FluidTimePickerSelect id="select-56" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-        <FluidTimePickerSelect id="select-32" labelText="Timezone">
-          <SelectItem value="et" text="Eastern Time (ET)" />
-          <SelectItem value="ct" text="Central Time (CT)" />
-          <SelectItem value="mt" text="Mountain Time (MT)" />
-          <SelectItem value="pt" text="Pacific Time (PT)" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-      <br />
-      <br />
-      <FluidTimePicker
-        id="time-picker-2322"
-        labelText="Time"
-        placeholder="hh:mm"
-        invalid
-        invalidText="Error message goes here">
-        <FluidTimePickerSelect id="select-354" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-    </div>
-    <br />
-    <br />
-    <div style={{ width: '350px' }}>
-      <FluidTimePicker
-        id="time-picker-4454"
-        labelText="Time"
-        placeholder="hh:mm"
-        warn
-        warnText="Warning message goes here">
-        <FluidTimePickerSelect id="select-6533" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-        <FluidTimePickerSelect id="select-232343" labelText="Timezone">
-          <SelectItem value="et" text="Eastern Time (ET)" />
-          <SelectItem value="ct" text="Central Time (CT)" />
-          <SelectItem value="mt" text="Mountain Time (MT)" />
-          <SelectItem value="pt" text="Pacific Time (PT)" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-      <br />
-      <br />
-      <FluidTimePicker
-        id="time-picker-22213"
-        labelText="Time"
-        placeholder="hh:mm"
-        warn
-        warnText="Warning message goes here">
-        <FluidTimePickerSelect id="select-34354" labelText={ToggleTip}>
-          <SelectItem value="am" text="AM" />
-          <SelectItem value="pm" text="PM" />
-        </FluidTimePickerSelect>
-      </FluidTimePicker>
-    </div>
-  </div>
-);
-
 export const Skeleton = () => (
   <div style={{ width: '300px' }}>
     <FluidTimePickerSkeleton />
@@ -145,7 +50,7 @@ export const Skeleton = () => (
   </div>
 );
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <div style={{ width: '350px' }}>
       <FluidTimePicker id="time-picker-1" {...args}>
@@ -176,7 +81,7 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   labelText: 'Time',
   invalidText:
     'Error message that is really long can wrap to more lines but should not be excessively long.',
@@ -185,7 +90,7 @@ Playground.args = {
     'Warning message that is really long can wrap to more lines but should not be excessively long.',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.js b/packages/react/src/components/FormGroup/FormGroup.stories.js
index 6b5018367bbd..aeace1fa2005 100644
--- a/packages/react/src/components/FormGroup/FormGroup.stories.js
+++ b/packages/react/src/components/FormGroup/FormGroup.stories.js
@@ -40,25 +40,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <FormGroup style={{ maxWidth: '400px' }} legendText="FormGroup Legend">
-    <Stack gap={7}>
-      <TextInput id="one" labelText="First Name" />
-      <TextInput id="two" labelText="Last Name" />
-      <RadioButtonGroup
-        legendText="Radio button heading"
-        name="formgroup-default-radio-button-group"
-        defaultSelected="radio-1">
-        <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
-        <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
-        <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
-      </RadioButtonGroup>
-      <Button>Submit</Button>
-    </Stack>
-  </FormGroup>
-);
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <FormGroup style={{ maxWidth: '400px' }} {...args}>
     <Stack gap={7}>
       <TextInput id="one" labelText="First Name" />
@@ -76,7 +58,7 @@ export const Playground = (args) => (
   </FormGroup>
 );
 
-Playground.argTypes = {
+Default.argTypes = {
   legendId: {
     control: {
       type: 'text',
@@ -99,7 +81,7 @@ Playground.argTypes = {
   },
 };
 
-Playground.args = {
+Default.args = {
   legendId: 'form-group-1',
   legendText: 'FormGroup Legend',
   message: false,
diff --git a/packages/react/src/components/Grid/FlexGrid.stories.js b/packages/react/src/components/Grid/FlexGrid.stories.js
index 94580021c584..4613aaaf16bb 100644
--- a/packages/react/src/components/Grid/FlexGrid.stories.js
+++ b/packages/react/src/components/Grid/FlexGrid.stories.js
@@ -297,7 +297,7 @@ export const MixedGutterModes = () => (
   </FlexGrid>
 );
 
-export const Playground = (args) => (
+export const Default = (args) => (
   <FlexGrid {...args}>
     <Row>
       <Column>
@@ -316,14 +316,14 @@ export const Playground = (args) => (
   </FlexGrid>
 );
 
-Playground.args = {
+Default.args = {
   as: 'div',
   fullWidth: false,
   narrow: false,
   condensed: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   as: {
     control: {
       type: 'text',
diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
index db6e7b489751..3c770ef8bb39 100644
--- a/packages/react/src/components/Grid/Grid.stories.js
+++ b/packages/react/src/components/Grid/Grid.stories.js
@@ -36,15 +36,49 @@ export default {
   ],
 };
 
-export const Default = () => {
-  return (
-    <Grid>
-      <Column sm={4} />
-      <Column sm={4} />
-      <Column sm={4} />
-      <Column sm={4} />
-    </Grid>
-  );
+export const Default = (args) => (
+  <Grid {...args}>
+    <Column sm={4} />
+    <Column sm={4} />
+    <Column sm={4} />
+    <Column sm={4} />
+  </Grid>
+);
+
+Default.args = {
+  as: 'div',
+  fullWidth: false,
+  narrow: false,
+  condensed: false,
+};
+
+Default.argTypes = {
+  as: {
+    control: {
+      type: 'text',
+    },
+  },
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
+  fullWidth: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  narrow: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  condensed: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };
 
 export const Narrow = () => {
@@ -272,48 +306,3 @@ export const Offset = () => (
     />
   </Grid>
 );
-
-export const Playground = (args) => (
-  <Grid {...args}>
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-  </Grid>
-);
-
-Playground.args = {
-  as: 'div',
-  fullWidth: false,
-  narrow: false,
-  condensed: false,
-};
-
-Playground.argTypes = {
-  as: {
-    control: {
-      type: 'text',
-    },
-  },
-  children: {
-    control: false,
-  },
-  className: {
-    control: false,
-  },
-  fullWidth: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  narrow: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  condensed: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};
diff --git a/packages/react/src/components/IconButton/IconButton.stories.js b/packages/react/src/components/IconButton/IconButton.stories.js
index 7a7406d506ee..526d7d9f93cf 100644
--- a/packages/react/src/components/IconButton/IconButton.stories.js
+++ b/packages/react/src/components/IconButton/IconButton.stories.js
@@ -36,15 +36,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <div style={{ margin: '3rem' }}>
-    <IconButton label="label">
-      <Edit />
-    </IconButton>
-  </div>
-);
-
-const PlaygroundStory = (props) => {
+const DefaultStory = (props) => {
   const { align, defaultOpen, disabled, kind, label, size } = props;
   return (
     <div style={{ margin: '3rem' }}>
@@ -61,9 +53,9 @@ const PlaygroundStory = (props) => {
   );
 };
 
-export const Playground = PlaygroundStory.bind({});
+export const Default = DefaultStory.bind({});
 
-Playground.args = {
+Default.args = {
   align: 'bottom',
   defaultOpen: true,
   disabled: false,
@@ -71,7 +63,7 @@ Playground.args = {
   kind: 'primary',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   align: {
     options: [
       'top',
diff --git a/packages/react/src/components/Icons/Icons.stories.js b/packages/react/src/components/Icons/Icons.stories.js
index 32751beb249d..953d396234fa 100644
--- a/packages/react/src/components/Icons/Icons.stories.js
+++ b/packages/react/src/components/Icons/Icons.stories.js
@@ -14,36 +14,22 @@ export default {
   title: 'Elements/Icons',
 };
 
-export const Default = () => {
+export const Default = (args) => {
   return (
-    <>
-      <section className="demo-icon-example">
-        <h2>16 pixel (default)</h2>
-        <Bee />
-      </section>
-
-      <section className="demo-icon-example">
-        <h2>20 pixel</h2>
-        <Bicycle size={20} />
-      </section>
-
-      <section className="demo-icon-example">
-        <h2>32 pixel</h2>
-        <ChevronUp size={32} />
-      </section>
-    </>
+    <section className="demo-icon-example">
+      <h2>
+        {args.size} pixel {args.size === 16 ? '(default)' : ''}
+      </h2>
+      <Bee {...args} />
+    </section>
   );
 };
 
-export const Playground = (args) => {
-  return <Bee {...args} />;
-};
-
-Playground.args = {
+Default.args = {
   size: 16,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   size: {
     options: ['16', '20', '32'],
     control: { type: 'select' },
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/InlineLoading.stories.js
index 5b999ffbadd3..b0cd2f0b1f45 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.stories.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading.stories.js
@@ -20,14 +20,6 @@ export default {
   },
 };
 
-export const Default = () => (
-  <InlineLoading
-    status="active"
-    iconDescription="Loading"
-    description="Loading data..."
-  />
-);
-
 export const UxExample = () => {
   function MockSubmission({ children }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -85,14 +77,14 @@ export const UxExample = () => {
   );
 };
 
-export const Playground = (args) => <InlineLoading {...args} />;
+export const Default = (args) => <InlineLoading {...args} />;
 
-Playground.args = {
+Default.args = {
   description: 'Loading',
   iconDescription: 'Loading data...',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/Layer/Layer.stories.js b/packages/react/src/components/Layer/Layer.stories.js
index 19feb908072b..f3f588f48187 100644
--- a/packages/react/src/components/Layer/Layer.stories.js
+++ b/packages/react/src/components/Layer/Layer.stories.js
@@ -61,18 +61,22 @@ export const Default = () => {
   );
 };
 
-export const CustomLevel = () => {
+export const CustomLevel = (args) => {
   function TestComponent() {
     return <div className="example-layer-test-component">Test component</div>;
   }
 
   return (
-    <Layer level={2}>
+    <Layer level={2} {...args}>
       <TestComponent />
     </Layer>
   );
 };
 
+CustomLevel.args = {
+  level: 2,
+};
+
 export const UseLayer = () => {
   function ExampleComponent() {
     const { level } = useLayer();
@@ -96,17 +100,3 @@ export const UseLayer = () => {
 UseLayer.story = {
   name: 'useLayer',
 };
-
-const PlaygroundStory = (args) => {
-  function TestComponent() {
-    return <div className="example-layer-test-component">Test component</div>;
-  }
-
-  return (
-    <Layer {...args}>
-      <TestComponent />
-    </Layer>
-  );
-};
-
-export const Playground = PlaygroundStory.bind({});
diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js
index 38afe5a4198c..60f9811495a5 100644
--- a/packages/react/src/components/Link/Link.stories.js
+++ b/packages/react/src/components/Link/Link.stories.js
@@ -40,7 +40,11 @@ export default {
   },
 };
 
-export const Default = () => <Link href="#">Link</Link>;
+export const Default = (args) => (
+  <Link href="#" {...args}>
+    Link
+  </Link>
+);
 
 export const Inline = () => (
   <>
@@ -64,14 +68,11 @@ export const Inline = () => (
   </>
 );
 
-export const PairedWithIcon = () => (
-  <Link href="#" renderIcon={() => <ArrowRight aria-label="Arrow Right" />}>
+export const PairedWithIcon = (args) => (
+  <Link
+    href="#"
+    renderIcon={() => <ArrowRight aria-label="Arrow Right" />}
+    {...args}>
     Carbon Docs
   </Link>
 );
-
-export const Playground = (args) => (
-  <Link href="#" {...args}>
-    Link
-  </Link>
-);
diff --git a/packages/react/src/components/Loading/Loading.stories.js b/packages/react/src/components/Loading/Loading.stories.js
index fabd7d250680..501b699bb4a2 100644
--- a/packages/react/src/components/Loading/Loading.stories.js
+++ b/packages/react/src/components/Loading/Loading.stories.js
@@ -19,22 +19,18 @@ export default {
   },
 };
 
-export const Default = () => {
-  return <Loading className={'some-class'} withOverlay={false} />;
-};
-
-export const Playground = (args) => {
+export const Default = (args) => {
   return <Loading className={'some-class'} {...args} />;
 };
 
-Playground.args = {
+Default.args = {
   active: true,
   withOverlay: false,
   small: false,
   description: 'Loading',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/Menu/Menu.stories.js b/packages/react/src/components/Menu/Menu.stories.js
index ca8350754de4..80a9ca1bf264 100644
--- a/packages/react/src/components/Menu/Menu.stories.js
+++ b/packages/react/src/components/Menu/Menu.stories.js
@@ -40,7 +40,7 @@ export default {
   },
 };
 
-export const Playground = (args) => {
+export const Default = (args) => {
   const itemOnClick = action('onClick (MenuItem)');
   const selectableOnChange = action('onChange (MenuItemSelectable)');
   const radioOnChange = action('onChange (MenuItemRadioGroup)');
@@ -88,12 +88,12 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   onClose: action('onClose'),
   open: true,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   target: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js
index 6c9d0eb932e2..18ffd5b36900 100644
--- a/packages/react/src/components/MenuButton/MenuButton.stories.js
+++ b/packages/react/src/components/MenuButton/MenuButton.stories.js
@@ -29,21 +29,51 @@ export default {
   },
 };
 
-export const Default = () => (
-  <MenuButton label="Actions">
-    <MenuItem label="First action" />
-    <MenuItem label="Second action that is a longer item to test overflow and title." />
-    <MenuItem label="Third action" disabled />
-  </MenuButton>
-);
-export const ExperimentalAutoAlign = () => (
+const sharedArgTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  menuTarget: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = (args) => {
+  const onClick = action('onClick (MenuItem)');
+
+  return (
+    <MenuButton {...args}>
+      <MenuItem
+        label="First action with a long label description"
+        onClick={onClick}
+      />
+      <MenuItem label="Second action" onClick={onClick} />
+      <MenuItem label="Third action" onClick={onClick} disabled />
+    </MenuButton>
+  );
+};
+
+Default.args = { label: 'Actions' };
+
+Default.argTypes = { ...sharedArgTypes };
+
+export const ExperimentalAutoAlign = (args) => (
   <div style={{ width: '5000px', height: '5000px' }}>
     <div
       style={{
         position: 'absolute',
         bottom: '20px',
       }}>
-      <MenuButton label="Actions">
+      <MenuButton label="Actions" {...args}>
         <MenuItem label="First action" />
         <MenuItem label="Second action that is a longer item to test overflow and title." />
         <MenuItem label="Third action" disabled />
@@ -51,8 +81,11 @@ export const ExperimentalAutoAlign = () => (
     </div>
   </div>
 );
-export const WithDanger = () => (
-  <MenuButton label="Actions">
+
+ExperimentalAutoAlign.argTypes = { ...sharedArgTypes };
+
+export const WithDanger = (args) => (
+  <MenuButton label="Actions" {...args}>
     <MenuItem label="First action" />
     <MenuItem label="Second action" />
     <MenuItem label="Third action" />
@@ -61,8 +94,10 @@ export const WithDanger = () => (
   </MenuButton>
 );
 
-export const WithDividers = () => (
-  <MenuButton label="Actions">
+WithDanger.argTypes = { ...sharedArgTypes };
+
+export const WithDividers = (args) => (
+  <MenuButton label="Actions" {...args}>
     <MenuItem label="Create service request" />
     <MenuItem label="Create work order" />
     <MenuItemDivider />
@@ -74,14 +109,18 @@ export const WithDividers = () => (
   </MenuButton>
 );
 
-export const WithIcons = () => (
-  <MenuButton label="Add">
+WithDividers.argTypes = { ...sharedArgTypes };
+
+export const WithIcons = (args) => (
+  <MenuButton label="Add" {...args}>
     <MenuItem label="Asset" renderIcon={Asset} />
     <MenuItem label="User" renderIcon={User} />
     <MenuItem label="User group" renderIcon={Group} />
   </MenuButton>
 );
 
+WithIcons.argTypes = { ...sharedArgTypes };
+
 export const WithMenuAlignment = () => (
   <>
     <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -130,40 +169,3 @@ export const WithMenuAlignment = () => (
     </div>
   </>
 );
-
-export const Playground = (args) => {
-  const onClick = action('onClick (MenuItem)');
-
-  return (
-    <MenuButton {...args}>
-      <MenuItem
-        label="First action with a long label description"
-        onClick={onClick}
-      />
-      <MenuItem label="Second action" onClick={onClick} />
-      <MenuItem label="Third action" onClick={onClick} disabled />
-    </MenuButton>
-  );
-};
-
-Playground.args = {
-  label: 'Actions',
-};
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  menuTarget: {
-    table: {
-      disable: true,
-    },
-  },
-};
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index 176c3049aa25..c30eb8fe57be 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -44,294 +44,13 @@ export default {
   },
 };
 
-export const Default = () => {
-  const [open, setOpen] = useState(true);
-  const [openPopover, setOpenPopover] = useState(false);
-  const menuTargetref = useRef(null);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Launch modal</Button>
-      <Modal
-        open={open}
-        onRequestClose={() => setOpen(false)}
-        modalHeading="Add a custom domain"
-        modalLabel="Account resources"
-        primaryButtonText="Add"
-        secondaryButtonText="Cancel">
-        <p style={{ marginBottom: '1rem' }}>
-          Custom domains direct requests for your apps in this Cloud Foundry
-          organization to a URL that you own. A custom domain can be a shared
-          domain, a shared subdomain, or a shared domain and host.
-        </p>
-        <Popover open={openPopover} autoAlign>
-          <div className="playground-trigger">
-            <CheckboxIcon
-              onClick={() => {
-                setOpenPopover(!openPopover);
-              }}
-            />
-          </div>
-          <PopoverContent className="p-3">
-            <div>
-              <p className="popover-title">This popover uses autoAlign</p>
-              <p className="popover-details">
-                Scroll the container up, down, left or right to observe how the
-                popover will automatically change its position in attempt to
-                stay within the viewport. This works on initial render in
-                addition to on scroll.
-              </p>
-            </div>
-          </PopoverContent>
-        </Popover>
-        <TextInput
-          data-modal-primary-focus
-          id="text-input-1"
-          labelText="Domain name"
-          placeholder="e.g. github.com"
-          style={{ marginBottom: '1rem' }}
-        />
-        <Select id="select-1" defaultValue="us-south" labelText="Region">
-          <SelectItem value="us-south" text="US South" />
-          <SelectItem value="us-east" text="US East" />
-        </Select>
-        <Dropdown
-          id="drop"
-          label="Dropdown"
-          titleText="Dropdown"
-          items={[
-            { id: 'one', label: 'one', name: 'one' },
-            { id: 'two', label: 'two', name: 'two' },
-          ]}
-        />
-        <br />
-        <div ref={menuTargetref}>
-          <MenuButton label="Actions" menuTarget={menuTargetref.current}>
-            <MenuItem label="First action" />
-            <MenuItem label="Second action" />
-            <MenuItem label="Third action" />
-            <MenuItem label="Danger action" kind="danger" />
-          </MenuButton>
-        </div>
-        <br />
-        <MultiSelect
-          id="test"
-          label="Multiselect"
-          titleText="Multiselect"
-          items={[
-            {
-              id: 'downshift-1-item-0',
-              text: 'Option 1',
-            },
-            {
-              id: 'downshift-1-item-1',
-              text: 'Option 2',
-            },
-          ]}
-          itemToString={(item) => (item ? item.text : '')}
-        />
-      </Modal>
-    </>
-  );
-};
-
-export const FullWidth = () => {
-  const [open, setOpen] = useState(true);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Launch modal</Button>
-      <Modal
-        open={open}
-        onRequestClose={() => setOpen(false)}
-        isFullWidth
-        modalHeading="Full Width Modal"
-        modalLabel="An example of a modal with no padding"
-        primaryButtonText="Add"
-        secondaryButtonText="Cancel">
-        <StructuredListWrapper>
-          <StructuredListHead>
-            <StructuredListRow head>
-              <StructuredListCell head noWrap>
-                Column A
-              </StructuredListCell>
-              <StructuredListCell head noWrap>
-                Column B
-              </StructuredListCell>
-              <StructuredListCell head noWrap>
-                Column C
-              </StructuredListCell>
-            </StructuredListRow>
-          </StructuredListHead>
-          <StructuredListBody>
-            <StructuredListRow>
-              <StructuredListCell noWrap>Row 1</StructuredListCell>
-              <StructuredListCell>Row 1</StructuredListCell>
-              <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor interdum.
-              </StructuredListCell>
-            </StructuredListRow>
-            <StructuredListRow>
-              <StructuredListCell noWrap>Row 2</StructuredListCell>
-              <StructuredListCell>Row 2</StructuredListCell>
-              <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor interdum.
-              </StructuredListCell>
-            </StructuredListRow>
-            <StructuredListRow>
-              <StructuredListCell noWrap>Row 3</StructuredListCell>
-              <StructuredListCell>Row 3</StructuredListCell>
-              <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor interdum.
-              </StructuredListCell>
-            </StructuredListRow>
-          </StructuredListBody>
-        </StructuredListWrapper>
-      </Modal>
-    </>
-  );
-};
-
-export const DangerModal = () => {
-  const [open, setOpen] = useState(true);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Launch modal</Button>
-      <Modal
-        open={open}
-        onRequestClose={() => setOpen(false)}
-        danger
-        modalHeading="Are you sure you want to delete this custom domain?"
-        modalLabel="Account resources"
-        primaryButtonText="Delete"
-        secondaryButtonText="Cancel"
-      />
-    </>
-  );
-};
-
 const buttons = {
   'One (1)': '1',
   'Two (2)': '2',
   'Three (3)': '3',
 };
-const modalFooter = (numberOfButtons) => {
-  const secondaryButtons = () => {
-    switch (numberOfButtons) {
-      case '1':
-        return {
-          secondaryButtons: [],
-        };
-      case '2':
-        return {
-          secondaryButtonText: 'Cancel',
-        };
-      case '3':
-        return {
-          secondaryButtons: [
-            {
-              buttonText: 'Keep both',
-              onClick: action('onClick'),
-            },
-            {
-              buttonText: 'Rename',
-              onClick: action('onClick'),
-            },
-          ],
-        };
-      default:
-        return null;
-    }
-  };
-  return {
-    ...secondaryButtons(),
-  };
-};
-
-export const WithScrollingContent = () => {
-  const [open, setOpen] = useState(true);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Launch modal</Button>
-      <Modal
-        open={open}
-        onRequestClose={() => setOpen(false)}
-        hasScrollingContent
-        modalHeading="Add a custom domain"
-        modalLabel="Account resources"
-        primaryButtonText="Add"
-        secondaryButtonText="Cancel">
-        <p style={{ marginBottom: '1rem' }}>
-          Custom domains direct requests for your apps in this Cloud Foundry
-          organization to a URL that you own. A custom domain can be a shared
-          domain, a shared subdomain, or a shared domain and host.
-        </p>
-        <p style={{ marginBottom: '1rem' }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu
-          nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo
-          vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies
-          fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel
-          vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus
-          tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare.
-          Etiam gravida orci ut lectus dictum, quis ultricies felis mollis.
-          Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis
-          pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit.
-          Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna.
-          Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec
-          molestie sollicitudin.{' '}
-        </p>
-        <TextInput
-          data-modal-primary-focus
-          id="text-input-1"
-          labelText="Domain name"
-          placeholder="e.g. github.com"
-          style={{ marginBottom: '1rem' }}
-        />
-        <div style={{ marginBottom: '1rem' }}>
-          <Select id="select-1" defaultValue="us-south" labelText="Region">
-            <SelectItem value="us-south" text="US South" />
-            <SelectItem value="us-east" text="US East" />
-          </Select>
-        </div>
-        <Dropdown
-          id="drop"
-          label="Dropdown"
-          titleText="Dropdown"
-          items={[
-            { id: 'one', label: 'one', name: 'one' },
-            { id: 'two', label: 'two', name: 'two' },
-          ]}
-          style={{ marginBottom: '1rem' }}
-        />
-        <MultiSelect
-          id="test"
-          label="Multiselect"
-          titleText="Multiselect"
-          items={[
-            {
-              id: 'downshift-1-item-0',
-              text: 'Option 1',
-            },
-            {
-              id: 'downshift-1-item-1',
-              text: 'Option 2',
-            },
-          ]}
-          itemToString={(item) => (item ? item.text : '')}
-        />
-      </Modal>
-    </>
-  );
-};
 
-export const Playground = ({ numberOfButtons, ...args }) => {
+export const Default = ({ numberOfButtons, ...args }) => {
   const [open, setOpen] = useState(true);
   const [popoverOpen, setPopoverOpen] = useState(false);
   return (
@@ -465,7 +184,7 @@ export const Playground = ({ numberOfButtons, ...args }) => {
         </p>
 
         <Popover align={'bottom-right'} autoAlign open={popoverOpen}>
-          <div className="playground-trigger">
+          <div className="default-trigger">
             <CheckboxIcon
               onClick={() => {
                 setPopoverOpen(!popoverOpen);
@@ -555,11 +274,11 @@ export const Playground = ({ numberOfButtons, ...args }) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   numberOfButtons: 'Two (2)',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
@@ -628,6 +347,198 @@ Playground.argTypes = {
   },
 };
 
+export const FullWidth = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Launch modal</Button>
+      <Modal
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        isFullWidth
+        modalHeading="Full Width Modal"
+        modalLabel="An example of a modal with no padding"
+        primaryButtonText="Add"
+        secondaryButtonText="Cancel">
+        <StructuredListWrapper>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head noWrap>
+                Column A
+              </StructuredListCell>
+              <StructuredListCell head noWrap>
+                Column B
+              </StructuredListCell>
+              <StructuredListCell head noWrap>
+                Column C
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            <StructuredListRow>
+              <StructuredListCell noWrap>Row 1</StructuredListCell>
+              <StructuredListCell>Row 1</StructuredListCell>
+              <StructuredListCell>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell noWrap>Row 2</StructuredListCell>
+              <StructuredListCell>Row 2</StructuredListCell>
+              <StructuredListCell>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </StructuredListCell>
+            </StructuredListRow>
+            <StructuredListRow>
+              <StructuredListCell noWrap>Row 3</StructuredListCell>
+              <StructuredListCell>Row 3</StructuredListCell>
+              <StructuredListCell>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </Modal>
+    </>
+  );
+};
+
+export const DangerModal = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Launch modal</Button>
+      <Modal
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        danger
+        modalHeading="Are you sure you want to delete this custom domain?"
+        modalLabel="Account resources"
+        primaryButtonText="Delete"
+        secondaryButtonText="Cancel"
+      />
+    </>
+  );
+};
+
+const modalFooter = (numberOfButtons) => {
+  const secondaryButtons = () => {
+    switch (numberOfButtons) {
+      case '1':
+        return {
+          secondaryButtons: [],
+        };
+      case '2':
+        return {
+          secondaryButtonText: 'Cancel',
+        };
+      case '3':
+        return {
+          secondaryButtons: [
+            {
+              buttonText: 'Keep both',
+              onClick: action('onClick'),
+            },
+            {
+              buttonText: 'Rename',
+              onClick: action('onClick'),
+            },
+          ],
+        };
+      default:
+        return null;
+    }
+  };
+  return {
+    ...secondaryButtons(),
+  };
+};
+
+export const WithScrollingContent = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Launch modal</Button>
+      <Modal
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        hasScrollingContent
+        modalHeading="Add a custom domain"
+        modalLabel="Account resources"
+        primaryButtonText="Add"
+        secondaryButtonText="Cancel">
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <p style={{ marginBottom: '1rem' }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu
+          nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo
+          vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies
+          fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel
+          vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus
+          tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare.
+          Etiam gravida orci ut lectus dictum, quis ultricies felis mollis.
+          Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis
+          pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit.
+          Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna.
+          Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec
+          molestie sollicitudin.{' '}
+        </p>
+        <TextInput
+          data-modal-primary-focus
+          id="text-input-1"
+          labelText="Domain name"
+          placeholder="e.g. github.com"
+          style={{ marginBottom: '1rem' }}
+        />
+        <div style={{ marginBottom: '1rem' }}>
+          <Select id="select-1" defaultValue="us-south" labelText="Region">
+            <SelectItem value="us-south" text="US South" />
+            <SelectItem value="us-east" text="US East" />
+          </Select>
+        </div>
+        <Dropdown
+          id="drop"
+          label="Dropdown"
+          titleText="Dropdown"
+          items={[
+            { id: 'one', label: 'one', name: 'one' },
+            { id: 'two', label: 'two', name: 'two' },
+          ]}
+          style={{ marginBottom: '1rem' }}
+        />
+        <MultiSelect
+          id="test"
+          label="Multiselect"
+          titleText="Multiselect"
+          items={[
+            {
+              id: 'downshift-1-item-0',
+              text: 'Option 1',
+            },
+            {
+              id: 'downshift-1-item-1',
+              text: 'Option 2',
+            },
+          ]}
+          itemToString={(item) => (item ? item.text : '')}
+        />
+      </Modal>
+    </>
+  );
+};
+
 export const WithStateManager = () => {
   /**
    * Simple state manager for modals.
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 819d32671c8c..ff22380feb1e 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -116,37 +116,7 @@ const items = [
   },
 ];
 
-export const Playground = (args) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
-  });
-  return (
-    <div style={{ width: '5000px', height: '5000px' }}>
-      <div
-        style={{
-          position: 'absolute',
-          top: '2500px',
-          left: '2500px',
-          width: 300,
-        }}>
-        <MultiSelect
-          label="Multiselect Label"
-          id="carbon-multiselect-example"
-          titleText="Multiselect title"
-          helperText="This is helper text"
-          items={items}
-          itemToString={(item) => (item ? item.text : '')}
-          selectionFeedback="top-after-reopen"
-          ref={ref}
-          {...args}
-        />
-      </div>
-    </div>
-  );
-};
-
-Playground.args = {
+const sharedArgs = {
   size: 'md',
   autoAlign: false,
   type: 'default',
@@ -166,7 +136,7 @@ Playground.args = {
   selectAllItemText: 'All options',
 };
 
-Playground.argTypes = {
+const sharedArgTypes = {
   selectionFeedback: {
     options: ['top', 'fixed', 'top-after-reopen'],
     control: { type: 'select' },
@@ -243,7 +213,7 @@ Playground.argTypes = {
   },
 };
 
-export const Default = () => {
+export const Default = (args) => {
   return (
     <div
       style={{
@@ -257,12 +227,16 @@ export const Default = () => {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
     </div>
   );
 };
 
-export const WithInitialSelectedItems = () => {
+Default.args = { ...sharedArgs };
+Default.argTypes = { ...sharedArgTypes };
+
+export const WithInitialSelectedItems = (args) => {
   return (
     <div
       style={{
@@ -277,6 +251,7 @@ export const WithInitialSelectedItems = () => {
         itemToString={(item) => (item ? item.text : '')}
         initialSelectedItems={[items[0], items[1]]}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
     </div>
   );
@@ -310,7 +285,7 @@ Filterable.argTypes = {
   },
 };
 
-export const WithLayerMultiSelect = () => (
+export const WithLayerMultiSelect = (args) => (
   <WithLayer>
     {(layer) => (
       <div style={{ width: 300 }}>
@@ -322,13 +297,14 @@ export const WithLayerMultiSelect = () => (
           items={items}
           itemToString={(item) => (item ? item.text : '')}
           selectionFeedback="top-after-reopen"
+          {...args}
         />
       </div>
     )}
   </WithLayer>
 );
 
-export const _FilterableWithLayer = () => (
+export const _FilterableWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
       <div style={{ width: 300 }}>
@@ -339,13 +315,14 @@ export const _FilterableWithLayer = () => (
           items={items}
           itemToString={(item) => (item ? item.text : '')}
           selectionFeedback="top-after-reopen"
+          {...args}
         />
       </div>
     )}
   </WithLayer>
 );
 
-export const _Controlled = () => {
+export const _Controlled = (args) => {
   const [selectedItems, setSelectedItems] = useState(
     items.filter((item) => item.id === 'downshift-1-item-0')
   );
@@ -366,6 +343,7 @@ export const _Controlled = () => {
         onChange={(data) => onSelectionChanged(data.selectedItems)}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
       <br />
       <ButtonSet>
@@ -412,7 +390,7 @@ const itemsWithSelectAll = [
   },
 ];
 
-export const SelectAll = () => {
+export const SelectAll = (args) => {
   const [label, setLabel] = useState('Choose options');
 
   const onChange = (value) => {
@@ -436,6 +414,7 @@ export const SelectAll = () => {
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
         onChange={onChange}
+        {...args}
       />
     </div>
   );
@@ -487,7 +466,7 @@ export const withAILabel = () => (
   </div>
 );
 
-export const FilterableWithAILabel = () => (
+export const FilterableWithAILabel = (args) => (
   <div style={{ width: 400 }}>
     <FilterableMultiSelect
       label="Multiselect Label"
@@ -498,11 +477,12 @@ export const FilterableWithAILabel = () => (
       itemToString={(item) => (item ? item.text : '')}
       selectionFeedback="top-after-reopen"
       decorator={aiLabel}
+      {...args}
     />
   </div>
 );
 
-export const ExperimentalAutoAlign = () => {
+export const ExperimentalAutoAlign = (args) => {
   const ref = useRef();
   useEffect(() => {
     ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
@@ -526,8 +506,11 @@ export const ExperimentalAutoAlign = () => {
           selectionFeedback="top-after-reopen"
           ref={ref}
           autoAlign
+          {...args}
         />
       </div>
     </div>
   );
 };
+
+ExperimentalAutoAlign.argTypes = { ...sharedArgTypes };
diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
index 5000132db918..3367ac0854cf 100644
--- a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
+++ b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
@@ -30,27 +30,9 @@ export default {
   },
 };
 
-export const Default = () => (
-  <ActionableNotification
-    title="Notification title"
-    subtitle="Subtitle text goes here"
-    closeOnEscape
-    inline={false}
-    actionButtonLabel="Action"
-  />
-);
+export const Default = (args) => <ActionableNotification {...args} />;
 
 Default.argTypes = {
-  hasFocus: {
-    table: {
-      disable: true,
-    },
-  },
-};
-
-export const Playground = (args) => <ActionableNotification {...args} />;
-
-Playground.argTypes = {
   ['aria-label']: {
     table: {
       disable: true,
@@ -86,7 +68,7 @@ Playground.argTypes = {
     },
   },
 };
-Playground.args = {
+Default.args = {
   actionButtonLabel: 'Action',
   inline: false,
   title: 'Notification title',
diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js
index 029e283b07e9..5ebda2cc0424 100644
--- a/packages/react/src/components/Notification/stories/InlineNotification.stories.js
+++ b/packages/react/src/components/Notification/stories/InlineNotification.stories.js
@@ -30,16 +30,9 @@ export default {
   },
 };
 
-export const Default = () => (
-  <InlineNotification
-    title="Notification title"
-    subtitle="Subtitle text goes here"
-  />
-);
+export const Default = (args) => <InlineNotification {...args} />;
 
-export const Playground = (args) => <InlineNotification {...args} />;
-
-Playground.argTypes = {
+Default.argTypes = {
   actionButtonLabel: {
     table: {
       disable: true,
@@ -77,7 +70,7 @@ Playground.argTypes = {
     },
   },
 };
-Playground.args = {
+Default.args = {
   title: 'Notification title',
   subtitle: 'Subtitle text goes here',
 };
diff --git a/packages/react/src/components/Notification/stories/ToastNotification.stories.js b/packages/react/src/components/Notification/stories/ToastNotification.stories.js
index 222908698645..ea37a4b1efe8 100644
--- a/packages/react/src/components/Notification/stories/ToastNotification.stories.js
+++ b/packages/react/src/components/Notification/stories/ToastNotification.stories.js
@@ -30,19 +30,9 @@ export default {
   },
 };
 
-export const Default = () => (
-  <ToastNotification
-    role="status"
-    caption="00:00:00 AM"
-    timeout={0}
-    title="Notification title"
-    subtitle="Subtitle text goes here"
-  />
-);
+export const Default = (args) => <ToastNotification {...args} />;
 
-export const Playground = (args) => <ToastNotification {...args} />;
-
-Playground.argTypes = {
+Default.argTypes = {
   actionButtonLabel: {
     table: {
       disable: true,
@@ -80,7 +70,7 @@ Playground.argTypes = {
     },
   },
 };
-Playground.args = {
+Default.args = {
   role: 'status',
   caption: '00:00:00 AM',
   timeout: 0,
diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx
index 87d94ed5aaa2..27bd8b1795a6 100644
--- a/packages/react/src/components/NumberInput/NumberInput.mdx
+++ b/packages/react/src/components/NumberInput/NumberInput.mdx
@@ -20,7 +20,7 @@ import * as NumberInputStories from './NumberInput.stories';
 
 ## Overview
 
-<Canvas of={NumberInputStories.Playground} />
+<Canvas of={NumberInputStories.Default} />
 
 ## Skeleton State
 
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index 94e87ce75881..0b2b754174bb 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -23,20 +23,88 @@ export default {
   },
 };
 
-export const Default = () => {
+const sharedArgTypes = {
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  min: { control: { type: 'number' } },
+  max: { control: { type: 'number' } },
+  step: { control: { type: 'number' } },
+  disabled: { control: { type: 'boolean' } },
+  invalid: { control: { type: 'boolean' } },
+  invalidText: { control: { type: 'text' } },
+  warn: { control: { type: 'boolean' } },
+  warnText: { control: { type: 'text' } },
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+  label: { control: { type: 'text' } },
+  helperText: { control: { type: 'text' } },
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  defaultValue: {
+    table: {
+      disable: true,
+    },
+  },
+  light: {
+    table: {
+      disable: true,
+    },
+  },
+  slug: {
+    table: {
+      disable: true,
+    },
+  },
+  translateWithId: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+export const Default = ({ ...args }) => {
+  const [value, setValue] = React.useState(50);
+
+  const handleChange = (event, { value }) => {
+    setValue(value);
+  };
+
   return (
     <NumberInput
-      id="carbon-number"
+      id="default-number-input"
       min={-100}
       max={100}
-      value={50}
+      value={value}
       label="NumberInput label"
       helperText="Optional helper text."
-      invalidText="Number is not valid"
+      onChange={handleChange}
+      {...args}
     />
   );
 };
 
+Default.args = {
+  step: 1,
+  disabled: false,
+  invalid: false,
+  invalidText: 'Number is not valid',
+  helperText: 'Optional helper text.',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  size: 'md',
+};
+
+Default.argTypes = { ...sharedArgTypes };
+
 const aiLabel = (
   <AILabel className="ai-label-container">
     <AILabelContent>
@@ -68,7 +136,7 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div style={{ width: 400 }}>
     <NumberInput
       min={-100}
@@ -78,86 +146,11 @@ export const withAILabel = () => (
       helperText="Optional helper text."
       invalidText="Number is not valid"
       decorator={aiLabel}
+      {...args}
     />
   </div>
 );
-export const Skeleton = () => <NumberInputSkeleton />;
-export const Playground = ({ ...args }) => {
-  const [value, setValue] = React.useState(50);
 
-  const handleChange = (event, { value }) => {
-    setValue(value);
-  };
-
-  return (
-    <NumberInput
-      id="playground-number-input"
-      min={-100}
-      max={100}
-      value={value}
-      label="NumberInput label"
-      helperText="Optional helper text."
-      onChange={handleChange}
-      {...args}
-    />
-  );
-};
-
-Playground.args = {
-  step: 1,
-  disabled: false,
-  invalid: false,
-  invalidText: 'Number is not valid',
-  helperText: 'Optional helper text.',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-  size: 'md',
-};
+withAILabel.argTypes = { ...sharedArgTypes };
 
-Playground.argTypes = {
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  min: { control: { type: 'number' } },
-  max: { control: { type: 'number' } },
-  step: { control: { type: 'number' } },
-  disabled: { control: { type: 'boolean' } },
-  invalid: { control: { type: 'boolean' } },
-  invalidText: { control: { type: 'text' } },
-  warn: { control: { type: 'boolean' } },
-  warnText: { control: { type: 'text' } },
-  size: {
-    options: ['sm', 'md', 'lg'],
-    control: { type: 'select' },
-  },
-  label: { control: { type: 'text' } },
-  helperText: { control: { type: 'text' } },
-  id: {
-    table: {
-      disable: true,
-    },
-  },
-  defaultValue: {
-    table: {
-      disable: true,
-    },
-  },
-  light: {
-    table: {
-      disable: true,
-    },
-  },
-  slug: {
-    table: {
-      disable: true,
-    },
-  },
-  translateWithId: {
-    table: {
-      disable: true,
-    },
-  },
-};
+export const Skeleton = () => <NumberInputSkeleton />;
diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx
index 15fe53768bf2..3e1d81e8a417 100644
--- a/packages/react/src/components/OrderedList/OrderedList.mdx
+++ b/packages/react/src/components/OrderedList/OrderedList.mdx
@@ -16,7 +16,7 @@ import * as OrderedListStories from './OrderedList.stories';
 ## Overview
 
 <div style={{ paddingLeft: '15px' }}>
-  <Canvas of={OrderedListStories.Playground} />
+  <Canvas of={OrderedListStories.Default} />
 </div>
 
 ## Component API
diff --git a/packages/react/src/components/OrderedList/OrderedList.stories.js b/packages/react/src/components/OrderedList/OrderedList.stories.js
index 8e0a51978638..49f2da52c1d2 100644
--- a/packages/react/src/components/OrderedList/OrderedList.stories.js
+++ b/packages/react/src/components/OrderedList/OrderedList.stories.js
@@ -16,8 +16,8 @@ export default {
   },
 };
 
-export const Default = () => (
-  <OrderedList>
+export const Default = (args) => (
+  <OrderedList {...args}>
     <ListItem>Ordered List level 1</ListItem>
     <ListItem>Ordered List level 1</ListItem>
     <ListItem>Ordered List level 1</ListItem>
@@ -34,6 +34,40 @@ export const Default = () => (
   </OrderedList>
 );
 
+Default.args = {
+  isExpressive: false,
+  native: false,
+  nested: false,
+};
+
+Default.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  isExpressive: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  native: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  nested: {
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const Nested = () => {
   return (
     <OrderedList>
@@ -82,55 +116,3 @@ export const NativeListStyles = () => {
     </OrderedList>
   );
 };
-
-export const Playground = (args) => (
-  <OrderedList {...args}>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-    <ListItem>Ordered List level 1</ListItem>
-  </OrderedList>
-);
-
-Playground.args = {
-  isExpressive: false,
-  native: false,
-  nested: false,
-};
-
-Playground.argTypes = {
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  className: {
-    table: {
-      disable: true,
-    },
-  },
-  isExpressive: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  native: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  nested: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
index a392f665a166..ab0066baee09 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -24,17 +24,6 @@ export default {
   },
 };
 
-export const Default = () => (
-  <OverflowMenu flipped={document?.dir === 'rtl'} aria-label="overflow-menu">
-    <OverflowMenuItem itemText="Stop app" />
-    <OverflowMenuItem itemText="Restart app" />
-    <OverflowMenuItem itemText="Rename app" />
-    <OverflowMenuItem itemText="Clone and move app" disabled requireTitle />
-    <OverflowMenuItem itemText="Edit routes and access" requireTitle />
-    <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
-  </OverflowMenu>
-);
-
 export const RenderCustomIcon = () => (
   <OverflowMenu flipped={document?.dir === 'rtl'} renderIcon={Filter}>
     <OverflowMenuItem itemText="Filter A" />
@@ -42,7 +31,7 @@ export const RenderCustomIcon = () => (
   </OverflowMenu>
 );
 
-export const Playground = (args) => (
+export const Default = (args) => (
   <OverflowMenu aria-label="overflow-menu" {...args}>
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
@@ -53,13 +42,13 @@ export const Playground = (args) => (
   </OverflowMenu>
 );
 
-Playground.args = {
+Default.args = {
   flipped: document?.dir === 'rtl',
   focusTrap: false,
   open: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   ariaLabel: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js
index e42e9870fe07..ec897dd7c7a5 100644
--- a/packages/react/src/components/Pagination/Pagination.stories.js
+++ b/packages/react/src/components/Pagination/Pagination.stories.js
@@ -39,59 +39,9 @@ export default {
   decorators: [(story) => <div style={{ maxWidth: '800px' }}>{story()}</div>],
 };
 
-export const Default = (args) => <Pagination {...props()} {...args} />;
+export const Default = (args) => <Pagination {...args} />;
 
-export const MultiplePaginationComponents = (args) => {
-  return (
-    <div>
-      <Pagination {...props()} {...args} />
-      <Pagination {...props()} {...args} />
-    </div>
-  );
-};
-
-MultiplePaginationComponents.storyName = 'Multiple Pagination components';
-
-export const PaginationWithCustomPageSizesLabel = (args) => {
-  return (
-    <div>
-      <Pagination
-        {...props()}
-        pageSizes={[
-          { text: 'Ten', value: 10 },
-          { text: 'Twenty', value: 20 },
-          { text: 'Thirty', value: 30 },
-          { text: 'Forty', value: 40 },
-          { text: 'Fifty', value: 50 },
-        ]}
-        {...args}
-      />
-    </div>
-  );
-};
-
-PaginationWithCustomPageSizesLabel.storyName =
-  'Pagination with custom page sizes label';
-
-export const PaginationUnknownPages = (args) => {
-  return (
-    <div>
-      <Pagination
-        {...props()}
-        pagesUnknown={true}
-        totalItems={undefined}
-        page={1}
-        {...args}
-      />
-    </div>
-  );
-};
-
-PaginationUnknownPages.storyName = 'Unknown pages and items';
-
-export const Playground = (args) => <Pagination {...args} />;
-
-Playground.args = {
+Default.args = {
   backwardText: 'Previous page',
   forwardText: 'Next page',
   disabled: false,
@@ -107,7 +57,7 @@ Playground.args = {
   totalItems: 103,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     control: false,
   },
@@ -187,3 +137,51 @@ Playground.argTypes = {
     },
   },
 };
+
+export const MultiplePaginationComponents = (args) => {
+  return (
+    <div>
+      <Pagination {...props()} {...args} />
+      <Pagination {...props()} {...args} />
+    </div>
+  );
+};
+
+MultiplePaginationComponents.storyName = 'Multiple Pagination components';
+
+export const PaginationWithCustomPageSizesLabel = (args) => {
+  return (
+    <div>
+      <Pagination
+        {...props()}
+        pageSizes={[
+          { text: 'Ten', value: 10 },
+          { text: 'Twenty', value: 20 },
+          { text: 'Thirty', value: 30 },
+          { text: 'Forty', value: 40 },
+          { text: 'Fifty', value: 50 },
+        ]}
+        {...args}
+      />
+    </div>
+  );
+};
+
+PaginationWithCustomPageSizesLabel.storyName =
+  'Pagination with custom page sizes label';
+
+export const PaginationUnknownPages = (args) => {
+  return (
+    <div>
+      <Pagination
+        {...props()}
+        pagesUnknown={true}
+        totalItems={undefined}
+        page={1}
+        {...args}
+      />
+    </div>
+  );
+};
+
+PaginationUnknownPages.storyName = 'Unknown pages and items';
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
index 4f6f1e601fec..fa02273c3b9e 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -16,19 +16,13 @@ export default {
   parameters: {},
 };
 
-export const Default = () => (
-  <div style={{ width: '800px' }}>
-    <PaginationNav itemsShown={10} totalItems={25} />
-  </div>
-);
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <div style={{ width: '800px' }}>
     <PaginationNav {...args} />
   </div>
 );
 
-Playground.args = {
+Default.args = {
   size: 'lg',
   loop: false,
   itemsShown: 10,
@@ -37,7 +31,7 @@ Playground.args = {
   disableOverflow: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   size: {
     options: ['sm', 'md', 'lg'],
     control: { type: 'select' },
diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
index 7007f18b6678..6a5f6a29dab9 100644
--- a/packages/react/src/components/Popover/Popover.stories.js
+++ b/packages/react/src/components/Popover/Popover.stories.js
@@ -26,28 +26,6 @@ export default {
   subcomponents: {
     PopoverContent,
   },
-  argTypes: {
-    as: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    relative: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   parameters: {
     controls: {
       hideNoControlsWarning: true,
@@ -58,7 +36,30 @@ export default {
   },
 };
 
-const PlaygroundStory = (props) => {
+const sharedArgTypes = {
+  as: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  relative: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+const DefaultStory = (props) => {
   const { align, caret, dropShadow, highContrast, open } = props;
   return (
     <Popover
@@ -66,7 +67,8 @@ const PlaygroundStory = (props) => {
       caret={caret}
       dropShadow={dropShadow}
       highContrast={highContrast}
-      open={open}>
+      open={open}
+      {...props}>
       <div className="playground-trigger">
         <CheckboxIcon />
       </div>
@@ -80,7 +82,9 @@ const PlaygroundStory = (props) => {
   );
 };
 
-export const TabTip = () => {
+DefaultStory.argTypes = { ...sharedArgTypes };
+
+export const TabTip = (args) => {
   const [open, setOpen] = useState(true);
   const [openTwo, setOpenTwo] = useState(false);
   const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
@@ -96,7 +100,8 @@ export const TabTip = () => {
           }
         }}
         isTabTip
-        onRequestClose={() => setOpen(false)}>
+        onRequestClose={() => setOpen(false)}
+        {...args}>
         <button
           aria-label="Settings"
           type="button"
@@ -133,7 +138,8 @@ export const TabTip = () => {
         open={openTwo}
         isTabTip
         align={alignTwo}
-        onRequestClose={() => setOpenTwo(false)}>
+        onRequestClose={() => setOpenTwo(false)}
+        {...args}>
         <button
           aria-label="Settings"
           type="button"
@@ -169,16 +175,22 @@ export const TabTip = () => {
   );
 };
 
-export const Playground = PlaygroundStory.bind({});
+TabTip.argTypes = {
+  ...sharedArgTypes,
+  align: { control: false },
+  autoAlign: { control: false },
+};
+
+export const Default = DefaultStory.bind({});
 
-Playground.args = {
+Default.args = {
   caret: true,
   dropShadow: true,
   highContrast: false,
   open: true,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   align: {
     options: [
       'top',
@@ -223,13 +235,13 @@ Playground.argTypes = {
   },
 };
 
-Playground.story = {
+Default.story = {
   decorators: [
     (story) => <div className="mt-10 flex justify-center">{story()}</div>,
   ],
 };
 
-export const ExperimentalAutoAlign = () => {
+export const ExperimentalAutoAlign = (args) => {
   const [open, setOpen] = useState(true);
   const ref = useRef();
 
@@ -245,7 +257,7 @@ export const ExperimentalAutoAlign = () => {
           top: '2500px',
           left: '2500px',
         }}>
-        <Popover open={open} align="top" autoAlign ref={ref}>
+        <Popover open={open} align="top" autoAlign ref={ref} {...args}>
           <div className="playground-trigger">
             <CheckboxIcon
               onClick={() => {
diff --git a/packages/react/src/components/ProgressBar/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/ProgressBar.stories.js
index 1c0d7c77525c..c057a17fd947 100644
--- a/packages/react/src/components/ProgressBar/ProgressBar.stories.js
+++ b/packages/react/src/components/ProgressBar/ProgressBar.stories.js
@@ -15,16 +15,7 @@ export default {
   title: 'Components/ProgressBar',
   component: ProgressBar,
 };
-
-export const Default = () => (
-  <ProgressBar
-    label="Progress bar label"
-    helperText="Optional helper text"
-    value={75}
-  />
-);
-
-const PlaygroundStory = (args) => (
+const DefaultStory = (args) => (
   <ProgressBar
     label="Progress bar label"
     helperText="Optional helper text"
@@ -32,9 +23,9 @@ const PlaygroundStory = (args) => (
   />
 );
 
-export const Playground = PlaygroundStory.bind({});
+export const Default = DefaultStory.bind({});
 
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
index 42f7976d112e..f1eaa4cc58b1 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
@@ -23,37 +23,6 @@ export default {
   },
 };
 
-export const Default = () => (
-  <ProgressIndicator>
-    <ProgressStep
-      complete
-      label="First step"
-      description="Step 1: Getting started with Carbon Design System"
-      secondaryLabel="Optional label"
-    />
-    <ProgressStep
-      current
-      label="Second step with tooltip"
-      description="Step 2: Getting started with Carbon Design System"
-    />
-    <ProgressStep
-      label="Third step with tooltip"
-      description="Step 3: Getting started with Carbon Design System"
-    />
-    <ProgressStep
-      label="Fourth step"
-      description="Step 4: Getting started with Carbon Design System"
-      invalid
-      secondaryLabel="Example invalid step"
-    />
-    <ProgressStep
-      label="Fifth step"
-      description="Step 5: Getting started with Carbon Design System"
-      disabled
-    />
-  </ProgressIndicator>
-);
-
 export const Interactive = () => (
   <ProgressIndicator currentIndex={1} onChange={() => alert('Clicked')}>
     <ProgressStep
@@ -73,7 +42,7 @@ export const Interactive = () => (
 
 export const Skeleton = () => <ProgressIndicatorSkeleton />;
 
-export const Playground = (args) => (
+export const Default = (args) => (
   <ProgressIndicator {...args}>
     <ProgressStep
       complete
@@ -104,13 +73,13 @@ export const Playground = (args) => (
   </ProgressIndicator>
 );
 
-Playground.args = {
+Default.args = {
   currentIndex: 0,
   spaceEqually: false,
   vertical: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
index 664b14843297..daaac444ce15 100644
--- a/packages/react/src/components/RadioButton/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -41,31 +41,6 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <RadioButtonGroup
-      legendText="Group label"
-      name="radio-button-default-group">
-      <RadioButton
-        labelText="Radio button label"
-        value="radio-1"
-        id="radio-1"
-      />
-      <RadioButton
-        labelText="Radio button label"
-        value="radio-2"
-        id="radio-2"
-      />
-      <RadioButton
-        labelText="Radio button label"
-        value="radio-3"
-        id="radio-3"
-        disabled
-      />
-    </RadioButtonGroup>
-  );
-};
-
 export const Vertical = () => {
   return (
     <RadioButtonGroup
@@ -205,7 +180,7 @@ export const withAILabel = {
   ),
 };
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <RadioButtonGroup
       legendText="Radio Button group"
@@ -230,7 +205,7 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   defaultSelected: 'radio-2',
   helperText: 'Helper text',
   invalidText: 'Invalid selection',
@@ -238,7 +213,7 @@ Playground.args = {
   warnText: 'Please notice the warning',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   defaultSelected: {
     description: 'Specify the `<RadioButton>` to be selected by default',
     options: ['radio-1', 'radio-2', 'radio-3'],
diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js
index 68571b73d9df..532bb30c64ef 100644
--- a/packages/react/src/components/Search/Search.stories.js
+++ b/packages/react/src/components/Search/Search.stories.js
@@ -28,18 +28,6 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Search
-    size="lg"
-    placeholder="Find your items"
-    labelText="Search"
-    closeButtonLabelText="Clear search input"
-    id="search-1"
-    onChange={() => {}}
-    onKeyDown={() => {}}
-  />
-);
-
 export const Disabled = () => (
   <Search
     disabled
@@ -96,17 +84,15 @@ export const ExpandableWithLayer = () => (
   </WithLayer>
 );
 
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <Search id="search-playground-1" {...args} />
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <Search id="search-default-1" {...args} />
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 300,
+Default.args = {
   closeButtonLabelText: 'Clear search input',
   disabled: false,
-  defaultValue: 'Default value',
   labelText: 'Label text',
   placeholder: 'Placeholder text',
   role: 'searchbox',
@@ -114,8 +100,8 @@ Playground.args = {
   type: 'text',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   className: {
diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
index baf83ad3a3ac..1179aa621f12 100644
--- a/packages/react/src/components/Select/Select.stories.js
+++ b/packages/react/src/components/Select/Select.stories.js
@@ -77,34 +77,15 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <div>
-      <Select
-        id="select-1"
-        labelText="Select an option"
-        helperText="Optional helper text">
-        <SelectItem value="" text="" />
-        <SelectItem
-          value="An example option that is really long to show what should be done to handle long text"
-          text="An example option that is really long to show what should be done to handle long text"
-        />
-        <SelectItem value="Option 2" text="Option 2" />
-        <SelectItem value="Option 3" text="Option 3" />
-        <SelectItem value="Option 4" text="Option 4" />
-      </Select>
-    </div>
-  );
-};
-
-export const Inline = () => {
+export const Inline = (args) => {
   return (
     <div>
       <Select
         inline
         id="select-1"
         labelText="Select"
-        helperText="Optional helper text">
+        helperText="Optional helper text"
+        {...args}>
         <SelectItem value="" text="" />
         <SelectItem value="Option 1" text="Option 1" />
         <SelectItem value="Option 2" text="Option 2" />
@@ -115,15 +96,20 @@ export const Inline = () => {
   );
 };
 
+Inline.args = {
+  inline: true,
+};
+
 export const Skeleton = () => <SelectSkeleton />;
 
-export const _WithLayer = () => (
+export const _WithLayer = (args) => (
   <WithLayer>
     {(layer) => (
       <Select
         id={`select-${layer}`}
         labelText=""
-        helperText="Optional helper text">
+        helperText="Optional helper text"
+        {...args}>
         <SelectItem value="" text="" />
         <SelectItem
           value="An example option that is really long to show what should be done to handle long text"
@@ -135,6 +121,12 @@ export const _WithLayer = () => (
   </WithLayer>
 );
 
+_WithLayer.argTypes = {
+  inline: {
+    control: false,
+  },
+};
+
 const aiLabel = (
   <AILabel className="ai-label-container">
     <AILabelContent>
@@ -166,13 +158,14 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <div>
     <Select
       id="select-1"
       labelText="Select an option"
       helperText="Optional helper text"
-      decorator={aiLabel}>
+      decorator={aiLabel}
+      {...args}>
       <SelectItem value="" text="" />
       <SelectItem
         value="An example option that is really long to show what should be done to handle long text"
@@ -185,7 +178,13 @@ export const withAILabel = () => (
   </div>
 );
 
-export const Playground = (args) => {
+withAILabel.argTypes = {
+  inline: {
+    control: false,
+  },
+};
+
+export const Default = (args) => {
   return (
     <div>
       <Select
@@ -206,7 +205,7 @@ export const Playground = (args) => {
   );
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   helperText: {
     control: 'text',
   },
diff --git a/packages/react/src/components/Slider/Slider.mdx b/packages/react/src/components/Slider/Slider.mdx
index 4a3680652e26..f87a21114e1e 100644
--- a/packages/react/src/components/Slider/Slider.mdx
+++ b/packages/react/src/components/Slider/Slider.mdx
@@ -23,7 +23,7 @@ import * as SliderStories from './Slider.stories';
 Sliders provide a visual indication of adjustable content, where the user can
 increase or decrease the value by moving the handle along a horizontal track.
 
-<Canvas of={SliderStories.Playground} />
+<Canvas of={SliderStories.Default} />
 
 ## Component API
 
@@ -44,7 +44,7 @@ bound of the range in addition to the `value` prop, which specifies the lower
 bound. When in two handle mode, both `value` and `valueUpper` are provided as
 keys to `onChange` function prop that is passed to the component.
 
-<Canvas of={SliderStories.Playground} />
+<Canvas of={SliderStories.Default} />
 
 ## Feedback
 
diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js
index d84b88d39f0b..8c85ef220d81 100644
--- a/packages/react/src/components/Slider/Slider.stories.js
+++ b/packages/react/src/components/Slider/Slider.stories.js
@@ -26,153 +26,14 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Slider
-    labelText="Slider label"
-    value={50}
-    min={0}
-    max={100}
-    step={1}
-    stepMultiplier={10}
-    noValidate
-    invalidText="Invalid message goes here"
-  />
-);
-
-export const SliderWithHiddenInputs = () => (
-  <Slider
-    labelText="Slider label"
-    value={50}
-    min={0}
-    max={100}
-    step={1}
-    stepMultiplier={10}
-    noValidate
-    invalidText="Invalid message goes here"
-    hideTextInput={true}
-  />
-);
-
-export const SliderWithCustomValueLabel = () => (
-  <Slider
-    labelText="Slider label with low/medium/high"
-    value={50}
-    min={0}
-    max={100}
-    stepMultiplier={50}
-    step={1}
-    noValidate
-    hideTextInput
-    formatLabel={(val) => {
-      if (val < 25) {
-        return 'Low';
-      } else if (val > 75) {
-        return 'High';
-      }
-      return 'Medium';
-    }}
-  />
-);
-
-export const ControlledSlider = () => {
-  const [val, setVal] = useState(87);
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => setVal(Math.round(Math.random() * 100))}>
-        randomize value
-      </button>
-      <Slider
-        labelText="Slider label"
-        max={100}
-        min={0}
-        value={val}
-        onChange={({ value }) => setVal(value)}
-      />
-      <h1>{val}</h1>
-    </>
-  );
-};
-
-export const _WithLayer = () => (
-  <WithLayer>
-    <Slider
-      labelText="Slider label"
-      value={50}
-      min={0}
-      max={100}
-      step={1}
-      stepMultiplier={10}
-      noValidate
-    />
-  </WithLayer>
-);
-
-export const ControlledSliderWithLayer = () => {
-  const [val, setVal] = useState(87);
-  return (
-    <WithLayer>
-      <button
-        type="button"
-        onClick={() => setVal(Math.round(Math.random() * 100))}>
-        randomize value
-      </button>
-      <Slider
-        labelText="Slider label"
-        max={100}
-        min={0}
-        value={val}
-        onChange={({ value }) => setVal(value)}
-      />
-      <h1>{val}</h1>
-    </WithLayer>
-  );
-};
-
-export const TwoHandleSlider = () => (
-  <Slider
-    ariaLabelInput="Lower bound"
-    unstable_ariaLabelInputUpper="Upper bound"
-    labelText="Slider label"
-    value={10}
-    unstable_valueUpper={90}
-    min={0}
-    max={100}
-    step={1}
-    stepMultiplier={10}
-    invalidText="Invalid message goes here"
-  />
-);
-
-export const TwoHandleSliderWithHiddenInputs = () => (
-  <Slider
-    ariaLabelInput="Lower bound"
-    unstable_ariaLabelInputUpper="Upper bound"
-    labelText="Slider label"
-    value={10}
-    unstable_valueUpper={90}
-    min={0}
-    max={100}
-    step={1}
-    stepMultiplier={10}
-    invalidText="Invalid message goes here"
-    hideTextInput={true}
-  />
-);
-
-export const Skeleton = () => <SliderSkeleton />;
-
-export const TwoHandleSkeleton = () => <SliderSkeleton twoHandles={true} />;
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <Slider
     {...args}
     labelText={`Slider (must be an increment of ${args.step})`}
   />
 );
 
-Playground.argTypes = {
+Default.argTypes = {
   ariaLabelInput: {
     control: { type: 'text' },
   },
@@ -292,7 +153,7 @@ Playground.argTypes = {
   },
 };
 
-Playground.args = {
+Default.args = {
   ariaLabelInput: 'Lower bound',
   unstable_ariaLabelInputUpper: 'Upper bound',
   disabled: false,
@@ -310,3 +171,129 @@ Playground.args = {
   warn: false,
   warnText: 'Warning message goes here',
 };
+
+export const SliderWithHiddenInputs = () => (
+  <Slider
+    labelText="Slider label"
+    value={50}
+    min={0}
+    max={100}
+    step={1}
+    stepMultiplier={10}
+    noValidate
+    invalidText="Invalid message goes here"
+    hideTextInput={true}
+  />
+);
+
+export const SliderWithCustomValueLabel = () => (
+  <Slider
+    labelText="Slider label with low/medium/high"
+    value={50}
+    min={0}
+    max={100}
+    stepMultiplier={50}
+    step={1}
+    noValidate
+    hideTextInput
+    formatLabel={(val) => {
+      if (val < 25) {
+        return 'Low';
+      } else if (val > 75) {
+        return 'High';
+      }
+      return 'Medium';
+    }}
+  />
+);
+
+export const ControlledSlider = () => {
+  const [val, setVal] = useState(87);
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setVal(Math.round(Math.random() * 100))}>
+        randomize value
+      </button>
+      <Slider
+        labelText="Slider label"
+        max={100}
+        min={0}
+        value={val}
+        onChange={({ value }) => setVal(value)}
+      />
+      <h1>{val}</h1>
+    </>
+  );
+};
+
+export const _WithLayer = () => (
+  <WithLayer>
+    <Slider
+      labelText="Slider label"
+      value={50}
+      min={0}
+      max={100}
+      step={1}
+      stepMultiplier={10}
+      noValidate
+    />
+  </WithLayer>
+);
+
+export const ControlledSliderWithLayer = () => {
+  const [val, setVal] = useState(87);
+  return (
+    <WithLayer>
+      <button
+        type="button"
+        onClick={() => setVal(Math.round(Math.random() * 100))}>
+        randomize value
+      </button>
+      <Slider
+        labelText="Slider label"
+        max={100}
+        min={0}
+        value={val}
+        onChange={({ value }) => setVal(value)}
+      />
+      <h1>{val}</h1>
+    </WithLayer>
+  );
+};
+
+export const TwoHandleSlider = () => (
+  <Slider
+    ariaLabelInput="Lower bound"
+    unstable_ariaLabelInputUpper="Upper bound"
+    labelText="Slider label"
+    value={10}
+    unstable_valueUpper={90}
+    min={0}
+    max={100}
+    step={1}
+    stepMultiplier={10}
+    invalidText="Invalid message goes here"
+  />
+);
+
+export const TwoHandleSliderWithHiddenInputs = () => (
+  <Slider
+    ariaLabelInput="Lower bound"
+    unstable_ariaLabelInputUpper="Upper bound"
+    labelText="Slider label"
+    value={10}
+    unstable_valueUpper={90}
+    min={0}
+    max={100}
+    step={1}
+    stepMultiplier={10}
+    invalidText="Invalid message goes here"
+    hideTextInput={true}
+  />
+);
+
+export const Skeleton = () => <SliderSkeleton />;
+
+export const TwoHandleSkeleton = () => <SliderSkeleton twoHandles={true} />;
diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js
index 18fc473b20fb..f296b10449cf 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.js
+++ b/packages/react/src/components/Tabs/Tabs.stories.js
@@ -64,39 +64,70 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs">
+export const Default = ({ dismissable, ...args }) => (
+  <Tabs dismissable={dismissable} onTabCloseRequest={() => {}}>
+    <TabList aria-label="List of tabs" {...args}>
       <Tab>Dashboard</Tab>
       <Tab>Monitoring</Tab>
       <Tab>Activity</Tab>
-      <Tab disabled>Settings</Tab>
+      <Tab>Settings</Tab>
     </TabList>
     <TabPanels>
       <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <form style={{ margin: '2em' }}>
-          <legend className={`cds--label`}>Validation example</legend>
-          <Checkbox id="cb" labelText="Accept privacy policy" />
-          <Button
-            style={{ marginTop: '1rem', marginBottom: '1rem' }}
-            type="submit">
-            Submit
-          </Button>
-          <TextInput
-            type="text"
-            labelText="Text input label"
-            helperText="Optional help text"
-            id="text-input-1"
-          />
-        </form>
-      </TabPanel>
+      <TabPanel>Tab Panel 2</TabPanel>
       <TabPanel>Tab Panel 3</TabPanel>
       <TabPanel>Tab Panel 4</TabPanel>
     </TabPanels>
   </Tabs>
 );
 
+Default.args = {
+  contained: false,
+  dismissable: false,
+  scrollDebounceWait: 200,
+};
+
+Default.argTypes = {
+  activation: {
+    control: { type: 'select' },
+    options: ['automatic', 'manual'],
+  },
+  contained: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  dismissable: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  iconSize: {
+    control: { type: 'select' },
+    options: ['default', 'lg'],
+  },
+  leftOverflowButtonProps: {
+    control: {
+      type: 'object',
+    },
+  },
+  rightOverflowButtonProps: {
+    control: {
+      type: 'object',
+    },
+  },
+  scrollDebounceWait: {
+    control: {
+      type: 'number',
+    },
+  },
+  scrollIntoView: {
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const Dismissable = () => {
   const tabs = [
     {
@@ -655,67 +686,3 @@ export const Skeleton = () => {
     </div>
   );
 };
-
-export const Playground = ({ dismissable, ...args }) => (
-  <Tabs dismissable={dismissable} onTabCloseRequest={() => {}}>
-    <TabList aria-label="List of tabs" {...args}>
-      <Tab>Dashboard</Tab>
-      <Tab>Monitoring</Tab>
-      <Tab>Activity</Tab>
-      <Tab>Settings</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>Tab Panel 2</TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-Playground.args = {
-  contained: false,
-  dismissable: false,
-  scrollDebounceWait: 200,
-};
-
-Playground.argTypes = {
-  activation: {
-    control: { type: 'select' },
-    options: ['automatic', 'manual'],
-  },
-  contained: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  dismissable: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  iconSize: {
-    control: { type: 'select' },
-    options: ['default', 'lg'],
-  },
-  leftOverflowButtonProps: {
-    control: {
-      type: 'object',
-    },
-  },
-  rightOverflowButtonProps: {
-    control: {
-      type: 'object',
-    },
-  },
-  scrollDebounceWait: {
-    control: {
-      type: 'number',
-    },
-  },
-  scrollIntoView: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 39139a06ce44..440a0f32fd0a 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -35,74 +35,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <TextArea
-    labelText="Text Area label"
-    helperText="Optional helper text"
-    rows={4}
-    id="text-area-1"
-  />
-);
-
-export const _WithLayer = () => (
-  <WithLayer>
-    {(layer) => (
-      <TextArea
-        labelText="Text Area label"
-        helperText="Optional helper text"
-        rows={4}
-        id={`text-area-${layer}`}
-      />
-    )}
-  </WithLayer>
-);
-
-const aiLabel = (
-  <AILabel className="ai-label-container">
-    <AILabelContent>
-      <div>
-        <p className="secondary">AI Explained</p>
-        <h1>84%</h1>
-        <p className="secondary bold">Confidence score</p>
-        <p className="secondary">
-          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-        </p>
-        <hr />
-        <p className="secondary">Model type</p>
-        <p className="bold">Foundation model</p>
-      </div>
-      <AILabelActions>
-        <IconButton kind="ghost" label="View">
-          <View />
-        </IconButton>
-        <IconButton kind="ghost" label="Open Folder">
-          <FolderOpen />
-        </IconButton>
-        <IconButton kind="ghost" label="Folders">
-          <Folders />
-        </IconButton>
-        <Button>View details</Button>
-      </AILabelActions>
-    </AILabelContent>
-  </AILabel>
-);
-
-export const withAILabel = () => (
-  <TextArea
-    labelText="Text Area label"
-    helperText="Optional helper text"
-    rows={4}
-    id="text-area-5"
-    decorator={aiLabel}
-  />
-);
-
-export const Skeleton = () => <TextAreaSkeleton />;
-
-export const Playground = (args) => <TextArea {...args} id="text-area-1" />;
-
-Playground.argTypes = {
+const sharedArgTypes = {
   className: {
     control: false,
   },
@@ -186,7 +119,13 @@ Playground.argTypes = {
   },
 };
 
-Playground.args = {
+export const Default = (args) => <TextArea {...args} id="text-area-1" />;
+
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
+Default.args = {
   enableCounter: true,
   helperText: 'TextArea helper text',
   labelText: 'TextArea label',
@@ -201,3 +140,64 @@ Playground.args = {
   warn: false,
   warnText: 'This is a warning message.',
 };
+
+export const _WithLayer = () => (
+  <WithLayer>
+    {(layer) => (
+      <TextArea
+        labelText="Text Area label"
+        helperText="Optional helper text"
+        rows={4}
+        id={`text-area-${layer}`}
+      />
+    )}
+  </WithLayer>
+);
+
+const aiLabel = (
+  <AILabel className="ai-label-container">
+    <AILabelContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = (args) => (
+  <TextArea
+    labelText="Text Area label"
+    helperText="Optional helper text"
+    rows={4}
+    id="text-area-5"
+    decorator={aiLabel}
+    {...args}
+  />
+);
+
+withAILabel.argTypes = {
+  ...sharedArgTypes,
+};
+
+export const Skeleton = () => <TextAreaSkeleton />;
diff --git a/packages/react/src/components/TextInput/PasswordInput.stories.js b/packages/react/src/components/TextInput/PasswordInput.stories.js
index db89614d0bc0..7b9b5343a08a 100644
--- a/packages/react/src/components/TextInput/PasswordInput.stories.js
+++ b/packages/react/src/components/TextInput/PasswordInput.stories.js
@@ -20,17 +20,8 @@ export default {
   },
 };
 
-export const Default = () => (
-  <PasswordInput
-    id="text-input-1"
-    labelText="Text input label"
-    helperText="Optional help text"
-    autoComplete="true"
-  />
-);
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
     <PasswordInput
       {...args}
       id="text-input-1"
@@ -41,8 +32,8 @@ export const Playground = (args) => (
   </div>
 );
 
-Playground.args = {
-  playgroundWidth: 300,
+Default.args = {
+  defaultWidth: 300,
   className: 'input-test-class',
   placeholder: 'Placeholder text',
   invalid: false,
@@ -56,8 +47,8 @@ Playground.args = {
   size: 'md',
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
+Default.argTypes = {
+  defaultWidth: {
     control: { type: 'range', min: 300, max: 800, step: 50 },
   },
   className: {
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
index 5e7c527745f8..1b064b752523 100644
--- a/packages/react/src/components/TextInput/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -42,15 +42,104 @@ export default {
   },
 };
 
-export const Default = () => (
-  <TextInput
-    id="text-input-1"
-    type="text"
-    labelText="Text input label"
-    helperText="Optional help text"
-  />
+const sharedArgTypes = {
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+  className: {
+    control: {
+      type: 'text',
+    },
+  },
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+  },
+  helperText: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+  value: {
+    control: {
+      type: 'text',
+    },
+  },
+  onChange: {
+    action: 'onChange',
+  },
+  onClick: {
+    action: 'onClick',
+  },
+  size: {
+    options: ['sm', 'md', 'lg', 'xl'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+
+export const Default = (args) => (
+  <div style={{ width: args.defaultWidth }}>
+    <TextInput {...args} id="text-input-1" type="text" />
+  </div>
 );
 
+Default.args = {
+  defaultWidth: 300,
+  className: 'input-test-class',
+  placeholder: 'Placeholder text',
+  invalid: false,
+  invalidText: 'Error message goes here',
+  disabled: false,
+  labelText: 'Label text',
+  helperText: 'Helper text',
+  warn: false,
+  warnText:
+    'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  size: 'md',
+};
+
+Default.argTypes = {
+  ...sharedArgTypes,
+};
+
 export const Fluid = () => (
   <FluidForm>
     <TextInput type="text" labelText="Text input label" id="text-input-1" />
@@ -113,108 +202,19 @@ const aiLabel = (
   </AILabel>
 );
 
-export const withAILabel = () => (
+export const withAILabel = (args) => (
   <TextInput
     type="text"
     labelText="Text input label"
     helperText="Optional help text"
     id="text-input-ai-label"
     decorator={aiLabel}
+    {...args}
   />
 );
 
-export const Skeleton = () => <TextInputSkeleton />;
-
-export const Playground = (args) => (
-  <div style={{ width: args.playgroundWidth }}>
-    <TextInput {...args} id="text-input-1" type="text" />
-  </div>
-);
-
-Playground.args = {
-  playgroundWidth: 300,
-  className: 'input-test-class',
-  placeholder: 'Placeholder text',
-  invalid: false,
-  invalidText: 'Error message goes here',
-  disabled: false,
-  labelText: 'Label text',
-  helperText: 'Helper text',
-  warn: false,
-  warnText:
-    'Warning message that is really long can wrap to more lines but should not be excessively long.',
-  size: 'md',
+withAILabel.argTypes = {
+  ...sharedArgTypes,
 };
 
-Playground.argTypes = {
-  playgroundWidth: {
-    control: { type: 'range', min: 300, max: 800, step: 50 },
-  },
-  className: {
-    control: {
-      type: 'text',
-    },
-  },
-  defaultValue: {
-    control: {
-      type: 'text',
-    },
-  },
-  placeholder: {
-    control: {
-      type: 'text',
-    },
-  },
-  invalid: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  invalidText: {
-    control: {
-      type: 'text',
-    },
-  },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  labelText: {
-    control: {
-      type: 'text',
-    },
-  },
-  helperText: {
-    control: {
-      type: 'text',
-    },
-  },
-  warn: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  warnText: {
-    control: {
-      type: 'text',
-    },
-  },
-  value: {
-    control: {
-      type: 'text',
-    },
-  },
-  onChange: {
-    action: 'onChange',
-  },
-  onClick: {
-    action: 'onClick',
-  },
-  size: {
-    options: ['sm', 'md', 'lg', 'xl'],
-    control: {
-      type: 'select',
-    },
-  },
-};
+export const Skeleton = () => <TextInputSkeleton />;
diff --git a/packages/react/src/components/TimePicker/TimePicker.stories.js b/packages/react/src/components/TimePicker/TimePicker.stories.js
index 46549bc29a67..4f0f484fd134 100644
--- a/packages/react/src/components/TimePicker/TimePicker.stories.js
+++ b/packages/react/src/components/TimePicker/TimePicker.stories.js
@@ -28,39 +28,7 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <TimePicker id="time-picker" labelText="Select a time">
-      <TimePickerSelect id="time-picker-select-1">
-        <SelectItem value="AM" text="AM" />
-        <SelectItem value="PM" text="PM" />
-      </TimePickerSelect>
-      <TimePickerSelect id="time-picker-select-2">
-        <SelectItem value="Time zone 1" text="Time zone 1" />
-        <SelectItem value="Time zone 2" text="Time zone 2" />
-      </TimePickerSelect>
-    </TimePicker>
-  );
-};
-
-export const _WithLayer = () => (
-  <WithLayer>
-    {(layer) => (
-      <TimePicker id={`time-picker-${layer}`} labelText="Select a time">
-        <TimePickerSelect id={`time-picker-select-${layer}-1`}>
-          <SelectItem value="AM" text="AM" />
-          <SelectItem value="PM" text="PM" />
-        </TimePickerSelect>
-        <TimePickerSelect id={`time-picker-select-${layer}-2`}>
-          <SelectItem value="Time zone 1" text="Time zone 1" />
-          <SelectItem value="Time zone 2" text="Time zone 2" />
-        </TimePickerSelect>
-      </TimePicker>
-    )}
-  </WithLayer>
-);
-
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <TimePicker id="time-picker" labelText="Select a time" {...args}>
       <TimePickerSelect id="time-picker-select-1" disabled={args.disabled}>
@@ -75,14 +43,14 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   disabled: false,
   hideLabel: false,
   invalid: false,
   warning: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
@@ -142,3 +110,20 @@ Playground.argTypes = {
     },
   },
 };
+
+export const _WithLayer = () => (
+  <WithLayer>
+    {(layer) => (
+      <TimePicker id={`time-picker-${layer}`} labelText="Select a time">
+        <TimePickerSelect id={`time-picker-select-${layer}-1`}>
+          <SelectItem value="AM" text="AM" />
+          <SelectItem value="PM" text="PM" />
+        </TimePickerSelect>
+        <TimePickerSelect id={`time-picker-select-${layer}-2`}>
+          <SelectItem value="Time zone 1" text="Time zone 1" />
+          <SelectItem value="Time zone 2" text="Time zone 2" />
+        </TimePickerSelect>
+      </TimePicker>
+    )}
+  </WithLayer>
+);
diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
index f1bc3b3bcbb0..e7230c72ce6d 100644
--- a/packages/react/src/components/Toggle/Toggle.stories.js
+++ b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -15,28 +15,7 @@ export default {
   component: Toggle,
 };
 
-export const Default = () => (
-  <Toggle
-    labelText="Label"
-    labelA="Off"
-    labelB="On"
-    defaultToggled
-    id="toggle-1"
-  />
-);
-
-export const SmallToggle = () => (
-  <Toggle
-    size="sm"
-    labelText="Label"
-    labelA="Off"
-    labelB="On"
-    defaultToggled
-    id="toggle-2"
-  />
-);
-
-export const Playground = (args) => (
+export const Default = (args) => (
   <Toggle
     labelText="Label"
     labelA="Off"
@@ -47,7 +26,7 @@ export const Playground = (args) => (
   />
 );
 
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     control: false,
   },
@@ -90,6 +69,17 @@ Playground.argTypes = {
   },
 };
 
+export const SmallToggle = () => (
+  <Toggle
+    size="sm"
+    labelText="Label"
+    labelA="Off"
+    labelB="On"
+    defaultToggled
+    id="toggle-2"
+  />
+);
+
 export const WithAccessibleLabels = () => (
   <VStack gap={7}>
     <Toggle id="toggle-4" labelText="Label" />
diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js
index 8f6407ac7131..731b38832ba6 100644
--- a/packages/react/src/components/Toggletip/Toggletip.stories.js
+++ b/packages/react/src/components/Toggletip/Toggletip.stories.js
@@ -49,59 +49,6 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <div>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <ToggletipLabel>Toggletip label</ToggletipLabel>
-        <Toggletip>
-          <ToggletipButton label="Show information">
-            <Information />
-          </ToggletipButton>
-          <ToggletipContent>
-            <p>
-              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-              do eiusmod tempor incididunt ut fsil labore et dolore magna
-              aliqua.
-            </p>
-            <ToggletipActions>
-              <Link href="#">Link action</Link>
-              <Button size="sm">Button</Button>
-            </ToggletipActions>
-          </ToggletipContent>
-        </Toggletip>
-      </div>
-      <br />
-      <br />
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-        }}>
-        <ToggletipLabel>
-          Toggletip label -- using <code>defaultOpen</code> prop
-        </ToggletipLabel>
-        <Toggletip defaultOpen>
-          <ToggletipButton label="Show information">
-            <Information />
-          </ToggletipButton>
-          <ToggletipContent>
-            <p>
-              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-              do eiusmod tempor incididunt ut fsil labore et dolore magna
-              aliqua.
-            </p>
-            <ToggletipActions>
-              <Link href="#">Link action</Link>
-              <Button size="sm">Button</Button>
-            </ToggletipActions>
-          </ToggletipContent>
-        </Toggletip>
-      </div>
-    </div>
-  );
-};
-
 export const ExperimentalAutoAlign = () => {
   const ref = useRef();
   useEffect(() => {
@@ -140,7 +87,7 @@ export const ExperimentalAutoAlign = () => {
   );
 };
 
-const PlaygroundStory = (controls) => {
+const DefaultStory = (controls) => {
   const { align } = controls;
   return (
     <>
@@ -166,9 +113,9 @@ const PlaygroundStory = (controls) => {
   );
 };
 
-export const Playground = PlaygroundStory.bind({});
+export const Default = DefaultStory.bind({});
 
-Playground.argTypes = {
+Default.argTypes = {
   align: {
     options: [
       'top',
@@ -193,7 +140,7 @@ Playground.argTypes = {
   },
 };
 
-Playground.story = {
+Default.story = {
   decorators: [
     (story) => (
       <div
diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
index 21c9e3c941eb..4f9328a8ca0c 100644
--- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
+++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js
@@ -43,14 +43,14 @@ export default {
     ),
   ],
 };
-export const Default = () => {
+export const Default = (args) => {
   const definition =
     'Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.';
   return (
     <p>
       Custom domains direct requests for your apps in this Cloud Foundry
       organization to a{' '}
-      <DefinitionTooltip openOnHover definition={definition}>
+      <DefinitionTooltip openOnHover definition={definition} {...args}>
         URL
       </DefinitionTooltip>{' '}
       that you own. A custom domain can be a shared domain, a shared subdomain,
@@ -59,25 +59,14 @@ export const Default = () => {
   );
 };
 
-const PlaygroundStory = (props) => {
-  return (
-    <p>
-      This sentence contains a{' '}
-      <DefinitionTooltip {...props}>definition tooltip</DefinitionTooltip>.
-    </p>
-  );
-};
-
-export const Playground = PlaygroundStory.bind({});
-
-Playground.args = {
+Default.args = {
   align: 'bottom-left',
   defaultOpen: false,
   definition: 'Example definition',
   openOnHover: true,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   align: {
     options: [
       'top',
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js
index e0bd0570e69e..2f177d680ebb 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.js
@@ -51,57 +51,7 @@ export default {
   ],
 };
 
-export const Default = () => {
-  const label =
-    'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
-  return (
-    <Tooltip align="bottom" label={label}>
-      <Button>This button has a tooltip</Button>
-    </Tooltip>
-  );
-};
-
-export const Alignment = () => {
-  return (
-    <Tooltip label="Tooltip alignment" align="bottom-left">
-      <Button>This button has a tooltip</Button>
-    </Tooltip>
-  );
-};
-
-export const ExperimentalAutoAlign = () => {
-  const ref = useRef();
-  const tooltipLabel =
-    'Scroll the container up, down, left or right to observe how the tooltip will automatically change its position in attempt to stay within the viewport. This works on initial render in addition to on scroll.';
-
-  useEffect(() => {
-    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
-  });
-  return (
-    <div style={{ width: '5000px', height: '5000px' }}>
-      <div
-        style={{
-          position: 'absolute',
-          top: '2500px',
-          left: '2500px',
-        }}>
-        <Tooltip label={tooltipLabel} align="top" autoAlign>
-          <Button ref={ref}>This button has a tooltip</Button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export const Duration = () => {
-  return (
-    <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
-      <Button>This button has a tooltip</Button>
-    </Tooltip>
-  );
-};
-
-const PlaygroundStory = (props) => {
+const DefaultStory = (props) => {
   const {
     align,
     closeOnActivation,
@@ -127,16 +77,16 @@ const PlaygroundStory = (props) => {
   );
 };
 
-export const Playground = PlaygroundStory.bind({});
+export const Default = DefaultStory.bind({});
 
-Playground.args = {
+Default.args = {
   align: 'bottom',
   closeOnActivation: false,
   defaultOpen: false,
   label: 'Custom label',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   align: {
     options: [
       'top',
@@ -170,3 +120,43 @@ Playground.argTypes = {
     },
   },
 };
+
+export const Alignment = () => {
+  return (
+    <Tooltip label="Tooltip alignment" align="bottom-left">
+      <Button>This button has a tooltip</Button>
+    </Tooltip>
+  );
+};
+
+export const ExperimentalAutoAlign = () => {
+  const ref = useRef();
+  const tooltipLabel =
+    'Scroll the container up, down, left or right to observe how the tooltip will automatically change its position in attempt to stay within the viewport. This works on initial render in addition to on scroll.';
+
+  useEffect(() => {
+    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
+  });
+  return (
+    <div style={{ width: '5000px', height: '5000px' }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: '2500px',
+          left: '2500px',
+        }}>
+        <Tooltip label={tooltipLabel} align="top" autoAlign>
+          <Button ref={ref}>This button has a tooltip</Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export const Duration = () => {
+  return (
+    <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
+      <Button>This button has a tooltip</Button>
+    </Tooltip>
+  );
+};
diff --git a/packages/react/src/components/TreeView/Treeview.stories.js b/packages/react/src/components/TreeView/Treeview.stories.js
index 814beb67e955..94339625b5c9 100644
--- a/packages/react/src/components/TreeView/Treeview.stories.js
+++ b/packages/react/src/components/TreeView/Treeview.stories.js
@@ -223,10 +223,25 @@ export default {
   },
 };
 
-export const Default = () => (
-  <TreeView label="Tree View">{renderTree({ nodes })}</TreeView>
+export const Default = (args) => (
+  <TreeView label="Tree View" {...args}>
+    {renderTree({ nodes })}
+  </TreeView>
 );
 
+Default.args = {
+  hideLabel: false,
+  multiselect: false,
+};
+
+Default.argTypes = {
+  active: { control: { type: 'text' } },
+  size: {
+    options: ['xs', 'sm'],
+    control: { type: 'select' },
+  },
+};
+
 export const WithIcons = () => (
   <TreeView label="Tree View">
     {renderTree({ nodes, withIcons: true })}
@@ -250,25 +265,6 @@ export const WithControlledExpansion = () => {
   );
 };
 
-export const Playground = (args) => (
-  <TreeView label="Tree View" {...args}>
-    {renderTree({ nodes })}
-  </TreeView>
-);
-
-Playground.args = {
-  hideLabel: false,
-  multiselect: false,
-};
-
-Playground.argTypes = {
-  active: { control: { type: 'text' } },
-  size: {
-    options: ['xs', 'sm'],
-    control: { type: 'select' },
-  },
-};
-
 export const Temp = () => (
   <TreeView label="Tree View">
     <TreeNode label="Enabled">

From 455fc30401171699813a69a07c1965f83e13d2fa Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 11 Dec 2024 11:20:46 -0300
Subject: [PATCH 2/9] feat: added @stackblitz/sdk

---
 packages/react/package.json                   |  1 +
 packages/react/previewer/codePreviewer.tsx    | 74 +++++++++++++++++++
 packages/react/previewer/configFiles.jsx      | 70 ++++++++++++++++++
 .../react/src/components/Button/Button.mdx    | 35 ++++++++-
 .../src/components/Button/Button.stories.js   |  2 +
 .../src/components/ComboBox/ComboBox.mdx      | 33 ++++++---
 .../components/ComboBox/ComboBox.stories.js   | 53 ++++++++++---
 yarn.lock                                     |  8 ++
 8 files changed, 251 insertions(+), 25 deletions(-)
 create mode 100644 packages/react/previewer/codePreviewer.tsx
 create mode 100644 packages/react/previewer/configFiles.jsx

diff --git a/packages/react/package.json b/packages/react/package.json
index 1347405a79e3..5bdea9f724e2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -86,6 +86,7 @@
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^8.2.8",
     "@storybook/addon-actions": "^8.2.8",
     "@storybook/addon-docs": "^8.2.8",
diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx
new file mode 100644
index 000000000000..e9d629814252
--- /dev/null
+++ b/packages/react/previewer/codePreviewer.tsx
@@ -0,0 +1,74 @@
+import StackBlitzSDK from '@stackblitz/sdk';
+import sdk, { Project } from '@stackblitz/sdk';
+import { index, main, packageJson, style, viteConfig } from './configFiles';
+import * as carbonComponents from '../src/index';
+// import * as carbonIcons from '../../icons-react/next';
+
+export const stackblitzPrefillConfig = (
+  code: any,
+  // components: Array<string>, // Add all required components to be imported from @carbon/react
+  icons: Array<string> // Add all required icons to be imported from @carbon/icons-react
+) => {
+  const componentCode = code.parameters.docs.source.originalSource;
+  console.log({ componentCode });
+
+  // console.log({ carbonIcons });
+
+  const output = componentCode
+    .replace(/^\s*args\s*=>\s*{\s*|}\s*;?\s*$/g, '')
+    // Before: args => { <Component> }
+    // After: <Component>
+    .replace(/^"|"$/g, '')
+    // Before: "<Component>"
+    // After: <Component>
+    .replace(/{\.\.\.args}/g, '')
+    // Before: <Component {...args}>
+    // After: <Component>
+    .replace(/onChange=\{(args\.onChange|action\('onChange'\))\}\s*/g, '')
+    .replace(/onClick=\{(args\.onClick|action\('onClick'\))\}\s*/g, '');
+  // Remove the onClick/onChange action
+
+  const componentNames = Object.keys(carbonComponents);
+
+  // Function to find all matches
+  const findAllImports = (componentNames: Array<string>, storyCode: string) => {
+    return componentNames.filter((componentName) => {
+      // Grab the component and add the "<" resulting in"`<ComponentName`
+      const regex = new RegExp(`<${componentName}\\b`, 'g');
+      // Check if the component exists in the `storyCode`
+      return regex.test(storyCode);
+    });
+  };
+
+  // Get all matched components
+  const matchedComponents = findAllImports(componentNames, output);
+
+  const app = `
+  import React from 'react';
+  import { ${matchedComponents} } from "@carbon/react";
+  ${icons ? `import { ${icons} } from "@carbon/icons-react";` : ''}
+  export default function App() {
+    ${output}
+  }
+  `;
+
+  const stackblitzFileConfig: Project = {
+    title: 'Carbon demo',
+    description:
+      'Run official live example code for a Carbon component, created by Carbon Design System on StackBlitz',
+    template: 'node',
+    files: {
+      'package.json': packageJson,
+      'index.html': index,
+      'vite.config.js': viteConfig,
+      'src/main.jsx': main,
+      'src/App.jsx': app,
+      'src/index.scss': style,
+    },
+  };
+
+  StackBlitzSDK.openProject(stackblitzFileConfig, {
+    newWindow: true,
+    openFile: 'src/App.jsx',
+  });
+};
diff --git a/packages/react/previewer/configFiles.jsx b/packages/react/previewer/configFiles.jsx
new file mode 100644
index 000000000000..7bffcb954330
--- /dev/null
+++ b/packages/react/previewer/configFiles.jsx
@@ -0,0 +1,70 @@
+export const packageJson = `{
+  "name": "vite",
+  "private": true,
+  "version": "0.70.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.0.0",
+    "sass": "^1.77.7",
+    "vite": "^4.3.8"
+  }
+}`;
+
+export const index = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+
+`;
+
+export const viteConfig = `
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+
+export const main = `
+import './index.scss';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`;
+
+export const style = `
+@use '@carbon/react' with (
+  $font-path: '@ibm/plex'
+);
+`;
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index a46466ebea1a..01ae11c488a4 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -3,6 +3,11 @@ import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import { Add, TrashCan } from '@carbon/icons-react';
 import * as ButtonStories from './Button.stories';
+import {
+  stackblitzPrefillConfig,
+  stackblitzPrefillConfigDemo,
+} from '../../../previewer/codePreviewer';
+import { ButtonSecondary } from './demo/ButtonSecondary';
 
 <Meta isTemplate />
 
@@ -48,8 +53,24 @@ communicate calls to action to the user and allow users to interact with pages
 in a variety of ways. `Button` labels express what action will occur when the
 user interacts with it.
 
-<Canvas of={ButtonStories.Default} />
-<Canvas of={ButtonStories.Secondary} />
+<Canvas
+  of={ButtonStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Default),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Secondary}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfigDemo(ButtonSecondary),
+    },
+  ]}
+/>
 <Canvas of={ButtonStories.Tertiary} />
 <Canvas of={ButtonStories.Ghost} />
 
@@ -72,7 +93,15 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
 most commonly will be styled as primary or ghost buttons. Icon only buttons do
 not support Danger, Danger tertiary, or Danger ghost.
 
-<Canvas of={ButtonStories.IconButton} />
+<Canvas
+  of={ButtonStories.IconButton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton, ['Add']),
+    },
+  ]}
+/>
 
 ## Set of Buttons
 
diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js
index 364a5321f6b9..551a58742178 100644
--- a/packages/react/src/components/Button/Button.stories.js
+++ b/packages/react/src/components/Button/Button.stories.js
@@ -12,6 +12,8 @@ import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Button.mdx';
 import './button-story.scss';
+import { composeStories } from '@storybook/react';
+import * as stories from '../Breadcrumb/Breadcrumb.stories';
 
 export default {
   title: 'Components/Button',
diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
index d5dfa4adfee2..11ef1c5a47ba 100644
--- a/packages/react/src/components/ComboBox/ComboBox.mdx
+++ b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as ComboBoxStories from './ComboBox.stories.js';
 import ComboBox from '../ComboBox';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -32,7 +33,15 @@ import ComboBox from '../ComboBox';
 A combobox allows the user to make a selection from a predefined list of options
 and is typically used when there are a large amount of options to choose from.
 
-<Canvas of={ComboBoxStories.Default} />
+<Canvas
+  of={ComboBoxStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ComboBoxStories.AllowCustomValue),
+    },
+  ]}
+/>
 
 ## Component API
 
@@ -71,9 +80,14 @@ For more information, checkout the Downshift `useCombobox` props
 
 ## typeahead Prop
 
-The `typeahead` prop enables predictive text and autocomplete functionality in the ComboBox. When enabled, it displays inline suggestions as you type, using a built-in prefix-matching filter that ignores the `shouldFilterItem` prop. Pressing `Tab` will complete the input with the first matching suggestion, while arrow keys can still be used to navigate through filtered options.
+The `typeahead` prop enables predictive text and autocomplete functionality in
+the ComboBox. When enabled, it displays inline suggestions as you type, using a
+built-in prefix-matching filter that ignores the `shouldFilterItem` prop.
+Pressing `Tab` will complete the input with the first matching suggestion, while
+arrow keys can still be used to navigate through filtered options.
 
-When combined with the `allowCustomValue` prop, the ComboBox supports both custom values and typeahead suggestions.
+When combined with the `allowCustomValue` prop, the ComboBox supports both
+custom values and typeahead suggestions.
 
 ### Combobox `downshiftActions`
 
@@ -140,7 +154,6 @@ You can use `selectedItem` for a fully controlled component.
 <Canvas of={ComboBoxStories._fullyControlled} />
 
 ```jsx
-
 const options = [
   {
     id: 'option-1',
@@ -172,11 +185,12 @@ return (
       titleText="Fully Controlled ComboBox title"
       helperText="Combobox helper text"
     />
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }}>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
       <Button onClick={() => setValue(null)}>Reset</Button>
       <Button onClick={() => setValue(options[0])}>Option 1</Button>
       <Button onClick={() => setValue(options[1])}>Option 2</Button>
@@ -184,7 +198,6 @@ return (
     </div>
   </div>
 );
-
 ```
 
 ## `itemToElement`
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
index d29c9ff6e0a5..7621e0c2d319 100644
--- a/packages/react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -155,18 +155,47 @@ const sharedArgTypes = {
   },
 };
 
-export const Default = (args) => (
-  <div style={{ width: 300 }}>
-    <ComboBox
-      id="carbon-combobox"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      titleText="ComboBox title"
-      helperText="Combobox helper text"
-      {...args}
-    />
-  </div>
-);
+export const Default = (args) => {
+  const items = [
+    {
+      id: 'option-0',
+      text: 'An example option that is really long to show what should be done to handle long text',
+    },
+    {
+      id: 'option-1',
+      text: 'Option 1',
+    },
+    {
+      id: 'option-2',
+      text: 'Option 2',
+    },
+    {
+      id: 'option-3',
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      id: 'option-4',
+      text: 'Option 4',
+    },
+    {
+      id: 'option-5',
+      text: 'Option 5',
+    },
+  ];
+  return (
+    <div style={{ width: 300 }}>
+      <ComboBox
+        id="carbon-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="ComboBox title"
+        helperText="Combobox helper text"
+        {...args}
+      />
+    </div>
+  );
+};
 
 Default.argTypes = { ...sharedArgTypes };
 
diff --git a/yarn.lock b/yarn.lock
index 33548c9ee114..903ea974aee7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2000,6 +2000,7 @@ __metadata:
     "@rollup/plugin-commonjs": "npm:^28.0.0"
     "@rollup/plugin-node-resolve": "npm:^15.0.0"
     "@rollup/plugin-typescript": "npm:^11.0.0"
+    "@stackblitz/sdk": "npm:^1.11.0"
     "@storybook/addon-a11y": "npm:^8.2.8"
     "@storybook/addon-actions": "npm:^8.2.8"
     "@storybook/addon-docs": "npm:^8.2.8"
@@ -5784,6 +5785,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@stackblitz/sdk@npm:^1.11.0":
+  version: 1.11.0
+  resolution: "@stackblitz/sdk@npm:1.11.0"
+  checksum: 10/351647b818f2e40135ff92d3de61f94a925635acb769862014f4a0eb252011f1c42ede2c6952ab4848ed7512777f3f6d3944914f5750499f35069b54231d6cb2
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-a11y@npm:^8.2.8":
   version: 8.2.9
   resolution: "@storybook/addon-a11y@npm:8.2.9"

From fe58a531d6b849de0c36f595f683fa1f0d21cd18 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 11 Dec 2024 12:20:12 -0300
Subject: [PATCH 3/9] fix: removed unsed stuff

---
 packages/react/previewer/codePreviewer.tsx      |  3 ---
 packages/react/src/components/Button/Button.mdx | 16 ++--------------
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx
index e9d629814252..aea030019fab 100644
--- a/packages/react/previewer/codePreviewer.tsx
+++ b/packages/react/previewer/codePreviewer.tsx
@@ -2,7 +2,6 @@ import StackBlitzSDK from '@stackblitz/sdk';
 import sdk, { Project } from '@stackblitz/sdk';
 import { index, main, packageJson, style, viteConfig } from './configFiles';
 import * as carbonComponents from '../src/index';
-// import * as carbonIcons from '../../icons-react/next';
 
 export const stackblitzPrefillConfig = (
   code: any,
@@ -12,8 +11,6 @@ export const stackblitzPrefillConfig = (
   const componentCode = code.parameters.docs.source.originalSource;
   console.log({ componentCode });
 
-  // console.log({ carbonIcons });
-
   const output = componentCode
     .replace(/^\s*args\s*=>\s*{\s*|}\s*;?\s*$/g, '')
     // Before: args => { <Component> }
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index 01ae11c488a4..7d76e99c48e2 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -3,11 +3,7 @@ import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import { Add, TrashCan } from '@carbon/icons-react';
 import * as ButtonStories from './Button.stories';
-import {
-  stackblitzPrefillConfig,
-  stackblitzPrefillConfigDemo,
-} from '../../../previewer/codePreviewer';
-import { ButtonSecondary } from './demo/ButtonSecondary';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -62,15 +58,7 @@ user interacts with it.
     },
   ]}
 />
-<Canvas
-  of={ButtonStories.Secondary}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfigDemo(ButtonSecondary),
-    },
-  ]}
-/>
+<Canvas of={ButtonStories.Secondary} />
 <Canvas of={ButtonStories.Tertiary} />
 <Canvas of={ButtonStories.Ghost} />
 

From ebdc0cbf5712b7658388e0404816ade4281b0b5a Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 11 Dec 2024 18:20:49 -0300
Subject: [PATCH 4/9] feat: added new replace and new prop to codePreview

---
 packages/react/previewer/codePreviewer.tsx    | 50 +++++++++++++++----
 .../react/src/components/Button/Button.mdx    |  2 +-
 .../ComposedModal/ComposedModal.mdx           | 15 +++++-
 .../ComposedModal/ComposedModal.stories.js    |  4 +-
 packages/react/src/components/Tabs/Tabs.mdx   | 21 +++++++-
 5 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx
index aea030019fab..3e2a5e71a17d 100644
--- a/packages/react/previewer/codePreviewer.tsx
+++ b/packages/react/previewer/codePreviewer.tsx
@@ -1,20 +1,26 @@
+import React from 'react';
 import StackBlitzSDK from '@stackblitz/sdk';
 import sdk, { Project } from '@stackblitz/sdk';
 import { index, main, packageJson, style, viteConfig } from './configFiles';
 import * as carbonComponents from '../src/index';
+import * as carbonIconsReact from '@carbon/icons-react';
 
 export const stackblitzPrefillConfig = (
   code: any,
   // components: Array<string>, // Add all required components to be imported from @carbon/react
-  icons: Array<string> // Add all required icons to be imported from @carbon/icons-react
+  // icons: Array<string> // Add all required icons to be imported from @carbon/icons-react
+  customImport: string
 ) => {
-  const componentCode = code.parameters.docs.source.originalSource;
-  console.log({ componentCode });
-
-  const output = componentCode
+  const storyCode = code.parameters.docs.source.originalSource
     .replace(/^\s*args\s*=>\s*{\s*|}\s*;?\s*$/g, '')
     // Before: args => { <Component> }
     // After: <Component>
+    .replace(/^\s*\(\)\s*=>\s*{/g, '') // We could delete this one if all stories had the return statement
+    // Before: () => { <Component>
+    // After: <Component>
+    .replace(/^\s*args\s*=>/g, 'return')
+    // Before: args => { <Component>
+    // After: return <Component>
     .replace(/^"|"$/g, '')
     // Before: "<Component>"
     // After: <Component>
@@ -25,10 +31,11 @@ export const stackblitzPrefillConfig = (
     .replace(/onClick=\{(args\.onClick|action\('onClick'\))\}\s*/g, '');
   // Remove the onClick/onChange action
 
-  const componentNames = Object.keys(carbonComponents);
-
   // Function to find all matches
-  const findAllImports = (componentNames: Array<string>, storyCode: string) => {
+  const findComponentImports = (
+    componentNames: Array<string>,
+    storyCode: string
+  ) => {
     return componentNames.filter((componentName) => {
       // Grab the component and add the "<" resulting in"`<ComponentName`
       const regex = new RegExp(`<${componentName}\\b`, 'g');
@@ -37,15 +44,36 @@ export const stackblitzPrefillConfig = (
     });
   };
 
+  // Function to find all matches
+  const findIconImports = (iconNames: Array<string>, storyCode: string) => {
+    return iconNames.filter((iconName) => {
+      // Grab the component to convert in "<Component" and "{Component}"
+      const regexComponent = new RegExp(`<${iconName}\\b`, 'g');
+      const regexCurlBraces = new RegExp(`{${iconName}}\\s\\b`, 'g');
+
+      // Check if the component exists in the `storyCode`
+      if (regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) {
+        return iconName;
+      }
+    });
+  };
+
   // Get all matched components
-  const matchedComponents = findAllImports(componentNames, output);
+  const componentNames = Object.keys(carbonComponents);
+  const matchedComponents = findComponentImports(componentNames, storyCode);
+
+  // Get all matched icons
+  const iconsNames = Object.keys(carbonIconsReact);
+  const matchedIcons = findIconImports(iconsNames, storyCode);
 
+  // Generate App.jsx code
   const app = `
   import React from 'react';
+  ${customImport ? customImport : ''}
   import { ${matchedComponents} } from "@carbon/react";
-  ${icons ? `import { ${icons} } from "@carbon/icons-react";` : ''}
+  ${matchedIcons.length > 0 ? `import { ${matchedIcons} } from "@carbon/icons-react";` : ''}
   export default function App() {
-    ${output}
+    ${storyCode}
   }
   `;
 
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index 7d76e99c48e2..160af40c85f2 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -86,7 +86,7 @@ not support Danger, Danger tertiary, or Danger ghost.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton, ['Add']),
+      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton),
     },
   ]}
 />
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
index 739e3299aef0..d556e72310cb 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.mdx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -4,6 +4,7 @@ import { InlineNotification } from '../Notification';
 import CodeSnippet from '../CodeSnippet';
 import * as ComposedModalStories from './ComposedModal.stories.js';
 import './ComposedModal.stories.scss';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -41,7 +42,19 @@ import './ComposedModal.stories.scss';
 Modal content can be customized via the `<ModalHeader>`, `<ModalBody>` and
 `<ModalFooter>` components.
 
-<Canvas of={ComposedModalStories.WithStateManager} />
+<Canvas
+  of={ComposedModalStories.WithStateManager}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          ComposedModalStories.WithStateManager,
+          'import ReactDOM from "react-dom"'
+        ),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
index 1705eb90c7fb..9c15e4b0963a 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -198,7 +198,7 @@ export const PassiveModal = () => {
 };
 
 export const WithStateManager = () => {
-  const button = useRef();
+  const button = React.useRef();
 
   /**
    * Simple state manager for modals.
@@ -207,7 +207,7 @@ export const WithStateManager = () => {
     renderLauncher: LauncherContent,
     children: ModalContent,
   }) => {
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = React.useState(false);
     return (
       <>
         {!ModalContent || typeof document === 'undefined'
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 1c56f266dca2..7b3739f2a28b 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -2,6 +2,7 @@ import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
 import * as TabsStories from './Tabs.stories';
 import { Grid, Column } from '../Grid';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -50,7 +51,15 @@ what is in rendered inside of `Tab` and `TabPanel`.
 
 ### Icon Tabs
 
-<Canvas of={TabsStories.IconOnly} />
+<Canvas
+  of={TabsStories.IconOnly}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.IconOnly),
+    },
+  ]}
+/>
 
 <Canvas of={TabsStories.Icon20Only} />
 
@@ -174,7 +183,15 @@ return (
 
 And there you have it! Working dismissable tabs.
 
-<Canvas of={TabsStories.Dismissable} />
+<Canvas
+  of={TabsStories.Dismissable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Dismissable),
+    },
+  ]}
+/>
 
 ### Vertical tabs
 

From 5145b00987dc8ee286c02896720ae0711f72d0b9 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 12 Dec 2024 12:12:47 -0300
Subject: [PATCH 5/9] feat: added final stack/sdk code

---
 packages/react/previewer/codePreviewer.tsx    | 13 +++++++-----
 .../{configFiles.jsx => configFiles.tsx}      | 10 +++++-----
 .../react/src/components/Button/Button.mdx    | 20 ++-----------------
 .../src/components/ComboBox/ComboBox.mdx      | 10 +---------
 .../ComposedModal/ComposedModal.mdx           | 14 +------------
 packages/react/src/components/Tabs/Tabs.mdx   | 20 ++-----------------
 6 files changed, 19 insertions(+), 68 deletions(-)
 rename packages/react/previewer/{configFiles.jsx => configFiles.tsx} (88%)

diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx
index 3e2a5e71a17d..49fd5a8f83c9 100644
--- a/packages/react/previewer/codePreviewer.tsx
+++ b/packages/react/previewer/codePreviewer.tsx
@@ -44,6 +44,10 @@ export const stackblitzPrefillConfig = (
     });
   };
 
+  // Get all matched components
+  const componentNames = Object.keys(carbonComponents);
+  const matchedComponents = findComponentImports(componentNames, storyCode);
+
   // Function to find all matches
   const findIconImports = (iconNames: Array<string>, storyCode: string) => {
     return iconNames.filter((iconName) => {
@@ -52,16 +56,15 @@ export const stackblitzPrefillConfig = (
       const regexCurlBraces = new RegExp(`{${iconName}}\\s\\b`, 'g');
 
       // Check if the component exists in the `storyCode`
-      if (regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) {
+      if (
+        (regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) &&
+        !componentNames.indexOf(iconName)
+      ) {
         return iconName;
       }
     });
   };
 
-  // Get all matched components
-  const componentNames = Object.keys(carbonComponents);
-  const matchedComponents = findComponentImports(componentNames, storyCode);
-
   // Get all matched icons
   const iconsNames = Object.keys(carbonIconsReact);
   const matchedIcons = findIconImports(iconsNames, storyCode);
diff --git a/packages/react/previewer/configFiles.jsx b/packages/react/previewer/configFiles.tsx
similarity index 88%
rename from packages/react/previewer/configFiles.jsx
rename to packages/react/previewer/configFiles.tsx
index 7bffcb954330..a1e69e03fcfc 100644
--- a/packages/react/previewer/configFiles.jsx
+++ b/packages/react/previewer/configFiles.tsx
@@ -1,4 +1,4 @@
-export const packageJson = `{
+export const packageJson: string = `{
   "name": "vite",
   "private": true,
   "version": "0.70.0",
@@ -20,7 +20,7 @@ export const packageJson = `{
   }
 }`;
 
-export const index = `
+export const index: string = `
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -37,7 +37,7 @@ export const index = `
 
 `;
 
-export const viteConfig = `
+export const viteConfig: string = `
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
@@ -47,7 +47,7 @@ export default defineConfig({
 });
 `;
 
-export const main = `
+export const main: string = `
 import './index.scss';
 
 import React from 'react';
@@ -63,7 +63,7 @@ root.render(
 );
 `;
 
-export const style = `
+export const style: string = `
 @use '@carbon/react' with (
   $font-path: '@ibm/plex'
 );
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index 160af40c85f2..5c07b5f4a1eb 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -49,15 +49,7 @@ communicate calls to action to the user and allow users to interact with pages
 in a variety of ways. `Button` labels express what action will occur when the
 user interacts with it.
 
-<Canvas
-  of={ButtonStories.Default}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ButtonStories.Default),
-    },
-  ]}
-/>
+<Canvas of={ButtonStories.Default} />
 <Canvas of={ButtonStories.Secondary} />
 <Canvas of={ButtonStories.Tertiary} />
 <Canvas of={ButtonStories.Ghost} />
@@ -81,15 +73,7 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
 most commonly will be styled as primary or ghost buttons. Icon only buttons do
 not support Danger, Danger tertiary, or Danger ghost.
 
-<Canvas
-  of={ButtonStories.IconButton}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton),
-    },
-  ]}
-/>
+<Canvas of={ButtonStories.IconButton} />
 
 ## Set of Buttons
 
diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
index 11ef1c5a47ba..8f9d956e2e4c 100644
--- a/packages/react/src/components/ComboBox/ComboBox.mdx
+++ b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -33,15 +33,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 A combobox allows the user to make a selection from a predefined list of options
 and is typically used when there are a large amount of options to choose from.
 
-<Canvas
-  of={ComboBoxStories.Default}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ComboBoxStories.AllowCustomValue),
-    },
-  ]}
-/>
+<Canvas of={ComboBoxStories.Default} />
 
 ## Component API
 
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
index d556e72310cb..02769808e242 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.mdx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -42,19 +42,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 Modal content can be customized via the `<ModalHeader>`, `<ModalBody>` and
 `<ModalFooter>` components.
 
-<Canvas
-  of={ComposedModalStories.WithStateManager}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () =>
-        stackblitzPrefillConfig(
-          ComposedModalStories.WithStateManager,
-          'import ReactDOM from "react-dom"'
-        ),
-    },
-  ]}
-/>
+<Canvas of={ComposedModalStories.WithStateManager} />
 
 ## Component API
 
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 7b3739f2a28b..53667c363672 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -51,15 +51,7 @@ what is in rendered inside of `Tab` and `TabPanel`.
 
 ### Icon Tabs
 
-<Canvas
-  of={TabsStories.IconOnly}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(TabsStories.IconOnly),
-    },
-  ]}
-/>
+<Canvas of={TabsStories.IconOnly} />
 
 <Canvas of={TabsStories.Icon20Only} />
 
@@ -183,15 +175,7 @@ return (
 
 And there you have it! Working dismissable tabs.
 
-<Canvas
-  of={TabsStories.Dismissable}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(TabsStories.Dismissable),
-    },
-  ]}
-/>
+<Canvas of={TabsStories.Dismissable} />
 
 ### Vertical tabs
 

From 9cfde66b8803b610a3d837c242c70fe25dcbd42f Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 12 Dec 2024 15:51:54 -0300
Subject: [PATCH 6/9] fix: fixed Tooltip storybook

---
 .../src/components/Tooltip/Tooltip.stories.js | 74 -------------------
 1 file changed, 74 deletions(-)

diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js
index 0c65c47e469d..0c7bba3eaa46 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.js
@@ -62,80 +62,6 @@ export const Default = () => {
   );
 };
 
-export const Alignment = () => {
-  return (
-    <Tooltip label="Tooltip alignment" align="bottom-left">
-      <button className="sb-tooltip-trigger" type="button">
-        <Help />
-      </button>
-    </Tooltip>
-  );
-};
-
-export const ExperimentalAutoAlign = () => {
-  const ref = useRef();
-  const tooltipLabel =
-    'Scroll the container up, down, left or right to observe how the tooltip will automatically change its position in attempt to stay within the viewport. This works on initial render in addition to on scroll.';
-
-  useEffect(() => {
-    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
-  });
-  return (
-    <div style={{ width: '5000px', height: '5000px' }}>
-      <div
-        style={{
-          position: 'absolute',
-          top: '2500px',
-          left: '2500px',
-        }}>
-        <Tooltip label={tooltipLabel} align="top" autoAlign>
-          <button className="sb-tooltip-trigger" type="button" ref={ref}>
-            <Help />
-          </button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export const Duration = () => {
-  return (
-    <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Help />
-      </button>
-    </Tooltip>
-  );
-};
-
-const PlaygroundStory = (props) => {
-  const {
-    align,
-    closeOnActivation,
-    defaultOpen,
-    description,
-    enterDelayMs,
-    label,
-    leaveDelayMs,
-  } = props;
-  return (
-    <Tooltip
-      align={align}
-      defaultOpen={defaultOpen}
-      description={description}
-      enterDelayMs={enterDelayMs}
-      label={label}
-      leaveDelayMs={leaveDelayMs}
-      closeOnActivation={closeOnActivation}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Help />
-      </button>
-    </Tooltip>
-  );
-};
-
-export const Default = DefaultStory.bind({});
-
 Default.args = {
   align: 'bottom',
   closeOnActivation: false,

From abeff3f74841dddb55b9352402f439e56b960deb Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 12 Dec 2024 16:12:23 -0300
Subject: [PATCH 7/9] fix: fixed stackblitz/sdk package

---
 ...itz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip | Bin 0 -> 59725 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 .yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip

diff --git a/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip b/.yarn/cache/@stackblitz-sdk-npm-1.11.0-a3cab8fa5d-351647b818.zip
new file mode 100644
index 0000000000000000000000000000000000000000..b2cda1cd6020a000ee979477e3e6c9a95a44cbdf
GIT binary patch
literal 59725
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
NBsu~@&it=;{{w`yvf2Ou

literal 0
HcmV?d00001


From e8b5f235cd8574325f9c46694970eda32495ae28 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 13 Dec 2024 12:00:10 -0300
Subject: [PATCH 8/9] test: fixed avt tests

---
 .../Accordion/Accordion-test.avt.e2e.js       |  2 +-
 .../ContainedList/ContainedList-test.e2e.js   |  8 ----
 .../DataTable/DataTable-test.avt.e2e.js       | 15 -------
 .../DatePicker/DatePicker-test.avt.e2e.js     |  4 +-
 .../FileUploader/FileUploader-test.avt.e2e.js |  2 +-
 e2e/components/Menu/Menu-test.avt.e2e.js      |  4 +-
 e2e/components/Menu/Menu-test.e2e.js          |  2 +-
 .../Notifications-test.avt.e2e.js             | 20 ++++-----
 e2e/components/Popover/Popover-test.e2e.js    |  2 +-
 .../RadioButton/RadioButton-test.avt.e2e.js   |  8 ++--
 .../TextArea/TextArea-test.avt.e2e.js         |  6 +--
 .../TextInput/TextInput-test.avt.e2e.js       |  2 +-
 .../Toggletip/Toggletip-test.avt.e2e.js       | 10 -----
 .../components/Accordion/Accordion.stories.js |  7 +++-
 .../components/Checkbox/Checkbox.stories.js   | 11 +----
 .../DataTable-dynamic-content.stories.js      | 41 ++++++-------------
 .../FluidComboBox/FluidComboBox.stories.js    | 10 -----
 .../FluidDropdown/FluidDropdown.stories.js    | 10 +----
 .../FluidMultiSelect.stories.js               | 10 -----
 .../FluidNumberInput.stories.js               |  5 +++
 .../stories/ActionableNotification.stories.js |  3 +-
 .../components/Toggletip/Toggletip.stories.js |  6 +--
 .../src/components/Tooltip/Tooltip.stories.js | 10 +----
 23 files changed, 58 insertions(+), 140 deletions(-)

diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js
index 7a224b0176a7..f707de245bca 100644
--- a/e2e/components/Accordion/Accordion-test.avt.e2e.js
+++ b/e2e/components/Accordion/Accordion-test.avt.e2e.js
@@ -128,7 +128,7 @@ test.describe('@avt Accordion', () => {
   test('@avt-advanced-states disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'Accordion',
-      id: 'components-accordion--playground',
+      id: 'components-accordion--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/ContainedList/ContainedList-test.e2e.js b/e2e/components/ContainedList/ContainedList-test.e2e.js
index 0e49ff450879..2e72ecef778b 100644
--- a/e2e/components/ContainedList/ContainedList-test.e2e.js
+++ b/e2e/components/ContainedList/ContainedList-test.e2e.js
@@ -78,14 +78,6 @@ test.describe('ContainedList', () => {
         });
       });
 
-      test('playground @vrt', async ({ page }) => {
-        await snapshotStory(page, {
-          component: 'ContainedList',
-          id: 'components-containedlist--playground',
-          theme,
-        });
-      });
-
       test('with-expandable-search @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'ContainedList',
diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js
index 6b687af0cfc1..c732e067d412 100644
--- a/e2e/components/DataTable/DataTable-test.avt.e2e.js
+++ b/e2e/components/DataTable/DataTable-test.avt.e2e.js
@@ -276,21 +276,6 @@ test.describe('@avt DataTable', () => {
         'components-datatable-selection--default'
       );
     });
-    test.skip('@avt-advanced-states with-radio-expansion', async ({ page }) => {
-      await visitStory(page, {
-        component: 'DataTable',
-        id: 'components-datatable-dynamic--playground',
-        globals: {
-          theme: 'white',
-        },
-        args: {
-          radio: true,
-        },
-      });
-      await expect(page).toHaveNoACViolations(
-        'components-datatable-with-radio-expansion'
-      );
-    });
     test('@avt-advanced-states with-selection-and-sorting', async ({
       page,
     }) => {
diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
index 874996c618c2..9f9a0ede3b3a 100644
--- a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
+++ b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
@@ -36,7 +36,7 @@ test.describe('@avt DatePicker', () => {
   test('@avt-advanced-states disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
-      id: 'components-datepicker--playground',
+      id: 'components-datepicker--default',
       globals: {
         theme: 'white',
       },
@@ -65,7 +65,7 @@ test.describe('@avt DatePicker', () => {
   test.skip('@avt-advanced-states open', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
-      id: 'components-datepicker--playground',
+      id: 'components-datepicker--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js
index 5f2a02ad9b0a..9646a78ddf11 100644
--- a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js
+++ b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt FileUploader', () => {
   test('@avt-advanced-states with upload', async ({ page }) => {
     await visitStory(page, {
       component: 'FileUploader',
-      id: 'components-fileuploader--playground',
+      id: 'components-fileuploader--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/Menu/Menu-test.avt.e2e.js b/e2e/components/Menu/Menu-test.avt.e2e.js
index 82ecabf55a07..15bc503ee449 100644
--- a/e2e/components/Menu/Menu-test.avt.e2e.js
+++ b/e2e/components/Menu/Menu-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('@avt Menu', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'components-menu--playground',
+      id: 'components-menu--default',
       globals: {
         theme: 'white',
       },
@@ -25,7 +25,7 @@ test.describe('@avt Menu', () => {
   test.fixme('@avt-keyboard-nav Menu', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'components-menu--playground',
+      id: 'components-menu--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/Menu/Menu-test.e2e.js b/e2e/components/Menu/Menu-test.e2e.js
index 7541bc740e50..4c2cc4e31316 100644
--- a/e2e/components/Menu/Menu-test.e2e.js
+++ b/e2e/components/Menu/Menu-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('Menu', () => {
       test('menu @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Menu',
-          id: 'components-menu--playground',
+          id: 'components-menu--default',
           theme,
         });
       });
diff --git a/e2e/components/Notifications/Notifications-test.avt.e2e.js b/e2e/components/Notifications/Notifications-test.avt.e2e.js
index 8604812505b7..45518cfd2555 100644
--- a/e2e/components/Notifications/Notifications-test.avt.e2e.js
+++ b/e2e/components/Notifications/Notifications-test.avt.e2e.js
@@ -70,7 +70,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable info', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -84,7 +84,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable info-square', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -100,7 +100,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable success', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -114,7 +114,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable warning', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -128,7 +128,7 @@ test.describe('@avt Notifications', () => {
   test('@avt-advanced-states actionable warning-alt', async ({ page }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -146,7 +146,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -165,7 +165,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -184,7 +184,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -203,7 +203,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
@@ -222,7 +222,7 @@ test.describe('@avt Notifications', () => {
   }) => {
     await visitStory(page, {
       component: 'Notifications',
-      id: 'components-notifications-actionable--playground',
+      id: 'components-notifications-actionable--default',
       globals: {
         theme: 'white',
         args: {
diff --git a/e2e/components/Popover/Popover-test.e2e.js b/e2e/components/Popover/Popover-test.e2e.js
index 4b54cd5ad81a..3dfa8e5c6887 100644
--- a/e2e/components/Popover/Popover-test.e2e.js
+++ b/e2e/components/Popover/Popover-test.e2e.js
@@ -18,7 +18,7 @@ test.describe('Popover', () => {
       test('Popover @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Popover',
-          id: 'components-popover--playground',
+          id: 'components-popover--default',
           theme,
         });
       });
diff --git a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js
index f48aa6e04f0f..400362451bd5 100644
--- a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js
+++ b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js
@@ -62,7 +62,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - invalid state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -79,7 +79,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - warn state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -96,7 +96,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - disabled state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
@@ -112,7 +112,7 @@ test.describe('@avt RadioButton', () => {
   test('@avt-advanced-states - read only state', async ({ page }) => {
     await visitStory(page, {
       component: 'RadioButton',
-      id: 'components-radiobutton--playground',
+      id: 'components-radiobutton--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/TextArea/TextArea-test.avt.e2e.js b/e2e/components/TextArea/TextArea-test.avt.e2e.js
index 032edd56d247..5b0eb4fe96f7 100644
--- a/e2e/components/TextArea/TextArea-test.avt.e2e.js
+++ b/e2e/components/TextArea/TextArea-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-advanced-states invalid', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },
@@ -39,7 +39,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-advanced-states warn', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },
@@ -64,7 +64,7 @@ test.describe('@avt TextArea', () => {
   test('@avt-keyboard-nav TextArea keyboard counter', async ({ page }) => {
     await visitStory(page, {
       component: 'TextArea',
-      id: 'components-textarea--playground',
+      id: 'components-textarea--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/TextInput/TextInput-test.avt.e2e.js b/e2e/components/TextInput/TextInput-test.avt.e2e.js
index e7495e4a3146..816757902960 100644
--- a/e2e/components/TextInput/TextInput-test.avt.e2e.js
+++ b/e2e/components/TextInput/TextInput-test.avt.e2e.js
@@ -25,7 +25,7 @@ test.describe('@avt TextInput', () => {
   test('@avt-advanced-states - disabled', async ({ page }) => {
     await visitStory(page, {
       component: 'TextInput',
-      id: 'components-textinput--playground',
+      id: 'components-textinput--default',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js
index 69b984f68a2d..b8dff6509dd2 100644
--- a/e2e/components/Toggletip/Toggletip-test.avt.e2e.js
+++ b/e2e/components/Toggletip/Toggletip-test.avt.e2e.js
@@ -31,9 +31,6 @@ test.describe('@avt Toggletip', () => {
       },
     });
 
-    // Checking if the defaultOpen is working
-    await expect(page.locator('.cds--popover--open')).toBeVisible();
-
     // Checking first Toggletip interaction
     await page.keyboard.press('Tab');
     await expect(page.getByLabel('Show information').first()).toBeFocused();
@@ -46,12 +43,5 @@ test.describe('@avt Toggletip', () => {
     await expect(page.getByRole('button', { name: 'Button' })).toBeFocused();
     await page.keyboard.press('Tab');
     await expect(page.locator('.cds--popover--open')).toBeHidden();
-
-    // Checking second Toggletip interaction and close on Escape key
-    await expect(page.getByLabel('Show information').last()).toBeFocused();
-    await page.keyboard.press('Enter');
-    await expect(page.locator('.cds--popover--open')).toBeVisible();
-    await page.keyboard.press('Escape');
-    await expect(page.locator('.cds--popover--open')).toBeHidden();
   });
 });
diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index 822fbb5e948a..b7a85c5caa16 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -75,7 +75,12 @@ export const Default = (args) => (
       </p>
     </AccordionItem>
     <AccordionItem title="Section 3 title">
-      <Button>This is a button.</Button>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
     </AccordionItem>
     <AccordionItem
       title={
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index 252cd3aae4fd..f792661649c1 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -43,7 +43,6 @@ const sharedArgs = {
   helperText: 'Helper text goes here',
   invalid: false,
   invalidText: 'Invalid message goes here',
-  readOnly: false,
   warn: false,
   warnText: 'Warning message goes here',
 };
@@ -148,14 +147,8 @@ const sharedArgTypes = {
 
 export const Default = (args) => (
   <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
-    <Checkbox
-      defaultChecked
-      {...checkboxEvents}
-      id="checkbox-0"
-      helperText="hello"
-    />
-    <Checkbox {...checkboxEvents} id="checkbox-1" />
-    <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
+    <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
+    <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
   </CheckboxGroup>
 );
 
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
index 28376ddd2fde..a8ec5fdb9400 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -113,6 +113,7 @@ export const Default = (args) => {
             getToolbarProps,
             getBatchActionProps,
             getRowProps,
+            getExpandedRowProps,
             onInputChange,
             selectedRows,
             getTableProps,
@@ -154,32 +155,22 @@ export const Default = (args) => {
                       Download
                     </TableBatchAction>
                   </TableBatchActions>
-                  <TableToolbarContent>
+                  <TableToolbarContent
+                    aria-hidden={batchActionProps.shouldShowBatchActions}>
                     <TableToolbarSearch
-                      onChange={(evt) => {
-                        action('TableToolbarSearch - onChange')(evt);
-                        onInputChange(evt);
-                      }}
                       tabIndex={
                         batchActionProps.shouldShowBatchActions ? -1 : 0
                       }
+                      onChange={onInputChange}
                     />
                     <TableToolbarMenu
                       tabIndex={
                         batchActionProps.shouldShowBatchActions ? -1 : 0
                       }>
-                      <TableToolbarAction
-                        onClick={(evt) => {
-                          action('handleOnRowAdd')(evt);
-                          this.handleOnRowAdd();
-                        }}>
+                      <TableToolbarAction onClick={this.handleOnRowAdd}>
                         Add row
                       </TableToolbarAction>
-                      <TableToolbarAction
-                        onClick={(evt) => {
-                          action('handleOnHeaderAdd')(evt);
-                          this.handleOnHeaderAdd();
-                        }}>
+                      <TableToolbarAction onClick={this.handleOnHeaderAdd}>
                         Add header
                       </TableToolbarAction>
                     </TableToolbarMenu>
@@ -188,12 +179,8 @@ export const Default = (args) => {
                 <Table {...getTableProps()} aria-label="sample table">
                   <TableHead>
                     <TableRow>
-                      <TableExpandHeader />
-                      {args.radio ? (
-                        <th scope="col" />
-                      ) : (
-                        <TableSelectAll {...getSelectionProps()} />
-                      )}
+                      <TableExpandHeader aria-label="expand row" />
+                      <TableSelectAll {...getSelectionProps()} />
                       {headers.map((header, i) => (
                         <TableHeader key={i} {...getHeaderProps({ header })}>
                           {header.header}
@@ -204,20 +191,16 @@ export const Default = (args) => {
                   <TableBody>
                     {rows.map((row) => (
                       <React.Fragment key={row.id}>
-                        <TableExpandRow
-                          {...getRowProps({ row })}
-                          onClick={action('onClick')}>
-                          <TableSelectRow
-                            {...getSelectionProps({ row })}
-                            onChange={action('TableSelectRow - onChange')}
-                          />
+                        <TableExpandRow {...getRowProps({ row })}>
+                          <TableSelectRow {...getSelectionProps({ row })} />
                           {row.cells.map((cell) => (
                             <TableCell key={cell.id}>{cell.value}</TableCell>
                           ))}
                         </TableExpandRow>
                         <TableExpandedRow
                           colSpan={headers.length + 3}
-                          className="demo-expanded-td">
+                          className="demo-expanded-td"
+                          {...getExpandedRowProps({ row })}>
                           <h6>Expandable row content</h6>
                           <div>Description here</div>
                         </TableExpandedRow>
diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
index 15f8593a56c9..ceb92f7fb836 100644
--- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
+++ b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
@@ -113,16 +113,6 @@ export const Default = (args) => (
       itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidComboBox
-      {...args}
-      onChange={() => {}}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
index 0ff9908006c0..c5923a0dd70c 100644
--- a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
+++ b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
@@ -105,6 +105,7 @@ const sharedArgTypes = {
 export const Default = (args) => (
   <div style={{ width: args.defaultWidth }}>
     <FluidDropdown
+      initialSelectedItem={items[2]}
       id="default"
       titleText="Label"
       label="Choose an option"
@@ -112,15 +113,6 @@ export const Default = (args) => (
       itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidDropdown
-      {...args}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
index 650166c0027e..f435ace3d56e 100644
--- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
+++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
@@ -70,16 +70,6 @@ export const Default = (args) => (
       itemToString={(item) => (item ? item.text : '')}
       {...args}
     />
-    <br />
-    <FluidMultiSelect
-      {...args}
-      onChange={() => {}}
-      id="default-3"
-      titleText={ToggleTip}
-      label="Choose an option"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-    />
   </div>
 );
 
diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
index ed116a06276a..4cce1ee3a592 100644
--- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
+++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
@@ -44,6 +44,11 @@ export const Default = (args) => (
 );
 
 Default.args = {
+  max: 100,
+  min: 0,
+  step: 10,
+  id: 'input-default',
+  placeholder: 'Placeholder text',
   defaultWidth: 400,
   defaultValue: 50,
   invalid: false,
diff --git a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
index 3367ac0854cf..d08eecff68d5 100644
--- a/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
+++ b/packages/react/src/components/Notification/stories/ActionableNotification.stories.js
@@ -23,7 +23,7 @@ export default {
     kind: 'error',
     lowContrast: false,
     hideCloseButton: false,
-    ['aria-label']: 'closes notification',
+    ['aria-label']: 'close notification',
     statusIconDescription: 'notification',
     onClose: action('onClose'),
     onCloseButtonClick: action('onCloseButtonClick'),
@@ -71,6 +71,7 @@ Default.argTypes = {
 Default.args = {
   actionButtonLabel: 'Action',
   inline: false,
+  closeOnEscape: true,
   title: 'Notification title',
   subtitle: 'Subtitle text goes here',
 };
diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js
index 731b38832ba6..954bb947bbb7 100644
--- a/packages/react/src/components/Toggletip/Toggletip.stories.js
+++ b/packages/react/src/components/Toggletip/Toggletip.stories.js
@@ -91,10 +91,8 @@ const DefaultStory = (controls) => {
   const { align } = controls;
   return (
     <>
-      <ToggletipLabel>
-        Toggletip label -- using <code>defaultOpen</code> prop
-      </ToggletipLabel>
-      <Toggletip align={align} defaultOpen>
+      <ToggletipLabel>Toggletip label</ToggletipLabel>
+      <Toggletip align={align}>
         <ToggletipButton label="Show information">
           <Information />
         </ToggletipButton>
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js
index 0c7bba3eaa46..09356d66cc83 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.js
@@ -11,6 +11,7 @@ import { Help } from '@carbon/icons-react';
 import React, { useRef, useEffect } from 'react';
 import { Tooltip } from './';
 import mdx from './Tooltip.mdx';
+import Button from '../Button';
 
 export default {
   title: 'Components/Tooltip',
@@ -54,7 +55,7 @@ export const Default = () => {
   const label =
     'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
   return (
-    <Tooltip align="bottom" label={label}>
+    <Tooltip align="bottom" label={label} closeOnActivation={false}>
       <button className="sb-tooltip-trigger" type="button">
         <Help />
       </button>
@@ -62,13 +63,6 @@ export const Default = () => {
   );
 };
 
-Default.args = {
-  align: 'bottom',
-  closeOnActivation: false,
-  defaultOpen: false,
-  label: 'Custom label',
-};
-
 Default.argTypes = {
   align: {
     options: [

From 60b4f31705749e100a99738025ff0054bf337c79 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 13 Dec 2024 14:58:39 -0300
Subject: [PATCH 9/9] fix: changed last playground stories

---
 .../CodeSnippet/CodeSnippet.stories.js        | 34 ------------------
 .../components/ComboButton/ComboButton.mdx    |  4 +--
 .../components/ContextMenu/useContextMenu.mdx |  2 +-
 .../src/components/DataTable/DataTable.mdx    | 14 ++++----
 .../components/FormGroup/FormGroup.stories.js |  2 +-
 .../components/IconButton/docs/overview.mdx   |  4 +--
 .../src/components/Layout/Layout.stories.js   |  2 +-
 .../src/components/Menu/docs/overview.mdx     |  2 +-
 .../src/components/MenuButton/MenuButton.mdx  | 14 ++++----
 .../components/Notification/Notification.mdx  |  6 ++--
 .../Notification/stories/Callout.stories.js   | 20 ++++++-----
 ...OverflowMenu.DynamicStyles.featureflag.mdx |  6 ++--
 .../OverflowMenu.featureflag.stories.js       |  6 ++--
 .../RadioButton/RadioButton.stories.js        |  2 +-
 .../SkeletonText/SkeletonText.stories.js      |  8 ++---
 .../src/components/Stack/Stack.stories.js     | 16 ++-------
 .../TreeView/TreeView.featureflag.stories.js  |  6 ++--
 .../UnorderedList/UnorderedList.stories.js    | 36 ++++++++-----------
 18 files changed, 67 insertions(+), 117 deletions(-)

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
index 7050fcae9801..452ad42ef309 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -135,37 +135,3 @@ export const Skeleton = () => (
     <CodeSnippetSkeleton type="multi" />
   </div>
 );
-
-export const Playground = (args) => (
-  <CodeSnippet type="single" feedback="Copied to clipboard" {...args}>
-    {'yarn add @carbon/react'}
-  </CodeSnippet>
-);
-
-Playground.argTypes = {
-  ['aria-label']: {
-    table: {
-      disable: true,
-    },
-  },
-  ariaLabel: {
-    table: {
-      disable: true,
-    },
-  },
-  children: {
-    table: {
-      disable: true,
-    },
-  },
-  onClick: {
-    table: {
-      disable: true,
-    },
-  },
-  type: {
-    table: {
-      disable: true,
-    },
-  },
-};
diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx
index b50630639743..2c5d5a79825b 100644
--- a/packages/react/src/components/ComboButton/ComboButton.mdx
+++ b/packages/react/src/components/ComboButton/ComboButton.mdx
@@ -39,8 +39,8 @@ If it seems your specified `menuAlignment` isn't working, it's because we
 prioritize ensuring the Menu remains visible. We calculate the optimal position
 to display the Menu in case the provided `menuAlignment` obscures it.
 
-We encourage you to play around in the Storybook playground to better understand
-the `menuAlignment` prop.
+We encourage you to play around in the Storybook Default stories to better
+understand the `menuAlignment` prop.
 
 ## Component API
 
diff --git a/packages/react/src/components/ContextMenu/useContextMenu.mdx b/packages/react/src/components/ContextMenu/useContextMenu.mdx
index debe239f8b0a..739a063d6d1e 100644
--- a/packages/react/src/components/ContextMenu/useContextMenu.mdx
+++ b/packages/react/src/components/ContextMenu/useContextMenu.mdx
@@ -18,7 +18,7 @@ import * as useContextMenu from './useContextMenu.stories.js';
 ## Overview
 
 The `useContextMenu` hook is meant to be used in conjunction with `Menu` (see
-this [component's documentation](/docs/components-menu--playground) for more
+this [component's documentation](/docs/components-menu--default) for more
 details). It provides an easy way to generate the necessary props for `Menu`.
 
 By default, it will listen to the `contextmenu` event on `document`. In most
diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx
index b5b700377cce..0fe291de1722 100644
--- a/packages/react/src/components/DataTable/DataTable.mdx
+++ b/packages/react/src/components/DataTable/DataTable.mdx
@@ -18,7 +18,7 @@ import {
 &nbsp;|&nbsp;
 [Accessibility](https://www.carbondesignsystem.com/components/data-table/accessibility)
 
-<Canvas id="components-datatable-basic--playground" />
+<Canvas id="components-datatable-basic--default" />
 
 {/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
@@ -155,7 +155,7 @@ into your render prop, visit the [render props](#render-props) section.
 In order to sort the rows in your data table, you will need to pass in the
 `isSortable` prop to the `DataTable` component.
 
-<Canvas id="components-datatable-sorting--playground" />
+<Canvas id="components-datatable-sorting--default" />
 
 Optionally, you can pass in `isSortable` to each `TableHeader` that you want to
 be sorted, or not sorted. This is useful if you only want to enable sorting on
@@ -206,7 +206,7 @@ function customSortRow(cellA, cellB, { sortDirection, sortStates, locale }) {
 The `DataTable` components supports row-level expansion when combined with the
 `TableExpandHeader`, `TableExpandRow`, and `TableExpandedRow` components.
 
-<Canvas id="components-datatable-expansion--playground" />
+<Canvas id="components-datatable-expansion--default" />
 
 _Note: press "Show code" above to view a code snippet of this example_
 
@@ -229,7 +229,7 @@ row id as a single argument.
 The `DataTable` component supports row selection when used with the
 `TableSelectAll` and `TableSelectRow` components.
 
-<Canvas id="components-datatable-selection--playground" />
+<Canvas id="components-datatable-selection--default" />
 
 _Note: press "Show code" above to view a code snippet of this example_
 
@@ -263,7 +263,7 @@ the `TableToolbarSearch` component. Any input entered through
 By default `filterRows` is provided through our default implementation. However,
 you can provide your own method if needed.
 
-<Canvas id="components-datatable-filtering--playground" />
+<Canvas id="components-datatable-filtering--default" />
 
 In order to integrate filtering into your data table, you will need to provide
 the `onInputChange` function provided to you from `DataTable`'s render prop and
@@ -350,13 +350,13 @@ the following components:
 - `TableSelectAll`
 - `TableSelectRow`
 
-  <Canvas id="components-datatable-batch-actions--playground" />
+  <Canvas id="components-datatable-batch-actions--default" />
 
 _Note: press "Show code" above to view a code snippet of this example_
 
 ## Toolbar
 
-<Canvas id="components-datatable-toolbar--playground" />
+<Canvas id="components-datatable-toolbar--default" />
 
 ### Overflow Menu
 
diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.js b/packages/react/src/components/FormGroup/FormGroup.stories.js
index aeace1fa2005..c5b626de5058 100644
--- a/packages/react/src/components/FormGroup/FormGroup.stories.js
+++ b/packages/react/src/components/FormGroup/FormGroup.stories.js
@@ -47,7 +47,7 @@ export const Default = (args) => (
       <TextInput id="two" labelText="Last Name" />
       <RadioButtonGroup
         legendText="Radio button heading"
-        name="formgroup-playground-radio-button-group"
+        name="formgroup-default-radio-button-group"
         defaultSelected="radio-1">
         <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
         <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
diff --git a/packages/react/src/components/IconButton/docs/overview.mdx b/packages/react/src/components/IconButton/docs/overview.mdx
index 46c41d769fbd..5a23db6b247a 100644
--- a/packages/react/src/components/IconButton/docs/overview.mdx
+++ b/packages/react/src/components/IconButton/docs/overview.mdx
@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-iconbutton--playground'
-    }
+      variant: 'components-iconbutton--default',
+    },
   ]}
 />
diff --git a/packages/react/src/components/Layout/Layout.stories.js b/packages/react/src/components/Layout/Layout.stories.js
index cb04f7260631..ee7a29cf6caf 100644
--- a/packages/react/src/components/Layout/Layout.stories.js
+++ b/packages/react/src/components/Layout/Layout.stories.js
@@ -50,7 +50,7 @@ const Demo = () => (
   </VStack>
 );
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <VStack gap={10}>
       <h1>Layout demo</h1>
diff --git a/packages/react/src/components/Menu/docs/overview.mdx b/packages/react/src/components/Menu/docs/overview.mdx
index c8f73a762157..e0684a3751f8 100644
--- a/packages/react/src/components/Menu/docs/overview.mdx
+++ b/packages/react/src/components/Menu/docs/overview.mdx
@@ -7,7 +7,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-menu--playground'
+      variant: 'components-menu--default',
     },
   ]}
 />
diff --git a/packages/react/src/components/MenuButton/MenuButton.mdx b/packages/react/src/components/MenuButton/MenuButton.mdx
index 1c7598923520..d23f87892316 100644
--- a/packages/react/src/components/MenuButton/MenuButton.mdx
+++ b/packages/react/src/components/MenuButton/MenuButton.mdx
@@ -38,16 +38,18 @@ If it seems your specified `menuAlignment` isn't working, it's because we
 prioritize ensuring the Menu remains visible. We calculate the optimal position
 to display the Menu in case the provided `menuAlignment` obscures it.
 
-We encourage you to play around in the Storybook playground to better understand
-the `menuAlignment` prop.
-
+We encourage you to play around in the Storybook Default stories to better
+understand the `menuAlignment` prop.
 
 ## menuTarget Prop
 
-The `menuTarget` prop specifies where the `Menu` should render, which is particularly useful when using `MenuButton` inside a modal. By default, the menu renders in `document.body`, but this can disrupt focus order in modals or other components with focus management.
-
-Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific element where you want it to render:
+The `menuTarget` prop specifies where the `Menu` should render, which is
+particularly useful when using `MenuButton` inside a modal. By default, the menu
+renders in `document.body`, but this can disrupt focus order in modals or other
+components with focus management.
 
+Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific
+element where you want it to render:
 
 ## Component API
 
diff --git a/packages/react/src/components/Notification/Notification.mdx b/packages/react/src/components/Notification/Notification.mdx
index 1e08c67932d6..bf3b42d818a0 100644
--- a/packages/react/src/components/Notification/Notification.mdx
+++ b/packages/react/src/components/Notification/Notification.mdx
@@ -63,15 +63,15 @@ an `aria-describedby` on the interactive element with a value that matches the
 
 ## Actionable
 
-<Canvas id="components-notifications-actionable--playground" />
+<Canvas id="components-notifications-actionable--default" />
 
 ## Inline
 
-<Canvas id="components-notifications-inline--playground" />
+<Canvas id="components-notifications-inline--default" />
 
 ## Toast
 
-<Canvas id="components-notifications-toast--playground" />
+<Canvas id="components-notifications-toast--default" />
 
 ## Feedback
 
diff --git a/packages/react/src/components/Notification/stories/Callout.stories.js b/packages/react/src/components/Notification/stories/Callout.stories.js
index 47e5ea747e6f..af770f8e12af 100644
--- a/packages/react/src/components/Notification/stories/Callout.stories.js
+++ b/packages/react/src/components/Notification/stories/Callout.stories.js
@@ -25,9 +25,9 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Callout title="Notification title" subtitle="Subtitle text goes here" />
-);
+// export const Default = () => (
+//   <Callout title="Notification title" subtitle="Subtitle text goes here" />
+// );
 
 export const WithInteractiveElements = () => (
   <Callout
@@ -44,9 +44,15 @@ export const WithInteractiveElements = () => (
   </Callout>
 );
 
-export const Playground = (args) => <Callout {...args} />;
+export const Default = (args) => (
+  <Callout
+    title="Notification title"
+    subtitle="Subtitle text goes here"
+    {...args}
+  />
+);
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
@@ -62,7 +68,3 @@ Playground.argTypes = {
     control: { type: 'select' },
   },
 };
-Playground.args = {
-  title: 'Notification title',
-  subtitle: 'Subtitle text goes here',
-};
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx
index b0ced447d795..7a958799083d 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.DynamicStyles.featureflag.mdx
@@ -18,7 +18,7 @@ import { Meta } from '@storybook/blocks';
 
 This version of the `OverflowMenu` can be enabled by using the
 `enable-v12-overflowmenu` feature flag and supports all
-[subcomponents of `Menu`](/docs/components-menu--playground#subcomponents).
+[subcomponents of `Menu`](/docs/components-menu--default#subcomponents).
 
 ```jsx
 <OverflowMenu label="Primary action">
@@ -42,8 +42,8 @@ If it seems your specified `menuAlignment` isn't working, it's because we
 prioritize ensuring the Menu remains visible. We calculate the optimal position
 to display the Menu in case the provided `menuAlignment` obscures it.
 
-We encourage you to play around in the Storybook playground to better understand
-the `menuAlignment` prop.
+We encourage you to play around in the Storybook Default stories to better
+understand the `menuAlignment` prop.
 
 ## menuTarget Prop
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
index f8b77a99e5fe..ef2d9a33252a 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
@@ -160,7 +160,7 @@ export const FloatingStyles = () => {
   );
 };
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <OverflowMenu {...args}>
       <MenuItem label="Stop app" />
@@ -173,11 +173,11 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   label: 'Options',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   children: {
     table: {
       disable: true,
diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
index daaac444ce15..15862880fbdd 100644
--- a/packages/react/src/components/RadioButton/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -184,7 +184,7 @@ export const Default = (args) => {
   return (
     <RadioButtonGroup
       legendText="Radio Button group"
-      name="radio-button-playground-group"
+      name="radio-button-default-group"
       {...args}>
       <RadioButton
         labelText="Radio button label"
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.stories.js b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
index 16eb8b71782c..9657e35f5ee3 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.stories.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
@@ -22,18 +22,16 @@ export default {
   },
 };
 
-export const Default = () => <SkeletonText />;
+export const Default = (args) => <SkeletonText {...args} />;
 
-export const Playground = (args) => <SkeletonText {...args} />;
-
-Playground.args = {
+Default.args = {
   heading: false,
   paragraph: false,
   width: '100%',
   lineCount: 3,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   className: {
     control: false,
   },
diff --git a/packages/react/src/components/Stack/Stack.stories.js b/packages/react/src/components/Stack/Stack.stories.js
index 1e4989c6a95a..fa3698482af3 100644
--- a/packages/react/src/components/Stack/Stack.stories.js
+++ b/packages/react/src/components/Stack/Stack.stories.js
@@ -25,16 +25,6 @@ export default {
   },
 };
 
-export const Default = () => {
-  return (
-    <Stack gap={6}>
-      <div>Item 1</div>
-      <div>Item 2</div>
-      <div>Item 3</div>
-    </Stack>
-  );
-};
-
 export const Horizontal = () => {
   return (
     <Stack gap={6} orientation="horizontal">
@@ -45,7 +35,7 @@ export const Horizontal = () => {
   );
 };
 
-export const Playground = (args) => {
+export const Default = (args) => {
   return (
     <Stack {...args}>
       <div>Item 1</div>
@@ -55,11 +45,11 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   as: 'div',
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   as: {
     control: {
       type: 'text',
diff --git a/packages/react/src/components/TreeView/TreeView.featureflag.stories.js b/packages/react/src/components/TreeView/TreeView.featureflag.stories.js
index 964246b33436..a2962792342a 100644
--- a/packages/react/src/components/TreeView/TreeView.featureflag.stories.js
+++ b/packages/react/src/components/TreeView/TreeView.featureflag.stories.js
@@ -200,7 +200,7 @@ export default {
   ],
 };
 
-export const Playground = (args) => {
+export const Default = (args) => {
   const [selected, setSelected] = useState([]);
   const [active, setActive] = useState(null);
 
@@ -240,12 +240,12 @@ export const Playground = (args) => {
   );
 };
 
-Playground.args = {
+Default.args = {
   hideLabel: false,
   multiselect: false,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   active: { control: { disable: true } },
   selected: { control: { disable: true } },
   size: {
diff --git a/packages/react/src/components/UnorderedList/UnorderedList.stories.js b/packages/react/src/components/UnorderedList/UnorderedList.stories.js
index 70294e3e7198..65eaa70a2ed4 100644
--- a/packages/react/src/components/UnorderedList/UnorderedList.stories.js
+++ b/packages/react/src/components/UnorderedList/UnorderedList.stories.js
@@ -26,14 +26,26 @@ export default {
   },
 };
 
-export const Default = () => (
-  <UnorderedList>
+export const Default = (args) => (
+  <UnorderedList {...args}>
     <ListItem>Unordered List level 1</ListItem>
     <ListItem>Unordered List level 1</ListItem>
     <ListItem>Unordered List level 1</ListItem>
   </UnorderedList>
 );
 
+Default.args = {
+  isExpressive: false,
+};
+
+Default.argTypes = {
+  isExpressive: {
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const Nested = () => {
   const regularProps = props.regular();
 
@@ -59,23 +71,3 @@ export const Nested = () => {
 };
 
 Nested.storyName = 'nested';
-
-export const Playground = (args) => (
-  <UnorderedList {...args}>
-    <ListItem>Unordered List level 1</ListItem>
-    <ListItem>Unordered List level 1</ListItem>
-    <ListItem>Unordered List level 1</ListItem>
-  </UnorderedList>
-);
-
-Playground.args = {
-  isExpressive: false,
-};
-
-Playground.argTypes = {
-  isExpressive: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};