Skip to content

RAC: update pageBehavior docs to separate examples #4682

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
reidbarber merged 2 commits into from
Jun 20, 2023
Merged

RAC: update pageBehavior docs to separate examples #4682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e627c44
update pageBehavior docs
reidbarber Jun 19, 2023
7969755
Merge branch 'main' into update-pagebehavior-docs
reidbarber Jun 20, 2023
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
25 changes: 24 additions & 1 deletion packages/react-aria-components/docs/Calendar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,10 +421,30 @@ The error message element within a `Calendar` can be targeted with the `[slot=er

Multiple `CalendarGrid` elements can be rendered to show multiple months at once. The `visibleDuration` prop should be provided to the `Calendar` component to specify how many months are visible, and each `CalendarGrid` accepts an `offset` prop to specify its starting date relative to the first visible date.

```tsx example
<Calendar aria-label="Appointment date" visibleDuration={{months: 2}}>
<header>
<Button slot="previous">◀</Button>
<Heading />
<Button slot="next">▶</Button>
</header>
<div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
<CalendarGrid>
{date => <CalendarCell date={date} />}
</CalendarGrid>
<CalendarGrid offset={{months: 1}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
</div>
</Calendar>
```

### Page behavior

The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleDuration`, but by setting `pageBehavior` to `single`, pagination will be by one month.

```tsx example
<Calendar aria-label="Appointment date" visibleDuration={{months: 2}} pageBehavior="single">
<Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
<header>
<Button slot="previous">◀</Button>
<Heading />
Expand All @@ -437,6 +457,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
<CalendarGrid offset={{months: 1}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
<CalendarGrid offset={{months: 2}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
</div>
</Calendar>
```
Expand Down
25 changes: 24 additions & 1 deletion packages/react-aria-components/docs/RangeCalendar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,10 +443,30 @@ The error message element within a `RangeCalendar` can be targeted with the `[sl

Multiple `CalendarGrid` elements can be rendered to show multiple months at once. The `visibleDuration` prop should be provided to the `RangeCalendar` component to specify how many months are visible, and each `CalendarGrid` accepts an `offset` prop to specify its starting date relative to the first visible date.

```tsx example
<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 2}}>
<header>
<Button slot="previous">◀</Button>
<Heading />
<Button slot="next">▶</Button>
</header>
<div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
<CalendarGrid>
{date => <CalendarCell date={date} />}
</CalendarGrid>
<CalendarGrid offset={{months: 1}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
</div>
</RangeCalendar>
```

### Page behavior

The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleDuration`, but by setting `pageBehavior` to `single`, pagination will be by one month.

```tsx example
<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 2}} pageBehavior="single">
<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}} pageBehavior="single">
<header>
<Button slot="previous">◀</Button>
<Heading />
Expand All @@ -459,6 +479,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
<CalendarGrid offset={{months: 1}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
<CalendarGrid offset={{months: 2}}>
{date => <CalendarCell date={date} />}
</CalendarGrid>
</div>
</RangeCalendar>
```
Expand Down