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..9600a6f86b8 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={block ? classes.ConditionalWrapper : variant === 'link' ? classes.ConditionalWrapperLink : undefined} 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')