From e463bc55d2edd199451e18cbe56bb51e007a3cf4 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 26 Aug 2025 15:18:30 -0700
Subject: [PATCH 1/2] update not to deprecated ActionList

---
 .../react/src/SelectPanel/SelectPanel.examples.stories.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 22ae7f75b4a..de9acf8610f 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -1,11 +1,11 @@
 import React, {useState, useMemo} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
-import type {ItemInput} from '../deprecated/ActionList/List'
+import type {ItemInput} from '../FilteredActionList'
 import {SelectPanel} from './SelectPanel'
 import type {OverlayProps} from '../Overlay'
 import {TriangleDownIcon} from '@primer/octicons-react'
-import {ActionList} from '../deprecated/ActionList'
+import {ActionList} from '../ActionList'
 import FormControl from '../FormControl'
 import {Stack} from '../Stack'
 import {Dialog} from '../experimental'
@@ -297,8 +297,7 @@ export const CustomItemRenderer = () => {
         onFilterChange={setFilter}
         overlayProps={{width: 'medium'}}
         renderItem={item => (
-          <ActionList.Item {...item} text={undefined} className={styles.CustomActionListItem}>
-            {' '}
+          <ActionList.Item id={item.id?.toString()} className={styles.CustomActionListItem}>
             <div className={styles.TruncatedText}>{item.text}</div>
           </ActionList.Item>
         )}

From b082fd320fea4c3e6268bb019676be4f2a540a26 Mon Sep 17 00:00:00 2001
From: Liu Liu <liuliu-dev@github.com>
Date: Tue, 26 Aug 2025 15:39:58 -0700
Subject: [PATCH 2/2] use truncate bool instead of css

---
 .../src/SelectPanel/SelectPanel.examples.stories.module.css | 6 ------
 .../react/src/SelectPanel/SelectPanel.examples.stories.tsx  | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
index e0b0ed4e79a..e0d6d11afa3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
@@ -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;
-}
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index de9acf8610f..1c217e2ada5 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -298,7 +298,7 @@ export const CustomItemRenderer = () => {
         overlayProps={{width: 'medium'}}
         renderItem={item => (
           <ActionList.Item id={item.id?.toString()} className={styles.CustomActionListItem}>
-            <div className={styles.TruncatedText}>{item.text}</div>
+            <ActionList.Description truncate>{item.text}</ActionList.Description>
           </ActionList.Item>
         )}
         message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}