Skip to content

Commit 4b07bd0

Browse files
snowystingersnowystinger
authored
feat: S2 DateField/DatePicker/Calendar (#8428)
* feat: S2 DateField/DatePicker/Calendar * fix lint * start calendar * Style calendar and fix some datepicker styles * changing ring size * fix hover * revert outline size change * add range calendar * fix yarn lock * fix cell styles for different size ring and gap * add spectrum context * Add DateRangePicker * add comment * fix test * Add TimeField and aria labels * add press scaling * fix non-contiguous ranges styles * fix lint * remove explicit modules * Add time fields to date pickers * fix buttons in date picker popover * remove console log * fix storybook intermittent crash from implicit actions, scrolling * fix accessibility violation * review changes and deduplicating code * make outline in range smaller * Label instead of aria label the stories by default * reduce duplication, fix styles * remove added api for day/week index and add storybook decorators for calendar systems * field widths, share more * Add hcm support * add chromatic stories and fix bugs * remove problematic story * review fixes * test the range calendar more * review fixes * share helptext styles * add translations for everything and add default error messages * adjust props from all dom attributes * remove cellPadding from calendar grid
1 parent e345928 commit 4b07bd0

Some content is hidden

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

69 files changed

+2985
-394
lines changed

‎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-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+
};

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
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, CalendarDateTime} from '@internationalized/date';
14+
import {DatePicker} from '../';
15+
import type {Meta, StoryObj} from '@storybook/react';
16+
import {userEvent} from '@storybook/test';
17+
18+
const meta: Meta<typeof DatePicker> = {
19+
component: DatePicker,
20+
parameters: {
21+
chromaticProvider: {disableAnimations: true}
22+
},
23+
title: 'S2 Chromatic/DatePicker'
24+
};
25+
26+
export default meta;
27+
28+
type Story = StoryObj<typeof DatePicker>;
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+
};
63+
64+
export const OpenPicker: Story = {
65+
args: {
66+
label: 'Date of birth',
67+
value: date
68+
},
69+
play: async () => {
70+
await userEvent.tab();
71+
await userEvent.keyboard('{ArrowRight}');
72+
await userEvent.keyboard('{ArrowRight}');
73+
await userEvent.keyboard('{ArrowRight}');
74+
await userEvent.keyboard('{Enter}');
75+
},
76+
parameters: {
77+
chromaticProvider: {
78+
colorSchemes: ['light'],
79+
backgrounds: ['base'],
80+
locales: ['en-US'],
81+
disableAnimations: true
82+
}
83+
}
84+
};
85+
86+
export const OpenPickerWithTime: Story = {
87+
args: {
88+
label: 'Date of birth',
89+
value: new CalendarDateTime(2022, 2, 3, 12, 0, 0),
90+
granularity: 'second'
91+
},
92+
play: async () => {
93+
await userEvent.tab();
94+
await userEvent.keyboard('{ArrowRight}');
95+
await userEvent.keyboard('{ArrowRight}');
96+
await userEvent.keyboard('{ArrowRight}');
97+
await userEvent.keyboard('{ArrowRight}');
98+
await userEvent.keyboard('{ArrowRight}');
99+
await userEvent.keyboard('{ArrowRight}');
100+
await userEvent.keyboard('{ArrowRight}');
101+
await userEvent.keyboard('{Enter}');
102+
},
103+
parameters: {
104+
chromaticProvider: {
105+
colorSchemes: ['light'],
106+
backgrounds: ['base'],
107+
locales: ['en-US'],
108+
disableAnimations: true
109+
}
110+
}
111+
};

0 commit comments

Comments
 (0)