Bugfix/button loading issue in modal

.changeset/afraid-mugs-lay.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Button: Fix edge-case where setting "loading={true}" in a Modal caused the button to get 0 width and not show spinner

@navikt/core/css/button.css

@@ -109,7 +109,7 @@
   margin-right: var(--ac-button-icon-margin);
 }
 
-.navds-button__icon:only-child {
+.navds-button--icon-only .navds-button__icon {
   margin: 0;
 }
 
@@ -497,6 +497,10 @@
 }
 
 /* Loader overrides */
+.navds-button .navds-loader {
+  position: absolute;
+}
+
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: var(--ac-button-loader-stroke, currentColor);
 }
@@ -506,6 +510,10 @@
   stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }
 
+.navds-button--loading > :is(:not(.navds-loader)) {
+  visibility: hidden;
+}
+
 @media (forced-colors: active) {
   .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
     opacity: 1;

@navikt/core/react/src/button/Button.tsx

@@ -1,11 +1,9 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
 import { omit } from "../util";
 import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useClientLayoutEffect } from "../util/hooks";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { OverridableComponent } from "../util/types";
 
 export interface ButtonProps
@@ -74,37 +72,18 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         size = "medium",
         loading = false,
         disabled,
-        style,
         icon,
         iconPosition = "left",
+        onKeyUp,
         ...rest
       },
       ref,
     ) => {
-      const buttonRef = useRef<HTMLButtonElement | null>(null);
-      const [widthOverride, setWidthOverride] = useState<number>();
-
-      const mergedRef = useMergeRefs(buttonRef, ref);
-
-      useClientLayoutEffect(() => {
-        if (loading) {
-          const requestID = window.requestAnimationFrame(() => {
-            setWidthOverride(
-              buttonRef?.current?.getBoundingClientRect()?.width,
-            );
-          });
-          return () => {
-            setWidthOverride(undefined);
-            cancelAnimationFrame(requestID);
-          };
-        }
-      }, [loading, children]);
-
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
-        disabled ?? widthOverride ? omit(rest, ["href"]) : rest;
+        disabled || loading ? omit(rest, ["href"]) : rest;
 
       const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-        if (e.key === " " && !disabled && !widthOverride) {
+        if (e.key === " " && !disabled && !loading) {
           e.currentTarget.click();
         }
       };
@@ -113,41 +92,32 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         <Component
           {...(Component !== "button" ? { role: "button" } : {})}
           {...filterProps}
-          ref={mergedRef}
-          onKeyUp={composeEventHandlers(filterProps.onKeyUp, handleKeyUp)}
+          ref={ref}
+          onKeyUp={composeEventHandlers(onKeyUp, handleKeyUp)}
           className={cl(
             className,
             "navds-button",
             `navds-button--${variant}`,
             `navds-button--${size}`,
             {
-              "navds-button--loading": widthOverride,
+              "navds-button--loading": loading,
               "navds-button--icon-only": !!icon && !children,
-              "navds-button--disabled": disabled ?? widthOverride,
+              "navds-button--disabled": disabled ?? loading,
             },
           )}
-          style={{
-            ...style,
-            width: widthOverride,
-          }}
-          disabled={disabled ?? widthOverride ? true : undefined}
+          disabled={disabled ?? loading ? true : undefined}
         >
-          {widthOverride ? (
-            <Loader size={size} />
-          ) : (
-            <>
-              {icon && iconPosition === "left" && (
-                <span className="navds-button__icon">{icon}</span>
-              )}
-              {children && (
-                <Label as="span" size={size === "medium" ? "medium" : "small"}>
-                  {children}
-                </Label>
-              )}
-              {icon && iconPosition === "right" && (
-                <span className="navds-button__icon">{icon}</span>
-              )}
-            </>
+          {icon && iconPosition === "left" && (
+            <span className="navds-button__icon">{icon}</span>
+          )}
+          {loading && <Loader size={size} />}
+          {children && (
+            <Label as="span" size={size === "medium" ? "medium" : "small"}>
+              {children}
+            </Label>
+          )}
+          {icon && iconPosition === "right" && (
+            <span className="navds-button__icon">{icon}</span>
           )}
         </Component>
       );

@navikt/core/react/src/button/button.stories.tsx

@@ -2,6 +2,8 @@ import { StoryObj } from "@storybook/react";
 import React from "react";
 import { StarIcon as BaseStarIcon } from "@navikt/aksel-icons";
 import { HStack, VStack } from "../layout/stack";
+import { Modal } from "../modal";
+import { BodyLong } from "../typography";
 import { Button } from "./index";
 
 export default {
@@ -154,6 +156,51 @@ export const DisabledAsLink: Story = {
   render: () => <ButtonGrid disabled href="#" as="a" />,
 };
 
+export const InsideModal: Story = {
+  render: () => {
+    const ref = React.useRef<HTMLDialogElement>(null);
+
+    return (
+      <div className="py-16">
+        <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
+
+        <Modal ref={ref} header={{ heading: "Overskrift" }}>
+          <Modal.Body>
+            <BodyLong>
+              Culpa aliquip ut cupidatat laborum minim quis ex in aliqua. Qui
+              incididunt dolor do ad ut. Incididunt eiusmod nostrud deserunt
+              duis laborum. Proident aute culpa qui nostrud velit adipisicing
+              minim. Consequat aliqua aute dolor do sit Lorem nisi mollit velit.
+              Aliqua exercitation non minim minim pariatur sunt laborum ipsum.
+              Exercitation nostrud est laborum magna non non aliqua qui esse.
+            </BodyLong>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button loading type="button" onClick={() => ref.current?.close()}>
+              Primær
+            </Button>
+            <Button
+              loading
+              type="button"
+              variant="secondary"
+              onClick={() => ref.current?.close()}
+            >
+              Sekundær
+            </Button>
+            <Button
+              type="button"
+              variant="tertiary"
+              onClick={() => ref.current?.close()}
+            >
+              Tertiær
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  },
+};
+
 export const Chromatic: Story = {
   render: () => (
     <VStack gap="6" align="center">