Skip to content

Commit 639acd0

Browse files
LFDanLuLFDanLu
committed
Merge branch 'main' of github.com:adobe/react-spectrum into baseCollection_filter
2 parents d8a6f06 + c845dea commit 639acd0

File tree

979 files changed

+32628
-8256
lines changed

Some content is hidden

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

979 files changed

+32628
-8256
lines changed

‎.chromatic/preview-head.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,7 @@
138138
<!--
139139
Load S2 adobe clean VF
140140
-->
141-
<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
142-
<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
141+
<link rel="preload" href="https://use.typekit.net/af/b1226a/0000000000000000775c0485/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
143142

144143
<!--
145144
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,

‎.circleci/config.yml

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ executors:
3737
CACHE_VERSION: v1
3838
working_directory: ~/react-spectrum
3939

40+
rsp-2xlarge:
41+
docker:
42+
- image: cimg/node:22.13.1
43+
resource_class: 2xlarge
44+
environment:
45+
CACHE_VERSION: v1
46+
working_directory: ~/react-spectrum
47+
4048
jobs:
4149
install:
4250
executor: rsp-large
@@ -325,7 +333,7 @@ jobs:
325333
path: ~/junit
326334

327335
test-esm:
328-
executor: rsp-xlarge
336+
executor: rsp-2xlarge
329337
steps:
330338
- restore_cache:
331339
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -508,7 +516,7 @@ jobs:
508516
- storage
509517

510518
v-docs:
511-
executor: rsp-xlarge
519+
executor: rsp-2xlarge
512520
steps:
513521
- restore_cache:
514522
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -524,6 +532,15 @@ jobs:
524532
environment:
525533
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
526534

535+
- run:
536+
name: build docs off verdaccio retry
537+
command: |
538+
./scripts/verdaccio-ci.sh
539+
./scripts/verdaccio-build.sh
540+
environment:
541+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
542+
when: on_fail
543+
527544
- persist_to_workspace:
528545
root: verdaccio_dist
529546
paths:

