Skip to content

Commit 1021341

Browse files
LFDanLuLFDanLu
committed
Merge branch 'main' of github.com:adobe/react-spectrum into audit-fixes
2 parents 7577785 + f0d808e commit 1021341

File tree

34 files changed

+425
-315
lines changed

34 files changed

+425
-315
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
101101
);
102102

103103
if (isInvalid) {
104-
isSelected = true;
104+
// don't mark unavaliable + invalid dates in range calendars as selected, that case only comes up via allowsNoncontiguousRanges
105+
// and thus those unavailable dates shouldn't be selected. For single select calendars, we mark unavailble + invalid days as selected for styling reasons
106+
if (!('highlightedRange' in state) || !isUnavailable) {
107+
isSelected = true;
108+
}
105109
}
106110

107111
// For performance, reuse the same date object as before if the new date prop is the same.

‎packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs';
1111
export default Layout;
1212

1313
import docs from 'docs:@react-spectrum/checkbox';
14-
import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts';
1514
import packageData from '@react-spectrum/checkbox/package.json';
1615
import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
1716

@@ -333,43 +332,3 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
333332
<Checkbox value="basketball">Basketball</Checkbox>
334333
</CheckboxGroup>
335334
```
336-
337-
## Testing
338-
339-
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
340-
341-
`@react-spectrum/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
342-
in your tests. Below is the full definition of the checkbox group tester and a sample of how you could use it in your test suite.
343-
344-
```ts
345-
// CheckboxGroup.test.ts
346-
import {render} from '@testing-library/react';
347-
import {theme} from '@react-spectrum/theme-default';
348-
import {User} from '@react-spectrum/test-utils';
349-
350-
let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
351-
// ...
352-
353-
it('CheckboxGroup can select multiple checkboxes', async function () {
354-
// Render your test component/app and initialize the checkbox group tester
355-
let {getByTestId} = render(
356-
<Provider theme={defaultTheme}>
357-
<CheckboxGroup data-testid="test-checkboxgroup">
358-
...
359-
</CheckboxGroup>
360-
</Provider>
361-
);
362-
let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
363-
expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0);
364-
365-
await checkboxGroupTester.toggleCheckbox({checkbox: 0});
366-
expect(checkboxGroupTester.checkboxes[0]).toBeChecked();
367-
expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
368-
369-
await checkboxGroupTester.toggleCheckbox({checkbox: 4});
370-
expect(checkboxGroupTester.checkboxes[4]).toBeChecked();
371-
expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
372-
});
373-
```
374-
375-
<ClassAPI links={checkboxgroupUtil.links} class={checkboxgroupUtil.exports.CheckboxGroupTester} />

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

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export default Layout;
1212

