Skip to content

Commit 7e40af7

Browse files
yihuiliaoyihuiliao
committed
Merge branch 'main' into rtl-blog
2 parents 0ae0631 + 77b3442 commit 7e40af7

File tree

600 files changed

+18143
-11656
lines changed

Some content is hidden

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

600 files changed

+18143
-11656
lines changed

‎.circleci/config.yml

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,25 @@ parameters:
1313
type: string
1414
default: ""
1515

16-
orbs:
17-
azure-cli: circleci/azure-cli@1.2.0
18-
1916
executors:
2017
rsp:
2118
docker:
22-
- image: cimg/node:18.20.3
19+
- image: cimg/node:22.13.1
2320
environment:
2421
CACHE_VERSION: v1
2522
working_directory: ~/react-spectrum
2623

2724
rsp-large:
2825
docker:
29-
- image: cimg/node:18.20.3
26+
- image: cimg/node:22.13.1
3027
resource_class: large
3128
environment:
3229
CACHE_VERSION: v1
3330
working_directory: ~/react-spectrum
3431

3532
rsp-xlarge:
3633
docker:
37-
- image: cimg/node:18.20.3
34+
- image: cimg/node:22.13.1
3835
resource_class: xlarge
3936
environment:
4037
CACHE_VERSION: v1
@@ -786,7 +783,6 @@ jobs:
786783
command: make publish-nightly
787784

788785
workflows:
789-
version: 2
790786
commit:
791787
jobs:
792788
- install

‎.github/actions/branch/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: 'Branch from fork'
22
description: 'creates a branch based off PR from fork'
33
runs:
4-
using: 'node18'
4+
using: 'node22'
55
main: 'index.js'

‎.github/actions/comment/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: 'PR Comment'
22
description: 'Comment on the PR attached to a commit'
33
runs:
4-
using: 'node12'
4+
using: 'node22'
55
main: 'index.js'

‎.github/actions/permissions/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: 'Check permissions'
22
description: 'Checks if commentor has write access or above'
33
runs:
4-
using: 'node18'
4+
using: 'node22'
55
main: 'index.js'

‎.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
18.*
1+
22

