Skip to content

Commit a9dea8a

Browse files
devongovettdevongovett
authored
Docs updates for release (#3732)
1 parent 03594c8 commit a9dea8a

File tree

11 files changed

+95
-70
lines changed

11 files changed

+95
-70
lines changed

‎packages/@adobe/spectrum-css-temp/components/button/skin.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ governing permissions and limitations under the License.
173173

174174
&:disabled,
175175
&.is-disabled {
176+
background-color: transparent;
176177
border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-color-disabled));
177178
color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-text-color-disabled));
178179
}

‎packages/@react-aria/overlays/src/usePopover.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ export interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'on
4141
isNonModal?: boolean,
4242
/**
4343
* Whether pressing the escape key to close the popover should be disabled.
44+
*
45+
* Most popovers should not use this option. When set to true, an alternative
46+
* way to close the popover with a keyboard must be provided.
47+
*
4448
* @default false
4549
*/
4650
isKeyboardDismissDisabled?: boolean

‎packages/@react-spectrum/button/docs/Button.mdx

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ category: Buttons
4040
## Example
4141

4242
```tsx example
43-
<Button variant="cta">Save</Button>
43+
<Button variant="accent">Save</Button>
4444
```
4545

4646
## Content
@@ -90,86 +90,79 @@ function Example() {
9090

9191
## Visual options
9292

93-
### Call to action
94-
[View guidelines](https://spectrum.adobe.com/page/button/#Call-to-action-variant)
93+
### Accent
94+
[View guidelines](https://spectrum.adobe.com/page/button/#Accent-variant)
9595

9696
```tsx example
97-
<Button variant="cta">Save</Button>
97+
<Flex wrap gap="size-250">
98+
<Button variant="accent" style="fill">Save</Button>
99+
<Button variant="accent" style="outline">Save</Button>
100+
</Flex>
98101
```
99102

100103
### Primary
101104
[View guidelines](https://spectrum.adobe.com/page/button/#Primary-variant)
102105

103106
```tsx example
104-
<Button variant="primary">Save</Button>
105-
```
106-
107-
### Quiet primary
108-
[View guidelines](https://spectrum.adobe.com/page/button/#Quiet)
109-
110-
```tsx example
111-
<Button variant="primary" isQuiet>Save</Button>
107+
<Flex wrap gap="size-250">
108+
<Button variant="primary" style="fill">Save</Button>
109+
<Button variant="primary" style="outline">Save</Button>
110+
</Flex>
112111
```
113112

114113
### Secondary
115114
[View guidelines](https://spectrum.adobe.com/page/button/#Secondary-variant)
116115

117116
```tsx example
118-
<Button variant="secondary">Save</Button>
119-
```
120-
121-
### Quiet secondary
122-
[View guidelines](https://spectrum.adobe.com/page/button/#Quiet)
123-
124-
```tsx example
125-
<Button variant="secondary" isQuiet>Save</Button>
126-
```
127-
128-
### Over background
129-
[View guidelines](https://spectrum.adobe.com/page/button/#Over-background-variant)
130-
131-
```tsx example
132-
<View backgroundColor="positive" padding="size-300">
133-
<Button variant="overBackground">Save</Button>
134-
</View>
135-
```
136-
137-
### Quiet over background
138-
[View guidelines](https://spectrum.adobe.com/page/button/#Quiet)
139-
140-
```tsx example
141-
<View backgroundColor="positive" padding="size-300">
142-
<Button variant="overBackground" isQuiet>Save</Button>
143-
</View>
117+
<Flex wrap gap="size-250">
118+
<Button variant="secondary" style="fill">Save</Button>
119+
<Button variant="secondary" style="outline">Save</Button>
120+
</Flex>
144121
```
145122

146123
### Negative
147124
[View guidelines](https://spectrum.adobe.com/page/button/#Negative-variant)
148125

149126
```tsx example
150-
<Button variant="negative">Save</Button>
127+
<Flex wrap gap="size-250">
128+
<Button variant="negative" style="fill">Save</Button>
129+
<Button variant="negative" style="outline">Save</Button>
130+
</Flex>
151131
```
152132

153-
### Quiet negative
154-
[View guidelines](https://spectrum.adobe.com/page/button/#Quiet)
133+
### Static color
134+
[View guidelines](https://spectrum.adobe.com/page/button/#Static-color)
155135

156136
```tsx example
157-
<Button variant="negative" isQuiet>Save</Button>
137+
<Flex wrap gap="size-250">
138+
<View backgroundColor="static-seafoam-700" padding="size-500">
139+
<Flex wrap gap="size-200">
140+
<Button variant="primary" staticColor="white" style="fill">Save</Button>
141+
<Button variant="primary" staticColor="white" style="outline">Save</Button>
142+
</Flex>
143+
</View>
144+
<View backgroundColor="static-yellow-400" padding="size-500">
145+
<Flex wrap gap="size-200">
146+
<Button variant="primary" staticColor="black" style="fill">Save</Button>
147+
<Button variant="primary" staticColor="black" style="outline">Save</Button>
148+
</Flex>
149+
</View>
150+
</Flex>
158151
```
159152

160153
### Disabled
161154
[View guidelines](https://spectrum.adobe.com/page/button/#Disabled)
162155

163156
```tsx example
164-
<Button variant="cta" isDisabled>Save</Button>
157+
<Button variant="accent" isDisabled>Save</Button>
165158
```
166159

167160
### Icon only
168161
[View guidelines](https://spectrum.adobe.com/page/button/#Label-and-icon)
169162

170163
```tsx example
171164
<Flex direction="row" gap={8}>
172-
<Button variant="cta" aria-label="Ring for service"><Bell /></Button>
165+
<Button variant="accent" aria-label="Ring for service"><Bell /></Button>
173166
<Button variant="primary" aria-label="Ring for service"><Bell /></Button>
174167
<Button variant="secondary" aria-label="Ring for service"><Bell /></Button>
175168
</Flex>

‎packages/@react-spectrum/dialog/docs/Dialog.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import {Heading, Text} from '@react-spectrum/text';
6868
</Content>
6969
<ButtonGroup>
7070
<Button variant="secondary" onPress={close}>Cancel</Button>
71-
<Button variant="cta" onPress={close}>Confirm</Button>
71+
<Button variant="accent" onPress={close}>Confirm</Button>
7272
</ButtonGroup>
7373
</Dialog>
7474
)}
@@ -101,7 +101,7 @@ A typical Dialog with a title, contents, and action buttons can be created like
101101
<Content>Confirm publish?</Content>
102102
<ButtonGroup>
103103
<Button variant="secondary" onPress={close}>Cancel</Button>
104-
<Button variant="cta" onPress={close} autoFocus>Confirm</Button>
104+
<Button variant="accent" onPress={close} autoFocus>Confirm</Button>
105105
</ButtonGroup>
106106
</Dialog>
107107
)}
@@ -159,7 +159,7 @@ for the user to fill out or adding confirmation checkboxes.
159159
</Footer>
160160
<ButtonGroup>
161161
<Button variant="secondary" onPress={close}>Cancel</Button>
162-
<Button variant="cta" onPress={close}>Register</Button>
162+
<Button variant="accent" onPress={close}>Register</Button>
163163
</ButtonGroup>
164164
</Dialog>
165165
)}
@@ -179,7 +179,7 @@ The example below illustrates how a Dialog with a hero image could be rendered v
179179
<Content>Are you sure you want to upload this file?</Content>
180180
<ButtonGroup>
181181
<Button variant="secondary" onPress={close}>Cancel</Button>
182-
<Button variant="cta" onPress={close} autoFocus>Confirm</Button>
182+
<Button variant="accent" onPress={close} autoFocus>Confirm</Button>
183183
</ButtonGroup>
184184
</Dialog>
185185
)}
@@ -227,7 +227,7 @@ function Example() {
227227
<Divider />
228228
<ButtonGroup>
229229
<Button variant="secondary" onPress={() => alertCancel(close)}>Cancel</Button>
230-
<Button autoFocus variant="cta" onPress={() => alertSave(close)}>Save</Button>
230+
<Button autoFocus variant="accent" onPress={() => alertSave(close)}>Save</Button>
231231
</ButtonGroup>
232232
<Content>
233233
<Form>
@@ -346,7 +346,7 @@ respectively for container sizing considerations. Modal sizes on mobile devices
346346
<Divider />
347347
<ButtonGroup>
348348
<Button variant="secondary" onPress={close}>Cancel</Button>
349-
<Button autoFocus variant="cta" onPress={close}>Save</Button>
349+
<Button autoFocus variant="accent" onPress={close}>Save</Button>
350350
</ButtonGroup>
351351
<Content>
352352
<Form>
@@ -367,7 +367,7 @@ respectively for container sizing considerations. Modal sizes on mobile devices
367367
<Divider />
368368
<ButtonGroup>
369369
<Button variant="secondary" onPress={close}>Cancel</Button>
370-
<Button autoFocus variant="cta" onPress={close}>Save</Button>
370+
<Button autoFocus variant="accent" onPress={close}>Save</Button>
371371
</ButtonGroup>
372372
<Content>
373373
<Form>
@@ -388,7 +388,7 @@ respectively for container sizing considerations. Modal sizes on mobile devices
388388
<Divider />
389389
<ButtonGroup>
390390
<Button variant="secondary" onPress={close}>Cancel</Button>
391-
<Button autoFocus variant="cta" onPress={close}>Save</Button>
391+
<Button autoFocus variant="accent" onPress={close}>Save</Button>
392392
</ButtonGroup>
393393
<Content>
394394
<Form>

‎packages/@react-spectrum/dialog/docs/DialogContainer.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ function EditDialog() {
138138
</Content>
139139
<ButtonGroup>
140140
<Button variant="secondary" onPress={dialog.dismiss}>Cancel</Button>
141-
<Button variant="cta" onPress={dialog.dismiss}>Save</Button>
141+
<Button variant="accent" onPress={dialog.dismiss}>Save</Button>
142142
</ButtonGroup>
143143
</Dialog>
144144
);
@@ -226,7 +226,7 @@ function EditDialog() {
226226
</Content>
227227
<ButtonGroup>
228228
<Button variant="secondary" onPress={dialog.dismiss}>Cancel</Button>
229-
<Button variant="cta" onPress={dialog.dismiss}>Save</Button>
229+
<Button variant="accent" onPress={dialog.dismiss}>Save</Button>
230230
</ButtonGroup>
231231
</Dialog>
232232
);

‎packages/@react-spectrum/dialog/docs/DialogTrigger.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ The example below demonstrates how to pass the DialogTrigger's `close` function
8686
</Content>
8787
<ButtonGroup>
8888
<Button variant="secondary" onPress={close}>Cancel</Button>
89-
<Button variant="cta" onPress={close} autoFocus>Confirm</Button>
89+
<Button variant="accent" onPress={close} autoFocus>Confirm</Button>
9090
</ButtonGroup>
9191
</Dialog>
9292
)}
@@ -120,7 +120,7 @@ laid out by W3C.
120120
</Content>
121121
<ButtonGroup>
122122
<Button variant="secondary" onPress={close}>Cancel</Button>
123-
<Button variant="cta" onPress={close} autoFocus>Confirm</Button>
123+
<Button variant="accent" onPress={close} autoFocus>Confirm</Button>
124124
</ButtonGroup>
125125
</Dialog>
126126
)}
@@ -189,7 +189,7 @@ do not fit in the available Modal Dialog sizes. This variant does not support
189189
</Content>
190190
<ButtonGroup>
191191
<Button variant="secondary" onPress={close}>Cancel</Button>
192-
<Button variant="cta" onPress={close} autoFocus>Buy</Button>
192+
<Button variant="accent" onPress={close} autoFocus>Buy</Button>
193193
</ButtonGroup>
194194
</Dialog>
195195
)}
@@ -217,7 +217,7 @@ Dialog covers the entire screen.
217217
</Content>
218218
<ButtonGroup>
219219
<Button variant="secondary" onPress={close}>Cancel</Button>
220-
<Button variant="cta" onPress={close} autoFocus>Confirm</Button>
220+
<Button variant="accent" onPress={close} autoFocus>Confirm</Button>
221221
</ButtonGroup>
222222
</Dialog>
223223
)}

‎packages/@react-spectrum/provider/docs/Provider.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import {Button} from '@react-spectrum/button';
4040
function App() {
4141
return (
4242
<Provider theme={theme}>
43-
<Button variant="cta">
43+
<Button variant="accent">
4444
Hello React Spectrum!
4545
</Button>
4646
</Provider>
@@ -138,7 +138,7 @@ function Register() {
138138
<Item key="indigo">Indigo</Item>
139139
<Item key="chartreuse">Chartreuse</Item>
140140
</Picker>
141-
<Button variant="primary" isQuiet={false}>Submit</Button>
141+
<Button variant="primary">Submit</Button>
142142
</Provider>
143143
</Provider>
144144
</Flex>

‎packages/dev/docs/pages/react-spectrum/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function App() {
6161
return (
6262
<Provider theme={theme}>
6363
<Button
64-
variant="cta"
64+
variant="accent"
6565
onPress={() => alert('Hey there!')}>
6666
Hello React Spectrum!
6767
</Button>

‎packages/dev/docs/pages/react-spectrum/styling.mdx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,26 +174,42 @@ All of the properties supported by `View` are listed below. All style properties
174174

175175
Style props that accept colors, such as backgrounds and borders, only accept Spectrum defined color values.
176176
In addition to ensuring consistency across products, Spectrum colors automatically adapt to color
177-
scheme changes, e.g. dark mode.
177+
scheme changes, e.g. dark mode. Learn more about color on the [Spectrum website](https://spectrum.adobe.com/page/color-fundamentals/).
178+
179+
There are two versions of Spectrum colors available: v5, and v6. v6 offers an expanded color palette, and we
180+
recommend using it for new projects. However, v5 is still the default for backward compatibility. You can use v6 colors in custom
181+
components by setting the `colorVersion` prop on the [View](View.html) component to `6`. This controls the accepted values of other
182+
style props on the View, such as background and border colors. A color [migration guide](https://spectrum.adobe.com/static/misc/Colors_v6.0_Migration-Guide.xd)
183+
is also available on the Spectrum website to help you upgrade from v5 to v6.
178184

179185
The list of Spectrum color values is visualized below. Use the picker to see how they change between the
180186
light and dark color schemes.
181187

182188
```tsx import
183189
function ColorViewer() {
184190
let [selectedKey, setSelectedKey] = useState();
191+
let [colorVersion, setColorVersion] = useState('5');
192+
let colors = colorVersion === '6'
193+
? dnaDocs.exports.ColorValueV6.id
194+
: dnaDocs.exports.ColorValue.id;
185195

186196
return (
187197
<Example colorScheme={selectedKey}>
188-
<Picker label="Color Scheme" selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
189-
<Item key="light">Light</Item>
190-
<Item key="dark">Dark</Item>
191-
</Picker>
198+
<Flex gap="size-100">
199+
<Picker label="Color Scheme" selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
200+
<Item key="light">Light</Item>
201+
<Item key="dark">Dark</Item>
202+
</Picker>
203+
<Picker label="Color Version" selectedKey={colorVersion} onSelectionChange={setColorVersion}>
204+
<Item key="5">v5 (default)</Item>
205+
<Item key="6">v6</Item>
206+
</Picker>
207+
</Flex>
192208
<ul style={{columnWidth: 160, listStyle: 'none', padding: 0}}>
193-
{dnaDocs.links[dnaDocs.exports.ColorValue.id].value.elements.filter(v => v.value && !v.value.startsWith('static')).map(v =>
209+
{dnaDocs.links[colors].value.elements.filter(v => v.value && !v.value.startsWith('static')).map(v =>
194210
<li key={v.value}>
195211
<Flex alignItems="center" marginBottom="size-25">
196-
<View backgroundColor={v.value} width="size-250" height="size-250" marginEnd="size-100" flexShrink={0} />
212+
<View colorVersion={+colorVersion} backgroundColor={v.value} width="size-250" height="size-250" marginEnd="size-100" flexShrink={0} />
197213
{v.value}
198214
</Flex>
199215
</li>

‎packages/dev/docs/src/template.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ keywords: []
3737
## Example
3838

3939
```tsx example
40-
<Button variant="cta">Button</Button>
40+
<Button variant="accent">Button</Button>
4141
```
4242

4343
## Content

0 commit comments

Comments
 (0)