Skip to content

Commit 5773076

Browse files
maradwan26riddhybansal
maradwan26
and
riddhybansal
authored
feat(table-toolbar): xs size, contextual layout tokens (#22268)
* feat(table-toolbar): new xs size - react * feat(table-toolbar): new xs size - wc * fix(toolbar-stories): missing import * docs: add comment * docs: remove unnecessary comment * chore: update snapshots * fix: ci * fix: filtering story * fix(transition): use layout.size('height') * test(toolbar-content): test for no normalizing on xs --------- Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
1 parent feca786 commit 5773076

19 files changed

Lines changed: 175 additions & 514 deletions

File tree

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2444,6 +2444,7 @@ Map {
24442444
"size": {
24452445
"args": [
24462446
[
2447+
"xs",
24472448
"sm",
24482449
"lg",
24492450
],
@@ -2504,6 +2505,17 @@ Map {
25042505
],
25052506
"type": "oneOfType",
25062507
},
2508+
"size": {
2509+
"args": [
2510+
[
2511+
"xs",
2512+
"sm",
2513+
"md",
2514+
"lg",
2515+
],
2516+
],
2517+
"type": "oneOf",
2518+
},
25072519
},
25082520
},
25092521
"TableToolbarSearch": {
@@ -2559,6 +2571,7 @@ Map {
25592571
"size": {
25602572
"args": [
25612573
[
2574+
"xs",
25622575
"sm",
25632576
"md",
25642577
"lg",
@@ -10332,6 +10345,7 @@ Map {
1033210345
"size": {
1033310346
"args": [
1033410347
[
10348+
"xs",
1033510349
"sm",
1033610350
"lg",
1033710351
],
@@ -10392,6 +10406,17 @@ Map {
1039210406
],
1039310407
"type": "oneOfType",
1039410408
},
10409+
"size": {
10410+
"args": [
10411+
[
10412+
"xs",
10413+
"sm",
10414+
"md",
10415+
"lg",
10416+
],
10417+
],
10418+
"type": "oneOf",
10419+
},
1039510420
},
1039610421
},
1039710422
"TableToolbarSearch" => {
@@ -10447,6 +10472,7 @@ Map {
1044710472
"size": {
1044810473
"args": [
1044910474
[
10475+
"xs",
1045010476
"sm",
1045110477
"md",
1045210478
"lg",

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
209209
};
210210

211211
getToolbarProps: (options?: { [key: string]: unknown }) => {
212-
size: 'sm' | undefined;
212+
size: 'xs' | 'sm' | undefined;
213213
[key: string]: unknown;
214214
};
215215

@@ -579,13 +579,10 @@ export const DataTable = <RowType, ColTypes extends any[]>(
579579
};
580580
};
581581

582-
const getToolbarProps: RenderProps['getToolbarProps'] = (props) => {
583-
const isSmall = size === 'xs' || size === 'sm';
584-
return {
585-
...props,
586-
size: isSmall ? 'sm' : undefined,
587-
};
588-
};
582+
const getToolbarProps: RenderProps['getToolbarProps'] = (props) => ({
583+
...props,
584+
size: size === 'xs' || size === 'sm' ? size : undefined,
585+
});
589586

590587
const getBatchActionProps: RenderProps['getBatchActionProps'] = (props) => {
591588
const { shouldShowBatchActions } = state;

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

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2025
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

88
import cx from 'classnames';
99
import PropTypes from 'prop-types';
10-
import React from 'react';
10+
import React, { createContext, useContext } from 'react';
1111
import { usePrefix } from '../../internal/usePrefix';
1212
import { deprecate } from '../../prop-types/deprecate';
1313

14+
export const TableToolbarContext = createContext<{
15+
size?: 'xs' | 'sm' | 'lg';
16+
}>({});
17+
18+
export const useTableToolbar = () => useContext(TableToolbarContext);
19+
1420
export interface TableToolbarProps
1521
extends React.HTMLAttributes<HTMLDivElement> {
1622
/**
@@ -33,7 +39,7 @@ export interface TableToolbarProps
3339
/**
3440
* `lg` Change the row height of table
3541
*/
36-
size?: 'sm' | 'lg';
42+
size?: 'xs' | 'sm' | 'lg';
3743
}
3844

3945
const TableToolbar = ({
@@ -46,16 +52,19 @@ const TableToolbar = ({
4652
const prefix = usePrefix();
4753
const className = cx({
4854
[`${prefix}--table-toolbar`]: true,
49-
[`${prefix}--table-toolbar--${size}`]: size,
55+
[`${prefix}--table-toolbar--${size}`]: size, // TODO: V12 - Remove this class
56+
[`${prefix}--layout--size-${size}`]: size,
5057
});
5158
return (
52-
<section
53-
role="group"
54-
aria-label={deprecatedAriaLabel || ariaLabel}
55-
{...rest}
56-
className={className}>
57-
{children}
58-
</section>
59+
<TableToolbarContext.Provider value={{ size }}>
60+
<section
61+
role="group"
62+
aria-label={deprecatedAriaLabel || ariaLabel}
63+
{...rest}
64+
className={className}>
65+
{children}
66+
</section>
67+
</TableToolbarContext.Provider>
5968
);
6069
};
6170

@@ -84,7 +93,7 @@ TableToolbar.propTypes = {
8493
/**
8594
* `lg` Change the row height of table
8695
*/
87-
size: PropTypes.oneOf(['sm', 'lg']),
96+
size: PropTypes.oneOf(['xs', 'sm', 'lg']),
8897
};
8998

9099
export default TableToolbar;

‎packages/react/src/components/DataTable/TableToolbarMenu.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
1111
import React from 'react';
1212
import { usePrefix } from '../../internal/usePrefix';
1313
import OverflowMenu, { OverflowMenuProps } from '../OverflowMenu';
14+
import { useTableToolbar } from './TableToolbar';
1415

1516
const defaultIconDescription = 'Settings';
1617

@@ -22,8 +23,11 @@ const TableToolbarMenu = ({
2223
iconDescription = defaultIconDescription,
2324
children,
2425
menuOptionsClass,
26+
size: sizeProp,
2527
...rest
2628
}: TableToolbarMenuProps) => {
29+
const toolbarContext = useTableToolbar();
30+
const size = sizeProp ?? toolbarContext.size;
2731
const prefix = usePrefix();
2832
const toolbarActionClasses = cx(
2933
className,
@@ -39,6 +43,7 @@ const TableToolbarMenu = ({
3943
className={toolbarActionClasses}
4044
iconDescription={iconDescription}
4145
menuOptionsClass={menuOptionsClasses}
46+
size={size}
4247
flipped
4348
{...rest}>
4449
{children}
@@ -68,6 +73,11 @@ TableToolbarMenu.propTypes = {
6873
* A component used to render an icon.
6974
*/
7075
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
76+
77+
/**
78+
* Specify the size of the ToolbarMenu.
79+
*/
80+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
7181
};
7282

7383
export default TableToolbarMenu;

‎packages/react/src/components/DataTable/TableToolbarSearch.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { useId } from '../../internal/useId';
2121
import { usePrefix } from '../../internal/usePrefix';
2222
import { noopFn } from '../../internal/noopFn';
2323
import type { TFunc, TranslateWithId } from '../../types/common';
24+
import { useTableToolbar } from './TableToolbar';
2425

2526
const translationIds = {
2627
'carbon.table.toolbar.search.label': 'carbon.table.toolbar.search.label',
@@ -46,8 +47,7 @@ type ExcludedInheritedProps =
4647
| 'onChange'
4748
| 'onExpand'
4849
| 'onFocus'
49-
| 'tabIndex'
50-
| 'size'; // TODO: remove this exclusion once 'xs' is implemented for TableToolbar #21345
50+
| 'tabIndex';
5151

5252
export type TableToolbarSearchHandleExpand = (
5353
event: FocusEvent<HTMLInputElement>,
@@ -129,12 +129,6 @@ export interface TableToolbarSearchProps
129129
*/
130130
searchContainerClass?: string;
131131

132-
// TODO: remove once 'xs' is implemented for TableToolbar #21345, since TableToolbarSearch and Search will then have the same available sizes
133-
/**
134-
* Specify the size of the Search
135-
*/
136-
size?: 'sm' | 'md' | 'lg';
137-
138132
tabIndex?: number | string;
139133
}
140134

@@ -155,10 +149,12 @@ const TableToolbarSearch = ({
155149
id,
156150
onBlur,
157151
onFocus,
158-
size = 'lg',
152+
size: sizeProp,
159153
tabIndex = '0',
160154
...rest
161155
}: TableToolbarSearchProps) => {
156+
const toolbarContext = useTableToolbar();
157+
const size = sizeProp ?? toolbarContext.size;
162158
const { current: controlled } = useRef(expandedProp !== undefined);
163159

164160
const [expandedState, setExpandedState] = useState<boolean>(
@@ -332,7 +328,7 @@ TableToolbarSearch.propTypes = {
332328
/**
333329
* Specify the size of the Search
334330
*/
335-
size: PropTypes.oneOf(['sm', 'md', 'lg']),
331+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
336332

337333
/**
338334
* Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2023
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -42,7 +42,8 @@ describe('TableToolbar', () => {
4242
it('should respect size prop', () => {
4343
const { container } = render(<TableToolbar size="sm" />);
4444

45-
expect(container.firstChild).toHaveClass('cds--table-toolbar--sm');
45+
expect(container.firstChild).toHaveClass('cds--table-toolbar--sm'); // TODO: V12 - Remove this check
46+
expect(container.firstChild).toHaveClass('cds--layout--size-sm');
4647
});
4748
});
4849
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -538,7 +538,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
538538
>
539539
<div
540540
aria-label="Filter table"
541-
class="cds--search cds--search--lg cds--layout--size-lg cds--toolbar-search-container-persistent"
541+
class="cds--search cds--toolbar-search-container-persistent"
542542
role="search"
543543
>
544544
<div
@@ -988,7 +988,7 @@ exports[`DataTable renders as expected - Component API should render and match s
988988
>
989989
<div
990990
aria-label="Filter table"
991-
class="cds--search cds--search--lg cds--layout--size-lg cds--toolbar-search-container-persistent"
991+
class="cds--search cds--toolbar-search-container-persistent"
992992
role="search"
993993
>
994994
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
44
<div>
55
<div
66
aria-label="Filter table"
7-
class="cds--search cds--search--lg cds--layout--size-lg custom-class cds--toolbar-search-container-expandable"
7+
class="cds--search custom-class cds--toolbar-search-container-expandable"
88
role="search"
99
>
1010
<div

‎packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2025
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -111,11 +111,12 @@ export const Default = (args) => {
111111
getHeaderProps,
112112
getRowProps,
113113
getTableProps,
114+
getToolbarProps,
114115
onInputChange,
115116
getCellProps,
116117
}) => (
117118
<TableContainer title="DataTable" description="With filtering">
118-
<TableToolbar>
119+
<TableToolbar {...getToolbarProps()}>
119120
<TableToolbarContent>
120121
{/* pass in `onInputChange` change here to make filtering work */}
121122
<TableToolbarSearch

‎packages/react/src/components/DataTable/stories/examples/TableToolbarFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const TableToolbarFilter = ({
7171

7272
const toolbarActionClasses = cx(
7373
className,
74-
`${prefix}--toolbar-action ${prefix}--overflow-menu`
74+
`${prefix}--toolbar-action`
7575
);
7676

7777
const handleApplyFilter = () => {

0 commit comments

Comments
 (0)