fix(button): dont render double icons on icon-only-button when loading (#4023)

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>

Author: stianmorsund

.changeset/big-parts-refuse.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Button**: For `icon`-buttons, dont render children if loading is true

packages/react/src/components/button/button.mdx

@@ -54,7 +54,8 @@ Vurder først om det er betre å bruke [`Link`](/docs/komponenter-link--docs)-ko
 
 ### Knappar som lastar
 
-Når vi skal vise brukaren at knappen held på å laste noko, kan vi kombinere knappen med ein spinner. I eksempelet under bruker vi proppen `loading` for å vise at knappen lastar.
+Når vi skal vise brukaren at knappen held på å laste noko, kan vi kombinere knappen med ein spinner. I eksempelet under bruker vi proppen `loading` for å vise at knappen lastar. 
+Viss `icon` er sett saman med `loading`, vil lasteindikatoren visast i staden for ikonet.
 
 <Canvas of={ButtonStories.Loading} />
 

packages/react/src/components/button/button.stories.tsx

@@ -120,5 +120,9 @@ export const Loading: StoryFn<typeof Button> = () => (
     <Button variant='tertiary' loading>
       Laster...
     </Button>
+    <Button icon loading aria-label='Rediger'>
+      {/* When loading is true and icon is set, loading will take precedence */}
+      <PencilWritingIcon aria-hidden />
+    </Button>
   </>
 );

packages/react/src/components/button/button.test.tsx

@@ -8,6 +8,13 @@ import { Button } from './button';
 const user = userEvent.setup();
 
 describe('Button', () => {
+  beforeAll(() => {
+    // Spinner for loading state uses animations, which we need to mock
+    if (!document.getAnimations) {
+      document.getAnimations = () => [];
+    }
+  });
+
   it('should render as aria-disabled when aria-disabled is true regardless of variant', () => {
     render({
       'aria-disabled': true,
@@ -59,6 +66,12 @@ describe('Button', () => {
     expect(screen.getByRole('link')).not.toHaveAttribute('type');
     expect(screen.queryByRole('button')).toBeNull();
   });
+
+  it('should not render children when icon-only button is loading', () => {
+    render({ loading: true, icon: true, children: 'Button text' });
+    expect(screen.queryByText('Button text')).toBeNull();
+    expect(screen.getByRole('button')).toHaveAttribute('aria-busy');
+  });
 });
 
 const render = (props?: ButtonProps) => renderRtl(<Button {...props} />);

packages/react/src/components/button/button.tsx

@@ -21,6 +21,7 @@ export type ButtonProps = MergeRight<
     'data-color'?: Color | Extract<SeverityColors, 'danger'>;
     /**
      * Toggle icon only styling, pass icon as children
+     * When combined with loading, the loading-icon will be shown instead of the icon.
      * @default false
      */
     icon?: boolean;
@@ -84,7 +85,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ) : (
           loading // Allow custom loading spinner
         )}
-        <Slottable>{children}</Slottable>
+        <Slottable>{icon && loading ? null : children}</Slottable>
       </Component>
     );
   },