Skip to content

Commit c1cbbef

Browse files
HichamELBSIHichamELBSI
committed
docs: component documentation update
1 parent 288931c commit c1cbbef

File tree

100 files changed

+2537
-1349
lines changed

Some content is hidden

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

100 files changed

+2537
-1349
lines changed

‎docs/stories/00-getting started/migration guides/migration-v1-v2.mdx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -196,10 +196,28 @@ If you don't do this, the props for `MyBox` are all inferred as `Record<string,
196196

197197
Some specific props have been removed from components:
198198

199-
- `error` prop from `Accordion` component
200-
- `noBorder` prop from `IconButton`
201-
- `active` prop from `PageLink`
202-
- `showBullet` from `Status`
199+
#### `Accordion` component
200+
201+
- `error` prop is no longer supported
202+
203+
#### `IconButton` component
204+
205+
- `noBorder` prop is no longer supported
206+
- To achieve the same effect, use styled-components:
207+
208+
```tsx
209+
const IconButtonWithoutBorder = styled(IconButton)`
210+
border: 0;
211+
`;
212+
```
213+
214+
#### `PageLink` component
215+
216+
- `active` prop has been removed
217+
218+
#### `Status` component
219+
220+
- `showBullet` prop has been removed
203221

204222
### Removed CMS specific components
205223

‎docs/stories/02-primitives/Combobox.mdx‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -74,30 +74,26 @@ The `Combobox` primitive is composed of the following components:
7474
and is combined in the following way:
7575

7676
```tsx
77-
() => {
78-
return (
79-
<Combobox.Root>
80-
<Combobox.Trigger>
81-
<Combobox.TextInput placeholder="Pick me" />
82-
<Combobox.Icon />
83-
</Combobox.Trigger>
84-
<Combobox.Portal>
85-
<Combobox.Content>
86-
<Combobox.Viewport>
87-
<Combobox.Item value="1">
88-
<Combobox.ItemText>Option 1</Combobox.ItemText>
89-
<Combobox.ItemIndicator>
90-
<Check />
91-
</Combobox.ItemIndicator>
92-
</Combobox.Item>
93-
<Combobox.NoValueFound>No value found</Combobox.NoValueFound>
94-
<Combobox.CreateItem>Create a new value</Combobox.CreateItem>
95-
</Combobox.Viewport>
96-
</Combobox.Content>
97-
</Combobox.Portal>
98-
</Combobox.Root>
99-
);
100-
};
77+
<Combobox.Root>
78+
<Combobox.Trigger>
79+
<Combobox.TextInput placeholder="Pick me" />
80+
<Combobox.Icon />
81+
</Combobox.Trigger>
82+
<Combobox.Portal>
83+
<Combobox.Content>
84+
<Combobox.Viewport>
85+
<Combobox.Item value="1">
86+
<Combobox.ItemText>Option 1</Combobox.ItemText>
87+
<Combobox.ItemIndicator>
88+
<Check />
89+
</Combobox.ItemIndicator>
90+
</Combobox.Item>
91+
<Combobox.NoValueFound>No value found</Combobox.NoValueFound>
92+
<Combobox.CreateItem>Create a new value</Combobox.CreateItem>
93+
</Combobox.Viewport>
94+
</Combobox.Content>
95+
</Combobox.Portal>
96+
</Combobox.Root>
10197
```
10298

10399
## API Reference
@@ -106,30 +102,22 @@ and is combined in the following way:
106102

107103
<ArgTypes of={Combobox.Root} />
108104

109-
### Trigger
110-
111-
### TextInput
112-
113-
### Icon
114-
115105
### Portal
116106

117107
<ArgTypes of={Combobox.Portal} />
118108

119109
### Content
120110

121-
### Viewport
111+
<ArgTypes of={Combobox.Content} />
122112

123113
### Item
124114

125-
### ItemText
126-
127-
### ItemIndicator
128-
129-
### NoValueFound
115+
<ArgTypes of={Combobox.Item} />
130116

131117
### CreateItem
132118

119+
<ArgTypes of={Combobox.CreateItem} />
120+
133121
## Accessibility
134122

135123
Adheres to the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)

‎docs/stories/02-primitives/Combobox.stories.tsx‎

Lines changed: 199 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Meta, StoryObj } from '@storybook/react-vite';
22
import { Check } from '@strapi/icons';
33
import { Combobox } from '@strapi/ui-primitives';
4+
import { default as outdent } from 'outdent';
45

