@olenbetong/appframe-ds 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 6235575: Selects in a grid cell being edited no longer draw a field border and background; they fill the cell like the text editor.
+
 ## 1.13.0
 
 ### Minor Changes

package/package.json

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

package/src/grid/slots/slots.css

@@ -12,6 +12,31 @@
 	width: 100%;
 }
 
+/* In a cell being edited the select fills the cell like the grid's own text editor: the cell's
+   outline already marks the edit, so a field border inside it only looks cramped. */
+.MuiDataGrid-cell--editing .AfGrid-select {
+	--dsc-input-background: transparent;
+	--dsc-input-border-color: transparent;
+	--dsc-input-border-radius: 0;
+	--dsc-input-outline-color--hover: transparent;
+
+	block-size: 100%;
+}
+
+/* The open list takes its colours from the select, which is transparent here; without its own
+   background it falls back to white under the theme's text colour. */
+.MuiDataGrid-cell--editing .AfGrid-select option {
+	background-color: var(--ds-color-neutral-surface-default);
+	color: var(--ds-color-neutral-text-default);
+}
+
+/* The grid outlines the focused cell, as it does for the text editor; Designsystemet's focus
+   ring on top of it would read as a second, mismatched border. */
+.MuiDataGrid-cell--editing .AfGrid-select:focus-visible {
+	outline: none;
+	box-shadow: none;
+}
+
 /* Sort-order and filter-count badges on header icon buttons: a compact number
    pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
 .AfGrid-badge .ds-badge {

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";