Skip to content

Commit 9a8edd6

Browse files
snowystingersnowystinger
committed
Merge branch 'main' into tabs-collapse
# Conflicts: # packages/@react-spectrum/s2/stories/Tabs.stories.tsx
2 parents 3bf7349 + 65e3a52 commit 9a8edd6

File tree

2,870 files changed

+62254
-12308
lines changed

Some content is hidden

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

2,870 files changed

+62254
-12308
lines changed

‎.storybook-s2/docs/Icons.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {highlight} from './highlight' with {type: 'macro'};
66

77
export function Icons() {
88
return (
9-
<div className={style({maxWidth: 'lg', marginX: 'auto'})}>
9+
<div className={style({marginX: 'auto'})}>
1010
<div className={style({marginX: 48})}>
1111
<h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
1212
Workflow icons
@@ -17,7 +17,7 @@ export function Icons() {
1717
<div className={style({display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 48})}>
1818
{Object.keys(icons).map(icon => {
1919
let Icon = icons[icon].default;
20-
let name = icon.replace(/^S2_Icon_(.*?)_2.*/, '$1');
20+
let name = icon.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1');
2121
let importName = name.replace(/^(\d)/, '_$1');
2222
return (
2323
<ActionButton

‎.storybook-s2/docs/Illustrations.jsx

+7-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
2-
import gradientIllustrations from 'illustration:@react-spectrum/s2/spectrum-illustrations/gradient/*.svg';
2+
import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx';
33
import Paste from '@react-spectrum/s2/s2wf-icons/S2_Icon_Paste_20_N.svg';
44
import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
55
import {ActionButton, Text} from '@react-spectrum/s2';
@@ -11,7 +11,7 @@ import { useState } from 'react';
1111
export function Illustrations() {
1212
let [gradientStyle, setStyle] = useState('generic1');
1313
return (
14-
<div className={style({maxWidth: 'lg', marginX: 'auto'})}>
14+
<div className={style({marginX: 'auto'})}>
1515
<div className={style({marginX: 48})}>
1616
<h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
1717
Illustrations
@@ -25,25 +25,18 @@ export function Illustrations() {
2525
<Radio value="generic2">Generic 2</Radio>
2626
</RadioGroup>
2727
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(auto-fit, 164px)', gap: 20, justifyContent: 'space-between', marginTop: 32})}>
28-
{Object.keys(gradientIllustrations).filter(name => name.includes(gradientStyle)).map(icon => {
29-
let Illustration = gradientIllustrations[icon].default;
30-
let name = icon.replace(/^S2_(fill|lin)_(.+)_(generic\d)_(\d+)$/, (m, type, name) => {
31-
return name[0].toUpperCase() + name.slice(1).replace(/_/g, '');
32-
});
33-
let importPath = icon.replace(/^S2_(fill|lin)_(.+)_(generic\d)_(\d+)$/, (m, type, name, style) => {
34-
name = name[0].toUpperCase() + name.slice(1).replace(/_/g, '');
35-
return 'gradient/' + style + '/' + name;
36-
});
28+
{Object.keys(gradientIllustrations[gradientStyle]).map(icon => {
29+
let Illustration = gradientIllustrations[gradientStyle][icon].default;
3730
return (
3831
<div key={icon} className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center', padding: 16, borderRadius: 'lg', boxShadow: 'elevated', backgroundColor: 'layer-2'})}>
39-
<Illustration UNSAFE_style={{width: 96, height: 96}} />
32+
<Illustration />
4033
<span className={style({font: 'ui', display: 'flex', gap: 8, alignItems: 'center', maxWidth: 'full'})}>
41-
<span className={style({truncate: true})}>{name}</span>
34+
<span className={style({truncate: true})}>{icon}</span>
4235
<ActionButton
4336
size="XS"
4437
isQuiet
4538
aria-label="Copy"
46-
onPress={() => navigator.clipboard.writeText(`import ${name} from '@react-spectrum/s2/illustrations/${importPath}';`)}>
39+
onPress={() => navigator.clipboard.writeText(`import ${name} from '@react-spectrum/s2/illustrations/${gradientStyle}/${icon}';`)}>
4740
<Paste />
4841
</ActionButton>
4942
</span>

‎.storybook-s2/docs/Intro.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
1313

1414
export function Docs() {
1515
return (
16-
<div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48})}>
16+
<div className={style({marginX: 'auto', marginY: 48})}>
1717
<header
1818
style={{
1919
backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,

‎.storybook-s2/docs/MDXLayout.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const mdxComponents = {
1919

2020
export function MDXLayout({children}) {
2121
return (
22-
<div className={style({maxWidth: 'lg', marginX: 'auto'})}>
22+
<div className={style({marginX: 'auto'})}>
2323
<main className={style({marginX: 48})}>
2424
<MDXProvider components={mdxComponents}>
2525
{children}

‎.storybook-s2/docs/Migrating.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {P, Code, Pre, H3, H2, Link} from './typography';
33

44
export function Migrating() {
55
return (
6-
<div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans'})}>
6+
<div className={style({marginX: 'auto', fontFamily: 'sans'})}>
77
<div className={style({marginX: 48})}>
88
<h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
99
Migrating to Spectrum 2
@@ -34,6 +34,16 @@ export function Migrating() {
3434
<li className={style({font: 'body', marginY: 8})}>Update <Link href="https://react-spectrum.adobe.com/react-spectrum/styling.html#style-props">style props</Link> to use the <Link href="?path=/docs/style-macro--docs">style macro</Link> instead. See the 'Style props' section below</li>
3535
</ul>
3636

37+
<H3>Accordion</H3>
38+
<ul className="sb-unstyled">
39+
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be <Code>Disclosure</Code>. <Code>Disclosure</Code> should now consist of two children: <Code>DisclosureTitle</Code> and <Code>DisclosurePanel</Code>. Note that you can now add interactive elements inside the header and adjacent to the title by using the <Code>DisclosureHeader</Code> component with the <Code>DisclosureTitle</Code> and interactive elements inside.</li>
40+
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code>'s title prop to be a child of <Code>DisclosureTitle</Code></li>
41+
<li className={style({font: 'body', marginY: 8})}>Update children of <Code>Item</Code> to be children of <Code>DisclosurePanel</Code></li>
42+
<li className={style({font: 'body', marginY: 8})}>Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
43+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>disabledKeys</Code> and add <Code>isDisabled</Code> to individual <Code>Disclosure</Code> components</li>
44+
<li className={style({font: 'body', marginY: 8})}>Add <Code>allowsMultipleExpanded</Code> to allow multiple <Code>Disclosure</Code> components to be expanded at once (previously default behavior)</li>
45+
</ul>
46+
3747
<H3>ActionButton</H3>
3848
<P>No updates needed.</P>
3949

‎.storybook-s2/docs/StyleMacro.jsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {Colors} from './Colors';
66

77
export function StyleMacro() {
88
return (
9-
<div className={style({maxWidth: 'lg', marginX: 'auto'})}>
9+
<div className={style({marginX: 'auto'})}>
1010
<header
1111
className={style({
1212
paddingX: 48,
@@ -37,9 +37,17 @@ export function StyleMacro() {
3737
<H3>Colors</H3>
3838
<P>The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.</P>
3939
<Colors />
40-
<H3>Spacing and sizing</H3>
41-
<P>Spacing properties such as <Code>margin</Code> and <Code>padding</Code>, and sizing properties such as <Code>width</Code> and <Code>height</Code> support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent.</P>
42-
<P>Internally, spacing and sizing values are converted from pixels to rems, which scale according to the user’s font size preference. In addition, sizing values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets. Spacing values do not scale and remain fixed.</P>
40+
<H3>Spacing</H3>
41+
<P>Spacing properties such as <Code>margin</Code> and <Code>padding</Code> support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent. Spacing values are automatically converted to rems, which scale according to the user’s font size preference.</P>
42+
<P>In addition to numeric values, the following spacing options are available:</P>
43+
<ul className="sb-unstyled">
44+
<li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>text-to-control</Code> – The default horizontal spacing between text and a UI control, for example between a label and input. This value automatically adjusts based on the font size.</li>
45+
<li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>text-to-visual</Code> – The default horizontal spacing between text and a visual element, such as an icon. This value automatically adjusts based on the font size.</li>
46+
<li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>edge-to-text</Code> – The default horizontal spacing between the edge of a UI control and text within it. This value is calculated relative to the height of the control.</li>
47+
<li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>pill</Code> – The default horizontal spacing between the edge of a pill-shaped UI control (e.g. a fully rounded button) and text within it. This value is calculated relative to the height of the control.</li>
48+
</ul>
49+
<H3>Sizing</H3>
50+
<P>Sizing properties such as <Code>width</Code> and <Code>height</Code> accept arbitrary pixel values. Internally, sizes are converted to rems, which scale according to the user’s font size preference. Additionally, size values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets.</P>
4351
<H3>Typography</H3>
4452
<P>Spectrum 2 does not include specific components for typography. Instead, you can use the style macro to apply Spectrum typography to any HTML element or component.</P>
4553
<P>The <Code>font</Code> shorthand applies default values for the <Code>fontFamily</Code>, <Code>fontSize</Code>, <Code>fontWeight</Code>, <Code>lineHeight</Code>, and <Code>color</Code> properties, following Spectrum design pairings. These individual properties can also be set to override the default set by the shorthand.</P>

‎eslint.config.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export default [{
5353
"examples/**/*",
5454
"starters/**/*",
5555
"packages/@react-spectrum/s2/icon.d.ts",
56+
"packages/@react-spectrum/s2/spectrum-illustrations"
5657
],
5758
}, ...compat.extends("eslint:recommended"), {
5859
plugins: {

‎examples/rac-spectrum-tailwind/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@react-spectrum/provider": "^3.9.7",
1313
"@spectrum-icons/illustrations": "^3.6.3",
1414
"@spectrum-icons/workflow": "^4.2.12",
15-
"parcel": "2.0.0-dev.1599",
15+
"parcel": "^2.13.0",
1616
"postcss": "^8.2.1",
1717
"react": "^18.2.0",
1818
"react-aria-components": "^1.0.0-alpha.4",

‎examples/rac-tailwind/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"@heroicons/react": "^2.0.16",
1212
"@react-aria/parcel-resolver-optimize-locales": "^1.0.0",
1313
"framer-motion": "^10.12.16",
14-
"parcel": "2.0.0-dev.1599",
14+
"parcel": "^2.13.0",
1515
"postcss": "^8.4.21",
1616
"react": "^18.2.0",
1717
"react-aria-components": "^1.0.0-alpha.4",

‎examples/rsp-cra-18/src/sections/NavigationExamples.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Flex, Divider, Breadcrumbs, Item, Link, Tabs, TabList, TabPanels} from '@adobe/react-spectrum';
1+
import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel, Flex, Divider, Breadcrumbs, Item, Link, Tabs, TabList, TabPanels} from '@adobe/react-spectrum';
22

33
export default function NavigationExamples() {
44
return (
@@ -35,25 +35,25 @@ export default function NavigationExamples() {
3535
<h3>Accordion</h3>
3636
<Accordion maxWidth="size-3600">
3737
<Disclosure id="files">
38-
<DisclosureHeader>
38+
<DisclosureTitle>
3939
Files
40-
</DisclosureHeader>
40+
</DisclosureTitle>
4141
<DisclosurePanel>
4242
<p>Files content</p>
4343
</DisclosurePanel>
4444
</Disclosure>
4545
<Disclosure id="people">
46-
<DisclosureHeader>
46+
<DisclosureTitle>
4747
People
48-
</DisclosureHeader>
48+
</DisclosureTitle>
4949
<DisclosurePanel>
5050
<p>People content</p>
5151
</DisclosurePanel>
5252
</Disclosure>
5353
</Accordion>
5454
<h3>Disclosure</h3>
5555
<Disclosure>
56-
<DisclosureHeader>System Requirements</DisclosureHeader>
56+
<DisclosureTitle>System Requirements</DisclosureTitle>
5757
<DisclosurePanel>
5858
<p>Details about system requirements here.</p>
5959
</DisclosurePanel>

‎examples/rsp-next-ts-17/components/ReorderableListView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function ReorderableListView() {
2222
// Setup the drag types and associated info for each dragged item.
2323
return {
2424
"custom-app-type-reorder": JSON.stringify(item),
25-
"text/plain": item.name,
25+
"text/plain": item?.name ?? '',
2626
};
2727
});
2828
},

‎examples/rsp-next-ts-17/pages/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import {
8080
ColorSwatch,
8181
Accordion,
8282
Disclosure,
83-
DisclosureHeader,
83+
DisclosureTitle,
8484
DisclosurePanel
8585
} from "@adobe/react-spectrum";
8686
import Edit from "@spectrum-icons/workflow/Edit";
@@ -316,17 +316,17 @@ export default function Home() {
316316
<h3>Accordion</h3>
317317
<Accordion>
318318
<Disclosure id="files">
319-
<DisclosureHeader>
319+
<DisclosureTitle>
320320
Files
321-
</DisclosureHeader>
321+
</DisclosureTitle>
322322
<DisclosurePanel>
323323
<p>Files content</p>
324324
</DisclosurePanel>
325325
</Disclosure>
326326
<Disclosure id="people">
327-
<DisclosureHeader>
327+
<DisclosureTitle>
328328
People
329-
</DisclosureHeader>
329+
</DisclosureTitle>
330330
<DisclosurePanel>
331331
<p>People content</p>
332332
</DisclosurePanel>
@@ -335,7 +335,7 @@ export default function Home() {
335335

336336
<h3>Disclosure</h3>
337337
<Disclosure>
338-
<DisclosureHeader>System Requirements</DisclosureHeader>
338+
<DisclosureTitle>System Requirements</DisclosureTitle>
339339
<DisclosurePanel>
340340
<p>Details about system requirements here.</p>
341341
</DisclosurePanel>

‎examples/rsp-next-ts/components/ReorderableListView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function ReorderableListView() {
2222
// Setup the drag types and associated info for each dragged item.
2323
return {
2424
"custom-app-type-reorder": JSON.stringify(item),
25-
"text/plain": item.name,
25+
"text/plain": item?.name ?? '',
2626
};
2727
});
2828
},

‎examples/rsp-next-ts/pages/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import {
8080
ColorSwatch,
8181
Accordion,
8282
Disclosure,
83-
DisclosureHeader,
83+
DisclosureTitle,
8484
DisclosurePanel
8585
} from "@adobe/react-spectrum";
8686
import Edit from "@spectrum-icons/workflow/Edit";
@@ -324,17 +324,17 @@ export default function Home() {
324324
<h3>Accordion</h3>
325325
<Accordion>
326326
<Disclosure id="files">
327-
<DisclosureHeader>
327+
<DisclosureTitle>
328328
Files
329-
</DisclosureHeader>
329+
</DisclosureTitle>
330330
<DisclosurePanel>
331331
<p>Files content</p>
332332
</DisclosurePanel>
333333
</Disclosure>
334334
<Disclosure id="people">
335-
<DisclosureHeader>
335+
<DisclosureTitle>
336336
People
337-
</DisclosureHeader>
337+
</DisclosureTitle>
338338
<DisclosurePanel>
339339
<p>People content</p>
340340
</DisclosurePanel>
@@ -343,7 +343,7 @@ export default function Home() {
343343

344344
<h3>Disclosure</h3>
345345
<Disclosure>
346-
<DisclosureHeader>System Requirements</DisclosureHeader>
346+
<DisclosureTitle>System Requirements</DisclosureTitle>
347347
<DisclosurePanel>
348348
<p>Details about system requirements here.</p>
349349
</DisclosurePanel>

‎examples/s2-parcel-example/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"packageManager": "[email protected]",
33
"devDependencies": {
4-
"parcel": "^2.12.0",
4+
"parcel": "^2.13.0",
55
"process": "^0.11.10"
66
},
77
"dependencies": {

‎examples/s2-parcel-example/src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ function App() {
124124
{item => <PickerItem id={item.id}>{item.label}</PickerItem>}
125125
</Picker>
126126
<CardViewExample {...cardViewState} />
127-
<Divider styles={style({maxWidth: 320, width: '100%', marginX: 'auto'})} />
127+
<Divider styles={style({maxWidth: 320, width: 'full', marginX: 'auto'})} />
128128
<CollectionCardsExample loadingState={cardViewState.loadingState} />
129129
<MenuTrigger>
130130
<ActionButton>Menu</ActionButton>

‎examples/s2-parcel-example/src/Lazy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default function Lazy() {
165165
The missing link.
166166
</Link>
167167
<Link href="/foo">Foo</Link>
168-
<SegmentedControl aria-label="Time granularity" styles={style({width: 384})}>
168+
<SegmentedControl aria-label="Time granularity" styles={style({width: 384})} isJustified>
169169
<SegmentedControlItem id="day">Day</SegmentedControlItem>
170170
<SegmentedControlItem id="week">Week</SegmentedControlItem>
171171
<SegmentedControlItem id="month">Month</SegmentedControlItem>

‎examples/s2-webpack-5-example/src/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ function App() {
124124
{item => <PickerItem id={item.id}>{item.label}</PickerItem>}
125125
</Picker>
126126
<CardViewExample {...cardViewState} />
127-
<Divider styles={style({maxWidth: 320, width: '100%', marginX: 'auto'})} />
127+
<Divider styles={style({maxWidth: 320, width: 'full', marginX: 'auto'})} />
128128
<CollectionCardsExample loadingState={cardViewState.loadingState} />
129129
<MenuTrigger>
130130
<ActionButton>Menu</ActionButton>

‎examples/s2-webpack-5-example/src/Lazy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default function Lazy() {
165165
The missing link.
166166
</Link>
167167
<Link href="/foo">Foo</Link>
168-
<SegmentedControl aria-label="Time granularity" styles={style({width: 384})}>
168+
<SegmentedControl aria-label="Time granularity" styles={style({width: 384})} isJustified>
169169
<SegmentedControlItem id="day">Day</SegmentedControlItem>
170170
<SegmentedControlItem id="week">Week</SegmentedControlItem>
171171
<SegmentedControlItem id="month">Month</SegmentedControlItem>

0 commit comments

Comments
 (0)