Skip to content

Commit ef9c347

Browse files
asudohasudoh
authored
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.
1 parent 1f22d72 commit ef9c347

File tree

8 files changed

+90
-12
lines changed

8 files changed

+90
-12
lines changed

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,8 @@
260260

261261
.#{$prefix}--toolbar-action ~ .#{$prefix}--btn {
262262
margin: 0;
263-
height: $layout-04;
263+
max-width: none;
264+
white-space: nowrap;
264265
}
265266

266267
.#{$prefix}--overflow-menu--data-table {
@@ -583,12 +584,14 @@
583584
.#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
584585
height: rem(32px);
585586
width: rem(32px);
586-
padding: $spacing-03;
587+
padding: $spacing-03 0;
587588
}
588589

589590
.#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {
590-
padding-top: rem(3px);
591+
padding-top: calc(0.375rem - 3px);
592+
padding-bottom: calc(0.375rem - 3px);
591593
height: rem(32px);
594+
min-height: auto;
592595
}
593596

594597
.#{$prefix}--table-toolbar--small
@@ -600,7 +603,6 @@
600603
.#{$prefix}--toolbar-action
601604
~ .#{$prefix}--btn {
602605
height: rem(32px);
603-
width: rem(160px);
604606
overflow: hidden;
605607
}
606608
}

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1077,6 +1077,15 @@ Map {
10771077
"children": Object {
10781078
"type": "node",
10791079
},
1080+
"size": Object {
1081+
"args": Array [
1082+
Array [
1083+
"small",
1084+
"normal",
1085+
],
1086+
],
1087+
"type": "oneOf",
1088+
},
10801089
},
10811090
},
10821091
"TableToolbarAction": Object {
@@ -1196,6 +1205,7 @@ Map {
11961205
"defaultProps": Object {
11971206
"filterRows": [Function],
11981207
"locale": "en",
1208+
"size": "normal",
11991209
"sortRow": [Function],
12001210
"translateWithId": [Function],
12011211
},
@@ -1259,6 +1269,17 @@ Map {
12591269
"isRequired": true,
12601270
"type": "arrayOf",
12611271
},
1272+
"size": Object {
1273+
"args": Array [
1274+
Array [
1275+
"compact",
1276+
"short",
1277+
"normal",
1278+
"tall",
1279+
],
1280+
],
1281+
"type": "oneOf",
1282+
},
12621283
"sortRow": Object {
12631284
"type": "func",
12641285
},
@@ -1641,6 +1662,15 @@ Map {
16411662
"children": Object {
16421663
"type": "node",
16431664
},
1665+
"size": Object {
1666+
"args": Array [
1667+
Array [
1668+
"small",
1669+
"normal",
1670+
],
1671+
],
1672+
"type": "oneOf",
1673+
},
16441674
},
16451675
},
16461676
"TableToolbarAction" => Object {

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,11 @@ export default class DataTable extends React.Component {
105105
*/
106106
translateWithId: PropTypes.func,
107107

108+
/**
109+
* `normal` Change the row height of table
110+
*/
111+
size: PropTypes.oneOf(['compact', 'short', 'normal', 'tall']),
112+
108113
/**
109114
* Specify whether the control should be a radio button or inline checkbox
110115
*/
@@ -126,6 +131,7 @@ export default class DataTable extends React.Component {
126131
sortRow: defaultSortRow,
127132
filterRows: defaultFilterRows,
128133
locale: 'en',
134+
size: 'normal',
129135
translateWithId,
130136
};
131137

@@ -330,6 +336,14 @@ export default class DataTable extends React.Component {
330336
};
331337
};
332338

339+
getToolbarProps = (props = {}) => {
340+
const { size } = this.props;
341+
return {
342+
...props,
343+
size: size === 'compact' || size === 'short' ? 'small' : 'normal',
344+
};
345+
};
346+
333347
getBatchActionProps = (props = {}) => {
334348
const { shouldShowBatchActions } = this.state;
335349
const totalSelected = this.getSelectedRows().length;
@@ -614,6 +628,7 @@ export default class DataTable extends React.Component {
614628
getExpandHeaderProps: this.getExpandHeaderProps,
615629
getRowProps: this.getRowProps,
616630
getSelectionProps: this.getSelectionProps,
631+
getToolbarProps: this.getToolbarProps,
617632
getBatchActionProps: this.getBatchActionProps,
618633
getTableProps: this.getTableProps,
619634
getTableContainerProps: this.getTableContainerProps,

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,37 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
import cx from 'classnames';
89
import PropTypes from 'prop-types';
910
import React from 'react';
1011
import { settings } from 'carbon-components';
1112
import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
1213

1314
const { prefix } = settings;
1415

15-
const TableToolbar = ({ children, ...rest }) => (
16-
<section {...rest} className={`${prefix}--table-toolbar`}>
17-
{children}
18-
</section>
19-
);
16+
const TableToolbar = ({ children, size, ...rest }) => {
17+
const className = cx({
18+
[`${prefix}--table-toolbar`]: true,
19+
[`${prefix}--table-toolbar--${size}`]: size,
20+
});
21+
return (
22+
<section {...rest} className={className}>
23+
{children}
24+
</section>
25+
);
26+
};
2027

2128
TableToolbar.propTypes = {
2229
/**
2330
* Pass in the children that will be rendered inside the TableToolbar
2431
*/
2532
children: PropTypes.node,
2633

34+
/**
35+
* `normal` Change the row height of table
36+
*/
37+
size: PropTypes.oneOf(['small', 'normal']),
38+
2739
/**
2840
* Required props for the accessibility label of the TableToolbar
2941
*/

‎packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
3131
"getSelectionProps": [Function],
3232
"getTableContainerProps": [Function],
3333
"getTableProps": [Function],
34+
"getToolbarProps": [Function],
3435
"headers": Array [
3536
Object {
3637
"header": "Field A",
@@ -94,6 +95,7 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
9495
}
9596
}
9697
rows={Array []}
98+
size="normal"
9799
sortRow={[Function]}
98100
translateWithId={[Function]}
99101
>
@@ -212,6 +214,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
212214
"getSelectionProps": [Function],
213215
"getTableContainerProps": [Function],
214216
"getTableProps": [Function],
217+
"getToolbarProps": [Function],
215218
"headers": Array [
216219
Object {
217220
"header": "Field A",
@@ -436,6 +439,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
436439
},
437440
]
438441
}
442+
size="normal"
439443
sortRow={[Function]}
440444
translateWithId={[Function]}
441445
>
@@ -812,6 +816,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
812816
"getSelectionProps": [Function],
813817
"getTableContainerProps": [Function],
814818
"getTableProps": [Function],
819+
"getToolbarProps": [Function],
815820
"headers": Array [
816821
Object {
817822
"header": "Field A",
@@ -883,6 +888,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
883888
}
884889
}
885890
rows={Array []}
891+
size="normal"
886892
sortRow={[Function]}
887893
translateWithId={[Function]}
888894
>
@@ -1048,6 +1054,7 @@ exports[`DataTable selection should render 1`] = `
10481054
"getSelectionProps": [Function],
10491055
"getTableContainerProps": [Function],
10501056
"getTableProps": [Function],
1057+
"getToolbarProps": [Function],
10511058
"headers": Array [
10521059
Object {
10531060
"header": "Field A",
@@ -1280,6 +1287,7 @@ exports[`DataTable selection should render 1`] = `
12801287
},
12811288
]
12821289
}
1290+
size="normal"
12831291
sortRow={[Function]}
12841292
translateWithId={[Function]}
12851293
>
@@ -1653,6 +1661,7 @@ exports[`DataTable should render 1`] = `
16531661
"getSelectionProps": [Function],
16541662
"getTableContainerProps": [Function],
16551663
"getTableProps": [Function],
1664+
"getToolbarProps": [Function],
16561665
"headers": Array [
16571666
Object {
16581667
"header": "Field A",
@@ -1861,6 +1870,7 @@ exports[`DataTable should render 1`] = `
18611870
</TableToolbar>
18621871
<Table
18631872
isSortable={false}
1873+
size="normal"
18641874
>
18651875
<TableHead>
18661876
<TableRow>
@@ -1939,6 +1949,7 @@ exports[`DataTable should render 1`] = `
19391949
},
19401950
]
19411951
}
1952+
size="normal"
19421953
sortRow={[Function]}
19431954
translateWithId={[Function]}
19441955
>
@@ -2493,6 +2504,7 @@ exports[`DataTable should render 1`] = `
24932504
</TableToolbar>
24942505
<Table
24952506
isSortable={false}
2507+
size="normal"
24962508
>
24972509
<table
24982510
className="bx--data-table bx--data-table--no-border"
@@ -2648,6 +2660,7 @@ exports[`DataTable sticky header should render 1`] = `
26482660
"getSelectionProps": [Function],
26492661
"getTableContainerProps": [Function],
26502662
"getTableProps": [Function],
2663+
"getToolbarProps": [Function],
26512664
"headers": Array [
26522665
Object {
26532666
"header": "Field A",
@@ -2857,6 +2870,7 @@ exports[`DataTable sticky header should render 1`] = `
28572870
</TableToolbar>
28582871
<Table
28592872
isSortable={false}
2873+
size="normal"
28602874
stickyHeader={true}
28612875
>
28622876
<TableHead>
@@ -2936,6 +2950,7 @@ exports[`DataTable sticky header should render 1`] = `
29362950
},
29372951
]
29382952
}
2953+
size="normal"
29392954
sortRow={[Function]}
29402955
stickyHeader={true}
29412956
translateWithId={[Function]}
@@ -3492,6 +3507,7 @@ exports[`DataTable sticky header should render 1`] = `
34923507
</TableToolbar>
34933508
<Table
34943509
isSortable={false}
3510+
size="normal"
34953511
stickyHeader={true}
34963512
>
34973513
<section

‎packages/react/src/components/DataTable/stories/with-batch-actions.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default props => (
4646
getHeaderProps,
4747
getRowProps,
4848
getSelectionProps,
49+
getToolbarProps,
4950
getBatchActionProps,
5051
onInputChange,
5152
selectedRows,
@@ -56,7 +57,7 @@ export default props => (
5657
title="DataTable"
5758
description="With batch actions"
5859
{...getTableContainerProps()}>
59-
<TableToolbar>
60+
<TableToolbar {...getToolbarProps()}>
6061
<TableBatchActions {...getBatchActionProps()}>
6162
<TableBatchAction
6263
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}

‎packages/react/src/components/DataTable/stories/with-dynamic-content.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default props => {
107107
headers,
108108
getHeaderProps,
109109
getSelectionProps,
110+
getToolbarProps,
110111
getBatchActionProps,
111112
getRowProps,
112113
onInputChange,
@@ -118,7 +119,7 @@ export default props => {
118119
title="DataTable"
119120
description="Use the toolbar menu to add rows and headers"
120121
{...getTableContainerProps()}>
121-
<TableToolbar>
122+
<TableToolbar {...getToolbarProps()}>
122123
<TableBatchActions {...getBatchActionProps()}>
123124
<TableBatchAction
124125
renderIcon={Delete}

‎packages/react/src/components/DataTable/stories/with-toolbar.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,15 @@ export default props => (
3636
getHeaderProps,
3737
getRowProps,
3838
getTableProps,
39+
getToolbarProps,
3940
onInputChange,
4041
getTableContainerProps,
4142
}) => (
4243
<TableContainer
4344
title="DataTable"
4445
description="With toolbar"
4546
{...getTableContainerProps()}>
46-
<TableToolbar aria-label="data table toolbar">
47+
<TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
4748
<TableToolbarContent>
4849
<TableToolbarSearch onChange={onInputChange} />
4950
<TableToolbarMenu>

0 commit comments

Comments
 (0)