@olenbetong/appframe-ds 1.9.1 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.9.2
+
+### Patch Changes
+
+- 2f1516a: AfGrid and the lookup grid take their row height from `--ds-size-11` instead of `--ds-size-10`, so the text no longer crowds the row (about 34px at sm, 28px at xs). AfGrid's text is one step below the size mode's body text, as MUI's compact grid was, except at xs, and inputs in the grid follow it.
+
 ## 1.9.1
 
 ### Patch Changes

package/package.json

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

package/scripts/copyAssets.mjs

@@ -1,27 +1,27 @@
-/*
- * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
- * themselves. Copy every .css under src/ to the same path under es/, so a new component's
- * stylesheet is published without anyone remembering a list.
- */
-import { cpSync, mkdirSync, readdirSync } from "node:fs";
-import { dirname, join, relative } from "node:path";
-
-function* cssFiles(dir) {
-	for (let entry of readdirSync(dir, { withFileTypes: true })) {
-		let path = join(dir, entry.name);
-		if (entry.isDirectory()) {
-			yield* cssFiles(path);
-		} else if (entry.name.endsWith(".css")) {
-			yield path;
-		}
-	}
-}
-
-let count = 0;
-for (let src of cssFiles("src")) {
-	let dest = join("es", relative("src", src));
-	mkdirSync(dirname(dest), { recursive: true });
-	cpSync(src, dest);
-	count++;
-}
-console.log(`Copied ${count} stylesheets from src/ to es/`);
+/*
+ * tsc emits the JavaScript into es/ but not the stylesheets the components import next to
+ * themselves. Copy every .css under src/ to the same path under es/, so a new component's
+ * stylesheet is published without anyone remembering a list.
+ */
+import { cpSync, mkdirSync, readdirSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+function* cssFiles(dir) {
+	for (let entry of readdirSync(dir, { withFileTypes: true })) {
+		let path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			yield* cssFiles(path);
+		} else if (entry.name.endsWith(".css")) {
+			yield path;
+		}
+	}
+}
+
+let count = 0;
+for (let src of cssFiles("src")) {
+	let dest = join("es", relative("src", src));
+	mkdirSync(dirname(dest), { recursive: true });
+	cpSync(src, dest);
+	count++;
+}
+console.log(`Copied ${count} stylesheets from src/ to es/`);

package/src/AfLookup/LookupGrid.tsx

@@ -9,7 +9,7 @@ import { List, type RowComponentProps, useListRef } from "react-window";
 import { getLocalizedString } from "../i18n.js";
 import { useDsSize } from "../theme/sizeMode.js";
 
-/** The row and header height until `--ds-size-10` is measured, which follows the size mode like AfGrid's rows. */
+/** The row and header height until `--ds-size-11` is measured, which follows the size mode like AfGrid's rows. */
 const ROW_HEIGHT = 40;
 /** Narrowest a column can be made, and what a flexible column counts for in the minimum width */
 const MIN_COLUMN_WIDTH = 80;
