Skip to content

Commit

Permalink
ActionMenu.Anchor and ActionMenu.Button with tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@broccolinisoup
broccolinisoup committed Aug 10, 2023
1 parent 69dbf4e commit 067a09e
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 181 deletions.
13 changes: 10 additions & 3 deletions src/ActionMenu/ActionMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect} from 'react'
import React from 'react'
import {TriangleDownIcon} from '@primer/octicons-react'
import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
import {OverlayProps} from '../Overlay'
Expand Down Expand Up @@ -53,9 +53,17 @@ const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
// we strip out Anchor from children and pass it to AnchoredOverlay to render
// with additional props for accessibility
const contents = React.Children.map(children, child => {
// TODO: clean up this part of the implementation
if (child.type === Tooltip && child.props.children.type === MenuButton) {
renderAnchor = anchorProps => {
const triggerButton = React.cloneElement(child.props.children, anchorProps)
const tooltip = React.cloneElement(child, {children: triggerButton})
return tooltip
}
return null
}
if (child.type === MenuButton || child.type === Anchor) {
renderAnchor = anchorProps => {
// TODO: clean up this part
const isTooltip = child.props.children.type === Tooltip
const tooltipTrigger = isTooltip ? child.props.children.props.children : null
let el = null
Expand Down Expand Up @@ -83,7 +91,6 @@ const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({

export type ActionMenuAnchorProps = {children: React.ReactElement}
const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
console.log('anchor ref in the anchor component', anchorRef)
return React.cloneElement(children, {...anchorProps, ref: anchorRef})
})

Expand Down
1 change: 0 additions & 1 deletion src/Button/ButtonBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const ButtonBase = forwardRef(
*/
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
console.log('ehy button', innerRef.current)
if (
innerRef.current &&
!(innerRef.current instanceof HTMLButtonElement) &&
Expand Down
181 changes: 6 additions & 175 deletions src/experimental/Tooltip/Tooltip.examples.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,11 @@ export const FilesPage = () => (
<PageHeader.ContextArea>
<PageHeader.ParentLink>Files</PageHeader.ParentLink>
<PageHeader.ContextAreaActions>
{/* <ActionMenu>
<Tooltip text="Overflow menu">
<ActionMenu.Button size="small" leadingIcon={GitBranchIcon}>
ActionMenu.Button
</ActionMenu.Button>
</Tooltip>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
<ActionMenu>
<ActionMenu.Anchor>
{/* ref issue occurs here */}
<Tooltip text="Overflow menu">
<Tooltip text="Supplementary text to add here">
<Button size="small" leadingIcon={GitBranchIcon} trailingAction={TriangleDownIcon}>
ActionMenu.Anchor-t
main
</Button>
</Tooltip>
</ActionMenu.Anchor>
Expand All @@ -56,151 +36,7 @@ export const FilesPage = () => (
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

{/* <ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Group title="Raw file content">
<ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Jump to line')}>
Jump to line
<ActionList.TrailingVisual>L</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy path')}>
Copy path
<ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Copy permalink')}>
Copy permalink
<ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Group title="View Options">
<ActionList.Item onSelect={() => alert('Show code folding buttons')}>
Show code folding buttons
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
<ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<Breadcrumbs>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main">react</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src">src</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src/PageHeader">PageHeader</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx">
PageHeader.tsx
</Breadcrumbs.Item>
</Breadcrumbs>
<VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
<PageHeader.Actions hidden={{narrow: true}}>
{/* <ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Group title="Raw file content">
<ActionList.Item onSelect={() => alert('Download')}>Download</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Jump to line')}>
Jump to line
<ActionList.TrailingVisual>L</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy path')}>
Copy path
<ActionList.TrailingVisual>⌘⇧.</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Copy permalink')}>
Copy permalink
<ActionList.TrailingVisual>⌘⇧,</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Group title="View Options">
<ActionList.Item onSelect={() => alert('Show code folding buttons')}>
Show code folding buttons
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Wrap lines')}>Wrap lines</ActionList.Item>
<ActionList.Item onSelect={() => alert('Center content')}>Center content</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
</PageHeader.Actions>
</PageHeader.TitleArea>
</PageHeader>
)

export const FilesPage2 = () => (
<PageHeader>
<PageHeader.ContextArea>
<PageHeader.ParentLink>Files</PageHeader.ParentLink>
<PageHeader.ContextAreaActions>
{/* <ActionMenu>
<Tooltip text="Overflow menu">
<ActionMenu.Button size="small" leadingIcon={GitBranchIcon}>
ActionMenu.Button
</ActionMenu.Button>
</Tooltip>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
<ActionMenu>
<ActionMenu.Anchor>
{/* ref issue occurs here */}
{/* <Tooltip text="Overflow menu"> */}
<Button size="small" leadingIcon={GitBranchIcon} trailingAction={TriangleDownIcon}>
ActionMenu.Anchor
</Button>
{/* </Tooltip> */}
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

{/* <ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
Expand Down Expand Up @@ -238,7 +74,7 @@ export const FilesPage2 = () => (
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
</ActionMenu>
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
Expand All @@ -252,7 +88,7 @@ export const FilesPage2 = () => (
</Breadcrumbs>
<VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
<PageHeader.Actions hidden={{narrow: true}}>
{/* <ActionMenu>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
Expand Down Expand Up @@ -290,18 +126,13 @@ export const FilesPage2 = () => (
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu> */}
</ActionMenu>
</PageHeader.Actions>
</PageHeader.TitleArea>
</PageHeader>
)
FilesPage.parameters = {
viewport: {
defaultViewport: 'small',
},
}

FilesPage2.parameters = {
FilesPage.parameters = {
viewport: {
defaultViewport: 'small',
},
Expand Down
82 changes: 80 additions & 2 deletions src/experimental/Tooltip/Tooltip.features.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react'

import {IconButton, Button, Box, Link, StyledOcticon} from '../..'
import {IconButton, Button, Box, Link, StyledOcticon, ActionMenu, ActionList} from '../..'
import {Tooltip} from './Tooltip'
import {SearchIcon, BookIcon} from '@primer/octicons-react'
import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon} from '@primer/octicons-react'

export default {
title: 'Experimental/Components/Tooltip/Features',
Expand Down Expand Up @@ -120,3 +120,81 @@ export const NoDelay = () => (
<Button>Button</Button>
</Tooltip>
)

export const OnActionMenuAnchor = () => (
<Box sx={{display: 'flex', padding: 5, gap: 2}}>
<ActionMenu>
<ActionMenu.Anchor>
<Tooltip text="Supplementary text to add here" direction="n">
<Button leadingIcon={GitBranchIcon} trailingAction={TriangleDownIcon}>
ActionMenu.Anchor w/ t
</Button>
</Tooltip>
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
<ActionMenu>
<Tooltip text="Supplementary text to add here" direction="n">
<ActionMenu.Button leadingIcon={GitBranchIcon}>ActionMenu.Button w/ t</ActionMenu.Button>
</Tooltip>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
<ActionMenu>
<ActionMenu.Anchor>
<Button leadingIcon={GitBranchIcon} trailingAction={TriangleDownIcon}>
ActionMenu.Anchor
</Button>
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
<ActionMenu>
<ActionMenu.Button leadingIcon={GitBranchIcon}>ActionMenu.Button</ActionMenu.Button>

<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Main')}>
<ActionList.LeadingVisual>
<CheckIcon />
</ActionList.LeadingVisual>
main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
<ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Box>
)

0 comments on commit 067a09e

Please sign in to comment.