Merge branch 'master' into patch-20

carbon-design-system · Sep 5, 2019 · e9d7fea · e9d7fea
2 parents ff2ba05 + 6dcabd4
commit e9d7fea
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 14 deletions.
diff --git 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 */}
         <TableBatchActions {...getBatchActionProps()}>
           {/* inside of you batch actinos, you can include selectedRows */}
-          <TableBatchAction onClick={batchActionClick(selectedRows)}>
+          <TableBatchAction primaryFocus onClick={batchActionClick(selectedRows)}>
             Ghost
           </TableBatchAction>
           <TableBatchAction onClick={batchActionClick(selectedRows)}>

diff --git 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 <OverflowMenuItem itemText={children} {...rest} />;
-};
+const TableToolbarAction = React.forwardRef(({ children, ...rest }, ref) => {
+  return <OverflowMenuItem ref={ref} itemText={children} {...rest} />;
+});
 
+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
@@ -99,7 +99,7 @@ describe('DataTable', () => {
                   id="custom-id"
                 />
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={jest.fn()}>
+                  <TableToolbarAction primaryFocus onClick={jest.fn()}>
                     Action 1
                   </TableToolbarAction>
                   <TableToolbarAction onClick={jest.fn()}>

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
@@ -1816,21 +1816,22 @@ exports[`DataTable should render 1`] = `
                     }
                   }
                 >
-                  <TableToolbarAction
+                  <ForwardRef
                     onClick={[MockFunction]}
+                    primaryFocus={true}
                   >
                     Action 1
-                  </TableToolbarAction>
-                  <TableToolbarAction
+                  </ForwardRef>
+                  <ForwardRef
                     onClick={[MockFunction]}
                   >
                     Action 2
-                  </TableToolbarAction>
-                  <TableToolbarAction
+                  </ForwardRef>
+                  <ForwardRef
                     onClick={[MockFunction]}
                   >
                     Action 3
-                  </TableToolbarAction>
+                  </ForwardRef>
                 </TableToolbarMenu>
                 <ForwardRef(Button)
                   disabled={false}

diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -76,7 +76,7 @@ export default props => (
           <TableToolbarContent>
             <TableToolbarSearch onChange={onInputChange} />
             <TableToolbarMenu>
-              <TableToolbarAction onClick={() => alert('Alert 1')}>
+              <TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
                 Action 1
               </TableToolbarAction>
               <TableToolbarAction onClick={() => 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
@@ -140,7 +140,9 @@ export default props => {
                 <TableToolbarContent>
                   <TableToolbarSearch onChange={onInputChange} />
                   <TableToolbarMenu>
-                    <TableToolbarAction onClick={this.handleOnRowAdd}>
+                    <TableToolbarAction
+                      primaryFocus
+                      onClick={this.handleOnRowAdd}>
                       Add row
                     </TableToolbarAction>
                     <TableToolbarAction onClick={this.handleOnHeaderAdd}>

diff --git 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 => (
           <TableToolbarContent>
             <TableToolbarSearch onChange={onInputChange} />
             <TableToolbarMenu>
-              <TableToolbarAction onClick={action('Action 1 Click')}>
+              <TableToolbarAction
+                onClick={action('Action 1 Click')}
+                primaryFocus>
                 Action 1
               </TableToolbarAction>
               <TableToolbarAction onClick={action('Action 2 Click')}>

diff --git 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, () => <OverflowMenu />),
     () => (
       <OverflowMenuExample
         overflowMenuProps={props.menu()}
@@ -97,6 +100,7 @@ storiesOf('OverflowMenu', module)
   )
   .add(
     'with links',
+    withReadme(OverflowREADME, () => <OverflowMenu />),
     () => (
       <OverflowMenuExample
         overflowMenuProps={props.menu()}
@@ -119,6 +123,7 @@ storiesOf('OverflowMenu', module)
   )
   .add(
     'custom trigger',
+    withReadme(OverflowREADME, () => <OverflowMenu />),
     () => (
       <OverflowMenuExample
         overflowMenuProps={{