Skip to content

Commit 1613d94

Browse files
joshuaellisjoshuaellis
authored
feat!: refactor field component API (#1713)
1 parent ee100e3 commit 1613d94

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+973
-883
lines changed

‎.changeset/red-peas-suffer.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@strapi/design-system': major
3+
---
4+
5+
feat!: refactor Field api

‎docs/components/Typography.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ const Paragraph = styled<TypographyComponent<'p'>>(Typography)`
5454
}
5555
`;
5656

57-
const Li = (props: TypographyProps) => <ListItem tag="li" variant="epsilon" textColor="neutral700" {...props} />;
57+
const Li = (props: TypographyProps) => (
58+
<ListItem tag="li" variant="epsilon" textColor="neutral700" fontSize={2} {...props} />
59+
);
5860

5961
const ListItem = styled(Typography)`
6062
& code {

‎docs/stories/Field.mdx

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎docs/stories/Field.stories.tsx

Lines changed: 0 additions & 96 deletions
This file was deleted.

‎docs/stories/Inputs/Checkbox.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { useArgs } from '@storybook/preview-api';
44
import { Meta, StoryObj } from '@storybook/react';
5-
import { Checkbox, Field, FieldHint, FieldError, Flex } from '@strapi/design-system';
5+
import { Checkbox, Field, Flex } from '@strapi/design-system';
66
import { default as outdent } from 'outdent';
77

88
const meta: Meta<typeof Checkbox> = {
@@ -208,13 +208,13 @@ export const WithField = {
208208
};
209209

210210
return (
211-
<Field id="with_field" error={error} hint={hint}>
211+
<Field.Root id="with_field" error={error} hint={hint}>
212212
<Checkbox value={checked} onChange={handleChange}>
213213
{children}
214214
</Checkbox>
215-
<FieldError />
216-
<FieldHint />
217-
</Field>
215+
<Field.Error />
216+
<Field.Hint />
217+
</Field.Root>
218218
);
219219
},
220220
args: {
@@ -226,13 +226,13 @@ export const WithField = {
226226
docs: {
227227
source: {
228228
code: outdent`
229-
<Field id="with_field" error={error} hint={hint}>
229+
<Field.Root id="with_field" error={error} hint={hint}>
230230
<Checkbox value={checked} onChange={handleChange}>
231231
{children}
232232
</Checkbox>
233-
<FieldError />
234-
<FieldHint />
235-
</Field>
233+
<Field.Error />
234+
<Field.Hint />
235+
</Field.Root>
236236
`,
237237
},
238238
},

‎docs/stories/Inputs/Combobox.stories.tsx

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { Meta, StoryObj } from '@storybook/react';
4-
import { Combobox, ComboboxOption, Field, FieldHint, FieldError, FieldLabel } from '@strapi/design-system';
4+
import { Combobox, ComboboxOption, Field } from '@strapi/design-system';
55
import { default as outdent } from 'outdent';
66

77
const meta: Meta<typeof Combobox> = {
@@ -246,16 +246,9 @@ export const WithField = {
246246
const [value, setValue] = React.useState<string | undefined>('');
247247

248248
return (
249-
<Field id="with_field" error={error} hint={hint}>
250-
<FieldLabel>{label}</FieldLabel>
251-
<Combobox
252-
id="with_field"
253-
value={value}
254-
onChange={setValue}
255-
onClear={() => setValue('')}
256-
error={error}
257-
{...props}
258-
>
249+
<Field.Root id="with_field" error={error} hint={hint}>
250+
<Field.Label>{label}</Field.Label>
251+
<Combobox value={value} onChange={setValue} onClear={() => setValue('')} {...props}>
259252
<ComboboxOption value="apple">Apple</ComboboxOption>
260253
<ComboboxOption value="avocado">Avocado</ComboboxOption>
261254
<ComboboxOption value="banana">Banana</ComboboxOption>
@@ -264,18 +257,18 @@ export const WithField = {
264257
<ComboboxOption value="orange">Orange</ComboboxOption>
265258
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
266259
</Combobox>
267-
<FieldError />
268-
<FieldHint />
269-
</Field>
260+
<Field.Error />
261+
<Field.Hint />
262+
</Field.Root>
270263
);
271264
},
272265

273266
parameters: {
274267
docs: {
275268
source: {
276269
code: outdent`
277-
<Field id="with_field" error={error} hint={hint}>
278-
<FieldLabel>{label}</FieldLabel>
270+
<Field.Root id="with_field" error={error} hint={hint}>
271+
<Field.Label>{label}</Field.Label>
279272
<Combobox
280273
id="with_field"
281274
value={value}
@@ -292,9 +285,9 @@ export const WithField = {
292285
<ComboboxOption value="orange">Orange</ComboboxOption>
293286
<ComboboxOption value="strawberry">Strawberry</ComboboxOption>
294287
</Combobox>
295-
<FieldError />
296-
<FieldHint />
297-
</Field>
288+
<Field.Error />
289+
<Field.Hint />
290+
</Field.Root>
298291
`,
299292
},
300293
},

‎docs/stories/Inputs/DatePicker.stories.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { useArgs } from '@storybook/preview-api';
44
import { Meta, StoryObj } from '@storybook/react';
5-
import { DatePicker, Field, FieldLabel, FieldHint, FieldError } from '@strapi/design-system';
5+
import { DatePicker, Field } from '@strapi/design-system';
66
import { default as outdent } from 'outdent';
77

88
const meta: Meta<typeof DatePicker> = {
@@ -150,12 +150,12 @@ export const Sizing = {
150150
export const WithField = {
151151
render: ({ error, hint, label, ...props }) => {
152152
return (
153-
<Field id="with_field" error={error} hint={hint}>
154-
<FieldLabel>{label}</FieldLabel>
155-
<DatePicker id="with_field" error={error} {...props} />
156-
<FieldError />
157-
<FieldHint />
158-
</Field>
153+
<Field.Root id="with_field" error={error} hint={hint}>
154+
<Field.Label>{label}</Field.Label>
155+
<DatePicker {...props} />
156+
<Field.Error />
157+
<Field.Hint />
158+
</Field.Root>
159159
);
160160
},
161161
args: {
@@ -174,11 +174,11 @@ export const WithField = {
174174
error={error}
175175
hint={hint}
176176
>
177-
<FieldLabel>{label}</FieldLabel>
177+
<Field.Label>{label}</Field.Label>
178178
<DatePicker id="with_field" error={error} />
179-
<FieldError />
180-
<FieldHint />
181-
</Field>
179+
<Field.Error />
180+
<Field.Hint />
181+
</Field.Root>
182182
`,
183183
},
184184
},

