@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/stories/Overlay.stories.tsx

@@ -0,0 +1,186 @@
+import React, {useState, useRef, useCallback} from 'react'
+import {Meta} from '@storybook/react'
+import styled from 'styled-components'
+import {BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Box} from '..'
+import {DropdownMenu, DropdownButton} from '../DropdownMenu'
+import {ItemInput} from '../ActionList/List'
+
+export default {
+  title: 'Internal components/Overlay',
+  component: Overlay,
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+const DummyItem = styled.button`
+  border-radius: 6px;
+  font-weight: 400;
+  padding: 6px 8px;
+  font-weight: 400;
+  text-align: left;
+  margin: 0;
+  font-size: 14px;
+  background: none;
+  border: none;
+  &:hover {
+    background: #f0f3f5;
+  }
+
+  &:focus {
+    background: red;
+  }
+`
+
+export const DropdownOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  return (
+    <>
+      <Button ref={buttonRef} sx={{position: 'relative'}} onClick={() => setIsOpen(!isOpen)}>
+        open overlay
+      </Button>
+      {isOpen ? (
+        <Overlay
+          returnFocusRef={buttonRef}
+          height="auto"
+          width="small"
+          ignoreClickRefs={[buttonRef]}
+          onEscape={() => setIsOpen(false)}
+          onClickOutside={() => setIsOpen(false)}
+        >
+          <Box display="flex" flexDirection="column" p={2}>
+            <DummyItem>Copy link</DummyItem>
+            <DummyItem>Quote reply</DummyItem>
+            <DummyItem>Reference in new issue</DummyItem>
+            <DummyItem>Edit</DummyItem>
+            <DummyItem>Delete</DummyItem>
+          </Box>
+        </Overlay>
+      ) : null}
+    </>
+  )
+}
+
+export const DialogOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => setIsOpen(false)
+  return (
+    <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        open overlay
+      </Button>
+      {isOpen ? (
+        <Overlay
+          initialFocusRef={confirmButtonRef}
+          returnFocusRef={buttonRef}
+          ignoreClickRefs={[buttonRef]}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="small"
+        >
+          <Box display="flex" flexDirection="column" p={2}>
+            <Text>Are you sure?</Text>
+            <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
+            <Button onClick={closeOverlay} ref={confirmButtonRef}>
+              Confirm
+            </Button>
+          </Box>
+        </Overlay>
+      ) : null}
+    </Box>
+  )
+}
+
+export const OverlayOnTopOfOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isSecondaryOpen, setIsSecondaryOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const secondaryButtonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => setIsOpen(false) // intentionally not memoized
+  const closeSecondaryOverlay = useCallback(() => setIsSecondaryOpen(false), [setIsSecondaryOpen])
+  const items = React.useMemo(
+    () => [
+      {
+        text: '🔵 Cyan',
+        onMouseDown: (e: React.MouseEvent) => {
+          e.preventDefault()
+        }
+      },
+      {
+        text: '🔴 Magenta',
+        onMouseDown: (e: React.MouseEvent) => {
+          e.preventDefault()
+        }
+      },
+      {
+        text: '🟡 Yellow',
+        onMouseDown: (e: React.MouseEvent) => {
+          e.preventDefault()
+        }
+      }
+    ],
+    []
+  )
+  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
+  return (
+    <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
+      <input placeholder="Input for focus testing" />
+      <br />
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        open overlay
+      </Button>
+      {isOpen ? (
+        <Overlay
+          initialFocusRef={confirmButtonRef}
+          returnFocusRef={buttonRef}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="small"
+        >
+          <Button ref={secondaryButtonRef} onClick={() => setIsSecondaryOpen(!isSecondaryOpen)}>
+            open overlay
+          </Button>
+          {isSecondaryOpen ? (
+            <Overlay
+              initialFocusRef={confirmButtonRef}
+              returnFocusRef={secondaryButtonRef}
+              onEscape={closeSecondaryOverlay}
+              onClickOutside={closeSecondaryOverlay}
+              width="small"
+              sx={{top: '40px'}}
+            >
+              <Box display="flex" flexDirection="column" p={2}>
+                <Text>Select an option!</Text>
+                <DropdownMenu
+                  renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+                    <DropdownButton aria-labelledby={`favorite-color-label ${ariaLabelledBy}`} {...anchorProps}>
+                      {children}
+                    </DropdownButton>
+                  )}
+                  placeholder="🎨"
+                  items={items}
+                  selectedItem={selectedItem}
+                  onChange={setSelectedItem}
+                />
+              </Box>
+            </Overlay>
+          ) : null}
+        </Overlay>
+      ) : null}
+    </Box>
+  )
+}

