Skip to content

Commit ad06caa

Browse files
manuelpuyolmanuelpuyol
authored
Merge branch 'main' into remove-default-props
2 parents 09ea92e + 9e8d0e9 commit ad06caa

File tree

114 files changed

+29983
-14340
lines changed

Some content is hidden

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

114 files changed

+29983
-14340
lines changed

‎docs/content/ActionList.mdx‎

Lines changed: 3 additions & 201 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ storybook: '/react/storybook?path=/story/components-actionlist'
77
description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel.
88
---
99

10+
import data from '../../src/ActionList/ActionList.docs.json'
11+
1012
import {Avatar} from '@primer/react'
1113
import {ActionList} from '@primer/react'
1214
import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
@@ -226,207 +228,7 @@ render(<SelectFields />)
226228

227229
## Props
228230

229-
### ActionList
230-
231-
<PropsTable>
232-
<PropsTableRow name="children" required type="ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]" />
233-
<PropsTableRow
234-
name="variant"
235-
type="'inset' | 'full'"
236-
defaultValue="'inset'"
237-
description={
238-
<>
239-
<InlineCode>inset</InlineCode> children are offset (vertically and horizontally) from list edges.{' '}
240-
<InlineCode>full</InlineCode> children are flush (vertically and horizontally) with list edges
241-
</>
242-
}
243-
/>
244-
<PropsTableRow
245-
name="selectionVariant"
246-
type="'single' | 'multiple'"
247-
description="Whether multiple items or a single item can be selected."
248-
/>
249-
<PropsTableRow
250-
name="showDivider"
251-
type="boolean"
252-
defaultValue="false"
253-
description="Display a divider above each item in this list when it does not follow a header or divider."
254-
/>
255-
<PropsTableRow
256-
name="role"
257-
type={
258-
<Link href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles">AriaRole</Link>
259-
}
260-
description={
261-
<>
262-
ARIA role describing the function of the list. <InlineCode>listbox</InlineCode> and{' '}
263-
<InlineCode>menu</InlineCode> are a common values.
264-
</>
265-
}
266-
/>
267-
<PropsTableSxRow />
268-
</PropsTable>
269-
270-
### ActionList.Item
271-
272-
<PropsTable>
273-
<PropsTableRow
274-
name="children"
275-
required
276-
type="React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual"
277-
/>
278-
<PropsTableRow
279-
name="variant"
280-
type="'default' | 'danger'"
281-
defaultValue="'default'"
282-
description={
283-
<>
284-
<InlineCode>danger</InlineCode> indicates that the item is destructive.
285-
</>
286-
}
287-
/>
288-
<PropsTableRow
289-
name="onSelect"
290-
type="(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void"
291-
description="Callback that is called when the item is selected using either the mouse or keyboard."
292-
/>
293-
<PropsTableRow
294-
name="selected"
295-
type="boolean"
296-
defaultValue="false"
297-
description="Indicate whether the item is selected. Only applies to items that can be selected."
298-
/>
299-
<PropsTableRow
300-
name="active"
301-
type="boolean"
302-
defaultValue="false"
303-
description="Indicate whether the item is active. There should never be more than one active item."
304-
/>
305-
<PropsTableRow
306-
name="disabled"
307-
type="boolean"
308-
defaultValue="false"
309-
description="Items that are disabled can not be clicked, selected, or navigated to."
310-
/>
311-
<PropsTableRow
312-
name="role"
313-
type={
314-
<Link href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles">AriaRole</Link>
315-
}
316-
description={
317-
<>
318-
ARIA role describing the function of the item. <InlineCode>option</InlineCode> is a common value.
319-
</>
320-
}
321-
/>
322-
<PropsTableSxRow />
323-
</PropsTable>
324-
325-
### ActionList.LinkItem
326-
327-
<PropsTable>
328-
<PropsTableRow
329-
name="children"
330-
required
331-
type="React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual"
332-
/>
333-
<PropsTableRow
334-
name="active"
335-
type="boolean"
336-
defaultValue="false"
337-
description="Indicate whether the item is active. There should never be more than one active item."
338-
/>
339-
<PropsTableBasePropRows
340-
elementType="a"
341-
isPolymorphic
342-
refType="HTMLAnchorElement"
343-
passthroughPropsLink={
344-
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
345-
}
346-
/>
347-
</PropsTable>
348-
349-
### ActionList.LeadingVisual
350-
351-
<PropsTable>
352-
<PropsTableRow
353-
name="children"
354-
required
355-
type="React.ReactNode"
356-
description="Icon (or similar) positioned before item text."
357-
/>
358-
<PropsTableSxRow />
359-
</PropsTable>
360-
361-
### ActionList.TrailingVisual
362-
363-
<PropsTable>
364-
<PropsTableRow name="children" required type="React.ReactNode" description="Visual positioned after item text." />
365-
<PropsTableSxRow />
366-
</PropsTable>
367-
368-
### ActionList.Description
369-
370-
<PropsTable>
371-
<PropsTableRow name="children" required type="React.ReactNode" />
372-
<PropsTableRow
373-
name="variant"
374-
type="'inline' | 'block'"
375-
defaultValue="'inline'"
376-
description={
377-
<>
378-
<InlineCode>inline</InlineCode> descriptions are positioned beside primary text. <InlineCode>block</InlineCode>{' '}
379-
descriptions are positioned below primary text.
380-
</>
381-
}
382-
/>
383-
<PropsTableSxRow />
384-
</PropsTable>
385-
386-
### ActionList.Group
387-
388-
<PropsTable>
389-
<PropsTableRow name="children" required type="ActionList.Item[] | ActionList.LinkItem[]" />
390-
<PropsTableRow name="title" type="string" description="Title of the group." />
391-
<PropsTableRow
392-
name="auxiliaryText"
393-
type="string"
394-
description="Secondary text that provides additional information about the group."
395-
/>
396-
<PropsTableRow
397-
name="variant"
398-
type="'filled' | 'subtle'"
399-
defaultValue="'subtle'"
400-
description={
401-
<>
402-
<InlineCode>inline</InlineCode> descriptions are positioned beside primary text. <InlineCode>block</InlineCode>{' '}
403-
descriptions are positioned below primary text.
404-
</>
405-
}
406-
/>
407-
<PropsTableRow
408-
name="selectionVariant"
409-
type="'single' | 'multiple' | false"
410-
description={
411-
<>
412-
Set <InlineCode>selectionVariant</InlineCode> at the group level.
413-
</>
414-
}
415-
/>
416-
<PropsTableRow
417-
name="role"
418-
type={
419-
<Link href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles">AriaRole</Link>
420-
}
421-
description={
422-
<>
423-
ARIA role describing the function of the list inside the group. <InlineCode>listbox</InlineCode> and{' '}
424-
<InlineCode>menu</InlineCode> are a common values.
425-
</>
426-
}
427-
/>
428-
<PropsTableSxRow />
429-
</PropsTable>
231+
<ComponentProps data={data} />
430232

