@@ -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" ;
8796import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark' ;
8897import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud" ;
8998import 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" ;
90103import Edit from "@react-spectrum/s2/icons/Edit" ;
91104import Section from "./components/Section" ;
92105import { 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 />
0 commit comments