chore(docs): update dropdown docs (#6710)

* chore(docs): begin dropdown docs work * chore(docs): write docs up to selectedItem * chore(docs): clean up dropdown stories, finish docs * chore(snapshot): update snapshots
carbon-design-system · Aug 26, 2020 · ff96a17 · ff96a17
1 parent 92992ef
commit ff96a17
Show file tree

Hide file tree

Showing 5 changed files with 330 additions and 96 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2236,9 +2236,7 @@ Map {
         ],
         "type": "oneOfType",
       },
-      "inline": Object {
-        "type": "bool",
-      },
+      "inline": [Function],
       "invalid": Object {
         "type": "bool",
       },
@@ -6277,16 +6275,11 @@ Map {
     },
   },
   "DropdownSkeleton" => Object {
-    "defaultProps": Object {
-      "inline": false,
-    },
     "propTypes": Object {
       "className": Object {
         "type": "string",
       },
-      "inline": Object {
-        "type": "bool",
-      },
+      "inline": [Function],
     },
   },
   "FileUploaderSkeleton" => Object {

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -10,7 +10,7 @@ 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 = [
   {
@@ -40,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,
@@ -68,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(
@@ -87,32 +78,32 @@ export default {
     subcomponents: {
       DropdownSkeleton,
     },
+    docs: {
+      page: mdx,
+    },
   },
 };
 
 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';
-
-Default.parameters = {
-  info: {
-    text: 'Dropdown',
-  },
-};
-
 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 : '')}
@@ -121,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
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { settings } from 'carbon-components';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
@@ -39,11 +40,11 @@ DropdownSkeleton.propTypes = {
   /**
    * Specify whether you want the inline version of this control
    */
-  inline: PropTypes.bool,
-};
-
-DropdownSkeleton.defaultProps = {
-  inline: false,
+  inline: deprecate(
+    PropTypes.bool,
+    `The \`inline\` prop has been deprecated and will
+    be removed in the next major release. To specify the inline variant of Dropdown, please use the \`type\` prop.`
+  ),
 };
 
 export default DropdownSkeleton;
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
@@ -232,7 +233,11 @@ Dropdown.propTypes = {
   /**
    * Specify whether you want the inline version of this control
    */
-  inline: PropTypes.bool,
+  inline: deprecate(
+    PropTypes.bool,
+    `The \`inline\` prop has been deprecated and will
+    be removed in the next major release. To specify the inline variant of Dropdown, please use the \`type\` prop.`
+  ),
 
   /**
    * Specify if the currently selected value is invalid.