ActionList: Handle long text better with inline description

.changeset/cold-parrots-trade.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList: With inline descriptions, long titles and descriptions no longer wrap. Description is truncated to keep in a single row.

e2e/components/SelectPanel.test.ts

@@ -40,6 +40,10 @@ const scenarios = matrix({
       id: 'components-selectpanel-dev--with-css',
       name: 'With Css',
     },
+    {
+      id: 'components-selectpanel-examples--with-long-titles',
+      name: 'With Long Titles',
+    },
   ],
 })
 

packages/react/src/ActionList/ActionList.module.css

@@ -628,6 +628,7 @@ default block */
     font-weight: var(--base-text-weight-semibold);
     /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
     word-break: break-word;
+    flex-shrink: 0;
   }
 
   /* inline */
@@ -640,6 +641,7 @@ default block */
 
     & .ItemLabel {
       word-break: normal;
+      flex-shrink: 0;
     }
 
     &:has([data-truncate='true']) {
@@ -654,6 +656,9 @@ default block */
       /* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */
       /* stylelint-disable-next-line primer/typography */
       line-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

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

@@ -13,6 +13,7 @@ import styles from './SelectPanel.examples.stories.module.css'
 import {useVirtualizer, type VirtualItem} from '@tanstack/react-virtual'
 import Checkbox from '../Checkbox'
 import Label from '../Label'
+import Avatar from '../Avatar'
 
 const meta: Meta<typeof SelectPanel> = {
   title: 'Components/SelectPanel/Examples',
@@ -731,3 +732,50 @@ export const Virtualized = () => {
     </form>
   )
 }
+
+const longNamedUsers: ItemInput[] = [
+  {login: 'pksjce', name: 'Pavithra Kodmad'},
+  {login: 'colebemis', name: 'Cole Bemis'},
+  {login: 'mperrotti', name: 'Mike Perrotti'},
+  {login: 'langermank', name: 'Katie Langerman'},
+  {login: 'siddharthkp', name: 'Siddharth Kshetrapal'},
+  {login: 'siddharthkp', name: 'Siddharth NoMiddleName Kshetrapal'},
+  {login: 'siddharth-kshetrapal', name: 'Siddharth Kshetrapal'},
+  {login: 'siddharth-kshetrapal', name: 'Siddharth NoMiddleName Kshetrapal'},
+].map(user => ({
+  ...user,
+  id: user.login,
+  text: user.login,
+  description: user.name,
+  leadingVisual: () => <Avatar src="https://github.com/primer.png" size={16} />,
+}))
+
+export const WithLongTitles = () => {
+  const [selected, setSelected] = useState<ItemInput[]>([])
+  const [filter, setFilter] = useState('')
+  const filteredItems = longNamedUsers.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FormControl>
+      <FormControl.Label>Assignees</FormControl.Label>
+      <SelectPanel
+        title="Select assignees"
+        placeholder="Select assignees" // button text when no items are selected
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+            {children}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        width="medium"
+      />
+    </FormControl>
+  )
+}