Skip to content

[pull] main from adobe:main #123

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 2 commits into from
Sep 4, 2025
Merged

[pull] main from adobe:main #123

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
eb01cee
chore: Test app add missing components (#8779)
snowystinger Sep 3, 2025
6618d38
feat: support selectionAlignment in Calendar (#8752)
yihuiliao Sep 3, 2025
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
62 changes: 62 additions & 0 deletions examples/s2-next-macros/src/app/Lazy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
Breadcrumbs,
Button,
ButtonGroup,
Calendar,
Checkbox,
CheckboxGroup,
CloseButton,
Expand All @@ -39,6 +40,9 @@ import {
Content,
ContextualHelp,
CustomDialog,
DateField,
DatePicker,
DateRangePicker,
Dialog,
DialogContainer,
DialogTrigger,
Expand All @@ -49,6 +53,7 @@ import {
DropZone,
Footer,
Form,
FullscreenDialog,
Header,
Heading,
IllustratedMessage,
Expand All @@ -65,10 +70,13 @@ import {
ProgressCircle,
Radio,
RadioGroup,
RangeCalendar,
RangeSlider,
SearchField,
SegmentedControl,
SegmentedControlItem,
SelectBox,
SelectBoxGroup,
Slider,
StatusLight,
Switch,
Expand All @@ -81,12 +89,17 @@ import {
Text,
TextArea,
TextField,
TimeField,
Tooltip,
TooltipTrigger,
} from "@react-spectrum/s2";
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
import Server from "@react-spectrum/s2/illustrations/linear/Server";
import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
import Edit from "@react-spectrum/s2/icons/Edit";
import Section from "./components/Section";
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
Expand All @@ -110,6 +123,15 @@ export default function Lazy() {
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
</Section>

<Section title="Date and time">
<Calendar aria-label="Calendar" />
<DateField label="Date Field" />
<DatePicker label="Date Picker" />
<DateRangePicker label="Date Range Picker" />
<RangeCalendar aria-label="Range Calendar" />
<TimeField label="Time Field" />
</Section>

<Section title="Drag and Drop">
<DropZone>
<IllustratedMessage>
Expand Down Expand Up @@ -141,6 +163,26 @@ export default function Lazy() {
<TextArea label="Description" />
<TextField label="Email" />
<TextField label="Password" />
<SelectBoxGroup aria-label="Choose a cloud">
<SelectBox id="aws" textValue="Amazon Web Services">
<Server />
<Text slot="label">Amazon Web Services</Text>
<Text slot="description">Reliable cloud infrastructure</Text>
</SelectBox>
<SelectBox id="azure" textValue="Microsoft Azure">
<AlertNotice />
<Text slot="label">Microsoft Azure</Text>
</SelectBox>
<SelectBox id="gcp" textValue="Google Cloud Platform">
<PaperAirplane />
<Text slot="label">Google Cloud Platform</Text>
</SelectBox>
<SelectBox id="ibm" textValue="IBM Cloud">
<StarFilled1 />
<Text slot="label">IBM Cloud</Text>
<Text slot="description">Hybrid cloud solutions</Text>
</SelectBox>
</SelectBoxGroup>
</Form>
</Section>

Expand Down Expand Up @@ -288,6 +330,26 @@ export default function Lazy() {
</Popover>
</DialogTrigger>

<DialogTrigger>
<Button variant="primary">Fullscreen</Button>
<FullscreenDialog>
{({close}) => <>
<Heading slot="title">Dialog title</Heading>
<Header>Header</Header>
<Content>
{[...Array(5)].map((_, i) => <p key={i} style={{
marginTop: i === 0 ? 0 : undefined,
marginBottom: i === 4 ? 0 : undefined
}}>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>)}
</Content>
<ButtonGroup>
<Button onPress={close} variant="secondary">Cancel</Button>
<Button onPress={close} variant="accent">Save</Button>
</ButtonGroup>
</>}
</FullscreenDialog>
</DialogTrigger>

<TooltipTrigger>
<ActionButton aria-label="Edit Name">
<Edit />
Expand Down
15 changes: 13 additions & 2 deletions examples/s2-next-macros/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import React, { useState } from "react";
import "@react-spectrum/s2/page.css";
import {
ActionBar,
ActionButton,
ActionButtonGroup,
ActionMenu,
Expand All @@ -28,6 +29,7 @@ import {
Menu,
MenuItem,
MenuTrigger,
NotificationBadge,
Picker,
PickerItem,
Row,
Expand Down Expand Up @@ -96,7 +98,7 @@ function App() {
<Section title="Buttons">
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
<ActionButton>
<Edit />
<Text>Action Button</Text>
Expand Down Expand Up @@ -180,7 +182,16 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
renderActionBar={selectedKeys => (
<ActionBar>
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
</ActionBar>
)}>
<TableHeader>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
Expand Down
15 changes: 13 additions & 2 deletions examples/s2-parcel-example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import React, { useState } from "react";
import "@react-spectrum/s2/page.css";
import {
ActionBar,
ActionButton,
ActionButtonGroup,
ActionMenu,
Expand All @@ -26,6 +27,7 @@ import {
Menu,
MenuItem,
MenuTrigger,
NotificationBadge,
Picker,
PickerItem,
Row,
Expand Down Expand Up @@ -94,7 +96,7 @@ function App() {
<Section title="Buttons">
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
<ActionButton>
<Edit />
<Text>Action Button</Text>
Expand Down Expand Up @@ -178,7 +180,16 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
renderActionBar={selectedKeys => (
<ActionBar>
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
</ActionBar>
)}>
<TableHeader>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
Expand Down
62 changes: 62 additions & 0 deletions examples/s2-parcel-example/src/Lazy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Breadcrumbs,
Button,
ButtonGroup,
Calendar,
Checkbox,
CheckboxGroup,
CloseButton,
Expand All @@ -25,6 +26,9 @@ import {
Content,
ContextualHelp,
CustomDialog,
DateField,
DatePicker,
DateRangePicker,
Dialog,
DialogContainer,
DialogTrigger,
Expand All @@ -35,6 +39,7 @@ import {
DropZone,
Footer,
Form,
FullscreenDialog,
Header,
Heading,
IllustratedMessage,
Expand All @@ -51,10 +56,13 @@ import {
ProgressCircle,
Radio,
RadioGroup,
RangeCalendar,
RangeSlider,
SearchField,
SegmentedControl,
SegmentedControlItem,
SelectBox,
SelectBoxGroup,
Slider,
StatusLight,
Switch,
Expand All @@ -67,12 +75,17 @@ import {
Text,
TextArea,
TextField,
TimeField,
Tooltip,
TooltipTrigger,
} from "@react-spectrum/s2";
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
import Server from "@react-spectrum/s2/illustrations/linear/Server";
import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
import Edit from "@react-spectrum/s2/icons/Edit";
import Section from "./components/Section";
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
Expand All @@ -96,6 +109,15 @@ export default function Lazy() {
<ColorWheel defaultValue="hsl(30, 100%, 50%)" />
</Section>

<Section title="Date and time">
<Calendar aria-label="Calendar" />
<DateField label="Date Field" />
<DatePicker label="Date Picker" />
<DateRangePicker label="Date Range Picker" />
<RangeCalendar aria-label="Range Calendar" />
<TimeField label="Time Field" />
</Section>

<Section title="Drag and Drop">
<DropZone>
<IllustratedMessage>
Expand Down Expand Up @@ -127,6 +149,26 @@ export default function Lazy() {
<TextArea label="Description" />
<TextField label="Email" />
<TextField label="Password" />
<SelectBoxGroup aria-label="Choose a cloud">
<SelectBox id="aws" textValue="Amazon Web Services">
<Server />
<Text slot="label">Amazon Web Services</Text>
<Text slot="description">Reliable cloud infrastructure</Text>
</SelectBox>
<SelectBox id="azure" textValue="Microsoft Azure">
<AlertNotice />
<Text slot="label">Microsoft Azure</Text>
</SelectBox>
<SelectBox id="gcp" textValue="Google Cloud Platform">
<PaperAirplane />
<Text slot="label">Google Cloud Platform</Text>
</SelectBox>
<SelectBox id="ibm" textValue="IBM Cloud">
<StarFilled1 />
<Text slot="label">IBM Cloud</Text>
<Text slot="description">Hybrid cloud solutions</Text>
</SelectBox>
</SelectBoxGroup>
</Form>
</Section>

Expand Down Expand Up @@ -274,6 +316,26 @@ export default function Lazy() {
</Popover>
</DialogTrigger>

<DialogTrigger>
<Button variant="primary">Fullscreen</Button>
<FullscreenDialog>
{({close}) => <>
<Heading slot="title">Dialog title</Heading>
<Header>Header</Header>
<Content>
{[...Array(5)].map((_, i) => <p key={i} style={{
marginTop: i === 0 ? 0 : undefined,
marginBottom: i === 4 ? 0 : undefined
}}>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>)}
</Content>
<ButtonGroup>
<Button onPress={close} variant="secondary">Cancel</Button>
<Button onPress={close} variant="accent">Save</Button>
</ButtonGroup>
</>}
</FullscreenDialog>
</DialogTrigger>

<TooltipTrigger>
<ActionButton aria-label="Edit Name">
<Edit />
Expand Down
15 changes: 13 additions & 2 deletions examples/s2-vite-project/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import React, { useState } from "react";
import "@react-spectrum/s2/page.css";
import {
ActionBar,
ActionButton,
ActionButtonGroup,
ActionMenu,
Expand All @@ -26,6 +27,7 @@ import {
Menu,
MenuItem,
MenuTrigger,
NotificationBadge,
Picker,
PickerItem,
Row,
Expand Down Expand Up @@ -94,7 +96,7 @@ function App() {
<Section title="Buttons">
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
<ActionButton>
<Edit />
<Text>Action Button</Text>
Expand Down Expand Up @@ -178,7 +180,16 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
renderActionBar={selectedKeys => (
<ActionBar>
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
</ActionBar>
)}>
<TableHeader>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
Expand Down
Loading
Loading