From bc1a30a798c15a4c0f5f6295aab2a0e7bbcc794e 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] spike on allowing text

---
 .../ActionList.features.stories.tsx           | 24 ++++--
 packages/react/src/ActionList/Item.tsx        |  4 +
 .../react/src/ActionList/TrailingAction.tsx   | 73 ++++++++++++-------
 3 files changed, 70 insertions(+), 31 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 64d24058cbc..64581230867 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -175,6 +175,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           '[data-component="IconButton"]': {
             display: 'flex',
           },
+          // TODO: How do we target Button?
+          '[data-component="Button"]': {
+            display: 'flex',
+          },
         },
       },
     }
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index f681cf3a458..21e7ccb1109 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,41 +1,64 @@
 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 = 'button', icon, 'aria-label': ariaLabel, showOnHover = false, href = null}, 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
+          as="span"
           sx={{
-            display: showOnHover ? 'none' : 'flex',
+            flexShrink: 0,
           }}
-          href={href}
-          // @ts-expect-error StyledButton wants both Anchor and Button refs
-          ref={forwardedRef}
-        />
-      </Box>
-    )
+        >
+          {/* @ts-expect-error TODO: Fix this */}
+          <Button
+            variant="invisible"
+            as={as}
+            href={href}
+            sx={{
+              display: showOnHover ? 'none' : 'flex',
+            }}
+          >
+            {label}
+          </Button>
+        </Box>
+      )
+    } else {
+      return (
+        <Box
+          as="span"
+          sx={{
+            flexShrink: 0,
+          }}
+        >
+          <IconButton
+            as={as}
+            aria-label={label}
+            icon={icon}
+            variant="invisible"
+            unsafeDisableTooltip={false}
+            tooltipDirection="w"
+            sx={{
+              display: showOnHover ? 'none' : 'flex',
+            }}
+            href={href}
+            // @ts-expect-error StyledButton wants both Anchor and Button refs
+            ref={forwardedRef}
+          />
+        </Box>
+      )
+    }
   },
 ) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>