56
const meta: Meta<typeof Combobox.Root> = {
67
title: 'Primitives/Combobox',
@@ -51,7 +52,51 @@ export const BasicUsage = {
5152
</Combobox.Portal>
5253
</Combobox.Root>
5354
),
54-
55+
parameters: {
56+
docs: {
57+
source: {
58+
type: 'code',
59+
code: outdent`
60+
<Combobox.Root>
61+
<Combobox.Trigger>
62+
<Combobox.TextInput placeholder="Pick me" />
63+
<Combobox.Icon />
64+
</Combobox.Trigger>
65+
<Combobox.Portal>
66+
<Combobox.Content>
67+
<Combobox.Viewport>
68+
<Combobox.Item value="1">
69+
<Combobox.ItemText>Option 1</Combobox.ItemText>
70+
<Combobox.ItemIndicator>
71+
<Check />
72+
</Combobox.ItemIndicator>
73+
</Combobox.Item>
74+
<Combobox.Item value="2">
75+
<Combobox.ItemText>Option 2</Combobox.ItemText>
76+
<Combobox.ItemIndicator>
77+
<Check />
78+
</Combobox.ItemIndicator>
79+
</Combobox.Item>
80+
<Combobox.Item value="3">
81+
<Combobox.ItemText>Option 3</Combobox.ItemText>
82+
<Combobox.ItemIndicator>
83+
<Check />
84+
</Combobox.ItemIndicator>
85+
</Combobox.Item>
86+
<Combobox.Item value="4">
87+
<Combobox.ItemText>Option 4</Combobox.ItemText>
88+
<Combobox.ItemIndicator>
89+
<Check />
90+
</Combobox.ItemIndicator>
91+
</Combobox.Item>
92+
<Combobox.NoValueFound>No value</Combobox.NoValueFound>
93+
</Combobox.Viewport>
94+
</Combobox.Content>
95+
</Combobox.Portal>
96+
</Combobox.Root>`,
97+
},
98+
},
99+
},
55100
name: 'Basic Usage',
56101
} satisfies Story;
57102

@@ -101,7 +146,57 @@ export const ListAutocomplete = {
101146
</Combobox.Portal>
102147
</Combobox.Root>
103148
),
104-
149+
parameters: {
150+
docs: {
151+
source: {
152+
type: 'code',
153+
code: outdent`
154+
<Combobox.Root autocomplete="list">
155+
<Combobox.Trigger>
156+
<Combobox.TextInput placeholder="Pick me" />
157+
<Combobox.Icon />
158+
</Combobox.Trigger>
159+
<Combobox.Portal>
160+
<Combobox.Content>
161+
<Combobox.Viewport>
162+
<Combobox.Item value="mango">
163+
<Combobox.ItemText>Mango</Combobox.ItemText>
164+
<Combobox.ItemIndicator>
165+
<Check />
166+
</Combobox.ItemIndicator>
167+
</Combobox.Item>
168+
<Combobox.Item value="apple">
169+
<Combobox.ItemText>Apple</Combobox.ItemText>
170+
<Combobox.ItemIndicator>
171+
<Check />
172+
</Combobox.ItemIndicator>
173+
</Combobox.Item>
174+
<Combobox.Item value="Banana">
175+
<Combobox.ItemText>Banana</Combobox.ItemText>
176+
<Combobox.ItemIndicator>
177+
<Check />
178+
</Combobox.ItemIndicator>
179+
</Combobox.Item>
180+
<Combobox.Item value="papaya">
181+
<Combobox.ItemText>Papaya</Combobox.ItemText>
182+
<Combobox.ItemIndicator>
183+
<Check />
184+
</Combobox.ItemIndicator>
185+
</Combobox.Item>
186+
<Combobox.Item value="avocado">
187+
<Combobox.ItemText>Avocado</Combobox.ItemText>
188+
<Combobox.ItemIndicator>
189+
<Check />
190+
</Combobox.ItemIndicator>
191+
</Combobox.Item>
192+
<Combobox.NoValueFound>No value</Combobox.NoValueFound>
193+
</Combobox.Viewport>
194+
</Combobox.Content>
195+
</Combobox.Portal>
196+
</Combobox.Root>`,
197+
},
198+
},
199+
},
105200
name: 'List Autocomplete',
106201
} satisfies Story;
107202

