Skip to content

Commit 4127d1f

Browse files
pksjcepksjce
authored
Merge branch 'main' into dg-esm-exports
2 parents c753fbb + 8c32020 commit 4127d1f

36 files changed

+3653
-655
lines changed

‎.changeset/actionmenu-remove-focus-trap.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+
ActionMenu: Remove focus trap to enable Tab and Shift+Tab behavior

‎.changeset/chatty-moose-wait.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Adds the option to render a trailing action inside of the TextInput component

‎.changeset/six-trains-guess.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+
Updates the API for token components to align with our size-naming ADR, avatar guidelines, and icon guidelines

‎.github/workflows/visual_testing.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99
chromatic:
1010
name: Visual testing
1111
runs-on: ubuntu-latest
12-
environment: visual-testing
12+
environment: ${{ github.ref == 'refs/heads/main' && 'Preview' || 'needs-approval' }}
1313
steps:
1414
- name: Checkout repository
1515
uses: actions/checkout@v2

‎.storybook/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ module.exports = {
55
'@storybook/addon-links',
66
'@storybook/addon-essentials',
77
'storybook-addon-performance/register',
8-
...(process.env.NODE_ENV === 'production' ? ['@whitespace/storybook-addon-html'] : [])
8+
...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic'
9+
? ['@whitespace/storybook-addon-html']
10+
: [])
911
]
1012
}

‎docs/content/TextInput.mdx‎