‎.storybook-s2/docs/Intro.jsx

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -140,41 +140,64 @@ export function Docs() {
140140
<P>You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See <Link href="https://parceljs.org/features/macros/#usage-with-other-tools" target="_blank">these docs</Link> for details.</P>
141141
<P>See the <Link href="https://github.com/adobe/react-spectrum/tree/main/examples" target="_blank">examples folder</Link> in our repo for working setups with various build tools. For details on optimizing the output CSS, see the <Link href="?path=/docs/style-macro--docs#css-optimization" target="_top">style macro docs</Link>.</P>
142142
<H2>Setting up your app</H2>
143-
<P>Unlike React Spectrum v3, a <Code>Provider</Code> is not required. Instead, import <Code>@react-spectrum/s2/page.css</Code> in the entry component of your app to apply the background color and color scheme to the <Code>{'<html>'}</Code> element. This ensures that the entire page has the proper styles even before your JavaScript runs.</P>
144-
<Pre>{highlight(`import '@react-spectrum/s2/page.css';
145-
import {Button} from '@react-spectrum/s2';
143+
<P>Wrap your app in an S2 <Code>{'<Provider>'}</Code> component to load Spectrum 2 fonts for the user's locale and apply the appropriate Spectrum background layer for your app. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.</P>
144+
<Pre>{highlight(`import {Provider, Button} from '@react-spectrum/s2';
146145
147146
function App() {
148147
return (
149-
<Button
150-
variant="accent"
151-
onPress={() => alert('Hey there!')}>
152-
Hello Spectrum 2!
153-
</Button>
148+
// Wrap app in a <Provider> to load fonts, set background, set locale, etc.
149+
<Provider background="base">
150+
<Button
151+
variant="accent"
152+
onPress={() => alert('Hey there!')}>
153+
Hello Spectrum 2!
154+
</Button>
155+
</Provider>
154156
);
155157
}`)}</Pre>
156158
<Example>
157159
<Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
158160
</Example>
159-
<P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
161+
<H3>Optimizing full-page apps</H3>
162+
<P>When building a full page S2 app that's not embedded within a larger page, import <Code>@react-spectrum/s2/page.css</Code> to apply the background color and color scheme to the <Code>{'<html>'}</Code> element instead of the <Code>{'<Provider>'}</Code>. This ensures that the page has styles even before your JavaScript loads. A <Code>{'<Provider>'}</Code> is still necessary in addition to <Code>page.css</Code> in order to include the fonts, set the locale, etc.</P>
163+
<Pre>{highlight(`// Apply S2 background to the <html> element
164+
import '@react-spectrum/s2/page.css';
165+
166+
function App() {
167+
return (
168+
<Provider>
169+
{/* ... */}
170+
</Provider>
171+
);
172+
}`)}</Pre>
173+
<P>By default, this uses the <Code>base</Code> background layer. This can be customized by setting the <Code>data-background</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
174+
<Pre>{highlight(`<html data-background="layer-1">
175+
<!-- ... -->
176+
</html>`)}</Pre>
160177
<H3>Overriding the color scheme</H3>
161-
<P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
178+
<P>By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The <Code>colorScheme</Code> prop can be set on <Code>{'<Provider>'}</Code> to force the app to always render in a certain color scheme.</P>
179+
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
180+
181+
<Provider colorScheme="light">
182+
{/* your app */}
183+
</Provider>`)}</Pre>
184+
<P>When using <Code>page.css</Code>, set the <Code>data-color-scheme</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
162185
<Pre>{highlight(`<html data-color-scheme="light">
163186
<!-- ... -->
164187
</html>`)}</Pre>
165188
<H3>Overriding the locale</H3>
166-
<P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering a <Code>{'<Provider>'}</Code> component at the root of your app, and setting the <Code>locale</Code> prop.</P>
189+
<P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering setting the <Code>locale</Code> prop on the <Code>{'<Provider>'}</Code>.</P>
167190
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
168191
169192
<Provider locale="en-US">
170193
{/* your app */}
171194
</Provider>`)}</Pre>
172-
<H3>Embedded sections</H3>
173-
<P>If you’re building an embedded section of a larger page using Spectrum 2, use the <Code>{'<Provider>'}</Code> component to set the background instead of importing <Code>page.css</Code>. The <Code>background</Code> prop should be set to the Spectrum background layer appropriate for your app, and the <Code>colorScheme</Code> can be overridden as well.</P>
174-
<Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
175-
176-
<Provider background="base">
177-
{/* your app */}
195+
<H3>Server-side rendering</H3>
196+
<P>When using SSR, the <Code>{'<Provider>'}</Code> component can be rendered as the root <Code>{'<html>'}</Code> element. The <Code>locale</Code> prop should always be specified to avoid hydration errors. <Code>page.css</Code> is not needed in this case.</P>
197+
<Pre>{highlight(`<Provider elementType="html" locale="en-US">
198+
<body>
199+
{/* ... */}
200+
</body>
178201
</Provider>`)}</Pre>
179202
<H3>Usage with older React Spectrum versions</H3>
180203
<P>See Adobe internal documentation.</P>

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@ export function Migrating() {
114114
<H3>ButtonGroup</H3>
115115
<P>No updates needed.</P>
116116

117+
<H3>Calendar</H3>
118+
<P>No updates needed.</P>
119+
117120
<H3>Checkbox</H3>
118121
<P>No updates needed.</P>
119122

@@ -158,6 +161,27 @@ export function Migrating() {
158161
<li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
159162
</ul>
160163

164+
<H3>DateField</H3>
165+
<ul className="sb-unstyled">
166+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
167+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
168+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
169+
</ul>
170+
171+
<H3>DatePicker</H3>
172+
<ul className="sb-unstyled">
173+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
174+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
175+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
176+
</ul>
177+
178+
<H3>DateRangePicker</H3>
179+
<ul className="sb-unstyled">
180+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
181+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
182+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
183+
</ul>
184+
161185
<H3>Dialog</H3>
162186
<ul className="sb-unstyled">
163187
<li className={style({font: 'body', marginY: 8})}>Update children to move render props from being the second child of <Code>DialogTrigger</Code> to being a child of <Code>Dialog</Code></li>
@@ -302,6 +326,9 @@ export function Migrating() {
302326
<li className={style({font: 'body', marginY: 8})}>Remove <Code>showErrorIcon</Code> (it has been removed due to accessibility issues)</li>
303327
</ul>
304328

329+
<H3>RangeCalendar</H3>
330+
<P>No updates needed.</P>
331+
305332
<H3>RangeSlider</H3>
306333
<ul className="sb-unstyled">
307334
<li className={style({font: 'body', marginY: 8})}>Remove <Code>showValueLabel</Code> (it has been removed due to accessibility issues)</li>
@@ -392,6 +419,13 @@ export function Migrating() {
392419
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
393420
</ul>
394421

422+
<H3>TimeField</H3>
423+
<ul className="sb-unstyled">
424+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
425+
<li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
426+
<li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
427+
</ul>
428+
395429
<H3>ToggleButton</H3>
396430
<P>No updates needed.</P>
397431

‎.storybook-s2/preview-head.html

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +0,0 @@
1-
<!--
2-
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
3-
adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
4-
These fonts and this web project are managed by a team account.
5-
-->
6-
<script>
7-
(function(d) {
8-
var config = {
9-
kitId: 'fqj0dxc',
10-
scriptTimeout: 3000,
11-
async: true
12-
},
13-
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
14-
})(document);
15-
</script>
16-
<style>
17-
@font-face {
18-
font-family: "Source Code Pro";
19-
src: url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/398a64/00000000000000007735dc06/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
20-
font-display: swap;
21-
font-style: normal;
22-
font-weight: 400;
23-
}
24-
</style>

‎Makefile

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@ check-examples:
117117
yarn tsc --project dist/docs-examples/tsconfig.json
118118

119119
starter:
120-
node scripts/extractStarter.mjs
121120
cd starters/docs && yarn --no-immutable && yarn tsc
122121

123122
starter-zip: starter

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@
129129
"@testing-library/jest-dom": "^5.16.5",
130130
"@testing-library/react": "^16.0.0",
131131
"@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
132-
"@types/react": "npm:types-react@19.0.0-rc.0",
133-
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
132+
"@types/react": "^19.0.0",
133+
"@types/react-dom": "^19.0.0",
134134
"@yarnpkg/types": "^4.0.0",
135135
"autoprefixer": "^9.6.0",
136136
"axe-core": "^4.6.3",
@@ -231,8 +231,8 @@
231231
"react-refresh": "0.9.0",
232232
"browserslist": "4.24.0",
233233
"caniuse-lite": "1.0.30001563",
234-
"@types/react": "npm:types-react@19.0.0-rc.0",
235-
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
234+
"@types/react": "19.1.8",
235+
"@types/react-dom": "19.1.6",
236236
"recast": "0.23.6",
237237
"ast-types": "0.16.1",
238238
"svgo": "^3",

‎packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ governing permissions and limitations under the License.
4949

5050
.spectrum-ActionGroup-item {
5151
flex-shrink: 0;
52+
}
5253

53-
&.spectrum-ActionGroup-item--iconOnly {
54-
padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
55-
}
54+
.spectrum-ActionGroup-item--iconOnly {
55+
padding-inline-end: var(--spectrum-actionbutton-icon-padding-x);
5656
}
5757

5858
&:focus {

‎packages/@adobe/spectrum-css-temp/components/menu/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ governing permissions and limitations under the License.
249249
/* keyboard shortcuts are always ASCII, so use base font */
250250
font-family: var(--spectrum-font-family-base);
251251
unicode-bidi: plaintext;
252+
text-align: end;
252253
}
253254

254255
.spectrum-Menu-chevron {

‎packages/@adobe/spectrum-css-temp/components/tabs/index.css

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,11 @@ governing permissions and limitations under the License.
9191
&::before {
9292
content: '';
9393
position: absolute;
94-
top: 50%;
94+
top: 0;
95+
bottom: 0;
9596

9697
box-sizing: border-box;
9798

98-
block-size: var(--spectrum-tabs-focus-ring-height);
99-
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
10099
inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x) * -1);
101100
inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x) * -1);
102101
border: var(--spectrum-tabs-focus-ring-size) solid transparent;
@@ -163,6 +162,13 @@ governing permissions and limitations under the License.
163162
& + *:not(.spectrum-Tabs-selectionIndicator) {
164163
margin-inline-start: var(--spectrum-tabs-item-gap);
165164
}
165+
166+
&::before {
167+
top: 50%;
168+
bottom: unset;
169+
block-size: var(--spectrum-tabs-focus-ring-height);
170+
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
171+
}
166172
}
167173

168174
.spectrum-Tabs-selectionIndicator {
@@ -234,10 +240,21 @@ governing permissions and limitations under the License.
234240
/* padding is included in click area of tab items, so only need to offset by the size of the focus ring's border */
235241
inset-inline-start: calc(var(--spectrum-tabs-focus-ring-size) * -1);
236242
inset-inline-end: calc(var(--spectrum-tabs-focus-ring-size) * -1);
237-
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2));
238243
}
239244
}
240245

246+
/*
247+
Allow tab labels to wrap when TabList component has minWidth set.
248+
*/
249+
&:not(.spectrum-Tabs--compact) .spectrum-Tabs-item {
250+
display: flex;
251+
align-items: center;
252+
white-space: normal;
253+
line-height: normal;
254+
block-size: auto;
255+
min-height: var(--spectrum-tabs-vertical-item-height);
256+
}
257+
241258
&.spectrum-Tabs--compact {
242259
.spectrum-Tabs-item {
243260
block-size: var(--spectrum-tabs-compact-vertical-item-height);
@@ -268,10 +285,10 @@ governing permissions and limitations under the License.
268285
.spectrum-TabsPanel-tabs {
269286
flex-grow: 1;
270287
flex-shrink: 0;
271-
flex-basis: 0%;
272288

273289
&.spectrum-Tabs--vertical {
274290
flex-grow: 0;
291+
min-width: min-content;
275292
}
276293
}
277294

0 commit comments

Comments
 (0)