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 }) => (
-