feat(DataTable): option to show overflow menu on hover

This change introduces `overflowMenuOnHover` prop to `<DataTable>` that determines whether or not to show overflow menu on hover, by changing CSS class of `<Table>` as follows: * `overflowMenuOnHover={true}` _unsets_ `bx--data-table--visible-overflow-menu` * `overflowMenuOnHover={false}` _sets_ `bx--data-table--visible-overflow-menu` That CSS class changes the behavior of overflow menu in `<TableCell className="bx--table-column-menu">`; The former above shows overflow menu only on hover, the latter above shows overflow menu always. Though our latest design dictates that showing overflow menu on hover should be optional, this change sets `overflowMenuOnHover={true}` as the default. This is because of the following reasons: 1. `<DataTable>` has never set `bx--data-table--visible-overflow-menu` before and thus setting it by default will be a breaking change 2. Showing overflow menu always can alternately be (and has been in our stories) achieved by _not_ setting `className="bx--table-column-menu"` to `<TableCell>` Fixes carbon-design-system#5804.
asudoh · Apr 8, 2020 · 381ae6b · 381ae6b
1 parent 2c33584
commit 381ae6b
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 2 deletions.
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>