SelectPanel: Add stories and tests for documentation purposes

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -9,7 +9,7 @@ import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {get} from '../constants'
 import {ActionList} from '../deprecated/ActionList'
-import type {GroupedListProps, ListPropsBase} from '../deprecated/ActionList/List'
+import type {GroupedListProps, ListPropsBase} from '../SelectPanel/types'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {useId} from '../hooks/useId'
 import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'

packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx

@@ -0,0 +1,244 @@
+import React, {useState} from 'react'
+import Box from '../Box'
+import type {Meta} from '@storybook/react'
+import {Button} from '../Button'
+import type {ItemInput} from '../deprecated/ActionList/List'
+import {SelectPanel} from './SelectPanel'
+import type {OverlayProps} from '../Overlay'
+import {TriangleDownIcon} from '@primer/octicons-react'
+
+const meta = {
+  title: 'Components/SelectPanel/Examples',
+  component: SelectPanel,
+} satisfies Meta<typeof SelectPanel>
+
+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 const HeightInitialWithOverflowingItemsStory = () => {
+  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}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+      />
+    </>
+  )
+}
+HeightInitialWithOverflowingItemsStory.storyName = 'Height: Initial, Overflowing Items'
+
+export const HeightInitialWithUnderflowingItemsStory = () => {
+  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}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        placeholderText="Filter Labels"
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+      />
+    </>
+  )
+}
+HeightInitialWithUnderflowingItemsStory.storyName = 'Height: Initial, Underflowing Items'
+
+export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
+  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}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        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'}}
+      />
+    </>
+  )
+}
+HeightInitialWithUnderflowingItemsAfterFetch.storyName = 'Height: Initial, Underflowing Items (After Fetch)'
+
+export const AboveTallBody = () => {
+  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}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        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: '#9c27b0',
+          height: '100vh',
+          padding: '20px',
+          margin: '20px',
+          color: 'white',
+        }}
+      >
+        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>
+    </>
+  )
+}
+
+export const HeightVariantionsAndScroll = () => {
+  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
+  const [selectedA, setSelectedA] = React.useState<ItemInput | undefined>(longItems[0])
+  const [selectedB, setSelectedB] = React.useState<ItemInput | undefined>(longItems[0])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [openA, setOpenA] = useState(false)
+  const [openB, setOpenB] = useState(false)
+
+  return (
+    <>
+      <h2>With height:medium</h2>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        placeholderText="Filter Labels"
+        open={openA}
+        onOpenChange={setOpenA}
+        items={filteredItems}
+        selected={selectedA}
+        onSelectedChange={setSelectedA}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{height: 'medium'}}
+      />
+      <h2>With height:auto, maxheight:medium</h2>
+      <SelectPanel
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        placeholderText="Filter Labels"
+        open={openB}
+        onOpenChange={setOpenB}
+        items={filteredItems}
+        selected={selectedB}
+        onSelectedChange={setSelectedB}
+        onFilterChange={setFilter}
+        showItemDividers={true}
+        overlayProps={{
+          height: 'auto',
+          maxHeight: 'medium',
+        }}
+      />
+    </>
+  )
+}