spike on allowing text

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -744,33 +744,57 @@ 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.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 aria-label="Some action 3" icon={BookIcon} showOnHover />
+          <ActionList.TrailingAction label="Some action 7" icon={BookIcon} showOnHover />
+        </ActionList.LinkItem>
+        <ActionList.LinkItem href="#">
+          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</ActionList.Description>
+          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>
         </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 8" icon={ArrowRightIcon} />
         </ActionList.Item>
       </ActionList>
     </FeatureFlags>

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',
           },
         },

packages/react/src/ActionList/TrailingAction.tsx

@@ -1,42 +1,58 @@
 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,
+            display: showOnHover ? 'none' : 'flex',
+          }}
+        >
+          <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>