Skip to content

Add Submenu to example apps #5807

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 6, 2024
Merged

Add Submenu to example apps #5807

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
3ae9147
add SubmenuTrigger to example apps
reidbarber Feb 5, 2024
422fb5f
Merge branch 'main' into submenu-example-apps
reidbarber Feb 6, 2024
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
16 changes: 16 additions & 0 deletions examples/rsp-cra-18/src/sections/CollectionExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {ActionMenu, Flex, Divider, Item, ListBox, ListView, MenuTrigger, Menu, ActionButton, TableBody, TableView, Row, Cell, TableHeader, Column, TagGroup} from '@adobe/react-spectrum';
import {SubmenuTrigger} from "@react-spectrum/menu";

export default function CollectionExamples(){
return (
Expand Down Expand Up @@ -36,6 +37,21 @@ export default function CollectionExamples(){
<Item key="copy">Copy</Item>
<Item key="paste">Paste</Item>
<Item key="replace">Replace</Item>
<SubmenuTrigger>
<Item key="share">Share</Item>
<Menu onAction={(key) => alert(key)}>
<Item key="copy-link">Copy Link</Item>
<SubmenuTrigger>
<Item key="email">Email</Item>
<Menu onAction={(key) => alert(key)}>
<Item key="attachment">Email as Attachment</Item>
<Item key="link">Email as Link</Item>
</Menu>
</SubmenuTrigger>
<Item key="sms">SMS</Item>
</Menu>
</SubmenuTrigger>
<Item key="delete">Delete</Item>
</Menu>
</MenuTrigger>
<TableView
Expand Down
16 changes: 16 additions & 0 deletions examples/rsp-next-ts-17/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ import {
import ReorderableListView from "../components/ReorderableListView";
import {ToastQueue} from '@react-spectrum/toast';
import {InlineAlert} from '@react-spectrum/inlinealert'
import { SubmenuTrigger } from "@react-spectrum/menu";

let nestedItems = [
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
Expand Down Expand Up @@ -162,6 +163,21 @@ export default function Home() {
<Item key="copy">Copy</Item>
<Item key="paste">Paste</Item>
<Item key="replace">Replace</Item>
<SubmenuTrigger>
<Item key="share">Share</Item>
<Menu onAction={(key) => ToastQueue.positive(key.toString())}>
<Item key="copy-ink">Copy Link</Item>
<SubmenuTrigger>
<Item key="email">Email</Item>
<Menu onAction={(key) => ToastQueue.positive(key.toString())}>
<Item key="attachment">Email as Attachment</Item>
<Item key="link">Email as Link</Item>
</Menu>
</SubmenuTrigger>
<Item key="sms">SMS</Item>
</Menu>
</SubmenuTrigger>
<Item key="delete">Delete</Item>
</Menu>
</MenuTrigger>
<MenuTrigger>
Expand Down
16 changes: 16 additions & 0 deletions examples/rsp-next-ts/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ import {
import ReorderableListView from "../components/ReorderableListView";
import {ToastQueue} from '@react-spectrum/toast';
import {InlineAlert} from '@react-spectrum/inlinealert'
import {SubmenuTrigger} from "@react-spectrum/menu";

let nestedItems = [
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
Expand Down Expand Up @@ -162,6 +163,21 @@ export default function Home() {
<Item key="copy">Copy</Item>
<Item key="paste">Paste</Item>
<Item key="replace">Replace</Item>
<SubmenuTrigger>
Copy link
Member

@yihuiliao yihuiliao Feb 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-02-05 at 4 41 48 PM

for some reason i can't see the chevrons in the next.js app? seems fine in the cra one tho

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird, and they look fine in the collapsible table.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can merge the example apps and investigate in a follow-up

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it was just due to the Next.js app having box-sizing: border-box; in its styles

<Item key="share">Share</Item>
<Menu onAction={(key) => ToastQueue.positive(key.toString())}>
<Item key="copy-ink">Copy Link</Item>
<SubmenuTrigger>
<Item key="email">Email</Item>
<Menu onAction={(key) => ToastQueue.positive(key.toString())}>
<Item key="attachment">Email as Attachment</Item>
<Item key="link">Email as Link</Item>
</Menu>
</SubmenuTrigger>
<Item key="sms">SMS</Item>
</Menu>
</SubmenuTrigger>
<Item key="delete">Delete</Item>
</Menu>
</MenuTrigger>
<MenuTrigger>
Expand Down