@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/src/stories/Overlay.stories.tsx

@@ -1,186 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,300 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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="text.primary"
-        bg="bg.canvas"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.primary"
-        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="text.primary"
-        bg="bg.canvas"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.primary"
-        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'
-}