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

* 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 #5804. * fix(data-table): remove redundant style
carbon-design-system · Apr 9, 2020 · 6795904 · 6795904
1 parent 57fc2e2
commit 6795904
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 27 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -142,19 +142,6 @@
     padding-right: $spacing-05;
   }
 
-  // specific padding/width for overflow menu columns
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
-    width: rem(52px);
-    min-width: rem(52px);
-    padding-top: $spacing-03;
-    padding-right: $spacing-03;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
-    padding-bottom: 0;
-  }
-
   // Overflow Menu Overrides
   .#{$prefix}--data-table td button.#{$prefix}--overflow-menu {
     margin: rem(-7px) 0 rem(-8px);
@@ -381,11 +368,6 @@
     height: rem(23px); //24px row - 1px border
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-menu {
-    padding-top: 0;
-  }
-
   .#{$prefix}--data-table.#{$prefix}--data-table--compact
     .#{$prefix}--table-column-checkbox {
     padding-top: 0;
@@ -422,11 +404,6 @@
     height: rem(31px); //32px row - 1px border
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--short
-    .#{$prefix}--table-column-menu {
-    padding-top: 0;
-  }
-
   .#{$prefix}--data-table.#{$prefix}--data-table--short
     .#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
@@ -455,8 +432,6 @@
     @include type-style('label-01');
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--tall
-    .#{$prefix}--table-column-menu,
   .#{$prefix}--data-table.#{$prefix}--data-table--tall
     .#{$prefix}--table-column-checkbox {
     padding-top: rem(12px);

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"