feat: Table toolbar v10 (#2247)

* chore: update carbon-components for storybook

* feat: add initial toolbar updates

* fix: default props

* test: update snapshots

* test: update tests

* test: fix tests

* test: update snapshots

* chore: update peer deps

* feat: add new modifiers, update stories, add knobs

This commit adds all of the new modifiers and removes the unusued ones.
All of the datatable stories have been updated to reflect new markup
and to expose knobs to adjust shared modifiers.

The dynamic content story was updated to use the new menu system. This
also adds support for styles that have not been added yet (row size).

* test: update snapshots

* test: update snapshots

* fix: update proptypes and use cx lib

* test: update snapshots

* fix: add sortable prop and update snaps

* chore: refine story responsibilities

This updates the stories so that they only use the feature they are
showcasing. This will prevent users from bringing in DataTable features
that they don't need.

A "kitchen sink" data table might be useful as well.

* fix: add a11y updates

* test: fix tests

* Update src/components/DataTable/TableToolbar.js

Co-Authored-By: vpicone <vpicone@gmail.com>

* fix: remove tab index

Received the following linting error when attempting to define tabindex
on the section component:

`tabIndex` should only be declared on interactive
elements.eslint(jsx-a11y/no-noninteractive-tabindex)

* test: update snapshots

Author: vpicone

.storybook/config.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withOptions } from '@storybook/addon-options';
+import { configureActions } from '@storybook/addon-actions';
 import { initializeRTL } from 'storybook-addon-rtl';
 // import { checkA11y } from 'storybook-addon-a11y';
 import Container from './Container';
@@ -19,6 +20,11 @@ addDecorator(
   })
 );
 
+configureActions({
+  depth: 100,
+  limit: 20,
+});
+
 addDecorator(story => <Container story={story} />);
 // addDecorator(checkA11y);
 

notes.md

@@ -0,0 +1,2 @@
+Use overflow menu for settings
+toolbar actions become overflow menu items

package.json

