Skip to content

Commit 2fd0040

Browse files
reidbarberreidbarber
authored
chore: update example apps with ListView and Unavailable MenuItem examples (adobe#9722)
* remove extra aria-label from docs example * add ListView to example apps * add unavailable menu item example to docs * enable verdaccio * update ListView slots example to prevent scrolling on mobile. * Revert "enable verdaccio" This reverts commit b6c1751.
1 parent 98d99cb commit 2fd0040

File tree

4 files changed

+92
-9
lines changed

4 files changed

+92
-9
lines changed

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

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,13 @@ import {
2323
ButtonGroup,
2424
Cell,
2525
Column,
26+
Content,
27+
ContextualHelpPopover,
2628
Divider,
2729
Heading,
2830
LinkButton,
31+
ListView,
32+
ListViewItem,
2933
Menu,
3034
MenuItem,
3135
MenuTrigger,
@@ -43,7 +47,8 @@ import {
4347
ToggleButtonGroup,
4448
TreeView,
4549
TreeViewItem,
46-
TreeViewItemContent
50+
TreeViewItemContent,
51+
UnavailableMenuItemTrigger
4752
} from "@react-spectrum/s2";
4853
import Edit from "@react-spectrum/s2/icons/Edit";
4954
import FileTxt from "@react-spectrum/s2/icons/FileText";
@@ -170,7 +175,13 @@ function App() {
170175
<MenuItem id="sms">SMS</MenuItem>
171176
</Menu>
172177
</SubmenuTrigger>
173-
<MenuItem id="delete">Delete</MenuItem>
178+
<UnavailableMenuItemTrigger isUnavailable>
179+
<MenuItem id="delete">Delete</MenuItem>
180+
<ContextualHelpPopover>
181+
<Heading slot="title">Permission required</Heading>
182+
<Content>Contact your administrator for permissions to delete.</Content>
183+
</ContextualHelpPopover>
184+
</UnavailableMenuItemTrigger>
174185
</Menu>
175186
</MenuTrigger>
176187
<MenuTrigger>
@@ -184,6 +195,23 @@ function App() {
184195
<MenuItem>Paste</MenuItem>
185196
</Menu>
186197
</MenuTrigger>
198+
<ListView
199+
aria-label="Files"
200+
selectionMode="multiple"
201+
styles={style({width: 320, height: 320})}>
202+
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
203+
<Text>Adobe Photoshop</Text>
204+
<Text slot="description">Image editing software</Text>
205+
</ListViewItem>
206+
<ListViewItem id="adobe-xd" textValue="Adobe XD">
207+
<Text>Adobe XD</Text>
208+
<Text slot="description">UI/UX design tool</Text>
209+
</ListViewItem>
210+
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
211+
<Text>Adobe InDesign</Text>
212+
<Text slot="description">Desktop publishing</Text>
213+
</ListViewItem>
214+
</ListView>
187215
<TableView
188216
aria-label="Files"
189217
styles={style({width: 320, height: 320})}

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

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ import {
2121
ButtonGroup,
2222
Cell,
2323
Column,
24+
Content,
25+
ContextualHelpPopover,
2426
Divider,
2527
Heading,
2628
LinkButton,
29+
ListView,
30+
ListViewItem,
2731
Menu,
2832
MenuItem,
2933
MenuTrigger,
@@ -41,7 +45,8 @@ import {
4145
ToggleButtonGroup,
4246
TreeView,
4347
TreeViewItem,
44-
TreeViewItemContent
48+
TreeViewItemContent,
49+
UnavailableMenuItemTrigger
4550
} from "@react-spectrum/s2";
4651
import Edit from "@react-spectrum/s2/icons/Edit";
4752
import FileTxt from "@react-spectrum/s2/icons/FileText";
@@ -168,7 +173,13 @@ function App() {
168173
<MenuItem id="sms">SMS</MenuItem>
169174
</Menu>
170175
</SubmenuTrigger>
171-
<MenuItem id="delete">Delete</MenuItem>
176+
<UnavailableMenuItemTrigger isUnavailable>
177+
<MenuItem id="delete">Delete</MenuItem>
178+
<ContextualHelpPopover>
179+
<Heading slot="title">Permission required</Heading>
180+
<Content>Contact your administrator for permissions to delete.</Content>
181+
</ContextualHelpPopover>
182+
</UnavailableMenuItemTrigger>
172183
</Menu>
173184
</MenuTrigger>
174185
<MenuTrigger>
@@ -182,6 +193,23 @@ function App() {
182193
<MenuItem>Paste</MenuItem>
183194
</Menu>
184195
</MenuTrigger>
196+
<ListView
197+
aria-label="Files"
198+
selectionMode="multiple"
199+
styles={style({width: 320, height: 320})}>
200+
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
201+
<Text>Adobe Photoshop</Text>
202+
<Text slot="description">Image editing software</Text>
203+
</ListViewItem>
204+
<ListViewItem id="adobe-xd" textValue="Adobe XD">
205+
<Text>Adobe XD</Text>
206+
<Text slot="description">UI/UX design tool</Text>
207+
</ListViewItem>
208+
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
209+
<Text>Adobe InDesign</Text>
210+
<Text slot="description">Desktop publishing</Text>
211+
</ListViewItem>
212+
</ListView>
185213
<TableView
186214
aria-label="Files"
187215
styles={style({width: 320, height: 320})}

‎examples/s2-webpack-5-example/src/App.js‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ import {
2121
ButtonGroup,
2222
Cell,
2323
Column,
24+
Content,
25+
ContextualHelpPopover,
2426
Divider,
2527
Heading,
2628
LinkButton,
29+
ListView,
30+
ListViewItem,
2731
Menu,
2832
MenuItem,
2933
MenuTrigger,
@@ -41,7 +45,8 @@ import {
4145
ToggleButtonGroup,
4246
TreeView,
4347
TreeViewItem,
44-
TreeViewItemContent
48+
TreeViewItemContent,
49+
UnavailableMenuItemTrigger
4550
} from "@react-spectrum/s2";
4651
import Edit from "@react-spectrum/s2/icons/Edit";
4752
import FileTxt from "@react-spectrum/s2/icons/FileText";
@@ -168,7 +173,13 @@ function App() {
168173
<MenuItem id="sms">SMS</MenuItem>
169174
</Menu>
170175
</SubmenuTrigger>
171-
<MenuItem id="delete">Delete</MenuItem>
176+
<UnavailableMenuItemTrigger isUnavailable>
177+
<MenuItem id="delete">Delete</MenuItem>
178+
<ContextualHelpPopover>
179+
<Heading slot="title">Permission required</Heading>
180+
<Content>Contact your administrator for permissions to delete.</Content>
181+
</ContextualHelpPopover>
182+
</UnavailableMenuItemTrigger>
172183
</Menu>
173184
</MenuTrigger>
174185
<MenuTrigger>
@@ -182,6 +193,23 @@ function App() {
182193
<MenuItem>Paste</MenuItem>
183194
</Menu>
184195
</MenuTrigger>
196+
<ListView
197+
aria-label="Files"
198+
selectionMode="multiple"
199+
styles={style({width: 320, height: 320})}>
200+
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
201+
<Text>Adobe Photoshop</Text>
202+
<Text slot="description">Image editing software</Text>
203+
</ListViewItem>
204+
<ListViewItem id="adobe-xd" textValue="Adobe XD">
205+
<Text>Adobe XD</Text>
206+
<Text slot="description">UI/UX design tool</Text>
207+
</ListViewItem>
208+
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
209+
<Text>Adobe InDesign</Text>
210+
<Text slot="description">Desktop publishing</Text>
211+
</ListViewItem>
212+
</ListView>
185213
<TableView
186214
aria-label="Files"
187215
styles={style({width: 320, height: 320})}

‎packages/dev/s2-docs/pages/s2/ListView.mdx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {ListView, ListViewItem, Text} from '@react-spectrum/s2';
1919
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
2020

2121
<ListView
22-
aria-label="Files"
2322
/* PROPS */
2423
styles={style({width: 'full', maxWidth: 400, height: 320})}>
2524
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
@@ -89,7 +88,7 @@ let images = [
8988
///- end collapse -///
9089

9190
<div className={style({display: 'flex', gap: 24, width: 'full', flexWrap: 'wrap', justifyContent: 'center'})}>
92-
<ListView aria-label="Documents" items={documents} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 280, maxWidth: 400, height: 320})}>
91+
<ListView aria-label="Documents" items={documents} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 200, maxWidth: 400, height: 320})}>
9392
{item => (
9493
<ListViewItem id={item.id} textValue={item.name}>
9594
{/*- begin highlight -*/}
@@ -108,7 +107,7 @@ let images = [
108107
</ListViewItem>
109108
)}
110109
</ListView>
111-
<ListView aria-label="Images" items={images} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 280, maxWidth: 400, height: 320})}>
110+
<ListView aria-label="Images" items={images} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 200, maxWidth: 400, height: 320})}>
112111
{item => (
113112
<ListViewItem id={item.id} textValue={item.name}>
114113
{/*- begin highlight -*/}

0 commit comments

Comments
 (0)