diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js index a35b2248397a..ac75d45bc16f 100644 --- 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, () => ( - - - - - - +export const _Default = () => ( + + + + + + -)); - -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, () => ( - - - - - - +export const RenderCustomIcon = () => ( + + + -)); - -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 tags to facilitate usability. - `, - }, -}; - -export const CustomTrigger = withReadme(OverflowREADME, () => ( -
Menu
, - }}> +export const Playground = () => ( + -)); - -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 index 7d60fcf2883e..7fdbe304712f 100644 --- 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 diff --git a/packages/react/src/components/OverflowMenu/README.md b/packages/react/src/components/OverflowMenu/README.md deleted file mode 100644 index a1ba58b77d6a..000000000000 --- a/packages/react/src/components/OverflowMenu/README.md +++ /dev/null @@ -1,68 +0,0 @@ -# `OverflowMenu` component - -> 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. - -## Table of Contents - - - - - - - -- [Installation](#installation) -- [Usage](#usage) - - - -## Installation - -This component comes with any installation of the `carbon-components-react` -package on NPM. You can install this package by running the following in your -terminal: - -```bash -npm i carbon-components carbon-components-react carbon-icons --save -# Or, with yarn -yarn add carbon-components carbon-components-react carbon-icons -``` - -## Usage - -You can include `OverflowMenu` and `OverflowMenuItem` by doing the following in -your project: - -```js -import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react'; -``` - -You can then create the menu by the following: - -```js - - - - ... - -``` - -There are two important React props: - -- `primaryFocus` in `OverflowMenuItem`: This is required for the menu item you - put keyboard focus on when `OverflowMenu` gets open - -Please refer to -[our Storybook](http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic) -for more details. - -## Note about `` children - -Make sure the children of `` are React components that accept -`ref` as their children - Typically ``. Otherwise, you'll get -an error like: - -``` -Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? -```