Skip to content

Commit 9156074

Browse files
maradwan26maradwan26
authored
feat(search): contextual layout tokens, xs size (#21721)
* feat(search): new xs size * chore: update snapshots * fix(ci): defs export * chore: cleanup * fix: remove disabled story * fix: remove broken links * fix: formatting, tabletoolbarsearch props, broken links * chore: cleanup * chore: cleanup * feat: contextual layout tokens * fix: search skeleton sizing * fix: deprecate small * chore: update snapshots * fix(tabletoolbarsearch): align styles with react * chore(cleanup): unnecessary selector * fix(styles): selectors * chore: cleanup argTypes * fix(skeleton): apply appropriate class when using small
1 parent 8e563c8 commit 9156074

18 files changed

Lines changed: 425 additions & 368 deletions

File tree

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3456,6 +3456,7 @@ Map {
34563456
"size": {
34573457
"args": [
34583458
[
3459+
"xs",
34593460
"sm",
34603461
"md",
34613462
"lg",
@@ -8632,6 +8633,7 @@ Map {
86328633
"size": {
86338634
"args": [
86348635
[
8636+
"xs",
86358637
"sm",
86368638
"md",
86378639
"lg",
@@ -8663,9 +8665,18 @@ Map {
86638665
"className": {
86648666
"type": "string",
86658667
},
8666-
"small": {
8667-
"type": "bool",
8668+
"size": {
8669+
"args": [
8670+
[
8671+
"xs",
8672+
"sm",
8673+
"md",
8674+
"lg",
8675+
],
8676+
],
8677+
"type": "oneOf",
86688678
},
8679+
"small": [Function],
86698680
},
86708681
},
86718682
"SecondaryButton" => {},

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ type ExcludedInheritedProps =
4646
| 'onChange'
4747
| 'onExpand'
4848
| 'onFocus'
49-
| 'tabIndex';
49+
| 'tabIndex'
50+
| 'size'; // TODO: remove this exclusion once 'xs' is implemented for TableToolbar #21345
5051

5152
export type TableToolbarSearchHandleExpand = (
5253
event: FocusEvent<HTMLInputElement>,
@@ -128,6 +129,12 @@ export interface TableToolbarSearchProps
128129
*/
129130
searchContainerClass?: string;
130131

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+
131138
tabIndex?: number | string;
132139
}
133140

‎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
@@ -510,7 +510,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
510510
>
511511
<div
512512
aria-label="Filter table"
513-
class="cds--search cds--search--lg cds--toolbar-search-container-persistent"
513+
class="cds--search cds--search--lg cds--layout--size-lg cds--toolbar-search-container-persistent"
514514
role="search"
515515
>
516516
<div
@@ -946,7 +946,7 @@ exports[`DataTable renders as expected - Component API should render and match s
946946
>
947947
<div
948948
aria-label="Filter table"
949-
class="cds--search cds--search--lg cds--toolbar-search-container-persistent"
949+
class="cds--search cds--search--lg cds--layout--size-lg cds--toolbar-search-container-persistent"
950950
role="search"
951951
>
952952
<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 custom-class cds--toolbar-search-container-expandable"
7+
class="cds--search cds--search--lg cds--layout--size-lg custom-class cds--toolbar-search-container-expandable"
88
role="search"
99
>
1010
<div

‎packages/react/src/components/Search/Search-test.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
import React from 'react';
99
import Search from './Search';
10+
import SearchSkeleton from './Search.Skeleton';
1011
import userEvent from '@testing-library/user-event';
1112
import { render, screen } from '@testing-library/react';
1213

@@ -213,7 +214,10 @@ describe('Search', () => {
213214
it('should respect size prop', () => {
214215
render(<Search labelText="test-search" size="sm" />);
215216

216-
expect(screen.getByRole('search')).toHaveClass(`${prefix}--search--sm`);
217+
expect(screen.getByRole('search')).toHaveClass(`${prefix}--search--sm`); // TODO: V12 - Remove this check
218+
expect(screen.getByRole('search')).toHaveClass(
219+
`${prefix}--layout--size-sm`
220+
);
217221
});
218222

219223
it('should respect type prop', () => {
@@ -261,4 +265,13 @@ describe('Search', () => {
261265
);
262266
});
263267
});
268+
269+
describe('SearchSkeleton', () => {
270+
it('should apply the small layout size class when small is true', () => {
271+
const { container } = render(<SearchSkeleton small />);
272+
273+
expect(container.firstChild).toHaveClass(`${prefix}--search--sm`);
274+
expect(container.firstChild).toHaveClass(`${prefix}--layout--size-sm`);
275+
});
276+
});
264277
});

‎packages/react/src/components/Search/Search.Skeleton.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
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.
66
*/
77

88
import PropTypes from 'prop-types';
99
import React from 'react';
10+
import { deprecate } from '../../prop-types/deprecate';
1011
import cx from 'classnames';
1112
import { usePrefix } from '../../internal/usePrefix';
1213

@@ -17,27 +18,35 @@ export interface SearchSkeletonProps
1718
*/
1819
className?: string;
1920

21+
/**
22+
* Specify the size of the SearchSkeleton
23+
*/
24+
size?: 'xs' | 'sm' | 'md' | 'lg';
25+
2026
/**
2127
* Specify whether the Search should be a small variant.
28+
* @deprecated Use `size` prop instead. This prop will be removed in the next major release.
2229
*/
2330
small?: boolean;
2431
}
2532

2633
const SearchSkeleton = ({
2734
small = false,
35+
size,
2836
className,
2937
...rest
3038
}: SearchSkeletonProps) => {
3139
const prefix = usePrefix();
40+
const normalizedSize = small ? 'sm' : size;
41+
3242
const searchClasses = cx(className, {
3343
[`${prefix}--skeleton`]: true,
34-
[`${prefix}--search--xl`]: !small,
35-
[`${prefix}--search--sm`]: small,
44+
[`${prefix}--search--sm`]: small, // TODO: V12 - Remove this class
45+
[`${prefix}--layout--size-${normalizedSize}`]: normalizedSize,
3646
});
3747

3848
return (
3949
<div className={searchClasses} {...rest}>
40-
<span className={`${prefix}--label`} />
4150
<div className={`${prefix}--search-input`} />
4251
</div>
4352
);
@@ -49,10 +58,18 @@ SearchSkeleton.propTypes = {
4958
*/
5059
className: PropTypes.string,
5160

61+
/**
62+
* Specify the size of the SearchSkeleton
63+
*/
64+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
65+
5266
/**
5367
* Specify whether the Search should be a small variant
5468
*/
55-
small: PropTypes.bool,
69+
small: deprecate(
70+
PropTypes.bool,
71+
'The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.'
72+
),
5673
};
5774

5875
export default SearchSkeleton;

‎packages/react/src/components/Search/Search.mdx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
1717
## Table of Contents
1818

1919
- [Overview](#overview)
20-
- [Disabled](#disabled)
2120
- [Expandable](#expandable)
2221
- [Component API](#component-api)
2322
- [Feedback](#feedback)
@@ -36,18 +35,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
3635
]}
3736
/>
3837

39-
## Disabled
40-
41-
<Canvas
42-
of={SearchStories.Disabled}
43-
additionalActions={[
44-
{
45-
title: 'Open in Stackblitz',
46-
onClick: () => stackblitzPrefillConfig(SearchStories.Disabled),
47-
},
48-
]}
49-
/>
50-
5138
## Expandable
5239

5340
<Canvas

0 commit comments

Comments
 (0)