@olenbetong/appframe-ds 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @olenbetong/appframe-ds
 
+## 1.3.1
+
+### Patch Changes
+
+- 2c2ed02: `DataEditToolbar`: the previous/next buttons no longer stack (Designsystemet buttons are `display: flex`, so the navigation group is a flex row now), and the toolbar is a tinted bar with a bottom border in the theme's tokens instead of black-at-12% top and bottom borders, which were invisible in dark mode and doubled up against a tab list above it.
+- c28f772: `InputAdornments`: the hover style is drawn on the wrapper like the focus style (Designsystemet's inner outline, on the whole control), and the inner input no longer shows its own hover outline.
+- Updated dependencies [a4158e8]
+  - @olenbetong/appframe-react@2.2.2
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,17 +63,17 @@
     "@atlaskit/pragmatic-drag-and-drop": "3.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.2",
     "@base-ui/react": "1.8.0",
+    "@olenbetong/appframe-core": "2.14.0",
+    "@olenbetong/appframe-data": "1.7.2",
+    "@olenbetong/appframe-react": "2.2.2",
     "clsx": "^2.1.1",
     "dockview-react": "8.3.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "react-window": "2.3.1",
-    "temporal-polyfill": "1.0.5",
-    "@olenbetong/appframe-react": "2.2.1",
-    "@olenbetong/appframe-core": "2.14.0",
-    "@olenbetong/appframe-data": "1.7.2"
+    "react-window": "2.3.3",
+    "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.22.0",
@@ -90,7 +90,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "happy-dom": "20.14.5",
-    "react-error-boundary": "6.1.5",
+    "react-error-boundary": "6.1.6",
     "react-router": "8.4.0",
     "typescript": "7.0.2"
   },

package/src/binding/DataEditToolbar.css

@@ -0,0 +1,23 @@
+/*
+ * A toolbar bar above a record form: tinted, so it reads as chrome rather than as part of the
+ * form below it. Designsystemet buttons are `display: flex`, so every group of them must be a
+ * flex row of its own or the buttons stack.
+ */
+@layer ds {
+	.DataEditToolbar-root {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		min-height: 48px;
+		padding-inline: var(--ds-size-2);
+		background: var(--ds-color-neutral-background-tinted);
+		border-block-end: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	}
+
+	.DataEditToolbar-navigation {
+		display: flex;
+		align-items: center;
+		gap: var(--ds-size-1);
+		margin-inline-start: auto;
+	}
+}

package/src/binding/DataEditToolbar.tsx

@@ -1,3 +1,5 @@
+import "./DataEditToolbar.css";
+
 import { Button, Tooltip } from "@digdir/designsystemet-react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import type { DataObject } from "@olenbetong/appframe-data";
@@ -55,23 +57,13 @@ export function DataEditToolbar({
 	children,
 	navigationDataObject,
 	showNavigation,
-	style,
+	className,
 	...props
 }: DataEditToolbarProps) {
 	let dataObject = useDataObject();
 
 	return (
-		<div
-			style={{
-				display: "flex",
-				alignItems: "center",
-				minHeight: "48px",
-				borderBottom: "1px solid rgb(0 0 0 / 0.12)",
-				borderTop: "1px solid rgb(0 0 0 / 0.12)",
-				...style,
-			}}
-			{...props}
-		>
+		<div className={className ? `DataEditToolbar-root ${className}` : "DataEditToolbar-root"} {...props}>
 			<Tooltip content={getLocalizedString("Save changes")}>
 				<SaveIconButton />
 			</Tooltip>
@@ -83,7 +75,7 @@ export function DataEditToolbar({
 			</Tooltip>
 			{children}
 			{showNavigation && (
-				<div style={{ marginLeft: "auto" }}>
+				<div className="DataEditToolbar-navigation">
 					<IndexNavigator dataObject={navigationDataObject ?? dataObject} />
 				</div>
 			)}

package/src/input/InputAdornments.css

@@ -40,8 +40,13 @@
 	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
 }
 
-.ObInputAdornments-root:hover:not(:focus-within) {
-	border-color: var(--ds-color-neutral-border-strong, #767676);
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
 }
 
 .ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
@@ -68,6 +73,10 @@
 	opacity: 1;
 }
 
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
 .ObInputAdornments-root .ObInputAdornments-field:focus-visible {
 	box-shadow: none;
 	outline: none;