431233
## Status
432234

‎docs/content/ActionMenu.mdx‎

Lines changed: 5 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ storybook: '/react/storybook?path=/story/components-actionmenu'
88
description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
99
---
1010

11+
import data from '../../src/ActionMenu.docs.json'
12+
1113
import {Box, Avatar, ActionList, ActionMenu} from '@primer/react'
1214

1315
<br />
@@ -279,77 +281,9 @@ render(
279281
)
280282
```
281283

282-
## Props / API reference
283-
284-
### ActionMenu
285-
286-
<PropsTable>
287-
<PropsTableRow
288-
name="children"
289-
required
290-
type="React.ReactElement[]"
291-
description={
292-
<>
293-
Recommended: <InlineCode>ActionMenu.Button</InlineCode> or <InlineCode>ActionMenu.Anchor</InlineCode> with{' '}
294-
<InlineCode>ActionMenu.Overlay</InlineCode>
295-
</>
296-
}
297-
/>
298-
<PropsTableRow
299-
name="open"
300-
type="boolean"
301-
defaultValue="false"
302-
description={
303-
<>
304-
If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '}
305-
<InlineCode>onOpenChange</InlineCode>.
306-
</>
307-
}
308-
/>
309-
<PropsTableRow
310-
name="onOpenChange"
311-
type="(open: boolean) => void"
312-
description={
313-
<>
314-
If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '}
315-
<InlineCode>open</InlineCode>.
316-
</>
317-
}
318-
/>
319-
<PropsTableRow
320-
name="anchorRef"
321-
type="React.RefObject<HTMLElement>"
322-
description="Useful for defining an external anchor"
323-
/>
324-
</PropsTable>
325-
326-
### ActionMenu.Button
327-
328-
<PropsTable>
329-
<PropsTableRow name="children" required type="React.ReactElement" />
330-
<PropsTablePassthroughPropsRow
331-
elementName="Button"
332-
isPolymorphic
333-
passthroughPropsLink={<Link href="/react/Button">Button docs</Link>}
334-
/>
335-
</PropsTable>
336-
337-
### ActionMenu.Anchor
338-
339-
<PropsTable>
340-
<PropsTableRow name="children" required type="React.ReactElement" description="Accepts a single child element" />
341-
</PropsTable>
342-
343-
### ActionMenu.Overlay
344-
345-
<PropsTable>
346-
<PropsTableRow name="children" required type="React.ReactNode" />
347-
<PropsTableRow name="align" type="start | center | end" defaultValue="start" />
348-
<PropsTablePassthroughPropsRow
349-
elementName="Overlay"
350-
passthroughPropsLink={<Link href="/react/Overlay">Overlay docs</Link>}
351-
/>
352-
</PropsTable>
284+
## Props
285+
286+
<ComponentProps data={data} />
353287

354288
## Status
355289

‎docs/content/Avatar.mdx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ componentId: avatar
55
source: https://github.com/primer/react/blob/main/src/Avatar.tsx
66
---
77

8+
import data from '../../src/Avatar.docs.json'
9+
810
import {Avatar, Box} from '@primer/react'
911

1012
```js
@@ -27,25 +29,7 @@ import {Avatar} from '@primer/react'
2729

