@primer/components 32.1.0 → 33.0.0-rc.265a717f

package/src/stories/ActionMenu2.stories.tsx

@@ -0,0 +1,551 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {ThemeProvider} from '..'
+import BaseStyles from '../BaseStyles'
+import {ActionMenu} from '../ActionMenu2'
+import {ActionList} from '../ActionList2'
+import Button, {ButtonInvisible} from '../Button'
+import Box from '../Box'
+import Text from '../Text'
+import TextInput from '../TextInput'
+import StyledOcticon from '../StyledOcticon'
+import FormGroup from '../FormGroup'
+import {
+  ServerIcon,
+  PlusCircleIcon,
+  TriangleDownIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon,
+  ProjectIcon,
+  ListUnorderedIcon,
+  ArrowDownIcon,
+  SearchIcon,
+  VersionsIcon,
+  TableIcon,
+  IconProps
+} from '@primer/octicons-react'
+
+const meta: Meta = {
+  title: 'Composite components/ActionMenu2',
+  component: ActionMenu,
+  decorators: [
+    (Story: React.ComponentType): JSX.Element => (
+      <ThemeProvider>
+        <BaseStyles>
+          <Story />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  ],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+}
+export default meta
+
+export function SimpleListStory(): JSX.Element {
+  const [actionFired, fireAction] = React.useState('')
+  const onSelect = (name: string) => fireAction(name)
+
+  return (
+    <>
+      <h1>Simple Menu</h1>
+      <h2>Last option activated: {actionFired}</h2>
+      <ActionMenu>
+        <ActionMenu.Button>Menu</ActionMenu.Button>
+
+        <ActionList>
+          <ActionList.Item onSelect={() => onSelect('Copy link')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Quote reply')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Edit comment')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+SimpleListStory.storyName = 'Simple Menu'
+
+export function ActionsStory(): JSX.Element {
+  return (
+    <>
+      <h1>Actions</h1>
+
+      <ActionMenu overlayProps={{width: 'medium'}}>
+        <ActionMenu.Button aria-label="Open Actions Menu">
+          <ServerIcon />
+        </ActionMenu.Button>
+        <ActionList>
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <ServerIcon />
+            </ActionList.LeadingVisual>
+            Open current Codespace
+            <ActionList.Description variant="block">
+              Your existing Codespace will be opened to its previous state, and you&apos;ll be asked to manually switch
+              to new-branch.
+            </ActionList.Description>
+            <ActionList.TrailingVisual>⌘O</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <PlusCircleIcon />
+            </ActionList.LeadingVisual>
+            Create new Codespace
+            <ActionList.Description variant="block">
+              Create a brand new Codespace with a fresh image and checkout this branch.
+            </ActionList.Description>
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+ActionsStory.storyName = 'Actions'
+
+export function ExternalAnchor(): JSX.Element {
+  const [actionFired, fireAction] = React.useState('')
+  const onSelect = (name: string) => fireAction(name)
+
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.createRef<HTMLButtonElement>()
+
+  return (
+    <>
+      <h1>External Anchor</h1>
+      <h2>External Open State: {open ? 'Open' : 'Closed'}</h2>
+      <h2>Last option activated: {actionFired}</h2>
+      <div>
+        <Button ref={triggerRef} onClick={() => setOpen(!open)}>
+          {open ? 'Close Menu' : 'Open Menu'}
+        </Button>
+      </div>
+      <br />
+
+      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
+        <ActionList>
+          <ActionList.Item onSelect={() => onSelect('Copy link')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Quote reply')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Edit comment')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+ExternalAnchor.storyName = 'External Anchor'
+
+export function ControlledMenu(): JSX.Element {
+  const [actionFired, fireAction] = React.useState('')
+  const onSelect = (name: string) => fireAction(name)
+
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.createRef<HTMLButtonElement>()
+
+  return (
+    <>
+      <h1>Controlled Menu</h1>
+      <h2>External Open State: {open ? 'Open' : 'Closed'}</h2>
+      <h2>Last option activated: {actionFired}</h2>
+      <div>
+        <Button ref={triggerRef} onClick={() => setOpen(!open)}>
+          {open ? 'Close Menu' : 'Open Menu'}
+        </Button>
+      </div>
+      <br />
+
+      <ActionMenu
+        open={open}
+        onOpenChange={setOpen}
+        overlayProps={{
+          // Because the component is controlled from outside, but the anchor is still internal,
+          // clicking the external button should not be counted as "clicking outside"
+          ignoreClickRefs: [triggerRef]
+        }}
+      >
+        {/**
+         * Even though the state is controlled externally,
+         * we can pass an Anchor for the menu to "anchor to"
+         */}
+        <ActionMenu.Button>Anchor</ActionMenu.Button>
+        <ActionList>
+          <ActionList.Item onSelect={() => onSelect('Copy link')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Quote reply')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Edit comment')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+ControlledMenu.storyName = 'Controlled Menu'
+
+export function CustomAnchor(): JSX.Element {
+  const [actionFired, fireAction] = React.useState('')
+  const onSelect = (name: string) => fireAction(name)
+
+  return (
+    <>
+      <h1>Custom Anchor</h1>
+      <h2>Last option activated: {actionFired}</h2>
+      <ActionMenu>
+        <ActionMenu.Anchor>
+          <summary style={{cursor: 'pointer'}} aria-label="Open column options">
+            <KebabHorizontalIcon />
+          </summary>
+        </ActionMenu.Anchor>
+
+        <ActionList>
+          <ActionList.Item onSelect={() => onSelect('Rename')}>
+            <ActionList.LeadingVisual>
+              <PencilIcon />
+            </ActionList.LeadingVisual>
+            Rename
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => onSelect('Archive')}>
+            <ActionList.LeadingVisual>
+              <ArchiveIcon />
+            </ActionList.LeadingVisual>
+            Archive all cards
+          </ActionList.Item>
+          <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+            <ActionList.LeadingVisual>
+              <TrashIcon />
+            </ActionList.LeadingVisual>
+            Delete
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+CustomAnchor.storyName = 'Custom Anchor'
+
+export function MemexTableMenu(): JSX.Element {
+  const [name, setName] = React.useState('Estimate')
+  const inputRef = React.createRef<HTMLInputElement>()
+
+  /** To add custom components to the Menu,
+   *  you need to switch to a controlled menu
+   */
+  const [open, setOpen] = React.useState(false)
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      setName(event.currentTarget.value)
+      setOpen(false)
+    }
+  }
+
+  /** This requires inside knowledge. If you to do this with onBlur
+   *  on the input, it doesn't work :(
+   */
+  const handleClickOutside = () => {
+    if (inputRef.current) setName(inputRef.current.value)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <h1>Memex Table Menu</h1>
+      <Box
+        sx={{
+          width: 200,
+          display: 'flex',
+          justifyContent: 'space-between',
+          p: 2,
+          border: '1px solid',
+          borderColor: 'border.default'
+        }}
+      >
+        <Text sx={{fontSize: 0, fontWeight: 'bold'}}>{name}</Text>
+        <ActionMenu open={open} onOpenChange={setOpen} overlayProps={{onClickOutside: handleClickOutside}}>
+          <ActionMenu.Button
+            aria-label="Open Estimate column options menu"
+            sx={{
+              p: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <TriangleDownIcon />
+          </ActionMenu.Button>
+
+          <TextInput ref={inputRef} sx={{m: 2}} defaultValue={name} onKeyPress={handleKeyPress} />
+          <ActionMenu.Divider sx={{m: 0}} />
+
+          <ActionList>
+            <ActionList.Item>Sort ascending (123...)</ActionList.Item>
+            <ActionList.Item>Sort descending (123...)</ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item>Filter by values</ActionList.Item>
+            <ActionList.Item>Group by values</ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item disabled>Hide field</ActionList.Item>
+            <ActionList.Item variant="danger">Delete file</ActionList.Item>
+          </ActionList>
+        </ActionMenu>
+      </Box>
+    </>
+  )
+}
+MemexTableMenu.storyName = 'Memex Table Menu'
+
+/* copied from github/memex */
+const LayoutToggleItem = ({
+  selected,
+  children,
+  Icon,
+  ...props
+}: {
+  selected: boolean
+  children: React.ReactNode
+  Icon: React.ComponentType<IconProps>
+}) => {
+  return (
+    <FormGroup
+      sx={{
+        flex: 'auto',
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: selected ? 'accent.emphasis' : 'border.default',
+        textAlign: 'center',
+        cursor: 'pointer',
+        backgroundColor: selected ? 'accent.subtle' : '',
+        boxShadow: selected ? theme => `inset 0 0 0 1px ${theme.colors.accent.emphasis}` : '',
+        mb: 2,
+        mt: 1,
+        '&:hover': {
+          backgroundColor: !selected ? 'canvas.subtle' : ''
+        },
+        '&:first-of-type': {
+          borderTopRightRadius: '0px',
+          borderBottomRightRadius: '0px',
+          borderRight: selected ? undefined : '0'
+        },
+        '&:last-of-type': {
+          borderTopLeftRadius: '0px',
+          borderBottomLeftRadius: '0px',
+          borderLeft: selected ? undefined : '0'
+        }
+      }}
+    >
+      <FormGroup.Label
+        htmlFor="layout-selector"
+        sx={{fontWeight: 'normal', cursor: 'pointer', px: 3, py: 2, mb: 0}}
+        {...props}
+      >
+        <Box sx={{textAlign: 'center', flexDirection: 'column', m: 'auto', alignItems: 'center', display: 'flex'}}>
+          <Icon size="medium" />
+          <Text sx={{color: selected ? 'fg.default' : 'fg.muted', fontSize: 0}}>{children}</Text>
+        </Box>
+      </FormGroup.Label>
+    </FormGroup>
+  )
+}
+
+/* copied from github/memex */
+const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
+  <Box sx={{display: 'flex'}}>
+    <ButtonInvisible
+      onClick={() => setOpen(false)}
+      sx={{
+        flex: 'auto',
+        minWidth: '50%',
+        borderRight: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 0,
+        mt: -2,
+        mb: -2,
+        py: 3,
+        '&:hover': {
+          bg: 'canvas.inset'
+        }
+      }}
+    >
+      Save changes
+    </ButtonInvisible>
+
+    <ButtonInvisible
+      onClick={() => setOpen(false)}
+      sx={{
+        flex: 'auto',
+        color: 'fg.muted',
+        borderRadius: 0,
+        mt: -2,
+        mb: -2,
+        py: 3,
+        fontWeight: 'normal',
+        '&:hover': {
+          bg: 'canvas.inset'
+        }
+      }}
+    >
+      Discard changes
+    </ButtonInvisible>
+  </Box>
+)
+
+export function MemexViewOptionsMenu(): JSX.Element {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <h1>Memex View Options Menu</h1>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Text sx={{fontSize: 1, mr: 3}}>
+          <StyledOcticon icon={ProjectIcon} sx={{mr: 2}} />
+          React
+        </Text>
+        <ActionMenu open={open} onOpenChange={setOpen} overlayProps={{width: 'medium'}}>
+          <ActionMenu.Button
+            aria-label="Open View options menu"
+            sx={{
+              p: 0,
+              width: 18,
+              height: 18,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <TriangleDownIcon />
+          </ActionMenu.Button>
+
+          <ActionList>
+            <ActionList.Group title="Layout">
+              <li style={{listStyle: 'none'}}>
+                <Box sx={{mx: 3, display: 'flex'}}>
+                  <LayoutToggleItem selected Icon={TableIcon}>
+                    Table
+                  </LayoutToggleItem>
+                  <LayoutToggleItem selected={false} Icon={ProjectIcon}>
+                    Board
+                  </LayoutToggleItem>
+                </Box>
+              </li>
+            </ActionList.Group>
+            <ActionList.Divider />
+
+            <ActionList.Group title="Configuration">
+              <ActionList.Item>
+                <ActionList.LeadingVisual>
+                  <ListUnorderedIcon />
+                </ActionList.LeadingVisual>
+                Title, Assignees, Status, Labels, Repositories
+              </ActionList.Item>
+              <ActionList.Item>
+                <ActionList.LeadingVisual>
+                  <ListUnorderedIcon />
+                </ActionList.LeadingVisual>
+                group: none
+              </ActionList.Item>
+              <ActionList.Item>
+                <ActionList.LeadingVisual>
+                  <ArrowDownIcon />
+                </ActionList.LeadingVisual>
+                sort: manual
+              </ActionList.Item>
+              <ActionList.Item>
+                <ActionList.LeadingVisual>
+                  <SearchIcon />
+                </ActionList.LeadingVisual>
+                Search or filter this view
+              </ActionList.Item>
+            </ActionList.Group>
+            <ActionList.Divider />
+            <ActionList.Item>
+              <ActionList.LeadingVisual>
+                <PencilIcon />
+              </ActionList.LeadingVisual>
+              Rename view
+            </ActionList.Item>
+            <ActionList.Item>
+              <ActionList.LeadingVisual>
+                <VersionsIcon />
+              </ActionList.LeadingVisual>
+              Save changes to new view
+            </ActionList.Item>
+            <ActionList.Item disabled>
+              <ActionList.LeadingVisual>
+                <TrashIcon />
+              </ActionList.LeadingVisual>
+              Delete view
+            </ActionList.Item>
+            <ActionList.Divider />
+
+            <li style={{listStyle: 'none'}}>
+              <ViewChangeButtons setOpen={setOpen} />
+            </li>
+          </ActionList>
+        </ActionMenu>
+      </Box>
+    </>
+  )
+}
+MemexViewOptionsMenu.storyName = 'Memex View Options Menu'
+
+export function UnexpectedSelectionVariant(): JSX.Element {
+  return (
+    <>
+      <h1>Expect error if selectionVariant is passed</h1>
+
+      <ActionMenu>
+        <ActionMenu.Button>Menu</ActionMenu.Button>
+
+        <ActionList selectionVariant="multiple">
+          <ActionList.Item>Copy link</ActionList.Item>
+          <ActionList.Item>Quote reply</ActionList.Item>
+          <ActionList.Item>Edit comment</ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger">Delete file</ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+UnexpectedSelectionVariant.storyName = 'Unexpected selectionVariant'

package/src/stories/AnchoredOverlay.stories.tsx

@@ -0,0 +1,117 @@
+import React, {useEffect, useRef, useState} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, ThemeProvider} from '..'
+import Heading from '../Heading'
+import DropdownButton from '../Button'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import {registerPortalRoot} from '../Portal'
+
+export default {
+  title: 'Generic behaviors/AnchoredOverlay',
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
+  const scrollingElementRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (scrollingElementRef.current) {
+      registerPortalRoot(scrollingElementRef.current, 'scrollingPortal')
+    }
+  }, [scrollingElementRef])
+  return (
+    <Box position="absolute" top={0} right={0} bottom={0} left={0} padding={4} backgroundColor="lavenderblush">
+      <Heading>Header or some such</Heading>
+      <Box position="absolute" top={10} right={4} bottom={4} left={4} overflow="scroll" backgroundColor="powderblue">
+        {children}
+        <Box ref={scrollingElementRef} position="absolute" top={0} left={0} />
+      </Box>
+    </Box>
+  )
+}
+
+const ButtonWithAnchoredOverlay = ({portalContainerName}: {portalContainerName?: string}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <AnchoredOverlay
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      width="small"
+      height="auto"
+      renderAnchor={props => <DropdownButton {...props}>Kitten, please</DropdownButton>}
+      overlayProps={{portalContainerName}}
+    >
+      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
+        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      </Box>
+    </AnchoredOverlay>
+  )
+}
+
+export const DefaultPortal = () => {
+  const rows = 40
+  const columns = 20
+  return (
+    <HeaderAndLayout>
+      <table>
+        <tbody>
+          {Array(rows)
+            .fill(null)
+            .map((_, i) => (
+              <tr key={i}>
+                {Array(columns)
+                  .fill(null)
+                  .map((_1, j) => (
+                    <td key={`${i}${j}`}>
+                      <Box m={2}>
+                        <ButtonWithAnchoredOverlay />
+                      </Box>
+                    </td>
+                  ))}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </HeaderAndLayout>
+  )
+}
+
+export const PortalInsideScrollingElement = () => {
+  const rows = 40
+  const columns = 20
+  return (
+    <HeaderAndLayout>
+      <table>
+        <tbody>
+          {Array(rows)
+            .fill(null)
+            .map((_, i) => (
+              <tr key={i}>
+                {Array(columns)
+                  .fill(null)
+                  .map((_1, j) => (
+                    <td key={`${i}${j}`}>
+                      <Box m={2}>
+                        <ButtonWithAnchoredOverlay portalContainerName="scrollingPortal" />
+                      </Box>
+                    </td>
+                  ))}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </HeaderAndLayout>
+  )
+}