Skip to content

Commit f4e5e53

Browse files
janhasselkodiakhq[bot]
janhassel
and
kodiakhq[bot]
authored
feat(contained-list): add support for sizes (#12609)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent db973af commit f4e5e53

File tree

4 files changed

+127
-89
lines changed

4 files changed

+127
-89
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1363,6 +1363,17 @@ Map {
13631363
"isRequired": true,
13641364
"type": "oneOfType",
13651365
},
1366+
"size": Object {
1367+
"args": Array [
1368+
Array [
1369+
"sm",
1370+
"md",
1371+
"lg",
1372+
"xl",
1373+
],
1374+
],
1375+
"type": "oneOf",
1376+
},
13661377
},
13671378
},
13681379
"ContainedListItem" => Object {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@ function ContainedList({
1919
className,
2020
kind = variants[0],
2121
label,
22+
size = 'lg',
2223
}) {
2324
const labelId = `${useId('contained-list')}-header`;
2425
const prefix = usePrefix();
2526

2627
const classes = classNames(
2728
`${prefix}--contained-list`,
2829
`${prefix}--contained-list--${kind}`,
30+
`${prefix}--contained-list--${size}`,
2931
className
3032
);
3133

@@ -69,6 +71,11 @@ ContainedList.propTypes = {
6971
* A label describing the contained list.
7072
*/
7173
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
74+
75+
/**
76+
* Specify the size of the contained list.
77+
*/
78+
size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
7279
};
7380

7481
export default ContainedList;

‎packages/react/src/components/ContainedList/ContainedList.stories.js

Lines changed: 78 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,14 @@ export const WithInteractiveItems = () => {
9090
const onClick = action('onClick (ContainedListItem)');
9191

9292
return (
93-
<VStack gap={12}>
94-
<ContainedList label="List title" kind="on-page">
95-
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
96-
<ContainedListItem onClick={onClick} disabled>
97-
List item
98-
</ContainedListItem>
99-
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
100-
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
101-
</ContainedList>
102-
</VStack>
93+
<ContainedList label="List title" kind="on-page">
94+
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
95+
<ContainedListItem onClick={onClick} disabled>
96+
List item
97+
</ContainedListItem>
98+
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
99+
<ContainedListItem onClick={onClick}>List item</ContainedListItem>
100+
</ContainedList>
103101
);
104102
};
105103

@@ -114,19 +112,17 @@ export const WithActions = () => {
114112
);
115113

116114
return (
117-
<VStack gap={12}>
118-
<ContainedList
119-
label="List title"
120-
kind="on-page"
121-
action={<ExpandableSearch placeholder="Find item" size="lg" />}>
122-
<ContainedListItem action={itemAction}>List item</ContainedListItem>
123-
<ContainedListItem action={itemAction} disabled>
124-
List item
125-
</ContainedListItem>
126-
<ContainedListItem action={itemAction}>List item</ContainedListItem>
127-
<ContainedListItem action={itemAction}>List item</ContainedListItem>
128-
</ContainedList>
129-
</VStack>
115+
<ContainedList
116+
label="List title"
117+
kind="on-page"
118+
action={<ExpandableSearch placeholder="Find item" size="lg" />}>
119+
<ContainedListItem action={itemAction}>List item</ContainedListItem>
120+
<ContainedListItem action={itemAction} disabled>
121+
List item
122+
</ContainedListItem>
123+
<ContainedListItem action={itemAction}>List item</ContainedListItem>
124+
<ContainedListItem action={itemAction}>List item</ContainedListItem>
125+
</ContainedList>
130126
);
131127
};
132128

@@ -142,89 +138,81 @@ export const WithInteractiveItemsAndActions = () => {
142138
);
143139

144140
return (
145-
<VStack gap={12}>
146-
<ContainedList
147-
label="List title"
148-
kind="on-page"
149-
action={<ExpandableSearch placeholder="Find item" size="lg" />}>
150-
<ContainedListItem action={itemAction} onClick={onClick}>
151-
List item
152-
</ContainedListItem>
153-
<ContainedListItem action={itemAction} onClick={onClick}>
154-
List item
155-
</ContainedListItem>
156-
<ContainedListItem action={itemAction} onClick={onClick}>
157-
List item
158-
</ContainedListItem>
159-
<ContainedListItem action={itemAction} onClick={onClick}>
160-
List item
161-
</ContainedListItem>
162-
</ContainedList>
163-
</VStack>
141+
<ContainedList
142+
label="List title"
143+
kind="on-page"
144+
action={<ExpandableSearch placeholder="Find item" size="lg" />}>
145+
<ContainedListItem action={itemAction} onClick={onClick}>
146+
List item
147+
</ContainedListItem>
148+
<ContainedListItem action={itemAction} onClick={onClick}>
149+
List item
150+
</ContainedListItem>
151+
<ContainedListItem action={itemAction} onClick={onClick}>
152+
List item
153+
</ContainedListItem>
154+
<ContainedListItem action={itemAction} onClick={onClick}>
155+
List item
156+
</ContainedListItem>
157+
</ContainedList>
164158
);
165159
};
166160

