diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index 5d981a41947..7f18e8a9d76 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -11,6 +11,7 @@ import type {FCWithSlotMarker} from '../utils/types/Slots' import {GroupHeadingTrailingAction} from './GroupHeadingTrailingAction' import {useFeatureFlag} from '../FeatureFlags' import {GroupContext} from './GroupContext' +import {mergeProps} from '../utils/mergeProps' const GROUP_HEADING_TRAILING_ACTION_FEATURE_FLAG = 'primer_react_action_list_group_heading_trailing_action' @@ -28,11 +29,7 @@ const Heading: React.FC> id, ...rest }) => { - return ( - - {children} - - ) + return {children} } type HeadingWrapProps = { @@ -98,10 +95,14 @@ export const Group: FCWithSlotMarker {title && !slots.groupHeading ? ( diff --git a/packages/react/src/ActionList/GroupHeadingTrailingAction.tsx b/packages/react/src/ActionList/GroupHeadingTrailingAction.tsx index a9b809c7466..e8fea3bce10 100644 --- a/packages/react/src/ActionList/GroupHeadingTrailingAction.tsx +++ b/packages/react/src/ActionList/GroupHeadingTrailingAction.tsx @@ -4,6 +4,7 @@ import {IconButton} from '../Button' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import type {SlotMarker} from '../utils/types/Slots' import type {ActionListTrailingActionProps} from './TrailingAction' +import {mergeProps} from '../utils/mergeProps' /** * Props for `ActionList.GroupHeading.TrailingAction`. @@ -21,17 +22,21 @@ export type ActionListGroupHeadingTrailingActionProps = Omit ( ), ) as PolymorphicForwardRefComponent<'button' | 'a', ActionListGroupHeadingTrailingActionProps> & { diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx index b8dd90e305d..3bb1ec3ec26 100644 --- a/packages/react/src/ActionList/Heading.tsx +++ b/packages/react/src/ActionList/Heading.tsx @@ -8,6 +8,7 @@ import {invariant} from '../utils/invariant' import {clsx} from 'clsx' import classes from './Heading.module.css' import visuallyHiddenClasses from '../_VisuallyHidden.module.css' +import {mergeProps} from '../utils/mergeProps' type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' type HeadingVariants = 'large' | 'medium' | 'small' @@ -34,19 +35,27 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false, return ( {children} diff --git a/packages/react/src/ActionList/Item.test.tsx b/packages/react/src/ActionList/Item.test.tsx index 1dbfb0d453b..5a2835e7b8d 100644 --- a/packages/react/src/ActionList/Item.test.tsx +++ b/packages/react/src/ActionList/Item.test.tsx @@ -208,11 +208,22 @@ describe('ActionList.Item', () => { ) const button = container.querySelector('button') expect(button).toHaveTextContent('Item 1') + expect(button).toHaveAttribute('type', 'button') // Ensure passed prop "disabled" is applied to the button expect(button).toHaveAttribute('aria-disabled', 'true') const listItems = container.querySelectorAll('li') expect(listItems.length).toBe(2) }) + it('allows consumers to override the button type', async () => { + const props = {type: 'submit'} as const + const {container} = HTMLRender( + + Item 1 + , + ) + + expect(container.querySelector('button')).toHaveAttribute('type', 'submit') + }) it('should render ActionList.Item as li when item has proper aria role', async () => { const {container} = HTMLRender( diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 1606952e3e1..441f120363e 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -17,6 +17,7 @@ import {clsx} from 'clsx' import {fixedForwardRef} from '../utils/modern-polymorphic' import {Tooltip} from '../TooltipV2' import {TooltipContext} from '../TooltipV2/TooltipContext' +import {mergeProps} from '../utils/mergeProps' type ActionListSubItemProps = { children?: React.ReactNode @@ -50,10 +51,10 @@ export const SubItem: React.FC = ({children}) => { SubItem.displayName = 'ActionList.SubItem' -const ButtonItemContainer = React.forwardRef>( - ({children, style, ...props}, forwardedRef) => { +const ButtonItemContainer = React.forwardRef>( + ({children, ...props}, forwardedRef) => { return ( - )