@@ -192,7 +192,7 @@ export function LookupGrid<T extends Record<string, unknown>>({
 	let listRef = useListRef(null);
 	let headerRowRef = useRef<HTMLDivElement>(null);
 	let rootRef = useRef<HTMLDivElement>(null);
-	let rowHeight = useDsSize(rootRef, 10, ROW_HEIGHT);
+	let rowHeight = useDsSize(rootRef, 11, ROW_HEIGHT);
 	let [resizedWidths, setResizedWidths] = useState<Partial<Record<string, number>>>({});
 	let [resizing, setResizing] = useState<{ field: string; startWidth: number } | null>(null);
 	let [listInnerWidth, setListInnerWidth] = useState<number>();

package/src/grid/index.css

@@ -4,11 +4,33 @@
 
 /*
  * The grid follows the Designsystemet size mode it sits in instead of MUI's density and type
- * scale: its text is the size mode's body text, like the inputs around it, and its row and header
- * heights come from the same mode (`useAfSizeMode`).
+ * scale, and its row and header heights come from the same mode (`useAfSizeMode`). Its text is
+ * one step below the mode's body text - at sm that is MUI's compact grid text - except at xs,
+ * where the body text is already that small. The size is picked on the element that sets the
+ * mode, so the closest one wins; the components that use `data-size` for a variant of their own
+ * are left out, as in `getSizeMode`. Without a size mode the grid inherits the page's text.
  */
+[data-size]:not(.ds-heading, .ds-paragraph, .ds-spinner, .ds-avatar) {
+	--AfGrid-font-size: var(--ds-body-sm-font-size);
+}
+
+[data-size="xs"]:not(.ds-heading, .ds-paragraph, .ds-spinner, .ds-avatar) {
+	--AfGrid-font-size: var(--ds-body-md-font-size);
+}
+
 .AfGrid-root .MuiDataGrid-root {
-	font-size: inherit;
+	font-size: var(--AfGrid-font-size, inherit);
+}
+
+/*
+ * Inputs in the grid - cell editors, header filters - take the grid's text size rather than the
+ * mode's body text. Only where there is a mouse, so a touch device keeps Designsystemet's floor
+ * that stops iOS zooming in on a focused field (see the site's xs rule).
+ */
+@media (hover: hover) and (pointer: fine) {
+	.AfGrid-root .MuiDataGrid-root .ds-input {
+		--dsc-input-font-size: 1em;
+	}
 }
 
 /*
@@ -30,13 +52,13 @@
 
 /*
  * Controls in a data cell - editors, lookup buttons, the row's action buttons - fit the row, which
- * is `--ds-size-10` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
+ * is `--ds-size-11` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
  * would overflow it at every size. The custom properties are set on the components themselves,
  * so they are overridden there and not on the cell.
  */
 .AfGrid-root .MuiDataGrid-cell {
 	.ds-input {
-		--dsc-input-size: var(--ds-size-10, 2.25rem);
+		--dsc-input-size: var(--ds-size-11, 2.25rem);
 		--dsc-input-padding-block: 0;
 	}
 

package/src/grid/useAfSizeMode.ts

@@ -7,13 +7,14 @@ const FALLBACK_HEIGHT = 36;
 
 /**
  * Row and header heights from the Designsystemet size mode the grid sits in, in place of MUI's
- * density: `--ds-size-10`, which is 25px at xs, 31px at sm, 35px at md and 41px at lg with the
- * site's 14px root. The grid renders at the standard density, so these are the heights as they
- * are. The text, toolbar and footer follow the same size mode through the stylesheet and by
+ * density: `--ds-size-11`, which is about 28px at xs, 34px at sm, 39px at md and 45px at lg with
+ * the site's 14px root - close to Designsystemet's own table at each size. `--ds-size-10` left the
+ * text crowded in its row. The grid renders at the standard density, so these are the heights as
+ * they are. The text, toolbar and footer follow the same size mode through the stylesheet and by
  * inheriting `data-size`.
  */
 export function useAfSizeMode(rootRef: RefObject<HTMLElement | null>) {
-	let height = useDsSize(rootRef, 10, FALLBACK_HEIGHT);
+	let height = useDsSize(rootRef, 11, FALLBACK_HEIGHT);
 
 	return { rowHeight: height, columnHeaderHeight: height };
 }

package/tsconfig.build.json

@@ -1,9 +1,9 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"],
-	"exclude": ["es", "node_modules"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"],
+	"exclude": ["es", "node_modules"]
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-	"extends": "../tsconfig.build.base.json",
-	"compilerOptions": {
-		"rootDir": "./src",
-		"outDir": "./es"
-	},
-	"include": ["src"]
-}
+{
+	"extends": "../tsconfig.build.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./es"
+	},
+	"include": ["src"]
+}

package/vitest.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-	test: {
-		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
-		environment: "happy-dom",
-		setupFiles: ["src/test/setup.ts"],
-		env: { NODE_ENV: "test" },
-	},
-});
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
+		environment: "happy-dom",
+		setupFiles: ["src/test/setup.ts"],
+		env: { NODE_ENV: "test" },
+	},
+});