Lines changed: 110 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,42 @@ const WithIconAndLoadingIndicator = () => {
108108
render(<WithIconAndLoadingIndicator />)
109109
```
110110

111+
### With trailing action
112+
113+
```jsx live
114+
<Box display="grid" sx={{gap: 3}}>
115+
<FormControl>
116+
<FormControl.Label>Icon action</FormControl.Label>
117+
<TextInput
118+
trailingAction={
119+
<TextInput.Action
120+
onClick={() => {
121+
alert('clear input')
122+
}}
123+
icon={XIcon}
124+
aria-label="Clear input"
125+
sx={{color: 'fg.subtle'}}
126+
/>
127+
}
128+
/>
129+
</FormControl>
130+
<FormControl>
131+
<FormControl.Label>Text action</FormControl.Label>
132+
<TextInput
133+
trailingAction={
134+
<TextInput.Action
135+
onClick={() => {
136+
alert('clear input')
137+
}}
138+
>
139+
Clear
140+
</TextInput.Action>
141+
}
142+
/>
143+
</FormControl>
144+
</Box>
145+
```
146+
111147
### With error and warning states
112148

113149
```jsx live
@@ -160,61 +196,63 @@ render(<WithIconAndLoadingIndicator />)
160196

161197
<PropsTable>
162198
<PropsTableRow name="aria-label" type="string" description="Allows input to be accessible." />
163-
<PropsTableRow
164-
name="block"
165-
type="boolean"
166-
defaultValue="false"
167-
description="Creates a full-width input element"
168-
/>
199+
<PropsTableRow name="block" type="boolean" defaultValue="false" description="Creates a full-width input element" />
169200
<PropsTableRow
170201
name="contrast"
171202
type="boolean"
172203
defaultValue="false"
173204
description="Changes background color to a higher contrast color"
174205
/>
175-
<PropsTableRow name='size' type="'small' | 'medium' | 'large'" description="Creates a smaller or larger input than the default." />
176-
177-
<PropsTableRow name="loading" type="boolean" description="Whether to show a loading indicator in the input" />
178-
<PropsTableRow
179-
name="loaderPosition"
180-
type="'auto' | 'leading' | 'trailing'"
181-
description={
182-
<>
183-
<div>Which position to render the loading indicator</div>
184-
<ul>
185-
<li>
186-
'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the
187-
beginning
188-
</li>
189-
<li>'leading': at the beginning of the input</li>
190-
<li>'trailing': at the end of the input</li>
191-
</ul>
192-
</>
193-
}
194-
/>
195-
<PropsTableRow
196-
name="leadingVisual"
197-
type={<>string | React.ComponentType</>}
198-
description="Visual positioned on the left edge inside the input"
199-
/>
200-
<PropsTableRow name="monospace" type="boolean" defaultValue="false" description="Shows input in monospace font" />
201-
<PropsTableRow
202-
name="trailingVisual"
203-
type={<>string | React.ComponentType</>}
204-
description="Visual positioned on the right edge inside the input"
205-
/>
206-
<PropsTableRow
207-
name="validationStatus"
208-
type="'error' | 'success' | 'warning'"
209-
description="Style the input to match the status"
210-
/>
211-
<PropsTableRow
212-
name="variant"
213-
type="'small' | 'medium' | 'large'"
214-
description="(Use size) Creates a smaller or larger input than the default."
215-
deprecated
216-
/>
217-
206+
<PropsTableRow
207+
name="size"
208+
type="'small' | 'medium' | 'large'"
209+
description="Creates a smaller or larger input than the default."
210+
/>
211+
<PropsTableRow name="loading" type="boolean" description="Whether to show a loading indicator in the input" />
212+
<PropsTableRow
213+
name="loaderPosition"
214+
type="'auto' | 'leading' | 'trailing'"
215+
description={
216+
<>
217+
<div>Which position to render the loading indicator</div>
218+
<ul>
219+
<li>
220+
'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the
221+
beginning
222+
</li>
223+
<li>'leading': at the beginning of the input</li>
224+
<li>'trailing': at the end of the input</li>
225+
</ul>
226+
</>
227+
}
228+
/>
229+
<PropsTableRow
230+
name="leadingVisual"
231+
type={<>string | React.ComponentType</>}
232+
description="Visual positioned on the left edge inside the input"
233+
/>
234+
<PropsTableRow name="monospace" type="boolean" defaultValue="false" description="Shows input in monospace font" />
235+
<PropsTableRow
236+
name="trailingVisual"
237+
type={<>string | React.ComponentType</>}
238+
description="Visual positioned on the right edge inside the input"
239+
/>
240+
<PropsTableRow
241+
name="trailingAction"
242+
type="React.ReactElement<HTMLProps<HTMLButtonElement>>"
243+
description="A visual that renders inside the input after the typing area"
244+
/>
245+
<PropsTableRow
246+
name="validationStatus"
247+
type="'error' | 'success' | 'warning'"
248+
description="Style the input to match the status"
249+
/>
250+
<PropsTableRow
251+
name="variant"
252+
type="'small' | 'medium' | 'large'"
253+
description="(Use size) Creates a smaller or larger input than the default."
254+
deprecated
255+
/>
218256
<PropsTableRow
219257
name="width"
220258
type={
@@ -265,6 +303,29 @@ render(<WithIconAndLoadingIndicator />)
265303
/>
266304
</PropsTable>
267305

306+
### TextInput.Action
307+
308+
<PropsTable>
309+
<PropsTableRow
310+
name="aria-label"
311+
type="string"
312+
description="Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies."
313+
/>
314+
<PropsTableRow name="icon" type="React.FunctionComponent" description="The icon to render inside the button" />
315+
<PropsTableRow
316+
name="variant"
317+
type="'default' | 'primary' | 'invisible' | 'danger'"
318+
description="Determine's the styles on a button"
319+
/>
320+
<PropsTableBasePropRows
321+
elementType="button"
322+
refType="HTMLButtonElement"
323+
passthroughPropsLink={
324+
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">MDN</Link>
325+
}
326+
/>
327+
</PropsTable>
328+
268329
## Status
269330

270331
<ComponentChecklist

‎docs/content/TextInputWithTokens.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -419,8 +419,8 @@ render(<WithIconAndLoadingIndicator />)
419419
/>
420420
<PropsTableRow
421421
name="size"
422-
type="'small' | 'medium' | 'large' | 'extralarge'"
423-
defaultValue="extralarge"
422+
type="'small' | 'medium' | 'large' | 'xlarge'"
423+
defaultValue="xlarge"
424424
description="The size of the tokens and text input"
425425
/>
426426
<PropsTableRow

‎docs/content/Token.mdx‎

Lines changed: 36 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ All types of tokens may have the same interactive qualities as links or buttons.
5555
<Text fontSize={0} display="block" color="fg.subtle">
5656
With `leadingVisual` passed
5757
</Text>
58-
<Token text="Default Token" leadingVisual={() => <span>✨</span>} />
58+
<Token text="Default Token" leadingVisual={GitBranchIcon} />
5959
</div>
6060

6161
<div>
@@ -81,39 +81,37 @@ All types of tokens may have the same interactive qualities as links or buttons.
8181
gap: 2
8282
}}
8383
>
84-
<Token
85-
size="small"
86-
text="'small' Token"
87-
onRemove={() => {
88-
console.log('remove me')
89-
}}
90-
/>
91-
<Token
92-
size="medium"
93-
text="'medium' Token"
94-
onRemove={() => {
95-
console.log('remove me')
96-
}}
97-
/>
98-
<Token
99-
size="large"
100-
text="'large' Token (default)"
101-
onRemove={() => {
102-
console.log('remove me')
103-
}}
104-
/>
105-
<Token
106-
size="extralarge"
107-
text="'extralarge' Token"
108-
onRemove={() => {
109-
console.log('remove me')
110-
}}
111-
/>
84+
<Token size="small" text="'small' Token" />
85+
<Token size="medium" text="'medium' Token" />
86+
<Token size="large" text="'large' Token (default)" />
87+
<Token size="xlarge" text="'xlarge' Token" />
11288
</Box>
11389
</div>
11490
</Box>
11591
```
11692

93+
### With leadingVisual
94+
95+
<Note variant="warning">
96+
A <InlineCode>leadingVisual</InlineCode> should not be used with the <InlineCode>small</InlineCode> size option if
97+
you're rendering an icon from Octicons
98+
</Note>
99+
100+
```jsx live
101+
<Box
102+
display="flex"
103+
sx={{
104+
alignItems: 'start',
105+
flexDirection: 'column',
106+
gap: 6
107+
}}
108+
>
109+
<Token size="medium" text="'medium' Token" leadingVisual={GitBranchIcon} />
110+
<Token size="large" text="'large' Token (default)" leadingVisual={GitBranchIcon} />
111+
<Token size="xlarge" text="'xlarge' Token" leadingVisual={GitBranchIcon} />
112+
</Box>
113+
```
114+
117115
### Interactive tokens
118116

119117
If any token is interactive (it is a link or a button), it will become focusable, and react to being hovered or focused on.
@@ -267,8 +265,8 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component.
267265
/>
268266
<IssueLabelToken
269267
fillColor="#0366d6"
270-
size="extralarge"
271-
text="'extralarge' Token"
268+
size="xlarge"
269+
text="'xlarge' Token"
272270
onRemove={() => {
273271
console.log('remove me')
274272
}}
@@ -282,6 +280,11 @@ Tokens that represent Issue labels should use the `IssueLabelToken` component.
282280

283281
Tokens that represent GitHub users should use the `AvatarToken` component.
284282

283+
<Note variant="warning">
284+
This component should not be used with the <InlineCode>small</InlineCode> or <InlineCode>medium</InlineCode> size
285+
option
286+
</Note>
287+
285288
```jsx live
286289
<Box
287290
display="flex"
@@ -329,22 +332,6 @@ Tokens that represent GitHub users should use the `AvatarToken` component.
329332
gap: 2
330333
}}
331334
>
332-
<AvatarToken
333-
avatarSrc="https://avatars.githubusercontent.com/mperrotti"
334-
size="small"
335-
text="'small' Token"
336-
onRemove={() => {
337-
console.log('remove me')
338-
}}
339-
/>
340-
<AvatarToken
341-
avatarSrc="https://avatars.githubusercontent.com/mperrotti"
342-
size="medium"
343-
text="'medium' Token"
344-
onRemove={() => {
345-
console.log('remove me')
346-
}}
347-
/>
348335
<AvatarToken
349336
avatarSrc="https://avatars.githubusercontent.com/mperrotti"
350337
size="large"
@@ -355,8 +342,8 @@ Tokens that represent GitHub users should use the `AvatarToken` component.
355342
/>
356343
<AvatarToken
357344
avatarSrc="https://avatars.githubusercontent.com/mperrotti"
358-
size="extralarge"
359-
text="'extralarge' Token"
345+
size="xlarge"
346+
text="'xlarge' Token"
360347
onRemove={() => {
361348
console.log('remove me')
362349
}}

0 commit comments

Comments
 (0)