docs(select): add playground story, controls (#11623)

* docs(select): add playground story, controls * fix(select): remove unused playground argtypes * fix(select): ensure string controls work, remove unecessary props from controls Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 23, 2022 · 2623b63 · 2623b63
1 parent e46fb81
commit 2623b63
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 22 deletions.
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
@@ -21,20 +21,20 @@ const Select = React.forwardRef(function Select(
   {
     className,
     id,
-    inline,
+    inline = false,
     labelText,
-    disabled,
+    disabled = false,
     children,
     // reserved for use with <Pagination> component
-    noLabel,
+    noLabel = false,
     // eslint-disable-next-line no-unused-vars
-    hideLabel,
-    invalid,
+    hideLabel = false,
+    invalid = false,
     invalidText,
     helperText,
-    light,
+    light = false,
     size,
-    warn,
+    warn = false,
     warnText,
     ...other
   },

diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js
@@ -14,15 +14,48 @@ import { Layer } from '../Layer';
 export default {
   title: 'Components/Select',
   component: Select,
-  argTypes: {
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: { type: 'select' },
-    },
-  },
   args: {
+    disabled: false,
+    inline: false,
+    noLabel: false,
+    hideLabel: false,
+    invalid: false,
+    warn: false,
     size: 'md',
   },
+  argTypes: {
+    onChange: {
+      action: 'onChange',
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    defaultValue: {
+      table: {
+        disable: true,
+      },
+    },
+    id: {
+      table: {
+        disable: true,
+      },
+    },
+    light: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   decorators: [(story) => <div style={{ width: '400px' }}>{story()}</div>],
   subcomponents: {
     SelectItem,
@@ -31,11 +64,10 @@ export default {
   },
 };
 
-export const _Default = (args) => {
+export const Default = () => {
   return (
     <div>
       <Select
-        {...args}
         id="select-1"
         defaultValue="placeholder-item"
         labelText="Select an option"
@@ -59,11 +91,10 @@ export const _Default = (args) => {
   );
 };
 
-export const Inline = (args) => {
+export const Inline = () => {
   return (
     <div>
       <Select
-        {...args}
         inline
         id="select-1"
         defaultValue="placeholder-item"
@@ -88,7 +119,7 @@ export const Inline = (args) => {
   );
 };
 
-export const _Skeleton = () => (
+export const Skeleton = () => (
   <div
     aria-label="loading select"
     aria-live="assertive"
@@ -99,11 +130,10 @@ export const _Skeleton = () => (
   </div>
 );
 
-export const WithLayer = (args) => {
+export const WithLayer = () => {
   return (
     <>
       <Select
-        {...args}
         id="select-1"
         defaultValue="placeholder-item"
         labelText=""
@@ -119,7 +149,6 @@ export const WithLayer = (args) => {
       </Select>
       <Layer>
         <Select
-          {...args}
           id="select-1"
           defaultValue="placeholder-item"
           labelText=""
@@ -137,7 +166,6 @@ export const WithLayer = (args) => {
         </Select>
         <Layer>
           <Select
-            {...args}
             id="select-1"
             defaultValue="placeholder-item"
             labelText=""
@@ -158,3 +186,40 @@ export const WithLayer = (args) => {
     </>
   );
 };
+
+export const Playground = (args) => {
+  return (
+    <div>
+      <Select
+        id="select-1"
+        defaultValue="placeholder-item"
+        labelText="Select an option"
+        helperText="Optional helper text"
+        {...args}>
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItemGroup label="Category 1">
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+        </SelectItemGroup>
+        <SelectItemGroup label="Category 2">
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </SelectItemGroup>
+      </Select>
+    </div>
+  );
+};
+
+Playground.argTypes = {
+  helperText: {
+    control: 'text',
+  },
+  invalidText: { control: 'text' },
+  labelText: { control: 'text' },
+  warnText: { control: 'text' },
+};