@raspberrypifoundation/design-system-react 2.10.4 → 2.11.1

package/dist/scss/components/button.scss

@@ -30,6 +30,16 @@
   --rpf-button-lg-height: var(--lg-target-size);
   --rpf-button-sm-height: var(--sm-target-size);
   --rpf-button-min-target-size: var(--min-target-size);
+
+  --rpf-button-spinner-color: currentcolor;
+  --rpf-button-spinner-size: .6em;
+  --rpf-button-spinner-track-width: var(--border-width-lg);
+}
+
+@keyframes rpf-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .rpf-button {
@@ -86,7 +96,8 @@
   }
 
   &:disabled,
-  &--disabled {
+  &--disabled,
+  &--loading {
     cursor: default;
 
     &::before,
@@ -96,6 +107,45 @@
     }
   }
 
+  &--loading {
+    /* More accurate than `cursor: default` - the button is still targetable, just busy */
+    cursor: not-allowed;
+    justify-content: center;
+
+    .text {
+      display: grid;
+      justify-items: center;
+
+      > * {
+        grid-area: 1 / 1;
+      }
+
+      &__idle--hidden {
+        visibility: hidden;
+      }
+
+      &__loading {
+        align-items: center;
+        display: flex;
+        gap: var(--space-1);
+      }
+    }
+  }
+
+  &__spinner {
+    animation: rpf-button-spin 1s linear infinite;
+    block-size: var(--rpf-button-spinner-size);
+    border: var(--rpf-button-spinner-track-width) solid var(--rpf-button-spinner-track-color, color-mix(in srgb, var(--rpf-button-spinner-color) 25%, transparent));
+    border-inline-start-color: var(--rpf-button-spinner-color);
+    border-radius: 50%;
+    flex-shrink: 0;
+    inline-size: var(--rpf-button-spinner-size);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-duration: 1.5s;
+    }
+  }
+
   &--secondary {
     color: var(--rpf-button-background-color);
 
@@ -122,7 +172,8 @@
     }
 
     &:disabled,
