docs(OverflowMenu): update docs (#7843)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 25, 2021 · fcf8df0 · fcf8df0
1 parent b633233
commit fcf8df0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 172 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -8,12 +8,11 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { withReadme } from 'storybook-readme';
 import OverflowMenu from '../OverflowMenu';
 import { OverflowMenu as OGOverflowMenu } from './OverflowMenu';
 import OverflowMenuItem from '../OverflowMenuItem';
-import OverflowREADME from './README.md';
 import mdx from './OverflowMenu.mdx';
+import { Filter16 } from '@carbon/icons-react';
 
 const directions = {
   'Bottom of the trigger button (bottom)': 'bottom',
@@ -70,126 +69,44 @@ export default {
   },
 };
 
-export const Basic = withReadme(OverflowREADME, () => (
-  <OverflowMenu {...props.menu()}>
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 1" />
-    <OverflowMenuItem
-      {...props.menuItem()}
-      itemText="Option 2 is an example of a really long string and how we recommend handling this"
-      requireTitle
-      title="Custom tooltip title"
-    />
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
-    <OverflowMenuItem
-      {...props.menuItem()}
-      requireTitle
-      itemText="Danger option"
-      hasDivider
-      isDelete
-    />
+export const _Default = () => (
+  <OverflowMenu>
+    <OverflowMenuItem itemText="Stop app" />
+    <OverflowMenuItem itemText="Restart app" />
+    <OverflowMenuItem itemText="Rename app" />
+    <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+    <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
   </OverflowMenu>
-));
-
-Basic.storyName = 'basic';
+);
 
-Basic.parameters = {
-  info: {
-    text: `
-        Overflow Menu is used when additional options are available to the user and there is a space constraint.
-        Create Overflow Menu Item components for each option on the menu.
-      `,
-  },
+_Default.story = {
+  name: 'Overflow Menu',
 };
 
-export const WithLinks = withReadme(OverflowREADME, () => (
-  <OverflowMenu {...props.menu()}>
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 1"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 2 is an example of a really long string and how we recommend handling this"
-      requireTitle
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 3"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 4"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Danger option"
-      hasDivider
-      isDelete
-    />
+export const RenderCustomIcon = () => (
+  <OverflowMenu renderIcon={Filter16}>
+    <OverflowMenuItem itemText="Filter A" />
+    <OverflowMenuItem itemText="Filter B" />
   </OverflowMenu>
-));
-
-WithLinks.storyName = 'with links';
+);
 
-WithLinks.parameters = {
-  info: {
-    text: `
-        Overflow Menu is used when additional options are available to the user and there is a space constraint.
-        Create Overflow Menu Item components for each option on the menu.
-
-        When given \`href\` props, menu items render as <a> tags to facilitate usability.
-      `,
-  },
-};
-
-export const CustomTrigger = withReadme(OverflowREADME, () => (
-  <OverflowMenu
-    {...{
-      ...props.menu(),
-      ariaLabel: null,
-      style: { width: 'auto' },
-      // eslint-disable-next-line react/display-name
-      renderIcon: () => <div style={{ padding: '0 1rem' }}>Menu</div>,
-    }}>
+export const Playground = () => (
+  <OverflowMenu {...props.menu()}>
     <OverflowMenuItem {...props.menuItem()} itemText="Option 1" />
     <OverflowMenuItem
       {...props.menuItem()}
       itemText="Option 2 is an example of a really long string and how we recommend handling this"
       requireTitle
+      title="Custom tooltip title"
     />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
     <OverflowMenuItem
       {...props.menuItem()}
+      requireTitle
       itemText="Danger option"
       hasDivider
       isDelete
     />
   </OverflowMenu>
-));
-
-CustomTrigger.storyName = 'custom trigger';
-
-CustomTrigger.parameters = {
-  info: {
-    text: `
-        Sometimes you just want to render something other than an icon
-      `,
-  },
-};
+);
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
@@ -12,6 +12,16 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Overview
 
+The overflow menu component is a clickable element that contains additional
+options that are available to the user, but there is a space constraint.
+
+### `data-floating-menu-container`
+
+`OverflowMenu` uses React Portals to render the overflow menu into the DOM. To
+determine where in the DOM the menu will be placed, it looks for a parent
+element with the `data-floating-menu-container` attribute. If none parent with
+this attribute is found, the menu will be placed on `document.body`.
+
 ## Component API
 
 <Props />

diff --git a/packages/react/src/components/OverflowMenu/README.md b/packages/react/src/components/OverflowMenu/README.md