feat(DataTable): add small toolbar (#5479)

This change adds small variant of table toolbar, used with compact/short variant of table rows. There were styles implemented for that presumably as part of original `v10` work, but it was not used somehow. Fixes #5420.
carbon-design-system · Mar 11, 2020 · ef9c347 · ef9c347
1 parent 1f22d72
commit ef9c347
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 12 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -260,7 +260,8 @@
 
   .#{$prefix}--toolbar-action ~ .#{$prefix}--btn {
     margin: 0;
-    height: $layout-04;
+    max-width: none;
+    white-space: nowrap;
   }
 
   .#{$prefix}--overflow-menu--data-table {
@@ -583,12 +584,14 @@
   .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
     height: rem(32px);
     width: rem(32px);
-    padding: $spacing-03;
+    padding: $spacing-03 0;
   }
 
   .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {
-    padding-top: rem(3px);
+    padding-top: calc(0.375rem - 3px);
+    padding-bottom: calc(0.375rem - 3px);
     height: rem(32px);
+    min-height: auto;
   }
 
   .#{$prefix}--table-toolbar--small
@@ -600,7 +603,6 @@
     .#{$prefix}--toolbar-action
     ~ .#{$prefix}--btn {
     height: rem(32px);
-    width: rem(160px);
     overflow: hidden;
   }
 }

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1077,6 +1077,15 @@ Map {
         "children": Object {
           "type": "node",
         },
+        "size": Object {
+          "args": Array [
+            Array [
+              "small",
+              "normal",
+            ],
+          ],
+          "type": "oneOf",
+        },
       },
     },
     "TableToolbarAction": Object {
@@ -1196,6 +1205,7 @@ Map {
     "defaultProps": Object {
       "filterRows": [Function],
       "locale": "en",
+      "size": "normal",
       "sortRow": [Function],
       "translateWithId": [Function],
     },
@@ -1259,6 +1269,17 @@ Map {
         "isRequired": true,
         "type": "arrayOf",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "compact",
+            "short",
+            "normal",
+            "tall",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "sortRow": Object {
         "type": "func",
       },
@@ -1641,6 +1662,15 @@ Map {
       "children": Object {
         "type": "node",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "small",
+            "normal",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "TableToolbarAction" => Object {

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -105,6 +105,11 @@ export default class DataTable extends React.Component {
      */
     translateWithId: PropTypes.func,
 
+    /**
+     * `normal` Change the row height of table
+     */
+    size: PropTypes.oneOf(['compact', 'short', 'normal', 'tall']),
+
     /**
      * Specify whether the control should be a radio button or inline checkbox
      */
@@ -126,6 +131,7 @@ export default class DataTable extends React.Component {
     sortRow: defaultSortRow,
     filterRows: defaultFilterRows,
     locale: 'en',
+    size: 'normal',
     translateWithId,
   };
 
@@ -330,6 +336,14 @@ export default class DataTable extends React.Component {
     };
   };
 
+  getToolbarProps = (props = {}) => {
+    const { size } = this.props;
+    return {
+      ...props,
+      size: size === 'compact' || size === 'short' ? 'small' : 'normal',
+    };
+  };
+
   getBatchActionProps = (props = {}) => {
     const { shouldShowBatchActions } = this.state;
     const totalSelected = this.getSelectedRows().length;
@@ -614,6 +628,7 @@ export default class DataTable extends React.Component {
       getExpandHeaderProps: this.getExpandHeaderProps,
       getRowProps: this.getRowProps,
       getSelectionProps: this.getSelectionProps,
+      getToolbarProps: this.getToolbarProps,
       getBatchActionProps: this.getBatchActionProps,
       getTableProps: this.getTableProps,
       getTableContainerProps: this.getTableContainerProps,

diff --git a/packages/react/src/components/DataTable/TableToolbar.js b/packages/react/src/components/DataTable/TableToolbar.js
@@ -5,25 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 
 const { prefix } = settings;
 
-const TableToolbar = ({ children, ...rest }) => (
-  <section {...rest} className={`${prefix}--table-toolbar`}>
-    {children}
-  </section>
-);
+const TableToolbar = ({ children, size, ...rest }) => {
+  const className = cx({
+    [`${prefix}--table-toolbar`]: true,
+    [`${prefix}--table-toolbar--${size}`]: size,
+  });
+  return (
+    <section {...rest} className={className}>
+      {children}
+    </section>
+  );
+};
 
 TableToolbar.propTypes = {
   /**
    * Pass in the children that will be rendered inside the TableToolbar
    */
   children: PropTypes.node,
 
+  /**
+   * `normal` Change the row height of table
+   */
+  size: PropTypes.oneOf(['small', 'normal']),
+
   /**
    * Required props for the accessibility label of the TableToolbar
    */

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
@@ -31,6 +31,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -94,6 +95,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
     }
   }
   rows={Array []}
+  size="normal"
   sortRow={[Function]}
   translateWithId={[Function]}
 >
@@ -212,6 +214,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -436,6 +439,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
       },
     ]
   }
+  size="normal"
   sortRow={[Function]}
   translateWithId={[Function]}
 >
@@ -812,6 +816,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -883,6 +888,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
     }
   }
   rows={Array []}
+  size="normal"
   sortRow={[Function]}
   translateWithId={[Function]}
 >
@@ -1048,6 +1054,7 @@ exports[`DataTable selection should render 1`] = `
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -1280,6 +1287,7 @@ exports[`DataTable selection should render 1`] = `
       },
     ]
   }