-    &.rpf-button--disabled {
+    &.rpf-button--disabled,
+    &.rpf-button--loading {
       color: var(--rpf-button-background-color-disabled);
 
       &:hover::before,
@@ -158,7 +209,8 @@
       }
 
       &:disabled,
-      &.rpf-button--disabled {
+      &.rpf-button--disabled,
+      &.rpf-button--loading {
         color: var(--rpf-button-danger-background-color-disabled);
 
         &:hover::before,
@@ -199,7 +251,8 @@
     }
 
     &:disabled,
-    &.rpf-button--disabled {
+    &.rpf-button--disabled,
+    &.rpf-button--loading {
       color: var(--rpf-button-background-color-disabled);
 
       &::before,
@@ -235,7 +288,8 @@
       }
 
       &:disabled,
-      &.rpf-button--disabled {
+      &.rpf-button--disabled,
+      &.rpf-button--loading {
         color: var(--rpf-button-danger-background-color-disabled);
 
         &::before,
@@ -268,6 +322,16 @@
     &:focus-visible::before {
       outline: var(--border-width-md) solid var(--rpf-button-danger-background-color);
     }
+
+    &:disabled,
+    &.rpf-button--disabled,
+    &.rpf-button--loading {
+      &::before,
+      &:hover::before {
+        background-color: var(--rpf-button-danger-background-color-disabled);
+        border-color: var(--rpf-button-danger-border-color-disabled, var(--rpf-button-danger-background-color-disabled));
+      }
+    }
   }
 
   &--icon-only {

package/dist/types/src/components/Button/Button.types.d.ts

@@ -12,6 +12,13 @@ export type ButtonProps = {
     size?: "default" | "small";
     /** Whether the button is disabled */
     disabled?: boolean;
+    /**
+     * Shows a spinner, blocks clicks and announces `loadingText`, while keeping focus.
+     * Pass a boolean from the first render, and set it before any `await` in `onClick`.
+     */
+    loading?: boolean;
+    /** Visible label and status announcement while loading (pass a translated string). Defaults to "Loading" */
+    loadingText?: string;
     /** The href attribute for link buttons */
     href?: string;
     /** The icon name */

package/dist/types/src/components/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,gCAAgC;IAChC,OAAO,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,kCAAkC;IAClC,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,gCAAgC;IAChC,OAAO,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4GAA4G;IAC5G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,kCAAkC;IAClC,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/types/src/components/Button/index.d.ts

@@ -1,6 +1,6 @@
 import "@/components/MaterialSymbols";
 import "./Button.scss";
 import type { ButtonProps } from "./Button.types";
-export declare const Button: ({ text, href, title, className, type, variant, size, icon, iconOnly, iconPosition, fullWidth, disabled, onClick, "aria-label": ariaLabel, linkComponent, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ text, href, title, className, type, variant, size, icon, iconOnly, iconPosition, fullWidth, disabled, loading, loadingText, onClick, "aria-label": ariaLabel, linkComponent, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAGtC,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,4JAgBpB,WAAW,4CA6Eb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAGtC,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,kLAkBpB,WAAW,4CAyIb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/src/stories/Button.stories.d.ts

@@ -69,6 +69,35 @@ export namespace Danger {
     }
     export { args_9 as args };
 }
+export namespace Loading {
+    export namespace args_10 {
+        let loading: boolean;
+        let loadingText: string;
+    }
+    export { args_10 as args };
+}
+export namespace LoadingInteractive {
+    export function render(args: any): import("react/jsx-runtime").JSX.Element;
+    export namespace args_11 {
+        let loadingText_1: string;
+        export { loadingText_1 as loadingText };
+    }
+    export { args_11 as args };
+}
+export namespace LoadingLink {
+    export namespace args_12 {
+        let href_2: string;
+        export { href_2 as href };
+        export { Link as linkComponent };
+        let loading_1: boolean;
+        export { loading_1 as loading };
+        let loadingText_2: string;
+        export { loadingText_2 as loadingText };
+    }
+    export { args_12 as args };
+    let decorators_2: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export { decorators_2 as decorators };
+}
 declare namespace options {
     export let title: string;
     export { Button as component };
@@ -116,8 +145,22 @@ declare namespace options {
             export { options_3 as options };
         }
         export { iconPosition_1 as iconPosition };
+        export namespace loading_2 {
+            let control_4: string;
+            export { control_4 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { loading_2 as loading };
+        export namespace loadingText_3 {
+            let control_5: string;
+            export { control_5 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { loadingText_3 as loadingText };
     }
-    let args_10: {
+    let args_13: {
         text: string;
         type: string;
         variant: string;
@@ -133,8 +176,10 @@ declare namespace options {
         onClick: null;
         "aria-label": string;
         linkComponent: null;
+        loading: undefined;
+        loadingText: string;
     };
-    export { args_10 as args };
+    export { args_13 as args };
 }
 import { Link } from "react-router-dom";
 //# sourceMappingURL=Button.stories.d.ts.map

package/dist/types/src/stories/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Button.stories.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBACoC,kBAAkB"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Button.stories.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyNU,2EAaP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBApOiC,kBAAkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "version": "2.10.4",
+  "version": "2.11.1",
   "type": "module",
   "main": "./dist/design-system-react.umd.cjs",
   "module": "./dist/design-system-react.js",
@@ -43,7 +43,7 @@
     "ts:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "@raspberrypifoundation/design-system-core": "^2.4.10",
+    "@raspberrypifoundation/design-system-core": "^2.5.1",
     "classnames": "^2.5.1",
     "lucide-react": "^0.553.0"
   },
@@ -86,7 +86,7 @@
     "sass-embedded": "^1.83.1",
     "storybook": "^8.6.18",
     "typescript": "^5.9.2",
-    "vite": "^6.2.4",
+    "vite": "^6.4.3",
     "vitest": "^3.1.1"
   },
   "peerDependencies": {