Skip to content

Commit ef61fa4

Browse files
nwidynskinwidynski
committed
Merge branch 'main' of https://github.com/nwidynski/react-spectrum into layout-orientation
2 parents b07954a + b1e8e3e commit ef61fa4

File tree

285 files changed

+17625
-780
lines changed

Some content is hidden

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

285 files changed

+17625
-780
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,

‎.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/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

‎packages/@react-aria/calendar/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export {useCalendar} from './useCalendar';
1414
export {useRangeCalendar} from './useRangeCalendar';
1515
export {useCalendarGrid} from './useCalendarGrid';
1616
export {useCalendarCell} from './useCalendarCell';
17+
export {getEraFormat} from './utils';
1718

1819
export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
1920
export type {CalendarAria} from './useCalendarBase';

‎packages/@react-aria/collections/src/CollectionBuilder.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,9 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
157157
return <Type ref={itemRef}>{children}</Type>;
158158
}
159159

160-
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
161-
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
160+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
161+
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<E>) => ReactElement | null;
162+
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<E>) => ReactElement | null;
162163
export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement | null): (props: P & React.RefAttributes<any>) => ReactElement | null {
163164
let Component = ({node}) => render(node.props, node.props.ref, node);
164165
let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {

‎packages/@react-spectrum/s2/chromatic/Calendar.stories.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/*
2+
* Copyright 2024 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Calendar} from '../src';
14+
import {CalendarDate} from '@internationalized/date';
15+
import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl';
16+
import {DateValue} from 'react-aria';
17+
import type {Meta, StoryObj} from '@storybook/react';
18+
import {screen, userEvent, within} from '@storybook/test';
19+
20+
const meta: Meta<typeof Calendar> = {
21+
component: Calendar,
22+
parameters: {
23+
chromaticProvider: {disableAnimations: true}
24+
},
25+
title: 'S2 Chromatic/Calendar'
26+
};
27+
28+
export default meta;
29+
30+
type Story = StoryObj<typeof Calendar>;
31+
32+
const date = new CalendarDate(2022, 2, 3);
33+
34+
export const Default: Story = {
35+
args: {
36+
defaultFocusedValue: date
37+
}
38+
};
39+
40+
export const MultiMonth: Story = {
41+
args: {
42+
defaultFocusedValue: date,
43+
visibleMonths: 3
44+
}
45+
};
46+
47+
export const UnavailableDays: Story = {
48+
args: {
49+
defaultFocusedValue: date,
50+
minValue: new CalendarDate(2022, 2, 2),
51+
maxValue: new CalendarDate(2022, 2, 20),
52+
isDateUnavailable: (date: DateValue) => {
53+
return date.day >= 15 && date.day <= 18;
54+
},
55+
isInvalid: true,
56+
errorMessage: 'Invalid date'
57+
}
58+
};
59+
60+
export const CustomCalendar: Story = {
61+
args: {
62+
defaultFocusedValue: date,
63+
createCalendar: () => new Custom454Calendar()
64+
},
65+
parameters: {
66+
chromaticProvider: {
67+
// only works for en-US?
68+
locales: ['en-US']
69+
}
70+
}
71+
};
72+
73+
export const DefaultHover: Story = {
74+
args: {
75+
defaultFocusedValue: date
76+
},
77+
play: async () => {
78+
let grid = screen.getByRole('grid');
79+
let cell = within(grid).getAllByRole('button')[7];
80+
await userEvent.hover(cell);
81+
},
82+
parameters: {
83+
chromaticProvider: {
84+
colorSchemes: ['light'],
85+
backgrounds: ['base'],
86+
locales: ['en-US'],
87+
disableAnimations: true
88+
}
89+
}
90+
};
91+
92+
export const DefaultKeyboardFocus: Story = {
93+
args: {
94+
defaultFocusedValue: date
95+
},
96+
play: async () => {
97+
await userEvent.tab();
98+
await userEvent.tab();
99+
await userEvent.tab();
100+
await userEvent.keyboard('{ArrowDown}');
101+
},
102+
parameters: {
103+
chromaticProvider: {
104+
colorSchemes: ['light'],
105+
backgrounds: ['base'],
106+
locales: ['en-US'],
107+
disableAnimations: true
108+
}
109+
}
110+
};
111+
112+
export const DefaultKeyboardSelected: Story = {
113+
args: {
114+
defaultFocusedValue: date
115+
},
116+
play: async () => {
117+
await userEvent.tab();
118+
await userEvent.tab();
119+
await userEvent.tab();
120+
await userEvent.keyboard('{ArrowDown}');
121+
await userEvent.keyboard('{Enter}');
122+
},
123+
parameters: {
124+
chromaticProvider: {
125+
colorSchemes: ['light'],
126+
backgrounds: ['base'],
127+
locales: ['en-US'],
128+
disableAnimations: true
129+
}
130+
}
131+
};

‎packages/@react-spectrum/s2/chromatic/DateField.stories.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
* Copyright 2024 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {CalendarDate} from '@internationalized/date';
14+
import {DateField} from '../';
15+
import type {Meta, StoryObj} from '@storybook/react';
16+
import {userEvent} from '@storybook/test';
17+
18+
const meta: Meta<typeof DateField> = {
19+
component: DateField,
20+
parameters: {
21+
chromaticProvider: {disableAnimations: true}
22+
},
23+
title: 'S2 Chromatic/DateField'
24+
};
25+
26+
export default meta;
27+
28+
type Story = StoryObj<typeof DateField>;
29+
30+
const date = new CalendarDate(2022, 2, 3);
31+
32+
export const Default: Story = {
33+
args: {
34+
label: 'Date of birth'
35+
}
36+
};
37+
38+
export const WithValue: Story = {
39+
args: {
40+
label: 'Date of birth',
41+
value: date
42+
}
43+
};
44+
45+
export const Focused: Story = {
46+
args: {
47+
label: 'Date of birth',
48+
value: date
49+
},
50+
play: async () => {
51+
await userEvent.tab();
52+
await userEvent.keyboard('{ArrowRight}');
53+
},
54+
parameters: {
55+
chromaticProvider: {
56+
colorSchemes: ['light'],
57+
backgrounds: ['base'],
58+
locales: ['en-US'],
59+
disableAnimations: true
60+
}
61+
}
62+
};

0 commit comments

Comments
 (0)