Skip to content

Commit 6faddd4

Browse files
mperrottimperrotti
authored
Merge branch 'main' into mp/04-2022-design-tweaks
2 parents 49f2246 + a682735 commit 6faddd4

File tree

23 files changed

+1875
-1651
lines changed

23 files changed

+1875
-1651
lines changed

‎.changeset/six-mirrors-call.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Fixes layout bug with ButtonGroup by changing the `display` property from `inline-block` to `inline-flex`

‎.changeset/strong-nails-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Add support for sub-items in draft implementation of NavList

‎.github/ISSUE_TEMPLATE/config.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
contact_links:
2+
- name: Propose an idea for a new component
3+
url: https://github.com/github/primer/discussions/categories/design-patterns
4+
about: If you'd like to propose a new Primer pattern, big or small, let's talk! The best way to get started, especially if your proposal is in its early stages, is to open a pattern proposal (GitHub staff only).
5+
- name: Request a new pattern
6+
url: https://github.com/github/primer/issues/new?assignees=&labels=needs+triage&template=01-request.md&title=%5BProposal%5D+
7+
about: If you're more certain about what you need, please open a pattern request issue (GitHub staff only). We will get back to you after our weekly backlog triaging session.

‎.github/ISSUE_TEMPLATE/new_component_proposal_template.md‎

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

‎docs/content/ActionList.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,12 @@ render(<SelectFields />)
297297
defaultValue="false"
298298
description="Indicate whether the item is selected. Only applies to items that can be selected."
299299
/>
300+
<PropsTableRow
301+
name="active"
302+
type="boolean"
303+
defaultValue="false"
304+
description="Indicate whether the item is active. There should never be more than one active item."
305+
/>
300306
<PropsTableRow
301307
name="disabled"
302308
type="boolean"
@@ -325,6 +331,12 @@ render(<SelectFields />)
325331
required
326332
type="React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual"
327333
/>
334+
<PropsTableRow
335+
name="active"
336+
type="boolean"
337+
defaultValue="false"
338+
description="Indicate whether the item is active. There should never be more than one active item."
339+
/>
328340
<PropsTableBasePropRows
329341
elementType="a"
330342
isPolymorphic

‎docs/content/Button.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,12 @@ storybook: '/react/storybook?path=/story/composite-components-button'
77
description: Use button for the main actions on a page or form.
88
---
99

10-
import {Button, IconButton, LinkButton} from '@primer/react'
11-
12-
## Usage
13-
14-
### Installation
15-
1610
```js
1711
import {Button} from '@primer/react'
1812
```
1913

14+
## Examples
15+
2016
### Default button
2117

2218
This is the default variant for the `Button` component.
@@ -122,7 +118,7 @@ Here's an example of a block button which takes 100% of available width. Checkou
122118
<Button sx={{width: '100%'}}>Block</Button>
123119
```
124120

125-
## API reference
121+
## Props
126122

127123
Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
128124

@@ -165,7 +161,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
165161
<PropsTableSxRow />
166162
</PropsTable>
167163

168-
## Component status
164+
## Status
169165

170166
<ComponentChecklist
171167
items={{
@@ -174,7 +170,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
174170
adaptsToThemes: true,
175171
adaptsToScreenSizes: true,
176172
fullTestCoverage: true,
177-
usedInProduction: false,
173+
usedInProduction: true,
178174
usageExamplesDocumented: true,
179175
designReviewed: false,
180176
a11yReviewed: false,
@@ -184,3 +180,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
184180
hasFigmaComponent: false
185181
}}
186182
/>
183+
184+
## Related components
185+
186+
- [ButtonGroup](/ButtonGroup)

‎docs/content/ButtonGroup.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: ButtonGroup
3+
componentId: button_group
4+
status: Alpha
5+
source: https://github.com/primer/react/tree/main/src/ButtonGroup
6+
---
7+
8+
```js
9+
import {ButtonGroup} from '@primer/react'
10+
```
11+
12+
## Examples
13+
14+
### Default
15+
16+
```jsx live
17+
<ButtonGroup>
18+
<Button>Button 1</Button>
19+
<Button>Button 2</Button>
20+
<Button>Button 3</Button>
21+
</ButtonGroup>
22+
```
23+
24+
### With icon buttons
25+
26+
```jsx live
27+
<ButtonGroup>
28+
<IconButton aria-label="Zoom out" icon={DashIcon} />
29+
<IconButton aria-label="Zoom in" icon={PlusIcon} />
30+
</ButtonGroup>
31+
```
32+
33+
## Props
34+
35+
### ButtonGroup
36+
37+
<PropsTable>
38+
<PropsTableSxRow />
39+
<PropsTableRefRow refType="HTMLDivElement" />
40+
</PropsTable>
41+
42+
## Status
43+
44+
<ComponentChecklist
45+
items={{
46+
propsDocumented: true,
47+
noUnnecessaryDeps: true,
48+
adaptsToThemes: true,
49+
adaptsToScreenSizes: true,
50+
fullTestCoverage: true,
51+
usedInProduction: false,
52+
usageExamplesDocumented: true,
53+
hasStorybookStories: false,
54+
designReviewed: false,
55+
a11yReviewed: false,
56+
stableApi: false,
57+
addressedApiFeedback: false,
58+
hasDesignGuidelines: false,
59+
hasFigmaComponent: false
60+
}}
61+
/>
62+
63+
## Related components
64+
65+
- [Button](/Button)

‎docs/content/NavList.mdx‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -135,16 +135,16 @@ import {NavList} from '@primer/react/drafts'
135135

136136
### With sub-items
137137

138-
<Note variant="danger">Not implemented yet</Note>
139-
140-
```jsx
138+
```jsx live drafts
141139
<NavList>
142140
<NavList.Item href="/branches">Branches</NavList.Item>
143141
<NavList.Item href="/tags">Tags</NavList.Item>
144142
<NavList.Item>
145143
Actions
146144
<NavList.SubNav>
147-
<NavList.Item href="/actions">General</NavList.Item>
145+
<NavList.Item href="/actions" aria-current="page">
146+
General
147+
</NavList.Item>
148148
<NavList.Item href="/actions/runners">Runners</NavList.Item>
149149
</NavList.SubNav>
150150
</NavList.Item>
@@ -157,30 +157,6 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render
157157

158158
</Note>
159159

160-
<details>
161-
<summary>Rendered HTML</summary>
162-
163-
```html
164-
<nav>
165-
<ul role="list">
166-
<li><a href="/branches">Branches</a></li>
167-
<li><a href="/tags">Tags</a></li>
168-
<li>
169-
<button id="generated-id-1" aria-expanded="false" aria-controls="generated-id-2">
170-
<span>Actions</span>
171-
<span><svg aria-hidden="true">...</svg></span>
172-
</button>
173-
<ul role="list" id="generated-id-2" aria-labelledby="generated-id-1">
174-
<li><a href="/actions">General</a></li>
175-
<li><a href="/actions/runners">Runners</a></li>
176-
</ul>
177-
</li>
178-
</ul>
179-
</nav>
180-
```
181-
182-
</details>
183-
184160
### With a divider
185161

186162
```jsx live drafts

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
url: /Breadcrumbs
5656
- title: Button
5757
url: /Button
58+
- title: ButtonGroup
59+
url: /ButtonGroup
5860
- title: Checkbox
5961
url: /Checkbox
6062
- title: CheckboxGroup

0 commit comments

Comments
 (0)