1313
import DialogAnatomy from './images/DialogAnatomy.svg';
1414
import docs from 'docs:@react-spectrum/dialog';
15-
import dialogUtil from 'docs:@react-aria/test-utils/src/dialog.ts';
1615
import {Image, HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
1716
import packageData from '@react-spectrum/dialog/package.json';
1817
import styles from '@react-spectrum/docs/src/docs.css';
@@ -399,43 +398,3 @@ respectively for container sizing considerations. Modal sizes on mobile devices
399398
)}
400399
</DialogTrigger>
401400
```
402-
403-
## Testing
404-
405-
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
406-
407-
`@react-spectrum/test-utils` offers common dialog interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
408-
in your tests. Below is the full definition of the dialog tester and a sample of how you could use it in your test suite.
409-
410-
```ts
411-
// Dialog.test.ts
412-
import {render} from '@testing-library/react';
413-
import {theme} from '@react-spectrum/theme-default';
414-
import {User} from '@react-spectrum/test-utils';
415-
416-
let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
417-
// ...
418-
419-
it('Dialog can be opened and closed', async function () {
420-
// Render your test component/app and initialize the dialog tester
421-
let {getByTestId, getByRole} = render(
422-
<Provider theme={defaultTheme}>
423-
<DialogTrigger>
424-
<ActionButton>Trigger</ActionButton>
425-
<Dialog>
426-
...
427-
</Dialog>
428-
</DialogTrigger>
429-
</Provider>
430-
);
431-
let button = getByRole('button');
432-
let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
433-
await dialogTester.open();
434-
let dialog = dialogTester.dialog;
435-
expect(dialog).toBeVisible();
436-
await dialogTester.close();
437-
expect(dialog).not.toBeInTheDocument();
438-
});
439-
```
440-
441-
<ClassAPI links={dialogUtil.links} class={dialogUtil.exports.DialogTester} />

‎packages/@react-spectrum/radio/docs/RadioGroup.mdx‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs';
1111
export default Layout;
1212

1313
import docs from 'docs:@react-spectrum/radio';
14-
import radiogroupUtil from 'docs:@react-aria/test-utils/src/radiogroup.ts';
1514
import packageData from '@react-spectrum/radio/package.json';
1615
import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
1716

@@ -307,43 +306,3 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
307306
<Radio value="dragon">Dragon</Radio>
308307
</RadioGroup>
309308
```
310-
311-
## Testing
312-
313-
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
314-
315-
`@react-spectrum/test-utils` offers common radio group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
316-
in your tests. Below is the full definition of the radio group tester and a sample of how you could use it in your test suite.
317-
318-
```ts
319-
// RadioGroup.test.ts
320-
import {render} from '@testing-library/react';
321-
import {theme} from '@react-spectrum/theme-default';
322-
import {User} from '@react-spectrum/test-utils';
323-
324-
let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
325-
// ...
326-
327-
it('RadioGroup can switch the selected radio', async function () {
328-
// Render your test component/app and initialize the radiogroup tester
329-
let {getByRole} = render(
330-
<Provider theme={defaultTheme}>
331-
<RadioGroup>
332-
...
333-
</RadioGroup>
334-
</Provider>
335-
);
336-
337-
let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
338-
let radios = radioGroupTester.radios;
339-
expect(radioGroupTester.selectedRadio).toBeFalsy();
340-
341-
await radioGroupTester.triggerRadio({radio: radios[0]});
342-
expect(radioGroupTester.selectedRadio).toBe(radios[0]);
343-
344-
await radioGroupTester.triggerRadio({radio: radios[1]});
345-
expect(radioGroupTester.selectedRadio).toBe(radios[1]);
346-
});
347-
```
348-
349-
<ClassAPI links={radiogroupUtil.links} class={radiogroupUtil.exports.RadioGroupTester} />

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

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,34 @@ let states = [
4040

4141
let combinations = generatePowerset(states);
4242

43-
const Template = (args: ButtonProps): ReactNode => {
44-
let {children, ...otherArgs} = args;
43+
let premiumStates = [
44+
{isDisabled: true},
45+
{size: ['S', 'M', 'L', 'XL']}
46+
];
47+
48+
let premiumCombinations = generatePowerset(premiumStates);
49+
50+
let genaiStates = [
51+
{isDisabled: true},
52+
{size: ['S', 'M', 'L', 'XL']}
53+
];
54+
55+
let genaiCombinations = generatePowerset(genaiStates);
56+
57+
const Template = (args: ButtonProps & {combos?: any[]}): ReactNode => {
58+
let {children, combos = combinations, variant, ...otherArgs} = args;
4559
return (
4660
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
47-
{combinations.map(c => {
61+
{combos.map(c => {
4862
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4963
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
5064
if (!key) {
5165
key = 'default';
5266
}
5367

54-
let button = <Button data-testid={fullComboName} key={key} {...otherArgs} {...c}>{children ? children : key}</Button>;
68+
let finalVariant = c.variant ?? variant;
69+
let buttonProps = {...otherArgs, ...c, ...(finalVariant && {variant: finalVariant})};
70+
let button = <Button data-testid={fullComboName} key={key} {...buttonProps}>{children ? children : key}</Button>;
5571
if (c.staticColor != null) {
5672
return (
5773
<StaticColorProvider staticColor={c.staticColor}>
@@ -84,4 +100,52 @@ export const IconOnly: StoryObj<typeof Button> = {
84100
}
85101
};
86102

103+
export const Premium: StoryObj<typeof Button> = {
104+
render: (args) => <Template {...args} combos={premiumCombinations} />,
105+
args: {
106+
children: 'Press me',
107+
variant: 'premium'
108+
}
109+
};
110+
111+
export const PremiumWithIcon: StoryObj<typeof Button> = {
112+
render: (args) => <Template {...args} combos={premiumCombinations} />,
113+
args: {
114+
children: <><NewIcon /><Text>Press me</Text></>,
115+
variant: 'premium'
116+
}
117+
};
118+
119+
export const PremiumIconOnly: StoryObj<typeof Button> = {
120+
render: (args) => <Template {...args} combos={premiumCombinations} />,
121+
args: {
122+
children: <NewIcon />,
123+
variant: 'premium'
124+
}
125+
};
126+
127+
export const GenAI: StoryObj<typeof Button> = {
128+
render: (args) => <Template {...args} combos={genaiCombinations} />,
129+
args: {
130+
children: 'Press me',
131+
variant: 'genai'
132+
}
133+
};
134+
135+
export const GenAIWithIcon: StoryObj<typeof Button> = {
136+
render: (args) => <Template {...args} combos={genaiCombinations} />,
137+
args: {
138+
children: <><NewIcon /><Text>Press me</Text></>,
139+
variant: 'genai'
140+
}
141+
};
142+
143+
export const GenAIIconOnly: StoryObj<typeof Button> = {
144+
render: (args) => <Template {...args} combos={genaiCombinations} />,
145+
args: {
146+
children: <NewIcon />,
147+
variant: 'genai'
148+
}
149+
};
150+
87151
export {WithWrapping};

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,19 @@ export const Example: Story = {
4848
target: '_blank'
4949
}
5050
};
51+
52+
export const Premium: Story = {
53+
...Example,
54+
args: {
55+
...Example.args,
56+
variant: 'premium'
57+
}
58+
};
59+
60+
export const GenAI: Story = {
61+
...Example,
62+
args: {
63+
...Example.args,
64+
variant: 'genai'
65+
}
66+
};

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

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,30 @@ export const VerticalOrientation: Story = {
3333
<div style={{width: 600}}>
3434
<SelectBoxGroup
3535
aria-label="Vertical"
36-
orientation="vertical"
36+
orientation="vertical"
37+
onSelectionChange={action('onSelectionChange')}>
38+
<SelectBox id="text-only" textValue="V: Text Only">
39+
<Text slot="label">V: Text Only</Text>
40+
</SelectBox>
41+
<SelectBox id="illustration-text" textValue="V: Illustration + Text">
42+
<Server />
43+
<Text slot="label">V: Illustration + Text</Text>
44+
</SelectBox>
45+
<SelectBox id="illustration-desc" textValue="Send">
46+
<PaperAirplane />
47+
</SelectBox>
48+
</SelectBoxGroup>
49+
</div>
50+
)
51+
};
52+
53+
export const VerticalOrientationMultiSelect: Story = {
54+
render: () => (
55+
<div style={{width: 600}}>
56+
<SelectBoxGroup
57+
selectionMode="multiple"
58+
aria-label="Vertical"
59+
orientation="vertical"
3760
onSelectionChange={action('onSelectionChange')}>
3861
<SelectBox id="text-only" textValue="V: Text Only">
3962
<Text slot="label">V: Text Only</Text>
@@ -55,7 +78,36 @@ export const HorizontalOrientation: Story = {
5578
<div style={{width: 800}}>
5679
<SelectBoxGroup
5780
aria-label="Horizontal"
58-
orientation="horizontal"
81+
orientation="horizontal"
82+
onSelectionChange={action('onSelectionChange')}>
83+
<SelectBox id="text-only" textValue="Title Only">
84+
<Text slot="label">Title Only</Text>
85+
</SelectBox>
86+
<SelectBox id="illustration-text" textValue="Illustration + Title">
87+
<Server />
88+
<Text slot="label">Illustration + Title</Text>
89+
</SelectBox>
90+
<SelectBox id="text-desc" textValue="Title + Description">
91+
<Text slot="label">Title + Description</Text>
92+
<Text slot="description">Additional description</Text>
93+
</SelectBox>
94+
<SelectBox id="h-all" textValue="Illustration + Title + Description">
95+
<Server />
96+
<Text slot="label">Illustration + Title + Description</Text>
97+
<Text slot="description">Full horizontal layout with all elements</Text>
98+
</SelectBox>
99+
</SelectBoxGroup>
100+
</div>
101+
)
102+
};
103+
104+
export const HorizontalOrientationMultSelect: Story = {
105+
render: () => (
106+
<div style={{width: 800}}>
107+
<SelectBoxGroup
108+
selectionMode="multiple"
109+
aria-label="Horizontal"
110+
orientation="horizontal"
59111
onSelectionChange={action('onSelectionChange')}>
60112
<SelectBox id="text-only" textValue="Title Only">
61113
<Text slot="label">Title Only</Text>

0 commit comments

Comments
 (0)