Skip to content

Commit de40090

Browse files
joshuaellisjoshuaellis
authored
feat: reimplement size prop (#1735)
1 parent 9ec3c38 commit de40090

22 files changed

+452
-307
lines changed

‎.changeset/quick-poems-kick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@strapi/design-system': minor
3+
---
4+
5+
feat: reimplement size prop

‎docs/stories/03-inputs/Combobox.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ pursue another action first.
5454

5555
<Canvas of={ComboboxStories.Disabled} />
5656

57+
### Size
58+
59+
There are two options for sizes, `"S"` or `"M"`, the default is `"M"`.
60+
61+
<Canvas of={ComboboxStories.Size} />
62+
5763
### Async data
5864

5965
In some situations it might not be optimal to load all the data at once. In this case, you can use the `loading` prop to

‎docs/stories/03-inputs/Combobox.stories.tsx

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,20 @@ import { default as outdent } from 'outdent';
77
const meta: Meta<typeof Combobox> = {
88
title: 'Inputs/Combobox',
99
component: Combobox,
10-
parameters: {
11-
chromatic: { disableSnapshot: false },
10+
args: {
11+
disabled: false,
12+
placeholder: 'My favourite fruit is...',
13+
size: 'M',
14+
},
15+
argTypes: {
16+
size: {
17+
control: 'radio',
18+
options: ['S', 'M'],
19+
},
1220
},
13-
};
14-
15-
export default meta;
16-
17-
type Story = StoryObj<typeof Combobox>;
18-
19-
const Template: Story = {
2021
render: ({ ...props }) => {
21-
const [value, setValue] = React.useState<string | undefined>('');
22-
2322
return (
24-
<Combobox value={value} onChange={setValue} onClear={() => setValue('')} {...props}>
23+
<Combobox {...props}>
2524
<ComboboxOption value="apple">Apple</ComboboxOption>
2625
<ComboboxOption value="avocado">Avocado</ComboboxOption>
2726
<ComboboxOption value="banana">Banana</ComboboxOption>
@@ -32,54 +31,67 @@ const Template: Story = {
3231
</Combobox>
3332
);
3433
},
34+
parameters: {
35+
chromatic: { disableSnapshot: false },
36+
docs: {
37+
source: {
38+
code: outdent`
39+
<Combobox {...props}>
40+
<ComboboxOption value="apple">Apple</ComboboxOption>
41+
<ComboboxOption value="avocado">Avocado</ComboboxOption>
42+
<ComboboxOption value="banana">Banana</ComboboxOption>
43+
<ComboboxOption value="kiwi">Kiwi</ComboboxOption>
44+
<ComboboxOption value="mango">Mango</ComboboxOption>
45+
<ComboboxOption value="orange">Orange</ComboboxOption>
46+
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
47+
</Combobox>
48+
`,
49+
},
50+
},
51+
},
3552
};
3653

54+
export default meta;
55+
56+
type Story = StoryObj<typeof Combobox>;
57+
3758
export const Base = {
38-
...Template,
59+
name: 'base',
60+
} satisfies Story;
61+
62+
export const Disabled = {
3963
args: {
40-
placeholder: 'My favourite fruit is...',
64+
disabled: true,
4165
},
4266
parameters: {
4367
docs: {
4468
source: {
4569
code: outdent`
46-
<Combobox
47-
placeholder="My favourite fruit is..."
48-
value={value}
49-
onChange={setValue}
50-
onClear={() => setValue('')}
51-
{...props}
52-
>
53-
<ComboboxOption value="apple">Apple</ComboboxOption>
54-
<ComboboxOption value="avocado">Avocado</ComboboxOption>
55-
<ComboboxOption value="banana">Banana</ComboboxOption>
56-
<ComboboxOption value="kiwi">Kiwi</ComboboxOption>
57-
<ComboboxOption value="mango">Mango</ComboboxOption>
58-
<ComboboxOption value="orange">Orange</ComboboxOption>
59-
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
60-
</Combobox>
70+
<Combobox {...props} disabled>
71+
<ComboboxOption value="apple">Apple</ComboboxOption>
72+
<ComboboxOption value="avocado">Avocado</ComboboxOption>
73+
<ComboboxOption value="banana">Banana</ComboboxOption>
74+
<ComboboxOption value="kiwi">Kiwi</ComboboxOption>
75+
<ComboboxOption value="mango">Mango</ComboboxOption>
76+
<ComboboxOption value="orange">Orange</ComboboxOption>
77+
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
78+
</Combobox>
6179
`,
6280
},
6381
},
6482
},
65-
name: 'base',
83+
name: 'disabled',
6684
} satisfies Story;
6785

68-
export const Disabled = {
69-
...Template,
86+
export const Size = {
7087
args: {
71-
...Base.args,
72-
disabled: true,
88+
size: 'S',
7389
},
74-
7590
parameters: {
7691
docs: {
7792
source: {
7893
code: outdent`
79-
<Combobox
80-
placeholder="My favourite fruit is..."
81-
disabled
82-
>
94+
<Combobox {...props} size="S">
8395
<ComboboxOption value="apple">Apple</ComboboxOption>
8496
<ComboboxOption value="avocado">Avocado</ComboboxOption>
8597
<ComboboxOption value="banana">Banana</ComboboxOption>
@@ -88,12 +100,11 @@ export const Disabled = {
88100
<ComboboxOption value="orange">Orange</ComboboxOption>
89101
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
90102
</Combobox>
91-
`,
103+
`,
92104
},
93105
},
94106
},
95-
96-
name: 'disabled',
107+
name: 'small size',
97108
} satisfies Story;
98109

99110
export const Loading = {
@@ -123,7 +134,23 @@ export const Loading = {
123134
</Combobox>
124135
);
125136
},
126-
137+
parameters: {
138+
docs: {
139+
source: {
140+
code: outdent`
141+
<Combobox {...props} loading>
142+
<ComboboxOption value="apple">Apple</ComboboxOption>
143+
<ComboboxOption value="avocado">Avocado</ComboboxOption>
144+
<ComboboxOption value="banana">Banana</ComboboxOption>
145+
<ComboboxOption value="kiwi">Kiwi</ComboboxOption>
146+
<ComboboxOption value="mango">Mango</ComboboxOption>
147+
<ComboboxOption value="orange">Orange</ComboboxOption>
148+
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
149+
</Combobox>
150+
`,
151+
},
152+
},
153+
},
127154
name: 'loading',
128155
} satisfies Story;
129156

@@ -199,7 +226,6 @@ type Autocomplete = 'none' | 'list' | 'both' | { type: 'list'; filter: 'startsWi
199226

200227
export const Autocomplete = {
201228
args: {
202-
placeholder: 'My favourite fruit is...',
203229
autocompleteMode: 'both' as Autocomplete,
204230
},
205231
argTypes: {
@@ -240,7 +266,6 @@ export const Autocomplete = {
240266

241267
export const WithField = {
242268
args: {
243-
...Base.args,
244269
label: 'Fruits',
245270
error: 'Error',
246271
hint: 'Description line lorem ipsum',

‎docs/stories/03-inputs/DatePicker.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ By default, the DatePicker is localised to the user's browser locale whilst the
4545

4646
<Canvas of={DatePickerStories.Disabled} />
4747

48+
### Size
49+
50+
There are two options for sizes, `"S"` or `"M"`, the default is `"M"`.
51+
52+
<Canvas of={DatePickerStories.Size} />
53+
4854
### Min/Max date
4955

5056
It's also possible to cap the date range that can be selected. If you don't supply an intial date when using the min/max

‎docs/stories/03-inputs/DatePicker.stories.tsx

Lines changed: 30 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,66 @@
1-
import * as React from 'react';
2-
3-
import { useArgs } from '@storybook/preview-api';
41
import { Meta, StoryObj } from '@storybook/react';
52
import { DatePicker, Field } from '@strapi/design-system';
63
import { default as outdent } from 'outdent';
74

85
const meta: Meta<typeof DatePicker> = {
96
title: 'Inputs/DatePicker',
107
component: DatePicker,
11-
};
12-
13-
export default meta;
14-
15-
type Story = StoryObj<typeof DatePicker>;
16-
17-
const Template: Story = {
8+
argTypes: {
9+
size: {
10+
control: 'radio',
11+
options: ['S', 'M'],
12+
},
13+
},
14+
args: {
15+
disabled: false,
16+
locale: 'en-GB',
17+
size: 'M',
18+
},
1819
render: ({ ...props }) => {
19-
const [, updateArgs] = useArgs();
20-
21-
return (
22-
<DatePicker
23-
{...props}
24-
onChange={(value) => updateArgs({ value })}
25-
onClear={() =>
26-
updateArgs(() => {
27-
value: undefined;
28-
})
29-
}
30-
/>
31-
);
20+
return <DatePicker {...props} />;
3221
},
3322
parameters: {
3423
chromatic: { disableSnapshot: false },
3524
},
3625
};
3726

27+
export default meta;
28+
29+
type Story = StoryObj<typeof DatePicker>;
30+
3831
export const Base = {
39-
...Template,
4032
args: {
4133
initialDate: new Date(),
4234
},
4335
name: 'base',
36+
} satisfies Story;
37+
38+
export const Disabled = {
39+
name: 'disabled',
40+
args: {
41+
disabled: true,
42+
},
4443
parameters: {
4544
docs: {
4645
source: {
4746
code: outdent`
48-
<DatePicker
49-
value={value}
50-
onChange={handleChange}
51-
onClear={handleClear}
52-
/>
47+
<DatePicker disabled />
5348
`,
5449
},
5550
},
5651
},
5752
} satisfies Story;
5853

59-
export const Disabled = {
60-
...Template,
61-
name: 'disabled',
54+
export const Size = {
55+
name: 'small size',
6256
args: {
63-
...Base.args,
64-
disabled: true,
57+
size: 'S',
6558
},
6659
parameters: {
6760
docs: {
6861
source: {
6962
code: outdent`
70-
<DatePicker
71-
value={value}
72-
onChange={handleChange}
73-
onClear={handleClear}
74-
disabled
75-
/>
63+
<DatePicker size="S" />
7664
`,
7765
},
7866
},
@@ -81,20 +69,16 @@ export const Disabled = {
8169

8270
export const MinMaxDate = {
8371
args: {
84-
...Base.args,
8572
minDate: new Date('2022-01-01'),
8673
maxDate: new Date('2022-12-31'),
8774
},
88-
8975
name: 'min/max date',
9076
parameters: {
9177
docs: {
9278
source: {
9379
code: outdent`
9480
<DatePicker
95-
value={value}
96-
onChange={handleChange}
97-
onClear={handleClear}
81+
{...props}
9882
minDate={new Date('2022-01-01')}
9983
maxDate={new Date('2022-12-31')}
10084
/>
@@ -106,19 +90,15 @@ export const MinMaxDate = {
10690

10791
export const Locale = {
10892
args: {
109-
...MinMaxDate.args,
11093
locale: 'de-DE',
11194
},
112-
11395
name: 'locale',
11496
parameters: {
11597
docs: {
11698
source: {
11799
code: outdent`
118100
<DatePicker
119-
value={value}
120-
onChange={handleChange}
121-
onClear={handleClear}
101+
{...props}
122102
locale="de-DE"
123103
/>
124104
`,

‎docs/stories/03-inputs/DateTimePicker.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ import { DateTimePicker } from '@strapi/design-system/DateTimePicker';
4343

4444
<Canvas of={DateTimePickerStories.Disabled} />
4545

46+
### Size
47+
48+
There are two options for sizes, `"S"` or `"M"`, the default is `"M"`.
49+
50+
<Canvas of={DateTimePickerStories.Size} />
51+
4652
### DateTimePicker field
4753

4854
DateTimePicker wrapped with [`Field`](../?path=/docs/components-field--docs) component to create a powerful complete

0 commit comments

Comments
 (0)