carbon-design-system · tw15egan · Apr 9, 2020 · Apr 8, 2020 · Apr 9, 2020 · Apr 9, 2020
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -739,6 +739,7 @@ Map {
     "Table": Object {
       "defaultProps": Object {
         "isSortable": false,
+        "overflowMenuOnHover": true,
       },
       "propTypes": Object {
         "className": Object {
@@ -747,6 +748,9 @@ Map {
         "isSortable": Object {
           "type": "bool",
         },
+        "overflowMenuOnHover": Object {
+          "type": "bool",
+        },
         "shouldShowBorder": Object {
           "type": "bool",
         },
@@ -1216,6 +1220,7 @@ Map {
     "defaultProps": Object {
       "filterRows": [Function],
       "locale": "en",
+      "overflowMenuOnHover": true,
       "size": "normal",
       "sortRow": [Function],
       "translateWithId": [Function],
@@ -1251,6 +1256,9 @@ Map {
       "locale": Object {
         "type": "string",
       },
+      "overflowMenuOnHover": Object {
+        "type": "bool",
+      },
       "radio": Object {
         "type": "bool",
       },
@@ -1315,6 +1323,7 @@ Map {
   "Table" => Object {
     "defaultProps": Object {
       "isSortable": false,
+      "overflowMenuOnHover": true,
     },
     "propTypes": Object {
       "className": Object {
@@ -1323,6 +1332,9 @@ Map {
       "isSortable": Object {
         "type": "bool",
       },
+      "overflowMenuOnHover": Object {
+        "type": "bool",
+      },
       "shouldShowBorder": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
@@ -210,7 +210,13 @@ storiesOf('DataTable', module)
   .add(
     'with overflow menu',
     withReadme(readme, () =>
-      require('./stories/with-overflow-menu').default(props())
+      require('./stories/with-overflow-menu').default({
+        ...props(),
+        overflowMenuOnHover: boolean(
+          'Show overflow menu on hover (overflowMenuOnHover)',
+          false
+        ),
+      })
     ),
     {
       info: {

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -125,13 +125,19 @@ export default class DataTable extends React.Component {
      * Specify whether the table should be able to be sorted by its headers
      */
     isSortable: PropTypes.bool,
+
+    /**
+     * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+     */
+    overflowMenuOnHover: PropTypes.bool,
   };
 
   static defaultProps = {
     sortRow: defaultSortRow,
     filterRows: defaultFilterRows,
     locale: 'en',
     size: 'normal',
+    overflowMenuOnHover: true,
     translateWithId,
   };
 
@@ -365,6 +371,7 @@ export default class DataTable extends React.Component {
       useStaticWidth,
       shouldShowBorder,
       stickyHeader,
+      overflowMenuOnHover,
     } = this.props;
     return {
       useZebraStyles,
@@ -373,6 +380,7 @@ export default class DataTable extends React.Component {
       useStaticWidth,
       shouldShowBorder,
       stickyHeader,
+      overflowMenuOnHover,
     };
   };
 

diff --git a/packages/react/src/components/DataTable/Table.js b/packages/react/src/components/DataTable/Table.js
@@ -21,6 +21,7 @@ export const Table = ({
   useStaticWidth,
   shouldShowBorder,
   stickyHeader,
+  overflowMenuOnHover,
   ...other
 }) => {
   const componentClass = cx(`${prefix}--data-table`, className, {
@@ -32,6 +33,7 @@ export const Table = ({
     [`${prefix}--data-table--static`]: useStaticWidth,
     [`${prefix}--data-table--no-border`]: !shouldShowBorder,
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
+    [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover,
   });
   const table = (
     <table {...other} className={componentClass}>
@@ -79,10 +81,16 @@ Table.propTypes = {
    * `false` If true, will keep the header sticky (only data rows will scroll)
    */
   stickyHeader: PropTypes.bool,
+
+  /**
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  overflowMenuOnHover: PropTypes.bool,
 };
 
 Table.defaultProps = {
   isSortable: false,
+  overflowMenuOnHover: true,
 };
 
 export default Table;
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
@@ -16,6 +16,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   radio={true}
   render={
     [MockFunction] {
@@ -60,6 +61,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
           >
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
             >
               <TableHead>
                 <TableRow>
@@ -119,6 +121,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
       </div>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
       >
         <table
           className="bx--data-table bx--data-table--no-border"
@@ -199,6 +202,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   radio={true}
   render={
     [MockFunction] {
@@ -334,6 +338,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
           >
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
             >
               <TableHead>
                 <TableRow>
@@ -463,6 +468,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
       </div>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
       >
         <table
           className="bx--data-table bx--data-table--no-border"
@@ -802,6 +808,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   render={
     [MockFunction] {
       "calls": Array [
@@ -845,6 +852,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
           >
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
             >
               <TableHead>
                 <TableRow>
@@ -912,6 +920,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
       </div>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
       >
         <table
           className="bx--data-table bx--data-table--no-border"
@@ -1040,6 +1049,7 @@ exports[`DataTable selection should render 1`] = `
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   render={
     [MockFunction] {
       "calls": Array [
@@ -1174,6 +1184,7 @@ exports[`DataTable selection should render 1`] = `
           >
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
             >
               <TableHead>
                 <TableRow>
@@ -1311,6 +1322,7 @@ exports[`DataTable selection should render 1`] = `
       </div>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
       >
         <table
           className="bx--data-table bx--data-table--no-border"
@@ -1647,6 +1659,7 @@ exports[`DataTable should render 1`] = `
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   render={
     [MockFunction] {
       "calls": Array [
@@ -1870,6 +1883,7 @@ exports[`DataTable should render 1`] = `
             </TableToolbar>
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
               size="normal"
             >
               <TableHead>
@@ -2474,6 +2488,7 @@ exports[`DataTable should render 1`] = `
       </TableToolbar>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
         size="normal"
       >
         <table
@@ -2616,6 +2631,7 @@ exports[`DataTable sticky header should render 1`] = `
     ]
   }
   locale="en"
+  overflowMenuOnHover={true}
   render={
     [MockFunction] {
       "calls": Array [
@@ -2840,6 +2856,7 @@ exports[`DataTable sticky header should render 1`] = `
             </TableToolbar>
             <Table
               isSortable={false}
+              overflowMenuOnHover={true}
               size="normal"
               stickyHeader={true}
             >
@@ -3447,6 +3464,7 @@ exports[`DataTable sticky header should render 1`] = `
       </TableToolbar>
       <Table
         isSortable={false}
+        overflowMenuOnHover={true}
         size="normal"
         stickyHeader={true}
       >

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/Table-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/Table-test.js.snap
@@ -4,6 +4,7 @@ exports[`DataTable.Table should render 1`] = `
 <Table
   className="custom-class"
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table custom-class bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableBody should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableCell should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableExpandHeader should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableExpandRow should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableHead should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableHeader should have an active and ascending class if sorting by ASC 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"
@@ -40,6 +41,7 @@ exports[`DataTable.TableHeader should have an active and ascending class if sort
 exports[`DataTable.TableHeader should have an active class if it is the sort header and the sort state is not NONE 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"
@@ -77,6 +79,7 @@ exports[`DataTable.TableHeader should have an active class if it is the sort hea
 exports[`DataTable.TableHeader should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"
@@ -114,6 +117,7 @@ exports[`DataTable.TableHeader should render 1`] = `
 exports[`DataTable.TableHeader should render 2`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableRow should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableSelectAll should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableSelectRow should render 1`] = `
 <Table
   isSortable={false}
+  overflowMenuOnHover={true}
 >
   <table
     className="bx--data-table bx--data-table--no-border"

diff --git a/packages/react/src/components/DataTable/stories/with-overflow-menu.js b/packages/react/src/components/DataTable/stories/with-overflow-menu.js
@@ -53,7 +53,7 @@ export default props => (
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}
-                <TableCell>
+                <TableCell className="bx--table-column-menu">
                   <OverflowMenu flipped>
                     <OverflowMenuItem primaryFocus>Action 1</OverflowMenuItem>
                     <OverflowMenuItem>Action 2</OverflowMenuItem>