fix(Button): Apply inline-flex display to loading wrapper for link variant

.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

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;

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={block ? classes.ConditionalWrapper : variant === 'link' ? classes.ConditionalWrapperLink : undefined}
       data-loading-wrapper
     >
       <Component

packages/react/src/Button/__tests__/Button.test.tsx

@@ -259,6 +259,18 @@ describe('Button', () => {
     expect(container.getByRole('button')).toHaveAccessibleName('content')
   })
 
+  it('should apply inline-flex display to loading wrapper when variant is link', () => {
+    const {container} = render(
+      <Button variant="link" loading>
+        content
+      </Button>,
+    )
+
+    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(<IconButton icon={HeartIcon} aria-label="Heart" />)
     const triggerEL = getByRole('button')