SelectPanel: Implement empty state

.changeset/new-mangos-fold.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Implement empty state (behind ff)

e2e/components/SelectPanel.test.ts

@@ -20,7 +20,7 @@ const scenarios = matrix({
       name: 'With Placeholder for Search Input',
     },
     {id: 'components-selectpanel-examples--above-tall-body', name: 'Above Tall Body'},
-    {id: 'components-selectpanel-examples--height-variantions-and-scroll', name: 'Height Variantions and Scroll'},
+    {id: 'components-selectpanel-examples--height-variations-and-scroll', name: 'Height Variations and Scroll'},
     {
       id: 'components-selectpanel-examples--height-initial-with-overflowing-items-story',
       name: 'Height Initial with Overflowing Items',

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

@@ -0,0 +1,6 @@
+.Container {
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  flex-grow: 1;
+}

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -14,6 +14,7 @@ import {VisuallyHidden} from '../VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
+import classes from './FilteredActionList.module.css'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 
 import {isValidElementType} from 'react-is'
@@ -32,6 +33,7 @@ export interface FilteredActionListProps
   onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
+  message?: React.ReactNode
   className?: string
   announcementsEnabled?: boolean
 }
@@ -54,6 +56,7 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
+  message,
   className,
   selectionVariant,
   announcementsEnabled = true,
@@ -150,6 +153,47 @@ export function FilteredActionList({
     return itemsInGroup
   }
 
+  function getBodyContent() {
+    if (loading && scrollContainerRef.current && loadingType.appearsInBody) {
+      return <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
+    }
+    if (message) {
+      return message
+    }
+
+    return (
+      <ActionListContainerContext.Provider
+        value={{
+          container: 'FilteredActionList',
+          listRole: 'listbox',
+          selectionAttribute: 'aria-selected',
+          selectionVariant,
+          enableFocusZone: true,
+        }}
+      >
+        <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
+          {groupMetadata?.length
+            ? groupMetadata.map((group, index) => {
+                return (
+                  <ActionList.Group key={index}>
+                    <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+                      {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+                    </ActionList.GroupHeading>
+                    {getItemListForEachGroup(group.groupId).map((item, index) => {
+                      const key = item.key ?? item.id?.toString() ?? index.toString()
+                      return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+                    })}
+                  </ActionList.Group>
+                )
+              })
+            : items.map((item, index) => {
+                const key = item.key ?? item.id?.toString() ?? index.toString()
+                return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
+              })}
+        </ActionList>
+      </ActionListContainerContext.Provider>
+    )
+  }
   useAnnouncements(items, listRef, inputRef, enableAnnouncements)
 
   return (
@@ -183,42 +227,9 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <Box ref={scrollContainerRef} overflow="auto" display="flex" flexGrow={1}>
-        {loading && scrollContainerRef.current && loadingType.appearsInBody ? (
-          <FilteredActionListBodyLoader loadingType={loadingType} height={scrollContainerRef.current.clientHeight} />
-        ) : (
-          <ActionListContainerContext.Provider
-            value={{
-              container: 'FilteredActionList',
-              listRole: 'listbox',
-              selectionAttribute: 'aria-selected',
-              selectionVariant,
-              enableFocusZone: true,
-            }}
-          >
-            <ActionList ref={listRef} showDividers={showItemDividers} {...listProps} id={listId} sx={{flexGrow: 1}}>
-              {groupMetadata?.length
-                ? groupMetadata.map((group, index) => {
-                    return (
-                      <ActionList.Group key={index}>
-                        <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
-                          {group.header?.title ? group.header.title : `Group ${group.groupId}`}
-                        </ActionList.GroupHeading>
-                        {getItemListForEachGroup(group.groupId).map((item, index) => {
-                          const key = item.key ?? item.id?.toString() ?? index.toString()
-                          return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                        })}
-                      </ActionList.Group>
-                    )
-                  })
-                : items.map((item, index) => {
-                    const key = item.key ?? item.id?.toString() ?? index.toString()
-                    return <MappedActionListItem key={key} {...item} renderItem={listProps.renderItem} />
-                  })}
-            </ActionList>
-          </ActionListContainerContext.Provider>
-        )}
-      </Box>
+      <div ref={scrollContainerRef} className={classes.Container}>
+        {getBodyContent()}
+      </div>
     </Box>
   )
 }

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

@@ -9,13 +9,21 @@ import type {ItemInput} from '../deprecated/ActionList/List'
 import {FeatureFlags} from '../FeatureFlags'
 import FormControl from '../FormControl'
 
-const meta = {
+const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Dev',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
+const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
+  return {
+    variant: 'empty',
+    title: `No language found for \`${filter}\``,
+    body: 'Adjust your search term to find other languages',
+  }
+}
+
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -108,6 +116,7 @@ export const WithCss = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           className="testCustomClassnameMono"
+          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -159,6 +168,7 @@ export const WithSx = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
+          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>
@@ -211,6 +221,7 @@ export const WithSxAndCSS = () => {
           onFilterChange={setFilter}
           sx={{fontFamily: 'Times New Roman'}}
           className="testCustomClassnameMono"
+          message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </FeatureFlags>

packages/react/src/SelectPanel/SelectPanel.docs.json

@@ -150,7 +150,48 @@
       "type": "string | React.ReactElement",
       "defaultValue": "null",
       "description": "Footer rendered at the end of the panel"
+    },
+    {
+      "name": "message",
+      "type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';  body: React.ReactNode;}",
+      "defaultValue": "A default empty message is provided by default if this option is not supplied",
+      "description": "Message to display in the panel in case of error or empty results"
+    },
+    {
+      "name": "notice",
+      "type": "{text: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';}",
+      "description": "Optional notice to display on top of the panel"
     }
   ],
-  "subcomponents": []
+  "subcomponents": [
+    {
+      "name": "SelectPanel.Message",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "description": "A title for the message"
+        },
+        {
+          "name": "variant",
+          "type": "'empty' | 'error' | 'warning'",
+          "description": "The variant of the message",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "defaultValue": "",
+          "description": "Custom className"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "defaultValue": "",
+          "required": true,
+          "description": "The message to display"
+        }
+      ]
+    }
+  ]
 }

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

