Skip to content

Commit b1e8e3e

Browse files
snowystingerdevongovett
snowystinger
and
devongovett
authored
chore: docs starter (#8478)
* initial commit * use react 19 and runtime automatic * use story types and remove extraneous My* exports * Share a few more components * make combobox like select * Share popovers/dialogs where possible * stop running extractExamples script * re-add script so we can run typescript on docs examples still * fix styles, use lucide icons, fix menu controls table * move to lucide icons, css fixes * fix examples * fix toggle button css * need to revert yarn.lock * revert yarn.lock * ignore yarn.lock again * update icons sizes to be smaller * make a few more icons smaller * share more between components and simplify, review comments * fix css selector * fix lint * small fixes --------- Co-authored-by: Devon Govett <[email protected]>
1 parent 864cbff commit b1e8e3e

File tree

172 files changed

+13632
-184
lines changed

Some content is hidden

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

172 files changed

+13632
-184
lines changed

‎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-components/docs/Button.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ import {Button} from 'react-aria-components';
6767
outline: none;
6868
padding: 6px 10px;
6969
text-decoration: none;
70+
display: inline-flex;
71+
align-items: center;
72+
justify-content: center;
73+
gap: 4px;
7074

7175
&[data-pressed] {
7276
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);

‎packages/react-aria-components/docs/Calendar.mdx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,13 @@ type: component
4343

4444
```tsx example
4545
import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';
46+
import {ChevronLeft, ChevronRight} from 'lucide-react';
4647

4748
<Calendar aria-label="Appointment date">
4849
<header>
49-
<Button slot="previous">◀</Button>
50+
<Button slot="previous"><ChevronLeft size={20} /></Button>
5051
<Heading />
51-
<Button slot="next">▶</Button>
52+
<Button slot="next"><ChevronRight size={20} /></Button>
5253
</header>
5354
<CalendarGrid>
5455
{date => <CalendarCell date={date} />}
@@ -218,9 +219,9 @@ function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarPro
218219
return (
219220
<Calendar {...props}>
220221
<header>
221-
<Button slot="previous">◀</Button>
222+
<Button slot="previous"><ChevronLeft size={20} /></Button>
222223
<Heading />
223-
<Button slot="next">▶</Button>
224+
<Button slot="next"><ChevronRight size={20} /></Button>
224225
</header>
225226
<CalendarGrid>
226227
{date => <CalendarCell date={date} />}
@@ -376,9 +377,9 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
376377
```tsx example
377378
<Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
378379
<header>
379-
<Button slot="previous">◀</Button>
380+
<Button slot="previous"><ChevronLeft size={20} /></Button>
380381
<Heading />
381-
<Button slot="next">▶</Button>
382+
<Button slot="next"><ChevronRight size={20} /></Button>
382383
</header>
383384
<div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
384385
<CalendarGrid>
@@ -401,9 +402,9 @@ The `pageBehavior` prop allows you to control how the calendar navigates between
401402
```tsx example
402403
<Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
403404
<header>
404-
<Button slot="previous">◀</Button>
405+
<Button slot="previous"><ChevronLeft size={20} /></Button>
405406
<Heading />
406-
<Button slot="next">▶</Button>
407+
<Button slot="next"><ChevronRight size={20} /></Button>
407408
</header>
408409
<div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
409410
<CalendarGrid>
@@ -735,9 +736,9 @@ import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-ar
735736

736737
<Calendar aria-label="Appointment date">
737738
<header>
738-
<Button slot="previous">◀</Button>
739+
<Button slot="previous"><ChevronLeft size={20} /></Button>
739740
<Heading />
740-
<Button slot="next">▶</Button>
741+
<Button slot="next"><ChevronRight size={20} /></Button>
741742
</header>
742743
<CalendarGrid>
743744
<CalendarGridHeader>
@@ -920,9 +921,9 @@ function CalendarValue() {
920921
921922
<Calendar>
922923
<header>
923-
<Button slot="previous">◀</Button>
924+
<Button slot="previous"><ChevronLeft size={20} /></Button>
924925
<Heading />
925-
<Button slot="next">▶</Button>
926+
<Button slot="next"><ChevronRight size={20} /></Button>
926927
</header>
927928
<CalendarGrid>
928929
{date => <CalendarCell date={date} />}
@@ -966,9 +967,9 @@ function WeekCalendarGrid(props: CalendarGridProps) {
966967
<Calendar visibleDuration={{weeks: 1}} defaultValue={today(getLocalTimeZone())}>
967968
<div className="week">
968969
<Heading />
969-
<Button slot="previous">◀</Button>
970+
<Button slot="previous"><ChevronLeft size={20} /></Button>
970971
<WeekCalendarGrid />
971-
<Button slot="next">▶</Button>
972+
<Button slot="next"><ChevronRight size={20} /></Button>
972973
</div>
973974
</Calendar>
974975
```

‎packages/react-aria-components/docs/ColorSlider.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,14 @@ import {ColorSlider, ColorThumb, Label, SliderOutput, SliderTrack} from 'react-a
7070

7171
.react-aria-Label {
7272
grid-area: label;
73+
color: var(--text-color);
7374
}
7475

7576
.react-aria-SliderOutput {
7677
grid-area: output;
78+
width: 4ch;
79+
text-align: end;
80+
color: var(--text-color);
7781
}
7882

7983
.react-aria-SliderTrack {
@@ -190,7 +194,7 @@ export function MyColorSlider({label, ...props}: MyColorSliderProps) {
190194
<ColorSlider {...props}>
191195
<Label>{label}</Label>
192196
<SliderOutput />
193-
<SliderTrack
197+
<SliderTrack
194198
style={({defaultStyle}) => ({
195199
background: `${defaultStyle.background},
196200
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`

‎packages/react-aria-components/docs/ComboBox.mdx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,13 @@ type: component
5151

5252
```tsx example
5353
import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'react-aria-components';
54+
import {ChevronDown} from 'lucide-react';
5455

5556
<ComboBox>
5657
<Label>Favorite Animal</Label>
5758
<div>
5859
<Input />
59-
<Button>▼</Button>
60+
<Button><ChevronDown size={16} /></Button>
6061
</div>
6162
<Popover>
6263
<ListBox>
@@ -338,7 +339,7 @@ function MyComboBox<T extends object>({label, description, errorMessage, childre
338339
<Label>{label}</Label>
339340
<div className="my-combobox-container">
340341
<Input />
341-
<Button>▼</Button>
342+
<Button><ChevronDown size={16} /></Button>
342343
</div>
343344
{description && <Text slot="description">{description}</Text>}
344345
<FieldError>{errorMessage}</FieldError>
@@ -1114,7 +1115,7 @@ The `description` slot can be used to associate additional help text with a Comb
11141115
<Label>Favorite Animal</Label>
11151116
<div>
11161117
<Input />
1117-
<Button>▼</Button>
1118+
<Button><ChevronDown size={16} /></Button>
11181119
</div>
11191120
{/*- begin highlight -*/}
11201121
<Text slot="description">Please select an animal.</Text>
@@ -1461,6 +1462,7 @@ This example shows a `ComboBoxClearButton` component that can be placed within a
14611462

14621463
```tsx example
14631464
import {ComboBoxStateContext} from 'react-aria-components';
1465+
import {X} from 'lucide-react';
14641466

14651467
function ComboBoxClearButton() {
14661468
/*- begin highlight -*/
@@ -1473,7 +1475,7 @@ function ComboBoxClearButton() {
14731475
className="clear-button"
14741476
aria-label="Clear"
14751477
onPress={() => state?.setSelectedKey(null)}>
1476-
✕
1478+
<X size={14} />
14771479
</Button>
14781480
);
14791481
}
@@ -1485,7 +1487,7 @@ function ComboBoxClearButton() {
14851487
{/*- begin highlight -*/}
14861488
<ComboBoxClearButton />
14871489
{/*- end highlight -*/}
1488-
<Button>▼</Button>
1490+
<Button><ChevronDown size={16} /></Button>
14891491
</div>
14901492
<Popover>
14911493
<ListBox>
@@ -1515,6 +1517,9 @@ function ComboBoxClearButton() {
15151517
border: none;
15161518
padding: 0;
15171519
outline: none;
1520+
display: flex;
1521+
align-items: center;
1522+
justify-content: center;
15181523

15191524
&[data-pressed] {
15201525
background: dimgray;

‎packages/react-aria-components/docs/DatePicker.mdx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,23 @@ type: component
4949

5050
```tsx example
5151
import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, CalendarCell, Button, Heading, DateInput, DateSegment} from 'react-aria-components';
52+
import {ChevronDown, ChevronLeft, ChevronRight} from 'lucide-react';
5253

5354
<DatePicker>
5455
<Label>Date</Label>
5556
<Group>
5657
<DateInput>
5758
{segment => <DateSegment segment={segment} />}
5859
</DateInput>
59-
<Button>▼</Button>
60+
<Button><ChevronDown size={20} /></Button>
6061
</Group>
6162
<Popover>
6263
<Dialog>
6364
<Calendar>
6465
<header>
65-
<Button slot="previous">◀</Button>
66+
<Button slot="previous"><ChevronLeft size={20} /></Button>
6667
<Heading />
67-
<Button slot="next">▶</Button>
68+
<Button slot="next"><ChevronRight size={20} /></Button>
6869
</header>
6970
<CalendarGrid>
7071
{date => <CalendarCell date={date} />}
@@ -197,7 +198,7 @@ Note that most of this anatomy is shared with [DateRangePicker](DateRangePicker.
197198

198199
### Internationalization
199200

200-
To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`.
201+
To ensure the proper date and time format in RTL locales, `DateInput` must have `display` set to either `inline`, `inline-block`, or `block`.
201202

202203
### Concepts
203204

@@ -305,17 +306,17 @@ function MyDatePicker<T extends DateValue>({label, description, errorMessage, fi
305306
<DateInput>
306307
{segment => <DateSegment segment={segment} />}
307308
</DateInput>
308-
<Button>▼</Button>
309+
<Button><ChevronDown size={20} /></Button>
309310
</Group>
310311
{description && <Text slot="description">{description}</Text>}
311312
<FieldError>{errorMessage}</FieldError>
312313
<Popover>
313314
<Dialog>
314315
<Calendar firstDayOfWeek={firstDayOfWeek}>
315316
<header>
316-
<Button slot="previous">◀</Button>
317+
<Button slot="previous"><ChevronLeft size={20} /></Button>
317318
<Heading />
318-
<Button slot="next">▶</Button>
319+
<Button slot="next"><ChevronRight size={20} /></Button>
319320
</header>
320321
<CalendarGrid>
321322
{date => <CalendarCell date={date} />}
@@ -507,7 +508,7 @@ import {Form, FieldError} from 'react-aria-components';
507508
<DateInput>
508509
{segment => <DateSegment segment={segment} />}
509510
</DateInput>
510-
<Button>▼</Button>
511+
<Button><ChevronDown size={20} /></Button>
511512
</Group>
512513
{/*- begin highlight -*/}
513514
<FieldError />
@@ -516,9 +517,9 @@ import {Form, FieldError} from 'react-aria-components';
516517
<Dialog>
517518
<Calendar>
518519
<header>
519-
<Button slot="previous">◀</Button>
520+
<Button slot="previous"><ChevronLeft size={20} /></Button>
520521
<Heading />
521-
<Button slot="next">▶</Button>
522+
<Button slot="next"><ChevronRight size={20} /></Button>
522523
</header>
523524
<CalendarGrid>
524525
{date => <CalendarCell date={date} />}
@@ -646,7 +647,7 @@ The `description` slot can be used to associate additional help text with a date
646647
<DateInput>
647648
{segment => <DateSegment segment={segment} />}
648649
</DateInput>
649-
<Button>▼</Button>
650+
<Button><ChevronDown size={20} /></Button>
650651
</Group>
651652
{/*- begin highlight -*/}
652653
<Text slot="description">Please select a weekday between 9 AM and 5 PM.</Text>
@@ -655,9 +656,9 @@ The `description` slot can be used to associate additional help text with a date
655656
<Dialog>
656657
<Calendar>
657658
<header>
658-
<Button slot="previous">◀</Button>
659+
<Button slot="previous"><ChevronLeft size={20} /></Button>
659660
<Heading />
660-
<Button slot="next">▶</Button>
661+
<Button slot="next"><ChevronRight size={20} /></Button>
661662
</header>
662663
<CalendarGrid>
663664
{date => <CalendarCell date={date} />}
@@ -1148,15 +1149,15 @@ function DatePickerClearButton() {
11481149
{/*- begin highlight -*/}
11491150
<DatePickerClearButton />
11501151
{/*- end highlight -*/}
1151-
<Button>▼</Button>
1152+
<Button><ChevronDown size={20} /></Button>
11521153
</Group>
11531154
<Popover>
11541155
<Dialog>
11551156
<Calendar>
11561157
<header>
1157-
<Button slot="previous">◀</Button>
1158+
<Button slot="previous"><ChevronLeft size={20} /></Button>
11581159
<Heading />
1159-
<Button slot="next">▶</Button>
1160+
<Button slot="next"><ChevronRight size={20} /></Button>
11601161
</header>
11611162
<CalendarGrid>
11621163
{date => <CalendarCell date={date} />}

0 commit comments

Comments
 (0)