+  size="normal"
   sortRow={[Function]}
   translateWithId={[Function]}
 >
@@ -1653,6 +1661,7 @@ exports[`DataTable should render 1`] = `
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -1861,6 +1870,7 @@ exports[`DataTable should render 1`] = `
             </TableToolbar>
             <Table
               isSortable={false}
+              size="normal"
             >
               <TableHead>
                 <TableRow>
@@ -1939,6 +1949,7 @@ exports[`DataTable should render 1`] = `
       },
     ]
   }
+  size="normal"
   sortRow={[Function]}
   translateWithId={[Function]}
 >
@@ -2493,6 +2504,7 @@ exports[`DataTable should render 1`] = `
       </TableToolbar>
       <Table
         isSortable={false}
+        size="normal"
       >
         <table
           className="bx--data-table bx--data-table--no-border"
@@ -2648,6 +2660,7 @@ exports[`DataTable sticky header should render 1`] = `
             "getSelectionProps": [Function],
             "getTableContainerProps": [Function],
             "getTableProps": [Function],
+            "getToolbarProps": [Function],
             "headers": Array [
               Object {
                 "header": "Field A",
@@ -2857,6 +2870,7 @@ exports[`DataTable sticky header should render 1`] = `
             </TableToolbar>
             <Table
               isSortable={false}
+              size="normal"
               stickyHeader={true}
             >
               <TableHead>
@@ -2936,6 +2950,7 @@ exports[`DataTable sticky header should render 1`] = `
       },
     ]
   }
+  size="normal"
   sortRow={[Function]}
   stickyHeader={true}
   translateWithId={[Function]}
@@ -3492,6 +3507,7 @@ exports[`DataTable sticky header should render 1`] = `
       </TableToolbar>
       <Table
         isSortable={false}
+        size="normal"
         stickyHeader={true}
       >
         <section

diff --git a/packages/react/src/components/DataTable/stories/with-batch-actions.js b/packages/react/src/components/DataTable/stories/with-batch-actions.js
@@ -46,6 +46,7 @@ export default props => (
       getHeaderProps,
       getRowProps,
       getSelectionProps,
+      getToolbarProps,
       getBatchActionProps,
       onInputChange,
       selectedRows,
@@ -56,7 +57,7 @@ export default props => (
         title="DataTable"
         description="With batch actions"
         {...getTableContainerProps()}>
-        <TableToolbar>
+        <TableToolbar {...getToolbarProps()}>
           <TableBatchActions {...getBatchActionProps()}>
             <TableBatchAction
               tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}

diff --git a/packages/react/src/components/DataTable/stories/with-dynamic-content.js b/packages/react/src/components/DataTable/stories/with-dynamic-content.js
@@ -107,6 +107,7 @@ export default props => {
             headers,
             getHeaderProps,
             getSelectionProps,
+            getToolbarProps,
             getBatchActionProps,
             getRowProps,
             onInputChange,
@@ -118,7 +119,7 @@ export default props => {
               title="DataTable"
               description="Use the toolbar menu to add rows and headers"
               {...getTableContainerProps()}>
-              <TableToolbar>
+              <TableToolbar {...getToolbarProps()}>
                 <TableBatchActions {...getBatchActionProps()}>
                   <TableBatchAction
                     renderIcon={Delete}

diff --git a/packages/react/src/components/DataTable/stories/with-toolbar.js b/packages/react/src/components/DataTable/stories/with-toolbar.js
@@ -36,14 +36,15 @@ export default props => (
       getHeaderProps,
       getRowProps,
       getTableProps,
+      getToolbarProps,
       onInputChange,
       getTableContainerProps,
     }) => (
       <TableContainer
         title="DataTable"
         description="With toolbar"
         {...getTableContainerProps()}>
-        <TableToolbar aria-label="data table toolbar">
+        <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
           <TableToolbarContent>
             <TableToolbarSearch onChange={onInputChange} />
             <TableToolbarMenu>