package/src/stories/Portal.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, ThemeProvider} from '..'
+import Portal, {registerPortalRoot} from '../Portal'
+
+export default {
+  title: 'Generic behaviors/Portal',
+  component: Portal,
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+export const defaultPortal = () => (
+  <>
+    Root position
+    <Box bg="red.2" p={3}>
+      Outer container
+      <Box bg="green.2" p={3}>
+        Inner container
+        <Portal>
+          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.
+        </Portal>
+      </Box>
+    </Box>
+  </>
+)
+
+export const customPortalRootById = () => (
+  <>
+    Root position
+    <Box bg="red.2" p={3} id="__primerPortalRoot__">
+      Outer container
+      <Box bg="green.2" p={3}>
+        Inner container
+        <Portal>Portaled content rendered at the outer container.</Portal>
+      </Box>
+    </Box>
+  </>
+)
+
+export const CustomPortalRootByRegistration: React.FC<Record<string, never>> = () => {
+  const outerContainerRef = React.useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement) {
+      registerPortalRoot(outerContainerRef.current)
+      setMounted(true)
+    }
+  }, [])
+  return (
+    <>
+      Root position
+      <Box bg="red.2" p={3} ref={outerContainerRef}>
+        {mounted ? (
+          <>
+            Outer container
+            <Box bg="green.2" p={3}>
+              Inner container
+              <Portal>Portaled content rendered at the outer container.</Portal>
+            </Box>
+          </>
+        ) : null}
+      </Box>
+    </>
+  )
+}
+
+export const MultiplePortalRoots: React.FC<Record<string, never>> = () => {
+  const outerContainerRef = React.useRef<HTMLDivElement>(null)
+  const innerContainerRef = React.useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) {
+      registerPortalRoot(outerContainerRef.current, 'outer')
+      registerPortalRoot(innerContainerRef.current, 'inner')
+      setMounted(true)
+    }
+  }, [outerContainerRef])
+  return (
+    <>
+      Root position
+      <Box bg="red.2" p={3} ref={outerContainerRef}>
+        Outer container
+        <Box bg="green.2" p={3} ref={innerContainerRef}>
+          {mounted ? (
+            <>
+              <Portal containerName="outer">Portaled content rendered at the outer container.</Portal>
+              <Portal containerName="inner">Portaled content rendered at the end of the inner container.</Portal>
+              <Portal>
+                Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.
+              </Portal>
+            </>
+          ) : null}
+          Inner container
+        </Box>
+      </Box>
+    </>
+  )
+}

package/src/stories/SelectPanel.stories.tsx

