@olenbetong/appframe-ds 1.3.8 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @olenbetong/appframe-ds
 
+## 1.4.1
+
+### Patch Changes
+
+- b0630e5: Dialog motion: the opening transition now also plays for `ob-dialog-motion` elements (the app menu). Their starting style was a separate, less specific rule than the open state and lost to it, so they appeared without the transition and only faded on close.
+
+## 1.4.0
+
+### Minor Changes
+
+- 8ec7b62: One open and close motion for centred dialogs: Designsystemet's `Dialog` (the filter builder and every other centred one) and anything with the new `ob-dialog-motion` class now fade and rise in over 180 ms and play the same motion in reverse over 140 ms when closed, using transitions with `@starting-style` and `allow-discrete` instead of Designsystemet's open-only keyframes. Reduced motion keeps the fade and drops the movement. The filter builder now closes on a backdrop click, and the page content slides back when a docked `AppMenuDrawer` closes instead of jumping.
+
 ## 1.3.8
 
 ### Patch Changes

package/package.json

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

package/src/filter/FilterBuilder.tsx

@@ -402,7 +402,7 @@ export function FilterBuilder({
 	return (
 		<Dialog
 			open={open}
-			closedby="closerequest"
+			closedby="any"
 			closeButton={false}
 			data-size={size}
 			className="ObFilterBuilder-dialog"

package/src/layout/AppMenuDrawer.css

@@ -18,7 +18,8 @@
 		background-color: var(--ds-color-neutral-background-default, #fff);
 		color: var(--ds-color-neutral-text-default, #1e2b3c);
 		transform: translateX(-100%);
-		transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+		/* Same timing as the content offset in Page.css, so the two edges move together. */
+		transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;

package/src/layout/DialogMotion.css

@@ -0,0 +1,79 @@
+/*
+ * One open and close motion for every centred modal: Designsystemet's Dialog (the filter builder,
+ * the site search, the report launcher and any app's own dialogs) and anything else that opts in
+ * with the `ob-dialog-motion` class (the chrome's app menu, which is a plain <dialog>).
+ *
+ * Designsystemet animates the opening with keyframes only, 300 ms, and nothing on close. This
+ * replaces that with transitions, so the close plays the same motion in reverse:
+ *   - @starting-style gives the first frame after showModal() something to transition from;
+ *   - `display` and `overlay` transition with `allow-discrete`, which keeps the dialog in the top
+ *     layer until the fade out has finished after close().
+ * Browsers without `overlay` (Firefox, Safari at the time of writing) still animate the opening
+ * and close without the fade; nothing breaks.
+ *
+ * A dialog only fades out when it is closed with close() and stays mounted. One that React
+ * removes on close disappears at once.
+ *
+ * Reduced motion keeps a short fade and drops the movement.
+ */
+
+:root {
+	--ob-dialog-enter-duration: 180ms;
+	--ob-dialog-exit-duration: 140ms;
+	--ob-dialog-offset: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--ob-dialog-offset: 0;
+	}
+}
+
+.ds-dialog:is(:not([data-placement]), [data-placement="center"]),
+.ob-dialog-motion {
+	opacity: 0;
+	translate: 0 var(--ob-dialog-offset);
+	transition-property: opacity, translate, overlay, display;
+	transition-duration: var(--ob-dialog-exit-duration);
+	transition-timing-function: ease-in;
+	transition-behavior: allow-discrete;
+
+	&[open] {
+		opacity: 1;
+		translate: 0 0;
+		/* Designsystemet's keyframes would play on top of the transition. */
+		animation: none;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+
+		/*
+		 * Nested so it has exactly this rule's selector. A separate @starting-style rule for
+		 * `.ob-dialog-motion[open]` is less specific than this one, whose `:is()` takes the
+		 * specificity of `.ds-dialog:is(...)`, and loses to it: the dialog then has no
+		 * starting frame and appears without the transition.
+		 */
+		@starting-style {
+			opacity: 0;
+			translate: 0 var(--ob-dialog-offset);
+		}
+	}
+
+	&::backdrop {
+		opacity: 0;
+		animation: none;
+		transition-property: opacity, overlay, display;
+		transition-duration: var(--ob-dialog-exit-duration);
+		transition-timing-function: ease-in;
+		transition-behavior: allow-discrete;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+}

package/src/layout/index.tsx

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

package/src/page/Page.css

@@ -16,6 +16,11 @@
 		   rather than the viewport. That is what keeps it clear of a site toolbar rendered
 		   above the app, without needing to know the toolbar's height. */
 		position: relative;
+		/* On the base rule, not the drawer-open one below: the content has to slide back when the
+		   drawer closes too, and a transition declared only where the padding is set stops
+		   applying the moment that rule stops matching. Same timing as the drawer itself
+		   (AppMenuDrawer.css), so the content edge follows the drawer edge. */
+		transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	.ObPage-document {
@@ -35,7 +40,6 @@
 	/* Offset content when a docked Page.Header drawer is open (desktop) */
 	.ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
 		padding-left: var(--ob-page-drawer-width, 20rem);
-		transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
 }