Skip to content
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

Jump to bottom

Add missing ActionBar and ActionMenu stories #5189

Merged
merged 2 commits into from
Nov 5, 2024
Merged

Add missing ActionBar and ActionMenu stories #5189

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
eb57b92
adds missing ActionBar and ActionMenu stories
mperrotti Oct 29, 2024
4cf213e
Merge branch 'main' into mp/add-actionbar-and-actionmenu-stories
mperrotti Nov 5, 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
8 changes: 8 additions & 0 deletions packages/react/src/ActionBar/ActionBar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ export const Default = () => (
</ActionBar>
)

export const TextLabels = () => (
<ActionBar aria-label="Toolbar">
<Button>Edit</Button>
<Button>Duplicate</Button>
<Button>Export to CSV</Button>
</ActionBar>
)

export const SmallActionBar = () => (
<ActionBar size="small" aria-label="Toolbar">
<ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
Expand Down
58 changes: 58 additions & 0 deletions packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,64 @@ export const ShortcutMenu = () => {
)
}

export const ContextMenu = () => {
const ListItemWithContextMenu = ({children}: {children: string}) => {
const handleContextMenu: React.MouseEventHandler<HTMLLIElement> = event => {
event.preventDefault()
setOpen(true)
}

const [open, setOpen] = React.useState(false)
const triggerRef = React.useRef<HTMLLIElement>(null)

return (
// We need to add an aria-label for improving support for more assistive technologies. For example: VoiceOver might not detect the `name` without `aria-label`
// Since this has a custom context menu, it's ok to add a tabIndex
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
<li ref={triggerRef} onContextMenu={handleContextMenu} tabIndex={0} aria-label={children}>
{children}
<ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
<ActionMenu.Button sx={{visibility: 'hidden', height: 0}}>Anchor</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Item>
Copy link
<ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Quote reply
<ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Edit comment
<ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.LinkItem href="#">View file</ActionList.LinkItem>
<ActionList.Divider />
<ActionList.Item variant="danger">
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</li>
)
}

return (
<>
<div>Right click the list items below to see the context menu</div>

<ul>
<ListItemWithContextMenu>List item one</ListItemWithContextMenu>
<ListItemWithContextMenu>List item two</ListItemWithContextMenu>
<ListItemWithContextMenu>List item three</ListItemWithContextMenu>
</ul>
</>
)
}

export const CustomAnchor = () => (
<ActionMenu>
<ActionMenu.Anchor>
Expand Down
Loading