From ce69bc91f0c98d02bb2b14eb315bcca60d6798f3 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:32:13 -0400
Subject: [PATCH 1/3] spike on allowing text

---
 .../ActionList.features.stories.tsx           | 24 +++++--
 packages/react/src/ActionList/Item.tsx        |  2 +-
 .../react/src/ActionList/TrailingAction.tsx   | 65 ++++++++++++-------
 3 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 55f1e598cd7..2d949e4b18a 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -744,23 +744,35 @@ export const WithTrailingAction = () => {
             <FileDirectoryIcon />
           </ActionList.LeadingVisual>
           Item 1 (with default TrailingAction)
-          <ActionList.TrailingAction aria-label="Expand sidebar" icon={ArrowLeftIcon} />
+          <ActionList.TrailingAction label="Expand sidebar" icon={ArrowLeftIcon} />
         </ActionList.Item>
         <ActionList.Item>
           Item 2 (with link TrailingAction)
-          <ActionList.TrailingAction as="a" href="#" aria-label="Some action 1" icon={ArrowRightIcon} />
+          <ActionList.TrailingAction as="a" href="#" label="Some action 1" icon={ArrowRightIcon} />
         </ActionList.Item>
         <ActionList.Item>
           Item 3<ActionList.Description>This is an inline description.</ActionList.Description>
-          <ActionList.TrailingAction aria-label="Some action 2" icon={BookIcon} />
+          <ActionList.TrailingAction label="Some action 2" icon={BookIcon} />
         </ActionList.Item>
         <ActionList.Item>
           Item 4<ActionList.Description variant="block">This is a block description.</ActionList.Description>
-          <ActionList.TrailingAction aria-label="Some action 2" icon={BookIcon} />
+          <ActionList.TrailingAction label="Some action 3" icon={BookIcon} />
+        </ActionList.Item>
+        <ActionList.Item>
+          Item 5<ActionList.Description variant="block">This is a block description.</ActionList.Description>
+          <ActionList.TrailingAction label="Some action 4" />
+        </ActionList.Item>
+        <ActionList.Item>
+          Item 6
+          <ActionList.TrailingAction href="#" as="a" label="Some action 5" />
+        </ActionList.Item>
+        <ActionList.Item>
+          Item 7
+          <ActionList.TrailingAction showOnHover href="#" as="a" label="Some action 5" />
         </ActionList.Item>
         <ActionList.LinkItem href="#">
           LinkItem 1<ActionList.Description>with TrailingAction shown on hover</ActionList.Description>
-          <ActionList.TrailingAction aria-label="Some action 3" icon={BookIcon} showOnHover />
+          <ActionList.TrailingAction label="Some action 6" icon={BookIcon} showOnHover />
         </ActionList.LinkItem>
         <ActionList.LinkItem href="#">
           LinkItem 2<ActionList.Description>with TrailingVisual</ActionList.Description>
@@ -770,7 +782,7 @@ export const WithTrailingAction = () => {
         </ActionList.LinkItem>
         <ActionList.Item inactiveText="Unavailable due to an outage">
           Inactive Item<ActionList.Description>With TrailingAction</ActionList.Description>
-          <ActionList.TrailingAction as="a" href="#" aria-label="Some action 4" icon={ArrowRightIcon} />
+          <ActionList.TrailingAction as="a" href="#" label="Some action 4" icon={ArrowRightIcon} />
         </ActionList.Item>
       </ActionList>
     </FeatureFlags>
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index ab1b5fd273e..07ebb11d96c 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -172,7 +172,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         },
         ':hover, :focus, :focus-within': {
           // Used when `showOnHover` is passed to `TrailingAction`
-          '[data-component="IconButton"]': {
+          '[data-component="ActionList.TrailingAction"]': {
             display: 'flex',
           },
         },
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index cf65118fc7e..eab7357defe 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,42 +1,57 @@
 import React, {forwardRef} from 'react'
 import Box from '../Box'
-import {IconButton} from '../Button'
+import {Button, IconButton} from '../Button'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 export type ActionListTrailingActionProps = {
   as?: 'button' | 'a'
   href?: string
-  icon: React.ElementType
-  'aria-label': string
+  icon?: React.ElementType
+  label: string
   showOnHover?: boolean
 }
 
 export const TrailingAction = forwardRef(
-  ({as, icon, 'aria-label': ariaLabel, showOnHover = false, href = null, ...props}, forwardedRef) => {
-    return (
-      <Box
-        as="span"
-        sx={{
-          flexShrink: 0,
-        }}
-      >
-        <IconButton
-          as={as}
-          aria-label={ariaLabel}
-          icon={icon}
-          variant="invisible"
-          unsafeDisableTooltip={false}
-          tooltipDirection="w"
+  ({as = 'button', icon, label, showOnHover = false, href = null}, forwardedRef) => {
+    if (!icon) {
+      return (
+        <Box
+          data-component="ActionList.TrailingAction"
+          as="span"
           sx={{
+            flexShrink: 0,
             display: showOnHover ? 'none' : 'flex',
           }}
-          href={href}
-          // @ts-expect-error StyledButton wants both Anchor and Button refs
-          ref={forwardedRef}
-          {...props}
-        />
-      </Box>
-    )
+        >
+          {/* @ts-expect-error TODO: Fix this */}
+          <Button variant="invisible" as={as} href={href} ref={forwardedRef}>
+            {label}
+          </Button>
+        </Box>
+      )
+    } else {
+      return (
+        <Box
+          as="span"
+          data-component="ActionList.TrailingAction"
+          sx={{
+            flexShrink: 0,
+          }}
+        >
+          <IconButton
+            as={as}
+            aria-label={label}
+            icon={icon}
+            variant="invisible"
+            unsafeDisableTooltip={false}
+            tooltipDirection="w"
+            href={href}
+            // @ts-expect-error StyledButton wants both Anchor and Button refs
+            ref={forwardedRef}
+          />
+        </Box>
+      )
+    }
   },
 ) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>
 

From 9405e71cb9154ad15cedfefdbd87af7255eb5023 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:37:49 -0400
Subject: [PATCH 2/3] showOnHover support

---
 .../react/src/ActionList/ActionList.features.stories.tsx  | 8 ++++----
 packages/react/src/ActionList/TrailingAction.tsx          | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 2d949e4b18a..c9412e0aab1 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -767,12 +767,12 @@ export const WithTrailingAction = () => {
           <ActionList.TrailingAction href="#" as="a" label="Some action 5" />
         </ActionList.Item>
         <ActionList.Item>
-          Item 7
-          <ActionList.TrailingAction showOnHover href="#" as="a" label="Some action 5" />
+          Item 7<ActionList.Description>with TrailingAction shown on hover</ActionList.Description>
+          <ActionList.TrailingAction showOnHover href="#" as="a" label="Some action 6" />
         </ActionList.Item>
         <ActionList.LinkItem href="#">
           LinkItem 1<ActionList.Description>with TrailingAction shown on hover</ActionList.Description>
-          <ActionList.TrailingAction label="Some action 6" icon={BookIcon} showOnHover />
+          <ActionList.TrailingAction label="Some action 7" icon={BookIcon} showOnHover />
         </ActionList.LinkItem>
         <ActionList.LinkItem href="#">
           LinkItem 2<ActionList.Description>with TrailingVisual</ActionList.Description>
@@ -782,7 +782,7 @@ export const WithTrailingAction = () => {
         </ActionList.LinkItem>
         <ActionList.Item inactiveText="Unavailable due to an outage">
           Inactive Item<ActionList.Description>With TrailingAction</ActionList.Description>
-          <ActionList.TrailingAction as="a" href="#" label="Some action 4" icon={ArrowRightIcon} />
+          <ActionList.TrailingAction as="a" href="#" label="Some action 8" icon={ArrowRightIcon} />
         </ActionList.Item>
       </ActionList>
     </FeatureFlags>
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index eab7357defe..fbca6696005 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -36,6 +36,7 @@ export const TrailingAction = forwardRef(
           data-component="ActionList.TrailingAction"
           sx={{
             flexShrink: 0,
+            display: showOnHover ? 'none' : 'flex',
           }}
         >
           <IconButton

From 2a64399acf0c65245ecf7184736cc44696218a32 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:36:41 -0400
Subject: [PATCH 3/3] Add overflow example

---
 .../src/ActionList/ActionList.features.stories.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index c9412e0aab1..204f46e4d21 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -775,7 +775,19 @@ export const WithTrailingAction = () => {
           <ActionList.TrailingAction label="Some action 7" icon={BookIcon} showOnHover />
         </ActionList.LinkItem>
         <ActionList.LinkItem href="#">
-          LinkItem 2<ActionList.Description>with TrailingVisual</ActionList.Description>
+          LinkItem 1
+          <ActionList.Description>
+            with TrailingAction this is a long description and should not cause horizontal scroll on smaller screen
+            sizes
+          </ActionList.Description>
+          <ActionList.TrailingAction label="Another action" />
+        </ActionList.LinkItem>
+        <ActionList.LinkItem href="#">
+          LinkItem 2
+          <ActionList.Description>
+            with TrailingVisual this is a long description and should not cause horizontal scroll on smaller screen
+            sizes
+          </ActionList.Description>
           <ActionList.TrailingVisual>
             <TableIcon />
           </ActionList.TrailingVisual>