chore(docs): clean up dropdown stories, finish docs

carbon-design-system · Aug 25, 2020 · 850e6f6 · 850e6f6
1 parent d32ad10
commit 850e6f6
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 86 deletions.
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -10,7 +10,6 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from './Dropdown.Skeleton';
-import WithState from '../../tools/withState';
 import mdx from './Dropdown.mdx';
 
 const items = [
@@ -41,15 +40,6 @@ const items = [
   },
 ];
 
-const stringItems = [
-  'Option 1',
-  'Option 2',
-  'Option 3',
-  'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
-  'Option 5',
-  'Option 6',
-];
-
 const sizes = {
   'Extra large size (xl)': 'xl',
   'Default size': undefined,
@@ -69,7 +59,7 @@ const props = () => ({
   ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
-  titleText: text('Title (titleText)', 'This is a dropdown title.'),
+  titleText: text('Title (titleText)', 'Dropdown label'),
   helperText: text('Helper text (helperText)', 'This is some helper text.'),
   invalid: boolean('Show form validation UI (invalid)', false),
   invalidText: text(
@@ -97,20 +87,23 @@ export default {
 export const Default = () => (
   <div style={{ width: 300 }}>
     <Dropdown
-      {...props()}
+      id="default"
+      titleText="Dropdown label"
+      helperText="This is some helper text"
+      label="Dropdown menu options"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
       onChange={action('onChange')}
     />
   </div>
 );
 
-Default.storyName = 'default';
-
 export const Inline = () => (
   <div style={{ width: 600 }}>
     <Dropdown
-      {...props()}
+      id="inline"
+      titleText="Inline dropdown label"
+      label="Dropdown menu options"
       type="inline"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
@@ -119,70 +112,20 @@ export const Inline = () => (
   </div>
 );
 
-Inline.storyName = 'inline';
-
-Inline.parameters = {
-  info: {
-    text: 'Dropdown',
-  },
-};
-
-export const ItemsAsStrings = () => (
-  <div style={props.inline ? { width: 500 } : { width: 300 }}>
-    <Dropdown {...props()} items={stringItems} onChange={action('onChange')} />
-  </div>
-);
-
-ItemsAsStrings.storyName = 'items as strings';
-
-ItemsAsStrings.parameters = {
-  info: {
-    text: 'Rendering an array of strings as `items`',
-  },
-};
-
-export const FullyControlled = () => (
-  <WithState initialState={{ selectedItem: items[0] }}>
-    {({ state, setState }) => (
-      <div style={{ width: 300 }}>
-        <Dropdown
-          {...props()}
-          items={items}
-          itemToString={(item) => (item ? item.text : '')}
-          onChange={({ selectedItem }) =>
-            setTimeout(() => setState({ selectedItem }), 1000)
-          }
-          selectedItem={state.selectedItem}
-        />
-      </div>
-    )}
-  </WithState>
-);
-
-FullyControlled.storyName = 'fully controlled';
-
-FullyControlled.parameters = {
-  info: {
-    text: `
-        Sometimes you want to control everything.
-      `,
-  },
+export const Playground = () => {
+  return (
+    <div style={{ width: 300 }}>
+      <Dropdown
+        {...props()}
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </div>
+  );
 };
 
 export const Skeleton = () => (
   <div style={{ width: 300 }}>
     <DropdownSkeleton />
-    &nbsp;
-    <DropdownSkeleton inline />
   </div>
 );
-
-Skeleton.storyName = 'skeleton';
-
-Skeleton.parameters = {
-  info: {
-    text: `
-        Placeholder skeleton state to use when content is loading.
-      `,
-  },
-};
diff --git a/packages/react/src/components/Dropdown/Dropdown.Skeleton.js b/packages/react/src/components/Dropdown/Dropdown.Skeleton.js
@@ -12,13 +12,12 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const DropdownSkeleton = ({ inline, className, ...rest }) => {
+const DropdownSkeleton = ({ className, ...rest }) => {
   const wrapperClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--dropdown-v2`]: true,
     [`${prefix}--list-box`]: true,
     [`${prefix}--form-item`]: true,
-    [`${prefix}--list-box--inline`]: inline,
   });
 
   return (
@@ -35,15 +34,6 @@ DropdownSkeleton.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
-  /**
-   * Specify whether you want the inline version of this control
-   */
-  inline: PropTypes.bool,
-};
-
-DropdownSkeleton.defaultProps = {
-  inline: false,
 };
 
 export default DropdownSkeleton;
diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx
@@ -18,6 +18,10 @@ import DropdownSkeleton from './Dropdown.Skeleton';
   - [Dropdown `itemToString`](#dropdown-itemtostring)
   - [Dropdown `items`](#dropdown-items)
   - [Dropdown `light`](#dropdown-light)
+  - [Dropdown `selectedItem`](#dropdown-selecteditem)
+  - [Dropdown `size`](#dropdown-size)
+  - [Dropdown `titleText`](#dropdown-titletext)
+  - [Dropdown `type`](#dropdown-type)
 - [References](#references)
 - [Feedback](#feedback)
 
@@ -73,6 +77,7 @@ to the top of the screen. To do this, specify `direction="top"`
   itemToString={(item) => (item ? item.text : '')}
   label="Select an option..."
   direction="top"
+  id="direction"
 />
 
 ```jsx
@@ -120,6 +125,7 @@ dropdown item in a custom element.
     )
   }
   label="Select an option..."
+  id="item-to-element"
 />
 
 ```jsx
@@ -190,8 +196,97 @@ to toggle the light variant of the `Dropdown`.
 <Dropdown light>...</Dropdown>
 ```
 
+### Dropdown `selectedItem`
+
+You can pass a `selectedItem` to the `Dropdown` to set a value on initial load.
+Keep in mind, if you set a value the `Dropdown` will become a controlled
+component and you will need to handle state management.
+
+```jsx
+const [currentItem, setCurrentItem] = useState(items[4]);
+...
+<Dropdown
+  items={items}
+  itemToString={(item) => (item ? item.text : '')}
+  onChange={({ selectedItem }) => setCurrentItem(selectedItem)}
+  selectedItem={currentItem}
+/>
+```
+
+### Dropdown `size`
+
+There are three sizes of `Dropdown` available: `sm`, `lg` (the default), and
+`xl`.
+
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  size="sm"
+  label="Small [sm]"
+  id="sm"
+/>
+<br />
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  label="Large [lg]"
+  id="lg"
+/>
+<br />
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  size="xl"
+  label="Extra Large [xl]"
+  id="xl"
+/>
+
+```jsx
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  size="sm"
+  label="Small [sm]"
+/>
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  label="Large [lg]"
+/>
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  size="xl"
+  label="Extra Large [xl]"
+/>
+```
+
+### Dropdown `titleText`
+
+This is the text that will be used as a label for the `Dropdown`
+
+```jsx
+<Dropdown titleText="This is the Dropdown label" />
+```
+
+### Dropdown `type`
+
+Sometimes you will need to place a `Dropdown` inline with other content. To do
+that, pass in `type="inline"` to the `Dropdown`
+
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  label="Inline"
+  type="inline"
+  id="inline"
+/>
+
+```jsx
+<Dropdown
+  items={['Option 1', 'Option 2', 'Option 3']}
+  label="Inline"
+  type="inline"
+/>
+```
+
 ## References
 
+- [Carbon Usage Guidelines](https://www.carbondesignsystem.com/components/dropdown/usage/)
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions, and