Merge branch 'main' into mp/rm-sx/misc-components

Author: mperrotti

.changeset/lucky-facts-obey.md

@@ -2,10 +2,10 @@
 
 ## Status
 
-| Stage    | Status |
-| -------- | ------ |
-| Approved | ✅     |
-| Adopted  | 🚧     |
+| Stage    | Status                                                                               |
+| -------- | ------------------------------------------------------------------------------------ |
+| Approved | ✅                                                                                   |
+| Adopted  | ❌ [Abandoned](https://github.com/github/primer/issues/2534#issuecomment-3227363552) |
 
  
 

contributor-docs/adrs/adr-007-experimental-components.md

@@ -40,14 +40,6 @@ const scenarios = matrix({
       id: 'components-selectpanel-dev--with-css',
       name: 'With Css',
     },
-    {
-      id: 'components-selectpanel-dev--with-sx',
-      name: 'With Sx',
-    },
-    {
-      id: 'components-selectpanel-dev--with-sx-and-css',
-      name: 'With Sx and Css',
-    },
   ],
 })
 

e2e/components/SelectPanel.test.ts

@@ -61,6 +61,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        sx={sx}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"

packages/react/src/ActionList/Description.tsx

@@ -1,3 +1,9 @@
+.Root {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .Container {
   display: flex;
   height: 100%;

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -4,7 +4,6 @@ import type {KeyboardEventHandler} from 'react'
 import type React from 'react'
 import {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import Box from '../Box'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {get} from '../constants'
@@ -27,6 +26,7 @@ import {isValidElementType} from 'react-is'
 import {useAnnouncements} from './useAnnouncements'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -349,13 +349,10 @@ export function FilteredActionList({
   }
 
   return (
-    <Box
+    <BoxWithFallback
       ref={inputAndListContainerRef}
-      display="flex"
-      flexDirection="column"
-      overflow="hidden"
       sx={sx}
-      className={className}
+      className={clsx(className, classes.Root)}
       data-testid="filtered-action-list"
     >
       <StyledHeader>
@@ -399,7 +396,7 @@ export function FilteredActionList({
       <div ref={scrollContainerRef} className={classes.Container}>
         {getBodyContent()}
       </div>
-    </Box>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -1,16 +1,16 @@
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import type React from 'react'
-import {useState} from 'react'
+import {useState, useEffect, useRef} from 'react'
 
-import Box from '../Box'
 import {Button} from '../Button'
 import {SelectPanel} from '.'
 import type {ItemInput} from '../deprecated/ActionList/List'
 import FormControl from '../FormControl'
 import Text from '../Text'
 import Select from '../Select/Select'
 import type {SelectPanelSecondaryAction} from './SelectPanel'
+import classes from './SelectPanel.stories.module.css'
 
 const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Dev',
@@ -30,16 +30,11 @@ const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; bod
 function getColorCircle(color: string) {
   return function () {
     return (
-      <Box
-        sx={{
+      <div
+        className={classes.ColorCircle}
+        style={{
           backgroundColor: color,
           borderColor: color,
-          width: 14,
-          height: 14,
-          borderRadius: 10,
-          margin: 'auto',
-          borderWidth: '1px',
-          borderStyle: 'solid',
         }}
       />
     )
@@ -113,85 +108,6 @@ export const WithCss = () => {
   )
 }
 
-export const WithSx = () => {
-  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
-  const [filter, setFilter] = useState('')
-  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
-  // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
-    const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
-    const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
-    if (aIsSelected && !bIsSelected) return -1
-    if (!aIsSelected && bIsSelected) return 1
-    return 0
-  })
-  const [open, setOpen] = useState(false)
-
-  return (
-    <FormControl>
-      <FormControl.Label>Labels</FormControl.Label>
-      <SelectPanel
-        title="Select labels"
-        placeholder="Select labels" // button text when no items are selected
-        subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
-            {children}
-          </Button>
-        )}
-        open={open}
-        onOpenChange={setOpen}
-        items={selectedItemsSortedFirst}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        sx={{fontFamily: 'Times New Roman'}}
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
-      />
-    </FormControl>
-  )
-}
-
-export const WithSxAndCSS = () => {
-  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
-  const [filter, setFilter] = useState('')
-  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
-  // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = filteredItems.sort((a, b) => {
-    const aIsSelected = selected.some(selectedItem => selectedItem.text === a.text)
-    const bIsSelected = selected.some(selectedItem => selectedItem.text === b.text)
-    if (aIsSelected && !bIsSelected) return -1
-    if (!aIsSelected && bIsSelected) return 1
-    return 0
-  })
-  const [open, setOpen] = useState(false)
-
-  return (
-    <FormControl>
-      <FormControl.Label>Labels</FormControl.Label>
-      <SelectPanel
-        title="Select labels"
-        placeholder="Select labels" // button text when no items are selected
-        subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
-            {children}
-          </Button>
-        )}
-        open={open}
-        onOpenChange={setOpen}
-        items={selectedItemsSortedFirst}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        sx={{fontFamily: 'Times New Roman'}}
-        className="testCustomClassnameMono"
-        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
-      />
-    </FormControl>
-  )
-}
-
 const simpleItems = [
   {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
   {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
@@ -406,3 +322,66 @@ export const AllVariants = () => {
     </>
   )
 }
+
+const NUMBER_OF_ITEMS = 500
+const lotsOfItems = Array.from({length: NUMBER_OF_ITEMS}, (_, index) => {
+  return {
+    id: index,
+    text: `Item ${index}`,
+    description: `Description ${index}`,
+    leadingVisual: getColorCircle('#a2eeef'),
+  }
+})
+
+export const LotsOfItems = () => {
+  const [selected, setSelected] = useState<ItemInput[]>([])
+  const [filter, setFilter] = useState('')
+  const filteredItems = lotsOfItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+  const timeBeforeOpen = useRef<number>()
+  const timeAfterOpen = useRef<number>()
+  const [timeTakenToOpen, setTimeTakenToOpen] = useState<number>()
+
+  const onOpenChange = () => {
+    timeBeforeOpen.current = performance.now()
+    setOpen(!open)
+  }
+
+  useEffect(() => {
+    if (open) {
+      timeAfterOpen.current = performance.now()
+      if (timeBeforeOpen.current) setTimeTakenToOpen(timeAfterOpen.current - timeBeforeOpen.current)
+    }
+  }, [open])
+
+  return (
+    <>
+      <p>
+        Time taken to render {NUMBER_OF_ITEMS} items: {timeTakenToOpen || '(click "Select Labels" to open)'}
+      </p>
+
+      <FormControl>
+        <FormControl.Label>Labels</FormControl.Label>
+        <SelectPanel
+          title="Select labels"
+          placeholder="Select labels"
+          subtitle="Use labels to organize issues and pull requests"
+          renderAnchor={({children, ...anchorProps}) => (
+            <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+              {children}
+            </Button>
+          )}
+          open={open}
+          onOpenChange={onOpenChange}
+          items={filteredItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          onFilterChange={setFilter}
+          width="medium"
+          height="large"
+          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
+        />
+      </FormControl>
+    </>
+  )
+}

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

@@ -19,9 +19,3 @@
   outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
   outline-offset: -2px;
 }
-
-.TruncatedText {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}