Skip to content

Commit eb01cee

Browse files
snowystingersnowystinger
authored
chore: Test app add missing components (#8779)
* chore: Add date time components to test apps * turn on verdaccio * Revert "turn on verdaccio" This reverts commit 3c15e2d. * turn on verdaccio * add ActionBar, FullscreenDialog, NotificationBadge, SelectBox * fix import paths * Fix import case for PaperAirplane and StarFilled1 * Revert "turn on verdaccio" This reverts commit 3677ebf. * Add ActionBar import to App.js
1 parent 79c8e8f commit eb01cee

File tree

9 files changed

+362
-8
lines changed

9 files changed

+362
-8
lines changed

‎examples/s2-next-macros/src/app/Lazy.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
Breadcrumbs,
2626
Button,
2727
ButtonGroup,
28+
Calendar,
2829
Checkbox,
2930
CheckboxGroup,
3031
CloseButton,
@@ -39,6 +40,9 @@ import {
3940
Content,
4041
ContextualHelp,
4142
CustomDialog,
43+
DateField,
44+
DatePicker,
45+
DateRangePicker,
4246
Dialog,
4347
DialogContainer,
4448
DialogTrigger,
@@ -49,6 +53,7 @@ import {
4953
DropZone,
5054
Footer,
5155
Form,
56+
FullscreenDialog,
5257
Header,
5358
Heading,
5459
IllustratedMessage,
@@ -65,10 +70,13 @@ import {
6570
ProgressCircle,
6671
Radio,
6772
RadioGroup,
73+
RangeCalendar,
6874
RangeSlider,
6975
SearchField,
7076
SegmentedControl,
7177
SegmentedControlItem,
78+
SelectBox,
79+
SelectBoxGroup,
7280
Slider,
7381
StatusLight,
7482
Switch,
@@ -81,12 +89,17 @@ import {
8189
Text,
8290
TextArea,
8391
TextField,
92+
TimeField,
8493
Tooltip,
8594
TooltipTrigger,
8695
} from "@react-spectrum/s2";
8796
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
8897
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
8998
import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
99+
import Server from "@react-spectrum/s2/illustrations/linear/Server";
100+
import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
101+
import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
102+
import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
90103
import Edit from "@react-spectrum/s2/icons/Edit";
91104
import Section from "./components/Section";
92105
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -110,6 +123,15 @@ export default function Lazy() {
110123
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
111124
</Section>
112125

126+
<Section title="Date and time">
127+
<Calendar aria-label="Calendar" />
128+
<DateField label="Date Field" />
129+
<DatePicker label="Date Picker" />
130+
<DateRangePicker label="Date Range Picker" />
131+
<RangeCalendar aria-label="Range Calendar" />
132+
<TimeField label="Time Field" />
133+
</Section>
134+
113135
<Section title="Drag and Drop">
114136
<DropZone>
115137
<IllustratedMessage>
@@ -141,6 +163,26 @@ export default function Lazy() {
141163
<TextArea label="Description" />
142164
<TextField label="Email" />
143165
<TextField label="Password" />
166+
<SelectBoxGroup aria-label="Choose a cloud">
167+
<SelectBox id="aws" textValue="Amazon Web Services">
168+
<Server />
169+
<Text slot="label">Amazon Web Services</Text>
170+
<Text slot="description">Reliable cloud infrastructure</Text>
171+
</SelectBox>
172+
<SelectBox id="azure" textValue="Microsoft Azure">
173+
<AlertNotice />
174+
<Text slot="label">Microsoft Azure</Text>
175+
</SelectBox>
176+
<SelectBox id="gcp" textValue="Google Cloud Platform">
177+
<PaperAirplane />
178+
<Text slot="label">Google Cloud Platform</Text>
179+
</SelectBox>
180+
<SelectBox id="ibm" textValue="IBM Cloud">
181+
<StarFilled1 />
182+
<Text slot="label">IBM Cloud</Text>
183+
<Text slot="description">Hybrid cloud solutions</Text>
184+
</SelectBox>
185+
</SelectBoxGroup>
144186
</Form>
145187
</Section>
146188

@@ -288,6 +330,26 @@ export default function Lazy() {
288330
</Popover>
289331
</DialogTrigger>
290332

333+
<DialogTrigger>
334+
<Button variant="primary">Fullscreen</Button>
335+
<FullscreenDialog>
336+
{({close}) => <>
337+
<Heading slot="title">Dialog title</Heading>
338+
<Header>Header</Header>
339+
<Content>
340+
{[...Array(5)].map((_, i) => <p key={i} style={{
341+
marginTop: i === 0 ? 0 : undefined,
342+
marginBottom: i === 4 ? 0 : undefined
343+
}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
344+
</Content>
345+
<ButtonGroup>
346+
<Button onPress={close} variant="secondary">Cancel</Button>
347+
<Button onPress={close} variant="accent">Save</Button>
348+
</ButtonGroup>
349+
</>}
350+
</FullscreenDialog>
351+
</DialogTrigger>
352+
291353
<TooltipTrigger>
292354
<ActionButton aria-label="Edit Name">
293355
<Edit />

‎examples/s2-next-macros/src/app/page.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
import React, { useState } from "react";
1616
import "@react-spectrum/s2/page.css";
1717
import {
18+
ActionBar,
1819
ActionButton,
1920
ActionButtonGroup,
2021
ActionMenu,
@@ -28,6 +29,7 @@ import {
2829
Menu,
2930
MenuItem,
3031
MenuTrigger,
32+
NotificationBadge,
3133
Picker,
3234
PickerItem,
3335
Row,
@@ -96,7 +98,7 @@ function App() {
9698
<Section title="Buttons">
9799
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
98100
<Button variant="primary">Primary</Button>
99-
<Button variant="secondary">Secondary</Button>
101+
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
100102
<ActionButton>
101103
<Edit />
102104
<Text>Action Button</Text>
@@ -180,7 +182,16 @@ function App() {
180182
<MenuItem>Paste</MenuItem>
181183
</Menu>
182184
</MenuTrigger>
183-
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
185+
<TableView
186+
aria-label="Files"
187+
styles={style({width: 320, height: 320})}
188+
renderActionBar={selectedKeys => (
189+
<ActionBar>
190+
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
191+
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
192+
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
193+
</ActionBar>
194+
)}>
184195
<TableHeader>
185196
<Column isRowHeader>Name</Column>
186197
<Column>Type</Column>

‎examples/s2-parcel-example/src/App.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import React, { useState } from "react";
1414
import "@react-spectrum/s2/page.css";
1515
import {
16+
ActionBar,
1617
ActionButton,
1718
ActionButtonGroup,
1819
ActionMenu,
@@ -26,6 +27,7 @@ import {
2627
Menu,
2728
MenuItem,
2829
MenuTrigger,
30+
NotificationBadge,
2931
Picker,
3032
PickerItem,
3133
Row,
@@ -94,7 +96,7 @@ function App() {
9496
<Section title="Buttons">
9597
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9698
<Button variant="primary">Primary</Button>
97-
<Button variant="secondary">Secondary</Button>
99+
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
98100
<ActionButton>
99101
<Edit />
100102
<Text>Action Button</Text>
@@ -178,7 +180,16 @@ function App() {
178180
<MenuItem>Paste</MenuItem>
179181
</Menu>
180182
</MenuTrigger>
181-
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
183+
<TableView
184+
aria-label="Files"
185+
styles={style({width: 320, height: 320})}
186+
renderActionBar={selectedKeys => (
187+
<ActionBar>
188+
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
189+
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
190+
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
191+
</ActionBar>
192+
)}>
182193
<TableHeader>
183194
<Column isRowHeader>Name</Column>
184195
<Column>Type</Column>

‎examples/s2-parcel-example/src/Lazy.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Breadcrumbs,
1212
Button,
1313
ButtonGroup,
14+
Calendar,
1415
Checkbox,
1516
CheckboxGroup,
1617
CloseButton,
@@ -25,6 +26,9 @@ import {
2526
Content,
2627
ContextualHelp,
2728
CustomDialog,
29+
DateField,
30+
DatePicker,
31+
DateRangePicker,
2832
Dialog,
2933
DialogContainer,
3034
DialogTrigger,
@@ -35,6 +39,7 @@ import {
3539
DropZone,
3640
Footer,
3741
Form,
42+
FullscreenDialog,
3843
Header,
3944
Heading,
4045
IllustratedMessage,
@@ -51,10 +56,13 @@ import {
5156
ProgressCircle,
5257
Radio,
5358
RadioGroup,
59+
RangeCalendar,
5460
RangeSlider,
5561
SearchField,
5662
SegmentedControl,
5763
SegmentedControlItem,
64+
SelectBox,
65+
SelectBoxGroup,
5866
Slider,
5967
StatusLight,
6068
Switch,
@@ -67,12 +75,17 @@ import {
6775
Text,
6876
TextArea,
6977
TextField,
78+
TimeField,
7079
Tooltip,
7180
TooltipTrigger,
7281
} from "@react-spectrum/s2";
7382
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
7483
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
7584
import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
85+
import Server from "@react-spectrum/s2/illustrations/linear/Server";
86+
import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
87+
import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
88+
import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
7689
import Edit from "@react-spectrum/s2/icons/Edit";
7790
import Section from "./components/Section";
7891
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -96,6 +109,15 @@ export default function Lazy() {
96109
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
97110
</Section>
98111

112+
<Section title="Date and time">
113+
<Calendar aria-label="Calendar" />
114+
<DateField label="Date Field" />
115+
<DatePicker label="Date Picker" />
116+
<DateRangePicker label="Date Range Picker" />
117+
<RangeCalendar aria-label="Range Calendar" />
118+
<TimeField label="Time Field" />
119+
</Section>
120+
99121
<Section title="Drag and Drop">
100122
<DropZone>
101123
<IllustratedMessage>
@@ -127,6 +149,26 @@ export default function Lazy() {
127149
<TextArea label="Description" />
128150
<TextField label="Email" />
129151
<TextField label="Password" />
152+
<SelectBoxGroup aria-label="Choose a cloud">
153+
<SelectBox id="aws" textValue="Amazon Web Services">
154+
<Server />
155+
<Text slot="label">Amazon Web Services</Text>
156+
<Text slot="description">Reliable cloud infrastructure</Text>
157+
</SelectBox>
158+
<SelectBox id="azure" textValue="Microsoft Azure">
159+
<AlertNotice />
160+
<Text slot="label">Microsoft Azure</Text>
161+
</SelectBox>
162+
<SelectBox id="gcp" textValue="Google Cloud Platform">
163+
<PaperAirplane />
164+
<Text slot="label">Google Cloud Platform</Text>
165+
</SelectBox>
166+
<SelectBox id="ibm" textValue="IBM Cloud">
167+
<StarFilled1 />
168+
<Text slot="label">IBM Cloud</Text>
169+
<Text slot="description">Hybrid cloud solutions</Text>
170+
</SelectBox>
171+
</SelectBoxGroup>
130172
</Form>
131173
</Section>
132174

@@ -274,6 +316,26 @@ export default function Lazy() {
274316
</Popover>
275317
</DialogTrigger>
276318

319+
<DialogTrigger>
320+
<Button variant="primary">Fullscreen</Button>
321+
<FullscreenDialog>
322+
{({close}) => <>
323+
<Heading slot="title">Dialog title</Heading>
324+
<Header>Header</Header>
325+
<Content>
326+
{[...Array(5)].map((_, i) => <p key={i} style={{
327+
marginTop: i === 0 ? 0 : undefined,
328+
marginBottom: i === 4 ? 0 : undefined
329+
}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
330+
</Content>
331+
<ButtonGroup>
332+
<Button onPress={close} variant="secondary">Cancel</Button>
333+
<Button onPress={close} variant="accent">Save</Button>
334+
</ButtonGroup>
335+
</>}
336+
</FullscreenDialog>
337+
</DialogTrigger>
338+
277339
<TooltipTrigger>
278340
<ActionButton aria-label="Edit Name">
279341
<Edit />

‎examples/s2-vite-project/src/App.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import React, { useState } from "react";
1414
import "@react-spectrum/s2/page.css";
1515
import {
16+
ActionBar,
1617
ActionButton,
1718
ActionButtonGroup,
1819
ActionMenu,
@@ -26,6 +27,7 @@ import {
2627
Menu,
2728
MenuItem,
2829
MenuTrigger,
30+
NotificationBadge,
2931
Picker,
3032
PickerItem,
3133
Row,
@@ -94,7 +96,7 @@ function App() {
9496
<Section title="Buttons">
9597
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9698
<Button variant="primary">Primary</Button>
97-
<Button variant="secondary">Secondary</Button>
99+
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
98100
<ActionButton>
99101
<Edit />
100102
<Text>Action Button</Text>
@@ -178,7 +180,16 @@ function App() {
178180
<MenuItem>Paste</MenuItem>
179181
</Menu>
180182
</MenuTrigger>
181-
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
183+
<TableView
184+
aria-label="Files"
185+
styles={style({width: 320, height: 320})}
186+
renderActionBar={selectedKeys => (
187+
<ActionBar>
188+
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
189+
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
190+
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
191+
</ActionBar>
192+
)}>
182193
<TableHeader>
183194
<Column isRowHeader>Name</Column>
184195
<Column>Type</Column>

0 commit comments

Comments
 (0)