Skip to content

Commit 4aefb30

Browse files
snowystingersnowystinger
committed
add ActionBar, FullscreenDialog, NotificationBadge, SelectBox
1 parent 3677ebf commit 4aefb30

File tree

9 files changed

+286
-8
lines changed

9 files changed

+286
-8
lines changed

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import {
5353
DropZone,
5454
Footer,
5555
Form,
56+
FullscreenDialog,
5657
Header,
5758
Heading,
5859
IllustratedMessage,
@@ -74,6 +75,8 @@ import {
7475
SearchField,
7576
SegmentedControl,
7677
SegmentedControlItem,
78+
SelectBox,
79+
SelectBoxGroup,
7780
Slider,
7881
StatusLight,
7982
Switch,
@@ -93,6 +96,10 @@ import {
9396
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
9497
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
9598
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/StarFilled1";
96103
import Edit from "@react-spectrum/s2/icons/Edit";
97104
import Section from "./components/Section";
98105
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -156,6 +163,26 @@ export default function Lazy() {
156163
<TextArea label="Description" />
157164
<TextField label="Email" />
158165
<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>
159186
</Form>
160187
</Section>
161188

@@ -303,6 +330,26 @@ export default function Lazy() {
303330
</Popover>
304331
</DialogTrigger>
305332

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+
306353
<TooltipTrigger>
307354
<ActionButton aria-label="Edit Name">
308355
<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: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
Menu,
2727
MenuItem,
2828
MenuTrigger,
29+
NotificationBadge,
2930
Picker,
3031
PickerItem,
3132
Row,
@@ -94,7 +95,7 @@ function App() {
9495
<Section title="Buttons">
9596
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9697
<Button variant="primary">Primary</Button>
97-
<Button variant="secondary">Secondary</Button>
98+
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
9899
<ActionButton>
99100
<Edit />
100101
<Text>Action Button</Text>
@@ -178,7 +179,16 @@ function App() {
178179
<MenuItem>Paste</MenuItem>
179180
</Menu>
180181
</MenuTrigger>
181-
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
182+
<TableView
183+
aria-label="Files"
184+
styles={style({width: 320, height: 320})}
185+
renderActionBar={selectedKeys => (
186+
<ActionBar>
187+
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
188+
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
189+
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
190+
</ActionBar>
191+
)}>
182192
<TableHeader>
183193
<Column isRowHeader>Name</Column>
184194
<Column>Type</Column>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
DropZone,
4040
Footer,
4141
Form,
42+
FullscreenDialog,
4243
Header,
4344
Heading,
4445
IllustratedMessage,
@@ -60,6 +61,8 @@ import {
6061
SearchField,
6162
SegmentedControl,
6263
SegmentedControlItem,
64+
SelectBox,
65+
SelectBoxGroup,
6366
Slider,
6467
StatusLight,
6568
Switch,
@@ -79,6 +82,10 @@ import {
7982
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
8083
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
8184
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/StarFilled1";
8289
import Edit from "@react-spectrum/s2/icons/Edit";
8390
import Section from "./components/Section";
8491
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -142,6 +149,26 @@ export default function Lazy() {
142149
<TextArea label="Description" />
143150
<TextField label="Email" />
144151
<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>
145172
</Form>
146173
</Section>
147174

@@ -289,6 +316,26 @@ export default function Lazy() {
289316
</Popover>
290317
</DialogTrigger>
291318

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+
292339
<TooltipTrigger>
293340
<ActionButton aria-label="Edit Name">
294341
<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>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
DropZone,
4040
Footer,
4141
Form,
42+
FullscreenDialog,
4243
Header,
4344
Heading,
4445
IllustratedMessage,
@@ -60,6 +61,8 @@ import {
6061
SearchField,
6162
SegmentedControl,
6263
SegmentedControlItem,
64+
SelectBox,
65+
SelectBoxGroup,
6366
Slider,
6467
StatusLight,
6568
Switch,
@@ -79,6 +82,10 @@ import {
7982
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
8083
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
8184
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/StarFilled1";
8289
import Edit from "@react-spectrum/s2/icons/Edit";
8390
import Section from "./components/Section";
8491
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -142,6 +149,26 @@ export default function Lazy() {
142149
<TextArea label="Description" />
143150
<TextField label="Email" />
144151
<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>
145172
</Form>
146173
</Section>
147174

@@ -289,6 +316,26 @@ export default function Lazy() {
289316
</Popover>
290317
</DialogTrigger>
291318

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+
292339
<TooltipTrigger>
293340
<ActionButton aria-label="Edit Name">
294341
<Edit />

0 commit comments

Comments
 (0)