‎docs/stories/Inputs/DateTimePicker.stories.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import * as React from 'react';
2-
31
import { useArgs } from '@storybook/preview-api';
42
import { Meta, StoryObj } from '@storybook/react';
5-
import { DateTimePicker, Field, FieldHint, FieldError, FieldLabel } from '@strapi/design-system';
3+
import { DateTimePicker, Field } from '@strapi/design-system';
64
import { default as outdent } from 'outdent';
75

86
const meta: Meta<typeof DateTimePicker> = {
@@ -81,12 +79,12 @@ export const Disabled = {
8179
export const WithField = {
8280
render: ({ error, hint, label, ...props }) => {
8381
return (
84-
<Field id="with_field" error={error} hint={hint}>
85-
<FieldLabel>{label}</FieldLabel>
86-
<DateTimePicker id="with_field" error={error} {...props} />
87-
<FieldError />
88-
<FieldHint />
89-
</Field>
82+
<Field.Root id="with_field" error={error} hint={hint}>
83+
<Field.Label>{label}</Field.Label>
84+
<DateTimePicker {...props} />
85+
<Field.Error />
86+
<Field.Hint />
87+
</Field.Root>
9088
);
9189
},
9290
args: {
@@ -105,11 +103,11 @@ export const WithField = {
105103
error={error}
106104
hint={hint}
107105
>
108-
<FieldLabel>{label}</FieldLabel>
106+
<Field.Label>{label}</Field.Label>
109107
<DateTimePicker id="with_field" error={error} />
110-
<FieldError />
111-
<FieldHint />
112-
</Field>
108+
<Field.Error />
109+
<Field.Hint />
110+
</Field.Root>
113111
`,
114112
},
115113
},

0 commit comments

Comments
 (0)