@@ -11,13 +11,21 @@ import FormControl from '../FormControl'
 import {Stack} from '../Stack'
 import {Dialog} from '../experimental'
 
-const meta = {
+const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Examples',
   component: SelectPanel,
 } satisfies Meta<typeof SelectPanel>
 
 export default meta
 
+const NoResultsMessage = (filter: string): {variant: 'empty'; title: string; body: string} => {
+  return {
+    variant: 'empty',
+    title: `No language found for \`${filter}\``,
+    body: 'Adjust your search term to find other languages',
+  }
+}
+
 function getColorCircle(color: string) {
   return function () {
     return (
@@ -82,6 +90,7 @@ export const HeightInitialWithOverflowingItemsStory = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -127,6 +136,7 @@ export const HeightInitialWithUnderflowingItemsStory = () => {
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -149,7 +159,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
     [fetchedItems, filter, selected],
   )
   // design guidelines say to sort selected items first
-  const selectedItemsSortedFirst = fetchedItems.sort((a, b) => {
+  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
@@ -179,13 +189,14 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
         placeholder="Select labels" // button text when no items are selected
         open={open}
         onOpenChange={onOpenChange}
-        loading={filteredItems.length === 0}
+        loading={filteredItems.length === 0 && !filter}
         items={selectedItemsSortedFirst}
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
         overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -228,6 +239,7 @@ export const AboveTallBody = () => {
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
         showItemDividers={true}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
       <div
         style={{
@@ -245,7 +257,7 @@ export const AboveTallBody = () => {
   )
 }
 
-export const HeightVariantionsAndScroll = () => {
+export const HeightVariationsAndScroll = () => {
   const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
   const [filter, setFilter] = useState('')
   // Example A
@@ -293,6 +305,7 @@ export const HeightVariantionsAndScroll = () => {
           onFilterChange={setFilter}
           showItemDividers={true}
           overlayProps={{height: 'medium'}}
+          message={selectedItemsSortedFirstA.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
       <br />
@@ -316,6 +329,7 @@ export const HeightVariantionsAndScroll = () => {
             height: 'auto',
             maxHeight: 'medium',
           }}
+          message={selectedItemsSortedFirstB.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </FormControl>
     </>
@@ -390,6 +404,7 @@ export const CustomItemRenderer = () => {
             </Box>
           </ActionList.Item>
         )}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -439,6 +454,7 @@ export const ItemsInScope = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />
     </FormControl>
   )
@@ -484,6 +500,7 @@ export const RepositionAfterLoading = () => {
           selected={selected}
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
+          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </>
@@ -531,6 +548,7 @@ export const SelectPanelRepositionInsideDialog = () => {
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
           overlayProps={{anchorSide: 'outside-top'}}
+          message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
     </Dialog>