@@ -125,7 +125,7 @@
     }
   },
   "peerDependencies": {
-    "carbon-components": "^10.0.0",
+    "carbon-components": "^10.1.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

src/components/DataTable/DataTable-story.js

@@ -6,15 +6,19 @@
  */
 
 import { storiesOf } from '@storybook/react';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import { withReadme } from 'storybook-readme';
 import readme from './README.md';
 
 const readmeURL = 'https://goo.gl/dq6CEK';
 
 const props = () => ({
-  short: boolean('Short variant (short)', false),
-  shouldShowBorder: boolean('Table Border variant (shouldShowBorder)', true),
+  useZebraStyles: boolean('Zebra row styles (useZebraStyles)', false),
+  size: select(
+    'Row height (size)',
+    { compact: 'compact', short: 'short', tall: 'tall', none: null },
+    null
+  ),
 });
 
 storiesOf('DataTable', module)
@@ -39,118 +43,135 @@ storiesOf('DataTable', module)
   )
   .add(
     'with toolbar',
-    withReadme(readme, require('./stories/with-toolbar').default),
+    withReadme(readme, () =>
+      require('./stories/with-toolbar').default(props())
+    ),
     {
       info: {
         text: `
-          DataTable with toolbar and filtering.
+        DataTable with action menu and filtering.
 
-          You can find more detailed information surrounding usage of this component
-          at the following url: ${readmeURL}
-        `,
+        You can find more detailed information surrounding usage of this component
+        at the following url: ${readmeURL}
+      `,
       },
     }
   )
   .add(
     'with sorting',
-    withReadme(readme, require('./stories/with-sorting').default),
+    withReadme(readme, () =>
+      require('./stories/with-sorting').default(props())
+    ),
     {
       info: {
         text: `
-          DataTable with sorting
+        DataTable with sorting
 
-          You can find more detailed information surrounding usage of this component
-          at the following url: ${readmeURL}
-        `,
+        You can find more detailed information surrounding usage of this component
+        at the following url: ${readmeURL}
+      `,
       },
     }
   )
   .add(
     'with selection',
-    withReadme(readme, require('./stories/with-selection').default),
+    withReadme(readme, () =>
+      require('./stories/with-selection').default(props())
+    ),
     {
       info: {
         text: `
-          DataTable with selection
+        DataTable with selection
 
-          You can find more detailed information surrounding usage of this component
-          at the following url: ${readmeURL}
-        `,
+        You can find more detailed information surrounding usage of this component
+        at the following url: ${readmeURL}
+      `,
       },
     }
   )
+
   .add(
     'with radio button selection',
-    withReadme(readme, require('./stories/with-selection--radio').default),
+    withReadme(readme, () =>
+      require('./stories/with-selection--radio').default(props())
+    ),
     {
       info: {
         text: `
-          DataTable with radio button selection
+        DataTable with radio button selection
 
-          You can find more detailed information surrounding usage of this component
-          at the following url: ${readmeURL}
-        `,
+        You can find more detailed information surrounding usage of this component
+        at the following url: ${readmeURL}
+      `,
       },
     }
   )
   .add(
     'with expansion',
-    withReadme(readme, require('./stories/with-expansion').default),
+    withReadme(readme, () =>
+      require('./stories/with-expansion').default(props())
+    ),
     {
       info: {
         text: `
-            DataTable with expansion
+          DataTable with expansion
 
-            You can find more detailed information surrounding usage of this component
-            at the following url: ${readmeURL}
-          `,
+          You can find more detailed information surrounding usage of this component
+          at the following url: ${readmeURL}
+        `,
       },
     }
   )
   .add(
     'with batch actions',
-    withReadme(readme, require('./stories/with-batch-actions').default),
+    withReadme(readme, () =>
+      require('./stories/with-batch-actions').default(props())
+    ),
     {
       info: {
         text: `
-            Uses <TableToolbar> alongside <TableBatchActions> and <TableBatchAction>
-            to create the toolbar and placeholder for where the batch action menu will
-            be displayed.
+          Uses <TableToolbar> alongside <TableBatchActions> and <TableBatchAction>
+          to create the toolbar and placeholder for where the batch action menu will
+          be displayed.
 
-            You can use the \`getBatchActionProps\` prop getter on the
-            <TableBatchActions> component to have it wire up the ghost menu for you.
+          You can use the \`getBatchActionProps\` prop getter on the
+          <TableBatchActions> component to have it wire up the ghost menu for you.
 
-            Individual <TableBatchAction> components take in any kind of event handler
-            prop that you would expect to use, like \`onClick\`. You can use these
-            alongside the \`selectedRows\` property in your \`render\` prop function
-            to pass along this info to your batch action handler.
+          Individual <TableBatchAction> components take in any kind of event handler
+          prop that you would expect to use, like \`onClick\`. You can use these
+          alongside the \`selectedRows\` property in your \`render\` prop function
+          to pass along this info to your batch action handler.
 
-            You can find more detailed information surrounding usage of this component
-            at the following url: ${readmeURL}
-          `,
+          You can find more detailed information surrounding usage of this component
+          at the following url: ${readmeURL}
+        `,
       },
     }
   )
   .add(
     'with dynamic content',
-    withReadme(readme, require('./stories/with-dynamic-content').default),
+    withReadme(readme, () =>
+      require('./stories/with-dynamic-content').default(props())
+    ),
     {
       info: {
         text: `
-          Showcases DataTable behavior when rows are added to the component,
-          and when cell data changes dynamically.
-        `,
+        Showcases DataTable behavior when rows are added to the component,
+        and when cell data changes dynamically.
+      `,
       },
     }
   )
   .add(
     'with boolean column',
-    withReadme(readme, require('./stories/with-boolean-column').default),
+    withReadme(readme, () =>
+      require('./stories/with-boolean-column').default(props())
+    ),
     {
       info: {
         text: `
-          DataTable with toolbar and filtering with column has boolean value.
-        `,
+        DataTable with toolbar and filtering with column has boolean value.
+      `,
       },
     }
   );

src/components/DataTable/DataTable.js

@@ -98,16 +98,6 @@ export default class DataTable extends React.Component {
      */
     translateWithId: PropTypes.func,
 
-    /**
-     * Optional boolean to create a short data table.
-     */
-    short: PropTypes.bool,
-
-    /**
-     * Optional boolean to remove borders from data table.
-     */
-    shouldShowBorder: PropTypes.bool,
-
     /**
      * Specify whether the control should be a radio button or inline checkbox
      */
@@ -119,8 +109,6 @@ export default class DataTable extends React.Component {
     filterRows: defaultFilterRows,
     locale: 'en',
     translateWithId,
-    short: false,
-    shouldShowBorder: true,
   };
 
   static translationKeys = Object.values(translationKeys);
@@ -163,7 +151,12 @@ export default class DataTable extends React.Component {
    * @param {Function} config.onClick a custom click handler for the header
    * @returns {Object}
    */
-  getHeaderProps = ({ header, onClick, isSortable = true, ...rest }) => {
+  getHeaderProps = ({
+    header,
+    onClick,
+    isSortable = this.props.isSortable,
+    ...rest
+  }) => {
     const { sortDirection, sortHeaderKey } = this.state;
     return {
       ...rest,
@@ -287,9 +280,18 @@ export default class DataTable extends React.Component {
    * Helper utility to get the Table Props.
    */
   getTableProps = () => {
-    const { short, shouldShowBorder } = this.props;
+    const {
+      useZebraStyles,
+      size,
+      isSortable,
+      useStaticWidth,
+      shouldShowBorder,
+    } = this.props;
     return {
-      short,
+      useZebraStyles,
+      size,
+      isSortable,
+      useStaticWidth,
       shouldShowBorder,
     };
   };
@@ -453,7 +455,9 @@ export default class DataTable extends React.Component {
    * @param {Event} event
    */
   handleOnInputValueChange = event => {
-    this.setState({ filterInputValue: event.target.value });
+    if (event.currentTarget) {
+      this.setState({ filterInputValue: event.currentTarget.value });
+    }
   };
 
   render() {

src/components/DataTable/README.md

@@ -393,9 +393,9 @@ In practice, the combination of these components looks like the following:
 <DataTable
   rows={initialRows}
   headers={headers}
-  render={({ rows, headers, getHeaderProps, getRowProps }) => (
+  render={({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
     <TableContainer title="DataTable with expansion">
-      <Table>
+      <Table {...getTableProps()}>
         <TableHead>
           <TableRow>
             {/* add the expand header before all other headers */}

src/components/DataTable/Table.js

@@ -13,18 +13,22 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 export const Table = ({
-  zebra,
   className,
   children,
-  short,
-  shouldShowBorder,
+  useZebraStyles,
+  size,
   isSortable,
+  useStaticWidth,
+  shouldShowBorder,
   ...other
 }) => {
   const componentClass = cx(`${prefix}--data-table`, className, {
-    [`${prefix}--data-table--zebra`]: zebra,
-    [`${prefix}--data-table--short`]: short,
+    [`${prefix}--data-table--compact`]: size === 'compact',
+    [`${prefix}--data-table--short`]: size === 'short',
+    [`${prefix}--data-table--tall`]: size === 'tall',
     [`${prefix}--data-table--sort`]: isSortable,
+    [`${prefix}--data-table--zebra`]: useZebraStyles,
+    [`${prefix}--data-table--static`]: useStaticWidth,
     [`${prefix}--data-table--no-border`]: !shouldShowBorder,
   });
   return (
@@ -35,36 +39,36 @@ export const Table = ({
 };
 
 Table.propTypes = {
-  /**
-   * The CSS class names.
-   */
   className: PropTypes.string,
 
   /**
-   * `true` to add zebra striping.
+   * `true` to add useZebraStyles striping.
    */
-  zebra: PropTypes.bool,
+  useZebraStyles: PropTypes.bool,
 
   /**
-   * `true` for short data table.
+   * `normal` Change the row height of table
    */
-  short: PropTypes.bool,
+  size: PropTypes.oneOf(['compact', 'small', 'normal', 'tall']),
 
   /**
-   * `false` Applies styles for data tables with sorting functionality.
+   * `false` If true, will use a width of 'auto' instead of 100%
    */
-  isSortable: PropTypes.bool,
+  useStaticWidth: PropTypes.bool,
 
   /**
-   * `true` for data table without borders.
+   * `false` If true, will remove the table border
    */
   shouldShowBorder: PropTypes.bool,
+
+  /**
+   * `false` If true, will apply sorting styles
+   */
+  isSortable: PropTypes.bool,
 };
 
 Table.defaultProps = {
-  zebra: true,
-  short: false,
-  shouldShowBorder: true,
+  isSortable: false,
 };
 
 export default Table;