diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx index 55f1e598cd78..2d949e4b18aa 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 = () => { Item 1 (with default TrailingAction) - + Item 2 (with link TrailingAction) - + Item 3This is an inline description. - + Item 4This is a block description. - + + + + Item 5This is a block description. + + + + Item 6 + + + + Item 7 + LinkItem 1with TrailingAction shown on hover - + LinkItem 2with TrailingVisual @@ -770,7 +782,7 @@ export const WithTrailingAction = () => { Inactive ItemWith TrailingAction - + diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 64d24058cbc8..64581230867e 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -175,6 +175,10 @@ export const Item = React.forwardRef( '[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 f681cf3a458b..21e7ccb1109f 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 ( - - { + if (!icon) { + return ( + - - ) + > + {/* @ts-expect-error TODO: Fix this */} + + + ) + } else { + return ( + + + + ) + } }, ) as PolymorphicForwardRefComponent<'button' | 'a', ActionListTrailingActionProps>