@@ -151,7 +246,57 @@ export const BothAutocomplete = {
151246
</Combobox.Portal>
152247
</Combobox.Root>
153248
),
154-
249+
parameters: {
250+
docs: {
251+
source: {
252+
type: 'code',
253+
code: outdent`
254+
<Combobox.Root autocomplete="both">
255+
<Combobox.Trigger>
256+
<Combobox.TextInput placeholder="Pick me" />
257+
<Combobox.Icon />
258+
</Combobox.Trigger>
259+
<Combobox.Portal>
260+
<Combobox.Content>
261+
<Combobox.Viewport>
262+
<Combobox.Item value="1">
263+
<Combobox.ItemText>Banana</Combobox.ItemText>
264+
<Combobox.ItemIndicator>
265+
<Check />
266+
</Combobox.ItemIndicator>
267+
</Combobox.Item>
268+
<Combobox.Item value="4">
269+
<Combobox.ItemText>Apples</Combobox.ItemText>
270+
<Combobox.ItemIndicator>
271+
<Check />
272+
</Combobox.ItemIndicator>
273+
</Combobox.Item>
274+
<Combobox.Item value="2">
275+
<Combobox.ItemText>Oranges</Combobox.ItemText>
276+
<Combobox.ItemIndicator>
277+
<Check />
278+
</Combobox.ItemIndicator>
279+
</Combobox.Item>
280+
<Combobox.Item value="3">
281+
<Combobox.ItemText>Kiwis</Combobox.ItemText>
282+
<Combobox.ItemIndicator>
283+
<Check />
284+
</Combobox.ItemIndicator>
285+
</Combobox.Item>
286+
<Combobox.Item value="5">
287+
<Combobox.ItemText>Avocado</Combobox.ItemText>
288+
<Combobox.ItemIndicator>
289+
<Check />
290+
</Combobox.ItemIndicator>
291+
</Combobox.Item>
292+
<Combobox.NoValueFound>No value</Combobox.NoValueFound>
293+
</Combobox.Viewport>
294+
</Combobox.Content>
295+
</Combobox.Portal>
296+
</Combobox.Root>`,
297+
},
298+
},
299+
},
155300
name: 'Both Autocomplete',
156301
} satisfies Story;
157302

@@ -201,7 +346,57 @@ export const ListContainsAutocomplete = {
201346
</Combobox.Portal>
202347
</Combobox.Root>
203348
),
204-
349+
parameters: {
350+
docs: {
351+
source: {
352+
type: 'code',
353+
code: outdent`
354+
<Combobox.Root autocomplete={{ type: 'list', filter: 'contains' }}>
355+
<Combobox.Trigger>
356+
<Combobox.TextInput placeholder="Pick me" />
357+
<Combobox.Icon />
358+
</Combobox.Trigger>
359+
<Combobox.Portal>
360+
<Combobox.Content>
361+
<Combobox.Viewport>
362+
<Combobox.Item value="1">
363+
<Combobox.ItemText>Banana</Combobox.ItemText>
364+
<Combobox.ItemIndicator>
365+
<Check />
366+
</Combobox.ItemIndicator>
367+
</Combobox.Item>
368+
<Combobox.Item value="4">
369+
<Combobox.ItemText>Apples</Combobox.ItemText>
370+
<Combobox.ItemIndicator>
371+
<Check />
372+
</Combobox.ItemIndicator>
373+
</Combobox.Item>
374+
<Combobox.Item value="2">
375+
<Combobox.ItemText>Oranges</Combobox.ItemText>
376+
<Combobox.ItemIndicator>
377+
<Check />
378+
</Combobox.ItemIndicator>
379+
</Combobox.Item>
380+
<Combobox.Item value="3">
381+
<Combobox.ItemText>Kiwis</Combobox.ItemText>
382+
<Combobox.ItemIndicator>
383+
<Check />
384+
</Combobox.ItemIndicator>
385+
</Combobox.Item>
386+
<Combobox.Item value="5">
387+
<Combobox.ItemText>Avocado</Combobox.ItemText>
388+
<Combobox.ItemIndicator>
389+
<Check />
390+
</Combobox.ItemIndicator>
391+
</Combobox.Item>
392+
<Combobox.NoValueFound>No value</Combobox.NoValueFound>
393+
</Combobox.Viewport>
394+
</Combobox.Content>
395+
</Combobox.Portal>
396+
</Combobox.Root>`,
397+
},
398+
},
399+
},
205400
name: 'List Contains Autocomplete',
206401
} satisfies Story;
207402

0 commit comments

Comments
 (0)