‎.storybook-s2/docs/Colors.jsx

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function Colors() {
99
<Disclosure isQuiet>
1010
<DisclosureTitle>Background colors</DisclosureTitle>
1111
<DisclosurePanel>
12-
<P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible. Some background colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
12+
<P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.</P>
1313
<div className="sb-unstyled" style={{columnWidth: 120}}>
1414
<Color name="base" className={colorSwatch('base')} />
1515
<Color name="layer-1" className={colorSwatch('layer-1')} />
@@ -74,7 +74,7 @@ export function Colors() {
7474
<Disclosure isQuiet>
7575
<DisclosureTitle>Text colors</DisclosureTitle>
7676
<DisclosurePanel>
77-
<P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible. Some text colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
77+
<P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.</P>
7878
<div className="sb-unstyled" style={{columnWidth: 120}}>
7979
<Color name="accent" className={colorSwatch('accent', 'color')} />
8080
<Color name="neutral" className={colorSwatch('neutral', 'color')} />
@@ -147,3 +147,36 @@ function Color({name, className}) {
147147
</div>
148148
);
149149
}
150+
151+
export function IconColors() {
152+
return (
153+
<div className="sb-unstyled" style={{columnWidth: 100}}>
154+
<Color name="white" className={colorSwatch('white', 'fill')} />
155+
<Color name="black" className={colorSwatch('black', 'fill')} />
156+
<Color name="accent" className={colorSwatch('accent', 'fill')} />
157+
<Color name="neutral" className={colorSwatch('neutral', 'fill')} />
158+
<Color name="negative" className={colorSwatch('negative', 'fill')} />
159+
<Color name="informative" className={colorSwatch('informative', 'fill')} />
160+
<Color name="positive" className={colorSwatch('positive', 'fill')} />
161+
<Color name="notice" className={colorSwatch('notice', 'fill')} />
162+
<Color name="gray" className={colorSwatch('gray', 'fill')} />
163+
<Color name="red" className={colorSwatch('red', 'fill')} />
164+
<Color name="orange" className={colorSwatch('orange', 'fill')} />
165+
<Color name="yellow" className={colorSwatch('yellow', 'fill')} />
166+
<Color name="chartreuse" className={colorSwatch('chartreuse', 'fill')} />
167+
<Color name="celery" className={colorSwatch('celery', 'fill')} />
168+
<Color name="seafoam" className={colorSwatch('seafoam', 'fill')} />
169+
<Color name="cyan" className={colorSwatch('cyan', 'fill')} />
170+
<Color name="blue" className={colorSwatch('blue', 'fill')} />
171+
<Color name="indigo" className={colorSwatch('indigo', 'fill')} />
172+
<Color name="purple" className={colorSwatch('purple', 'fill')} />
173+
<Color name="fuchsia" className={colorSwatch('fuchsia', 'fill')} />
174+
<Color name="magenta" className={colorSwatch('magenta', 'fill')} />
175+
<Color name="pink" className={colorSwatch('pink', 'fill')} />
176+
<Color name="turquoise" className={colorSwatch('turquoise', 'fill')} />
177+
<Color name="cinnamon" className={colorSwatch('cinnamon', 'fill')} />
178+
<Color name="brown" className={colorSwatch('brown', 'fill')} />
179+
<Color name="silver" className={colorSwatch('silver', 'fill')} />
180+
</div>
181+
)
182+
}

‎.storybook-s2/docs/Icons.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' w
33
import {ActionButton, Text} from '@react-spectrum/s2';
44
import {H2, H3, P, Code, Pre, Link} from './typography';
55
import {highlight} from './highlight' with {type: 'macro'};
6+
import {IconColors} from './Colors';
7+
import CheckmarkCircle from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
8+
import {iconStyle} from '../../packages/@react-spectrum/s2/style' with {type: 'macro'};
69

710
export function Icons() {
811
return (
@@ -29,6 +32,37 @@ export function Icons() {
2932
);
3033
})}
3134
</div>
35+
<H2>Styling</H2>
36+
<P>The <Code>iconStyle</Code> macro can be used to set the size and color of a workflow icon. Icons support five t-shirt sizes, and a subset of the Spectrum colors. <Link href="?path=/docs/intro--docs#supported-css-properties-on-spectrum-components">Other style properties</Link> available across components are also supported on icons.</P>
37+
<Pre>{highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
38+
import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
39+
40+
<CheckmarkCircle styles={iconStyle({size: 'L', color: 'positive'})} />`)}</Pre>
41+
<H3>Icon colors</H3>
42+
<IconColors />
43+
<H3>Icon sizes</H3>
44+
<div className={style({display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'end'})}>
45+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
46+
<CheckmarkCircle styles={iconStyle({size: 'XS'})} />
47+
<span className={style({font: 'ui-sm'})}>XS (14px)</span>
48+
</div>
49+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
50+
<CheckmarkCircle styles={iconStyle({size: 'S'})} />
51+
<span className={style({font: 'ui-sm'})}>S (16px)</span>
52+
</div>
53+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
54+
<CheckmarkCircle styles={iconStyle({size: 'M'})} />
55+
<span className={style({font: 'ui-sm', fontWeight: 'bold'})}>M (20px)</span>
56+
</div>
57+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
58+
<CheckmarkCircle styles={iconStyle({size: 'L'})} />
59+
<span className={style({font: 'ui-sm'})}>L (22px)</span>
60+
</div>
61+
<div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4})}>
62+
<CheckmarkCircle styles={iconStyle({size: 'XL'})} />
63+
<span className={style({font: 'ui-sm'})}>XL (26px)</span>
64+
</div>
65+
</div>
3266
<H2>Custom icons</H2>
3367
<P>To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.</P>
3468
<H3>Parcel</H3>

‎.storybook-s2/docs/Intro.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ import {ActionButton} from '@react-spectrum/s2';
193193
<Content>See the <Link href="?path=/docs/style-macro--docs" variant="secondary" target="_top">full docs</Link> to learn about using the style macro to build custom components.</Content>
194194
</InlineAlert>
195195
<H3>Supported CSS properties on Spectrum components</H3>
196-
<ul className={'sb-unstyled' + style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', columns: 3, padding: 0, listStyleType: 'none'})}>
196+
<ul className={'sb-unstyled' + style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', padding: 0, listStyleType: 'none'})} style={{columns: 3}}>
197197
<li><Code>margin</Code></li>
198198
<li><Code>marginStart</Code></li>
199199
<li><Code>marginEnd</Code></li>

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ export function Migrating() {
106106
<li className={style({font: 'body', marginY: 8})}>Change <Code>variant="cta"</Code> to <Code>variant="accent"</Code></li>
107107
<li className={style({font: 'body', marginY: 8})}>Change <Code>variant="overBackground"</Code> to <Code>variant="primary" staticColor="white"</Code></li>
108108
<li className={style({font: 'body', marginY: 8})}>Change <Code>style</Code> to <Code>fillStyle</Code></li>
109-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>isPending</Code> (it has not been implemented yet)</li>
110109
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
111110
<li className={style({font: 'body', marginY: 8})}>If <Code>href</Code> is present, the <Code>Button</Code> should be converted to a <Code>LinkButton</Code></li>
112111
<li className={style({font: 'body', marginY: 8})}>Remove <Code>elementType</Code> (it is no longer supported in Spectrum 2)</li>
@@ -153,11 +152,9 @@ export function Migrating() {
153152
<ul className="sb-unstyled">
154153
<li className={style({font: 'body', marginY: 8})}>Change <Code>menuWidth</Code> value from a <Code>DimensionValue</Code> to a pixel value</li>
155154
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
156-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>loadingState</Code> (it has not been implemented yet)</li>
157155
<li className={style({font: 'body', marginY: 8})}>Remove <Code>placeholder</Code> (it is no longer supported in Spectrum 2)</li>
158156
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
159157
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
160-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>onLoadMore</Code> (it has not been implemented yet)</li>
161158
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
162159
</ul>
163160

@@ -279,9 +276,8 @@ export function Migrating() {
279276
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
280277
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
281278
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
282-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>isLoading</Code> (it has not been implemented yet)</li>
283-
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>onLoadMore</Code> (it has not been implemented yet)</li>
284279
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
280+
<li className={style({font: 'body', marginY: 8})}>Change <Code>isLoading</Code> to <Code>loadingState</Code> and provide the appropriate loading state.</li>
285281
</ul>
286282

287283
<H3>ProgressBar</H3>
@@ -354,6 +350,7 @@ export function Migrating() {
354350
<li className={style({font: 'body', marginY: 8})}>For <Code>Column</Code> and <Code>Row</Code>: Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
355351
<li className={style({font: 'body', marginY: 8})}>For dynamic tables, pass a <Code>columns</Code> prop into <Code>Row</Code></li>
356352
<li className={style({font: 'body', marginY: 8})}>For <Code>Row</Code>: Update dynamic render function to pass in <Code>column</Code> instead of <Code>columnKey</Code></li>
353+
<li className={style({font: 'body', marginY: 8})}>Move <Code>loadingState</Code> and <Code>onLoadMore</Code> from <Code>TableBody</Code> to <Code>TableView</Code></li>
357354
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_allowsExpandableRows</Code> (it has not been implemented yet)</li>
358355
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_onExpandedChange</Code> (it has not been implemented yet)</li>
359356
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_expandedKeys</Code> (it has not been implemented yet)</li>

‎.storybook-s2/docs/Release Notes.mdx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,42 @@ export default MDXLayout;
44

55
# Release Notes
66

7+
## v0.9.0
8+
9+
### Updates
10+
11+
* [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
12+
* [Dialog](?path=/docs/dialog--docs): Update sizes
13+
* [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
14+
* [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
15+
* [TableView](?path=/docs/tableview--docs): Support custom menus in columns
16+
* Apply `position: relative` to Radio and Checkbox to prevent layout jumps
17+
18+
### UNSAFE_className Typescript Error
19+
20+
Style macros passed to `UNSAFE_className` will now result in a TypeScript error. This is not allowed because `UNSAFE_className` is appended to the component’s own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.
21+
22+
We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](https://react-spectrum.adobe.com/s2/index.html?path=/docs/intro--docs#styling) can be passed to the `styles` prop of an S2 component.
23+
24+
25+
### Style macro updates
26+
27+
We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between version. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.
28+
29+
We also made some changes to the available style macro values.
30+
31+
* Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the `space()` macro
32+
* Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
33+
* Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
34+
* Used rems and touch scaling for icon sizes, and added t-shirt size prop
35+
* Added support for percentages and [viewport relative units](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
36+
* Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
37+
* Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
38+
* Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-keywords) like `inherit`
39+
* Colors no longer include default hover/press/focus states (e.g. `backgroundColor: 'accent'`). Use the `baseColor` macro instead.
40+
* The `control` value has been removed from `fontSize`, `borderRadius`, `width`, `height`, and other sizing properties. Use explicit values for each t-shirt size instead.
41+
* Fixed spelling of `disc` in `listStyleType` (was `dist`)
42+
743
## v0.8.0
844

945
### New Components

‎examples/remix/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"vite-tsconfig-paths": "^4.2.1"
3131
},
3232
"engines": {
33-
"node": ">=18.0.0"
33+
"node": ">=22.0.0"
3434
},
3535
"workspaces": [
3636
"../../packages/react-aria-components",

‎examples/rsp-webpack-4/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,23 @@
1919
"dependencies": {
2020
"@adobe/react-spectrum": "^3.24.1",
2121
"@react-spectrum/provider": "^3.9.7",
22-
"@react-spectrum/tag": "^3.0.0-rc.0",
2322
"@spectrum-icons/workflow": "^4.2.12",
2423
"react": "^18.2.0",
2524
"react-dom": "^18.2.0"
2625
},
2726
"devDependencies": {
28-
"@babel/core": "^7.24.3",
2927
"@babel/cli": "^7.24.3",
28+
"@babel/core": "^7.24.3",
3029
"@babel/preset-env": "^7.24.3",
3130
"@babel/preset-react": "^7.24.1",
32-
"webpack": "4.46.0",
33-
"webpack-cli": "3.1.1",
34-
"webpack-dev-server": "3.1.8",
31+
"babel-loader": "^8.0.2",
32+
"css-loader": "^1.0.0",
33+
"jest": "^29",
34+
"patch-package": "^8.0.0",
3535
"style-loader": "0.23.0",
36-
"css-loader": "1.0.0",
37-
"babel-loader": "8.0.2",
38-
"jest": "^26",
39-
"patch-package": "^8.0.0"
36+
"webpack": "^4.46.0",
37+
"webpack-cli": "^3.1.1",
38+
"webpack-dev-server": "^3.1.8"
4039
},
4140
"resolutions": {
4241
"terser-webpack-plugin": "4.2.3"

‎examples/rsp-webpack-4/patches/terser-webpack-plugin+4.2.3.patch

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

0 commit comments

Comments
 (0)