Skip to content

fix: show calendar header in s2 dialog #8621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 24, 2025
Merged

fix: show calendar header in s2 dialog #8621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6475292
clear context
yihuiliao Jul 23, 2025
680ddcf
add story for testing
yihuiliao Jul 23, 2025
9fe90c6
Revert "add story for testing"
yihuiliao Jul 23, 2025
45d4368
add fix to range calendar
yihuiliao Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions packages/@react-spectrum/s2/src/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {ActionButton, Header, Heading, pressScale} from './';
import {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';
import {
Calendar as AriaCalendar,
CalendarCell as AriaCalendarCell,
Expand All @@ -27,6 +27,7 @@ import {
CalendarStateContext,
ContextValue,
DateValue,
Provider,
RangeCalendarState,
RangeCalendarStateContext,
Text
Expand Down Expand Up @@ -304,11 +305,17 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
{({isInvalid, isDisabled}) => {
return (
<>
<Header styles={headerStyles}>
<CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
<CalendarHeading />
<CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
</Header>
<Provider
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we already clear some context in

react-spectrum/packages/@react-spectrum/s2/src/DatePicker.tsx

Line 259 in 863ac42

[OverlayTriggerStateContext, null]

should we clear these there as well? then we don't need to do it in two files

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might be worth to do it at the calendar level too in case someone is using it standalone though right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but if a person were to just use a Calendar inside a dialog rather than a DatePicker, then wouldn't this still be an issue?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess maybe? it might pick up some stray context, but same argument could be made for the overlay trigger state context

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

im fine adding it to CalendarPopover in DatePicker, but i think we'll still need to clear the context in Calendar and RangeCalendar for any standalone cases

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they'd have the same issue with the overlaytriggerstatecontext too, so that should probably be moved to the same place

values={[
[HeaderContext, null],
[HeadingContext, null]
]}>
<Header styles={headerStyles}>
<CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
<CalendarHeading />
<CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
</Header>
</Provider>
<div
className={style({
display: 'flex',
Expand Down
19 changes: 13 additions & 6 deletions packages/@react-spectrum/s2/src/RangeCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
RangeCalendarProps as AriaRangeCalendarProps,
ContextValue,
DateValue,
Provider,
Text
} from 'react-aria-components';
import {CalendarButton, CalendarGrid, CalendarHeading} from './Calendar';
Expand All @@ -23,7 +24,7 @@ import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {Header} from './';
import {Header, HeaderContext, HeadingContext} from './';
import {helpTextStyles} from './Field';
// @ts-ignore
import intlMessages from '../intl/*.json';
Expand Down Expand Up @@ -85,11 +86,17 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
{({isInvalid, isDisabled}) => {
return (
<>
<Header styles={headerStyles}>
<CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
<CalendarHeading />
<CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
</Header>
<Provider
values={[
[HeaderContext, null],
[HeadingContext, null]
]}>
<Header styles={headerStyles}>
<CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
<CalendarHeading />
<CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
</Header>
</Provider>
<div
className={style({
display: 'flex',
Expand Down