From ef9c3475b307d753ac3413f023e5af88d87bc7bb Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 11 Mar 2020 10:38:18 +0900 Subject: [PATCH] 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. --- .../data-table/_data-table-action.scss | 10 ++++--- .../__snapshots__/PublicAPI-test.js.snap | 30 +++++++++++++++++++ .../src/components/DataTable/DataTable.js | 15 ++++++++++ .../src/components/DataTable/TableToolbar.js | 22 ++++++++++---- .../__snapshots__/DataTable-test.js.snap | 16 ++++++++++ .../DataTable/stories/with-batch-actions.js | 3 +- .../DataTable/stories/with-dynamic-content.js | 3 +- .../DataTable/stories/with-toolbar.js | 3 +- 8 files changed, 90 insertions(+), 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 index a6f7d71c417d..9c875a196321 100644 --- 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 index 35de567c5d57..21b7a4fc60b6 100644 --- 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 index 12223ba7afd5..7bb9ecace5fc 100644 --- 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 index 947e5757007c..6a2d734ff6ba 100644 --- a/packages/react/src/components/DataTable/TableToolbar.js +++ b/packages/react/src/components/DataTable/TableToolbar.js @@ -5,6 +5,7 @@ * 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'; @@ -12,11 +13,17 @@ import { AriaLabelPropType } from '../../prop-types/AriaPropTypes'; const { prefix } = settings; -const TableToolbar = ({ children, ...rest }) => ( -
- {children} -
-); +const TableToolbar = ({ children, size, ...rest }) => { + const className = cx({ + [`${prefix}--table-toolbar`]: true, + [`${prefix}--table-toolbar--${size}`]: size, + }); + return ( +
+ {children} +
+ ); +}; TableToolbar.propTypes = { /** @@ -24,6 +31,11 @@ TableToolbar.propTypes = { */ 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 index 235ae31e0f48..95d252a12916 100644 --- 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`] = ` @@ -1939,6 +1949,7 @@ exports[`DataTable should render 1`] = ` }, ] } + size="normal" sortRow={[Function]} translateWithId={[Function]} > @@ -2493,6 +2504,7 @@ exports[`DataTable should render 1`] = `
@@ -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`] = `
( getHeaderProps, getRowProps, getSelectionProps, + getToolbarProps, getBatchActionProps, onInputChange, selectedRows, @@ -56,7 +57,7 @@ export default props => ( title="DataTable" description="With batch actions" {...getTableContainerProps()}> - + { 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()}> - + ( getHeaderProps, getRowProps, getTableProps, + getToolbarProps, onInputChange, getTableContainerProps, }) => ( @@ -43,7 +44,7 @@ export default props => ( title="DataTable" description="With toolbar" {...getTableContainerProps()}> - +