@@ -0,0 +1,300 @@
+import type {OverlayProps} from '../Overlay'
+import {Meta} from '@storybook/react'
+import React, {useRef, useState} from 'react'
+import {theme, ThemeProvider} from '..'
+import {ItemInput} from '../ActionList/List'
+import BaseStyles from '../BaseStyles'
+import {DropdownButton} from '../DropdownMenu'
+import {SelectPanel} from '../SelectPanel'
+import Box from '../Box'
+
+const meta: Meta = {
+  title: 'Composite components/SelectPanel',
+  component: SelectPanel,
+  decorators: [
+    (Story: React.ComponentType): JSX.Element => {
+      return (
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+}
+export default meta
+
+function getColorCircle(color: string) {
+  return function () {
+    return (
+      <Box
+        bg={color}
+        borderColor={color}
+        width={14}
+        height={14}
+        borderRadius={10}
+        margin="auto"
+        borderWidth="1px"
+        borderStyle="solid"
+      />
+    )
+  }
+}
+
+const items = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
+]
+
+export function MultiSelectStory(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Multi Select Panel</h1>
+      <div>Please select labels that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'xsmall'}}
+      />
+    </>
+  )
+}
+MultiSelectStory.storyName = 'Multi Select'
+
+export function SingleSelectStory(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Single Select Panel</h1>
+      <div>Please select a label that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'xsmall'}}
+      />
+    </>
+  )
+}
+SingleSelectStory.storyName = 'Single Select'
+
+export function ExternalAnchorStory(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <h1>Select Panel With External Anchor</h1>
+      <DropdownButton ref={buttonRef} onClick={() => setOpen(!open)}>
+        Custom: {selected?.text || 'Click Me'}
+      </DropdownButton>
+      <SelectPanel
+        renderAnchor={null}
+        anchorRef={buttonRef}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'xsmall'}}
+      />
+    </>
+  )
+}
+ExternalAnchorStory.storyName = 'With External Anchor'
+
+export function SelectPanelHeightInitialWithOverflowingItemsStory(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Single Select Panel</h1>
+      <div>Please select a label that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+      />
+    </>
+  )
+}
+SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items'
+
+export function SelectPanelHeightInitialWithUnderflowingItemsStory(): JSX.Element {
+  const underflowingItems = [items[0], items[1]]
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(underflowingItems[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Single Select Panel</h1>
+      <div>Please select a label that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+      />
+    </>
+  )
+}
+SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items'
+
+export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+  const [filter, setFilter] = React.useState('')
+  const [fetchedItems, setFetchedItems] = useState<typeof items>([])
+  const filteredItems = React.useMemo(
+    () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())),
+    [fetchedItems, filter]
+  )
+  const [open, setOpen] = useState(false)
+  const [height, setHeight] = useState<OverlayProps['height']>('auto')
+
+  const onOpenChange = () => {
+    setOpen(!open)
+    setTimeout(() => {
+      setFetchedItems([items[0], items[1]])
+      setHeight('initial')
+    }, 1500)
+  }
+
+  return (
+    <>
+      <h1>Single Select Panel</h1>
+      <div>Please select a label that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={onOpenChange}
+        loading={filteredItems.length === 0}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
+      />
+    </>
+  )
+}
+SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName =
+  'SelectPanel, Height: Initial, Underflowing Items (After Fetch)'
+
+export function SelectPanelAboveTallBody(): JSX.Element {
+  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Single Select Panel</h1>
+      <div>Please select a label that describe your issue:</div>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </DropdownButton>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'xsmall'}}
+      />
+      <div
+        style={{
+          backgroundColor: 'cornflowerblue',
+          height: '100vh'
+        }}
+      >
+        This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal
+        is far down the page
+      </div>
+    </>
+  )
+}
+SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body'

package/src/stories/ThemeProvider.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import {Meta, Story} from '@storybook/react'
+
+import {ThemeProvider, BaseStyles, Box, themeGet, useTheme} from '..'
+import {ThemeProviderProps} from '../ThemeProvider'
+import {createGlobalStyle} from 'styled-components'
+
+export default {
+  title: 'Generic behaviors/ThemeProvider',
+  component: ThemeProvider,
+  argTypes: {
+    theme: {
+      table: {
+        disable: true
+      }
+    }
+  }
+} as Meta
+
+const GlobalStyle = createGlobalStyle`
+    body {
+        background-color: ${themeGet('colors.bg.canvas')};
+    }
+`
+
+function ActiveColorScheme() {
+  const {colorScheme} = useTheme()
+  return <span>Active color scheme: {colorScheme}</span>
+}
+
+export const Default: Story<ThemeProviderProps> = args => {
+  return (
+    <ThemeProvider {...args}>
+      <GlobalStyle />
+      <BaseStyles>
+        <ActiveColorScheme />
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}
+
+Default.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark'
+}
+
+function NightMode() {
+  return (
+    <ThemeProvider colorMode="night">
+      <Box
+        my={3}
+        p={3}
+        color="fg.default"
+        bg="canvas.default"
+        borderWidth="1px"
+        borderStyle="solid"
+        borderColor="border.default"
+        borderRadius={2}
+      >
+        Always night mode (<ActiveColorScheme />)
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+function InverseMode() {
+  const {resolvedColorMode} = useTheme()
+  return (
+    <ThemeProvider colorMode={resolvedColorMode === 'day' ? 'night' : 'day'}>
+      <Box
+        my={3}
+        p={3}
+        color="fg.default"
+        bg="canvas.default"
+        borderWidth="1px"
+        borderStyle="solid"
+        borderColor="border.default"
+        borderRadius={2}
+      >
+        Always inverse of parent mode (<ActiveColorScheme />)
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+export const Nested: Story<ThemeProviderProps> = args => {
+  return (
+    <ThemeProvider {...args}>
+      <GlobalStyle />
+      <BaseStyles>
+        <ActiveColorScheme />
+        <NightMode />
+        <InverseMode />
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}
+
+Nested.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark_dimmed'
+}