167161
export const WithListTitleDecorators = () => {
168162
return (
169-
<VStack gap={12}>
170-
<ContainedList
171-
label={
172-
<div
173-
style={{
174-
display: 'flex',
175-
alignItems: 'center',
176-
justifyContent: 'space-between',
177-
}}>
178-
<span>List title</span>
179-
<Tag size="sm">4</Tag>
180-
</div>
181-
}
182-
kind="on-page">
183-
<ContainedListItem>List item</ContainedListItem>
184-
<ContainedListItem>List item</ContainedListItem>
185-
<ContainedListItem>List item</ContainedListItem>
186-
<ContainedListItem>List item</ContainedListItem>
187-
</ContainedList>
188-
</VStack>
163+
<ContainedList
164+
label={
165+
<div
166+
style={{
167+
display: 'flex',
168+
alignItems: 'center',
169+
justifyContent: 'space-between',
170+
}}>
171+
<span>List title</span>
172+
<Tag size="sm">4</Tag>
173+
</div>
174+
}
175+
kind="on-page">
176+
<ContainedListItem>List item</ContainedListItem>
177+
<ContainedListItem>List item</ContainedListItem>
178+
<ContainedListItem>List item</ContainedListItem>
179+
<ContainedListItem>List item</ContainedListItem>
180+
</ContainedList>
189181
);
190182
};
191183

192184
export const WithIcons = () => {
193185
return (
194-
<VStack gap={12}>
195-
<ContainedList label="List title" kind="on-page">
196-
<ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
197-
<ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
198-
<ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
199-
<ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
200-
</ContainedList>
201-
</VStack>
186+
<ContainedList label="List title" kind="on-page">
187+
<ContainedListItem renderIcon={Apple}>List item</ContainedListItem>
188+
<ContainedListItem renderIcon={Wheat}>List item</ContainedListItem>
189+
<ContainedListItem renderIcon={Strawberry}>List item</ContainedListItem>
190+
<ContainedListItem renderIcon={Fish}>List item</ContainedListItem>
191+
</ContainedList>
202192
);
203193
};
204194

205195
export const WithLayer = () => {
206196
return (
207-
<VStack gap={12}>
208-
<VStack gap={5}>
209-
<ContainedList label="List title" kind="on-page">
210-
<ContainedListItem>List item</ContainedListItem>
211-
<ContainedListItem>List item</ContainedListItem>
212-
</ContainedList>
213-
<Layer>
214-
<VStack gap={5}>
197+
<VStack gap={5}>
198+
<ContainedList label="List title" kind="on-page">
199+
<ContainedListItem>List item</ContainedListItem>
200+
<ContainedListItem>List item</ContainedListItem>
201+
</ContainedList>
202+
<Layer>
203+
<VStack gap={5}>
204+
<ContainedList label="List title" kind="on-page">
205+
<ContainedListItem>List item</ContainedListItem>
206+
<ContainedListItem>List item</ContainedListItem>
207+
</ContainedList>
208+
<Layer>
215209
<ContainedList label="List title" kind="on-page">
216210
<ContainedListItem>List item</ContainedListItem>
217211
<ContainedListItem>List item</ContainedListItem>
218212
</ContainedList>
219-
<Layer>
220-
<ContainedList label="List title" kind="on-page">
221-
<ContainedListItem>List item</ContainedListItem>
222-
<ContainedListItem>List item</ContainedListItem>
223-
</ContainedList>
224-
</Layer>
225-
</VStack>
226-
</Layer>
227-
</VStack>
213+
</Layer>
214+
</VStack>
215+
</Layer>
228216
</VStack>
229217
);
230218
};
@@ -250,4 +238,7 @@ Playground.argTypes = {
250238
kind: {
251239
defaultValue: 'on-page',
252240
},
241+
size: {
242+
defaultValue: 'lg',
243+
},
253244
};

‎packages/styles/scss/components/contained-list/_contained-list.scss

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8+
@use 'sass:list';
9+
810
@use '../../config' as *;
911
@use '../../motion' as *;
1012
@use '../../spacing' as *;
@@ -31,6 +33,35 @@
3133
width: 100%;
3234
}
3335

36+
// Sizes
37+
38+
$sizes: (
39+
// size: (height, item-block-padding)
40+
'sm': (rem(32px), $spacing-03),
41+
'md': (rem(40px), $spacing-04),
42+
'lg': (rem(48px), $spacing-05),
43+
'xl': (rem(64px), $spacing-06)
44+
);
45+
46+
@each $size, $definition in $sizes {
47+
$height: list.nth($definition, 1);
48+
$item-block-padding: list.nth($definition, 2);
49+
50+
.#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--#{$size}
51+
.#{$prefix}--contained-list__header {
52+
height: $height;
53+
}
54+
55+
.#{$prefix}--contained-list--#{$size}
56+
.#{$prefix}--contained-list-item__content,
57+
.#{$prefix}--contained-list--#{$size}
58+
.#{$prefix}--contained-list-item--clickable
59+
.#{$prefix}--contained-list-item__content {
60+
min-height: $height;
61+
padding: calc(#{$item-block-padding} - #{rem(2px)}) $spacing-05;
62+
}
63+
}
64+
3465
// "On Page" variant
3566

3667
.#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
@@ -40,7 +71,6 @@
4071
.#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
4172
@include type-style('heading-compact-01');
4273

43-
height: $spacing-09;
4474
border-bottom: 1px solid $border-subtle;
4575
background-color: $background;
4676
color: $text-primary;
@@ -92,7 +122,6 @@
92122
.#{$prefix}--contained-list-item__content {
93123
@include type-style('body-01');
94124

95-
padding: calc(#{$spacing-05} - #{rem(2px)}) $spacing-05;
96125
color: $text-primary;
97126
}
98127

0 commit comments

Comments
 (0)