diff --git a/packages/react/src/components/DataTable/README.md b/packages/react/src/components/DataTable/README.md index ecec1c10375e..18257c9d0faa 100644 --- a/packages/react/src/components/DataTable/README.md +++ b/packages/react/src/components/DataTable/README.md @@ -695,7 +695,7 @@ In practice, this looks like the following: {/* make sure to apply getBatchActionProps so that the bar renders */} {/* inside of you batch actinos, you can include selectedRows */} - + Ghost diff --git a/packages/react/src/components/DataTable/TableToolbarAction.js b/packages/react/src/components/DataTable/TableToolbarAction.js index 8bd53fa062e9..a24936cfd7f5 100644 --- a/packages/react/src/components/DataTable/TableToolbarAction.js +++ b/packages/react/src/components/DataTable/TableToolbarAction.js @@ -9,10 +9,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import OverflowMenuItem from '../OverflowMenuItem'; -const TableToolbarAction = ({ children, ...rest }) => { - return ; -}; +const TableToolbarAction = React.forwardRef(({ children, ...rest }, ref) => { + return ; +}); +TableToolbarAction.displayName = 'TableToolbarAction'; TableToolbarAction.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js index ada4804be717..adc2d5fca1e9 100644 --- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js +++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js @@ -99,7 +99,7 @@ describe('DataTable', () => { id="custom-id" /> - + Action 1 diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index ff4337ac794d..0fab26769346 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -1816,21 +1816,22 @@ exports[`DataTable should render 1`] = ` } } > - Action 1 - - + Action 2 - - + Action 3 - + ( - alert('Alert 1')}> + alert('Alert 1')}> Action 1 alert('Alert 2')}> diff --git a/packages/react/src/components/DataTable/stories/with-dynamic-content.js b/packages/react/src/components/DataTable/stories/with-dynamic-content.js index d58d89aa4196..3098ae8f408b 100644 --- a/packages/react/src/components/DataTable/stories/with-dynamic-content.js +++ b/packages/react/src/components/DataTable/stories/with-dynamic-content.js @@ -140,7 +140,9 @@ export default props => { - + Add row diff --git a/packages/react/src/components/DataTable/stories/with-toolbar.js b/packages/react/src/components/DataTable/stories/with-toolbar.js index 60f86d316331..af6f825190da 100644 --- a/packages/react/src/components/DataTable/stories/with-toolbar.js +++ b/packages/react/src/components/DataTable/stories/with-toolbar.js @@ -43,7 +43,9 @@ export default props => ( - + Action 1 diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js index 8664147f9c4a..0ec2180c24d6 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js @@ -9,8 +9,10 @@ import React from 'react'; import { storiesOf } from '@storybook/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 OverflowMenuItem from '../OverflowMenuItem'; +import OverflowREADME from './README.md'; const directions = { 'Bottom of the trigger button (bottom)': 'bottom', @@ -80,6 +82,7 @@ storiesOf('OverflowMenu', module) .addDecorator(withKnobs) .add( 'basic', + withReadme(OverflowREADME, () => ), () => ( ), () => ( ), () => (