feat(DataTable): add small toolbar

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 carbon-design-system#5420.

packages/components/src/components/data-table/_data-table-action.scss

@@ -260,7 +260,6 @@
 
   .#{$prefix}--toolbar-action ~ .#{$prefix}--btn {
     margin: 0;
-    height: $layout-04;
   }
 
   .#{$prefix}--overflow-menu--data-table {
@@ -583,12 +582,13 @@
   .#{$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);
     height: rem(32px);
+    min-height: auto;
   }
 
   .#{$prefix}--table-toolbar--small

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,
+    };
+  };
+
   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,

packages/react/src/components/DataTable/TableToolbar.js

@@ -5,32 +5,45 @@
  * 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--small`]: size === 'compact' || size === 'short',
+  });
+  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(['compact', 'short', 'normal', 'tall']),
+
   /**
    * Required props for the accessibility label of the TableToolbar
    */
   ...AriaLabelPropType,
 };
 
 TableToolbar.defaultProps = {
+  size: 'normal',
   'aria-label': 'data table toolbar',
 };