From 28b19cabd8d2dfa4e9ec87718025b212ef5a0c97 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Aug 2026 16:42:42 -0500 Subject: [PATCH 1/2] Migrate Button roots to mergeProps Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 9541ca7f-0281-4223-a839-39d75393d922 --- .changeset/bright-buttons-merge.md | 5 +++ packages/react/src/Button/Button.tsx | 3 +- packages/react/src/Button/IconButton.tsx | 41 ++++++++++++++---------- packages/react/src/Button/LinkButton.tsx | 3 +- 4 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 .changeset/bright-buttons-merge.md diff --git a/.changeset/bright-buttons-merge.md b/.changeset/bright-buttons-merge.md new file mode 100644 index 00000000000..cfef16dd2f3 --- /dev/null +++ b/.changeset/bright-buttons-merge.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Button: Preserve component behavior and styling when merging consumer props diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx index 30f64bd9d67..367ccbe00a1 100644 --- a/packages/react/src/Button/Button.tsx +++ b/packages/react/src/Button/Button.tsx @@ -2,10 +2,11 @@ import {forwardRef, type JSX} from 'react' import type {ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import {mergeProps} from '../utils/mergeProps' const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => { return ( - + {children} ) diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index b48d54475a5..753bbaa0788 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -6,7 +6,7 @@ import {Tooltip} from '../TooltipV2/Tooltip' import {TooltipContext} from '../TooltipV2/TooltipContext' import {TooltipContext as TooltipContextV1} from '../Tooltip/TooltipContext' import classes from './ButtonBase.module.css' -import {clsx} from 'clsx' +import {mergeProps} from '../utils/mergeProps' const IconButton = forwardRef( ( @@ -20,7 +20,6 @@ const IconButton = forwardRef( unsafeDisableTooltip = false, keyshortcuts, keybindingHint, - className, ...props }, forwardedRef, @@ -43,13 +42,17 @@ const IconButton = forwardRef( if (withoutTooltip) { return ( @@ -66,14 +69,18 @@ const IconButton = forwardRef( _privateDisableTooltip={hasActivePopup} > ) diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx index a617581fa8b..7244e1ea4c7 100644 --- a/packages/react/src/Button/LinkButton.tsx +++ b/packages/react/src/Button/LinkButton.tsx @@ -2,12 +2,13 @@ import {forwardRef, type JSX} from 'react' import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import {mergeProps} from '../utils/mergeProps' export type LinkButtonProps = BaseLinkButtonProps & ButtonProps const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => { return ( - + {children} ) From 2a7e15c9400d933f7b7392a0e96d4ed1ac09981b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Aug 2026 16:56:58 -0500 Subject: [PATCH 2/2] Preserve Button prop behavior Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 9541ca7f-0281-4223-a839-39d75393d922 --- .changeset/bright-buttons-merge.md | 5 ----- packages/react/src/Button/Button.tsx | 2 +- packages/react/src/Button/IconButton.tsx | 10 ++++++---- packages/react/src/Button/LinkButton.tsx | 2 +- 4 files changed, 8 insertions(+), 11 deletions(-) delete mode 100644 .changeset/bright-buttons-merge.md diff --git a/.changeset/bright-buttons-merge.md b/.changeset/bright-buttons-merge.md deleted file mode 100644 index cfef16dd2f3..00000000000 --- a/.changeset/bright-buttons-merge.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Button: Preserve component behavior and styling when merging consumer props diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx index 367ccbe00a1..080d67fd329 100644 --- a/packages/react/src/Button/Button.tsx +++ b/packages/react/src/Button/Button.tsx @@ -6,7 +6,7 @@ import {mergeProps} from '../utils/mergeProps' const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => { return ( - + {children} ) diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index 753bbaa0788..617e751044f 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -7,6 +7,7 @@ import {TooltipContext} from '../TooltipV2/TooltipContext' import {TooltipContext as TooltipContextV1} from '../Tooltip/TooltipContext' import classes from './ButtonBase.module.css' import {mergeProps} from '../utils/mergeProps' +import {clsx} from 'clsx' const IconButton = forwardRef( ( @@ -20,6 +21,7 @@ const IconButton = forwardRef( unsafeDisableTooltip = false, keyshortcuts, keybindingHint, + className, ...props }, forwardedRef, @@ -42,10 +44,12 @@ const IconButton = forwardRef( if (withoutTooltip) { return ( ) } else { @@ -72,7 +74,7 @@ const IconButton = forwardRef( {...mergeProps( { icon: Icon, - className: classes.IconButton, + className: clsx(classes.IconButton, className), 'data-component': 'IconButton', type: 'button', 'aria-keyshortcuts': keyshortcuts ?? undefined, diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx index 7244e1ea4c7..b15aed99ca2 100644 --- a/packages/react/src/Button/LinkButton.tsx +++ b/packages/react/src/Button/LinkButton.tsx @@ -8,7 +8,7 @@ export type LinkButtonProps = BaseLinkButtonProps & ButtonProps const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => { return ( - + {children} )