From 21e2e7ac488561c023a9b89fa562a1ecf79c1c2a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 23 Mar 2026 12:04:34 +0000 Subject: [PATCH 1/4] fix(Button): apply inline-flex display to loading wrapper for link variant When a Button with variant="link" uses the loading prop, the data-loading-wrapper div now gets display: inline-flex to preserve inline behavior. Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com> Agent-Logs-Url: https://github.com/primer/react/sessions/54244975-bac3-490e-8119-69589a0d92dc --- .changeset/fix-link-loading-wrapper.md | 5 +++++ packages/react/src/Button/ButtonBase.module.css | 4 ++++ packages/react/src/Button/ButtonBase.tsx | 2 +- packages/react/src/Button/__tests__/Button.test.tsx | 12 ++++++++++++ 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 .changeset/fix-link-loading-wrapper.md diff --git a/.changeset/fix-link-loading-wrapper.md b/.changeset/fix-link-loading-wrapper.md new file mode 100644 index 00000000000..ea0e37551c9 --- /dev/null +++ b/.changeset/fix-link-loading-wrapper.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +fix(Button): Apply inline-flex display to loading wrapper for link variant buttons diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 73073718cd0..b383ca07afd 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -654,6 +654,10 @@ display: block; } +.ConditionalWrapperLink { + display: inline-flex; +} + [data-kbd-chord] { transition: 80ms ease-in; transition-property: color, background-color, border-color; diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index aa337e32ea7..0b59c252e88 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -81,7 +81,7 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f // when `loading` is `false`. // Then, the component re-renders in a way that the button will lose focus when switching between loading states. if={typeof loading !== 'undefined'} - className={block ? classes.ConditionalWrapper : undefined} + className={clsx(block && classes.ConditionalWrapper, variant === 'link' && classes.ConditionalWrapperLink)} data-loading-wrapper > { expect(container.getByRole('button')).toHaveAccessibleName('content') }) + it('should apply inline-flex display to loading wrapper when variant is link', () => { + const {container} = render( + , + ) + + const wrapper = container.querySelector('[data-loading-wrapper]') + expect(wrapper).toBeInTheDocument() + expect(wrapper).toHaveClass(classes.ConditionalWrapperLink) + }) + it('should render tooltip on an icon button when unsafeDisableTooltip prop is passed as false', () => { const {getByRole, getByText} = render() const triggerEL = getByRole('button') From 54dcf6cb2d5d1292c70e66a38405a1f8cd39a84e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20D=C3=ADaz?= <1458873+HiroAgustin@users.noreply.github.com> Date: Mon, 23 Mar 2026 13:55:46 +0100 Subject: [PATCH 2/4] Update packages/react/src/Button/ButtonBase.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/react/src/Button/ButtonBase.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 0b59c252e88..642035bc31d 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -81,7 +81,13 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f // when `loading` is `false`. // Then, the component re-renders in a way that the button will lose focus when switching between loading states. if={typeof loading !== 'undefined'} - className={clsx(block && classes.ConditionalWrapper, variant === 'link' && classes.ConditionalWrapperLink)} + className={ + block + ? classes.ConditionalWrapper + : variant === 'link' + ? classes.ConditionalWrapperLink + : undefined + } data-loading-wrapper > Date: Mon, 23 Mar 2026 13:07:31 +0000 Subject: [PATCH 3/4] chore: auto-fix lint and formatting issues --- packages/react/src/Button/ButtonBase.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 642035bc31d..9600a6f86b8 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -81,13 +81,7 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f // when `loading` is `false`. // Then, the component re-renders in a way that the button will lose focus when switching between loading states. if={typeof loading !== 'undefined'} - className={ - block - ? classes.ConditionalWrapper - : variant === 'link' - ? classes.ConditionalWrapperLink - : undefined - } + className={block ? classes.ConditionalWrapper : variant === 'link' ? classes.ConditionalWrapperLink : undefined} data-loading-wrapper > Date: Mon, 23 Mar 2026 14:11:04 +0100 Subject: [PATCH 4/4] fix: resolve prettier formatting violation in ButtonBase.tsx (#7691) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>