feat: Table toolbar v10

.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;