@olenbetong/appframe-ds 1.13.1 → 1.13.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.13.2
+
+### Patch Changes
+
+- 73900fe: A loading Designsystemet button keeps its size: the spinner lies on top of the label instead of beside it, so nothing shifts when loading starts and stops.
+
 ## 1.13.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",

package/src/layout/ButtonLoading.css

@@ -0,0 +1,16 @@
+/*
+ * A loading Designsystemet button keeps its size. Designsystemet puts the spinner in front of the
+ * label, which widens the button and moves everything beside it when loading starts and stops.
+ * Here the spinner lies on top of the label instead, and the label is hidden but still takes its
+ * space. An icon button is left alone: there the spinner already replaces the icon.
+ */
+.ds-button[aria-busy="true"]:not([data-icon]) {
+	position: relative;
+	color: transparent;
+
+	> .ds-spinner {
+		position: absolute;
+		inset: 0;
+		margin: auto;
+	}
+}

package/src/layout/index.tsx

@@ -1,5 +1,6 @@
 import "./index.css";
 import "./DialogMotion.css";
+import "./ButtonLoading.css";
 
 import { useEffect, useState } from "react";
 import type React from "react";