2830
## Props
2931

30-
### Avatar
31-
32-
<PropsTable>
33-
<PropsTableRow name="src" type="string" required description="URL of the avatar image." />{' '}
34-
<PropsTableRow
35-
name="alt"
36-
type="string"
37-
defaultValue="''"
38-
description="Provide alt text when the avatar is used without a name next to it."
39-
/>
40-
<PropsTableRow name="size" type="number" defaultValue="20" description="The size of the avatar in pixels." />
41-
<PropsTableRow
42-
name="square"
43-
type="boolean"
44-
defaultValue="false"
45-
description="If true, the avatar will be square instead of circular."
46-
/>
47-
<PropsTableSxRow />
48-
</PropsTable>
32+
<ComponentProps data={data} />
4933

5034
## Status
5135

‎docs/content/AvatarPair.mdx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ status: Alpha
55
source: https://github.com/primer/react/blob/main/src/AvatarPair.tsx
66
---
77

8+
import data from '../../src/AvatarPair.docs.json'
9+
810
```js
911
import {AvatarPair} from '@primer/react'
1012
```
@@ -20,12 +22,7 @@ import {AvatarPair} from '@primer/react'
2022

2123
## Props
2224

23-
### AvatarPair
24-
25-
<PropsTable>
26-
<PropsTableRow name="children" type="Avatar[]" />
27-
<PropsTableSxRow />
28-
</PropsTable>
25+
<ComponentProps data={data} />
2926

3027
## Status
3128

‎docs/content/AvatarStack.mdx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ description: Use an avatar stack to display two or more avatars in an inline sta
66
source: https://github.com/primer/react/blob/main/src/AvatarStack.tsx
77
---
88

9+
import data from '../../src/AvatarStack.docs.json'
10+
911
import {AvatarStack} from '@primer/react'
1012

1113
```js
@@ -38,12 +40,7 @@ import {AvatarStack} from '@primer/react'
3840

3941
## Props
4042

41-
### AvatarStack
42-
43-
<PropsTable>
44-
<PropsTableRow name="alignRight" type="boolean" defaultValue="false" description="Align the avatars to the right" />
45-
<PropsTableSxRow />
46-
</PropsTable>
43+
<ComponentProps data={data} />
4744

4845
## Status
4946

0 commit comments

Comments
 (0)