feat(underlay)!: diy migration

components/dialog/stories/dialog.stories.js

@@ -55,7 +55,7 @@ export default {
 	},
 	parameters: {
 		actions: {
-			handles: [],
+			handles: ["click .spectrum-Dialog button"],
 		},
 		status: {
 			type: process.env.MIGRATED_PACKAGES.includes("dialog")

components/dialog/stories/template.js

@@ -2,10 +2,13 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
+import { useArgs } from "@storybook/client-api";
 
+import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
 import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
+import { Template as Button } from '@spectrum-css/button/stories/template.js';
 
 import "../index.css";
 import "../skin.css";
@@ -18,10 +21,13 @@ export const Template = ({
 	heading,
 	content = [],
 	customClasses = [],
+	onclick,
 	id,
 	...globals
 }) => {
 	const { scale } = globals;
+	const [_, updateArgs] = useArgs();
+
 	const Dialog = html`
 		<div
 			class=${classMap({
@@ -49,18 +55,38 @@ export const Template = ({
 					CloseButton({
 						customClasses: [`${rootClass}-closeButton`],
 						...globals,
+						onclick: () => {
+							updateArgs({ isOpen: !isOpen });
+						},
 					})
 				)}
 			</div>
 		</div>
 	`;
 
 	if (showModal) {
-		return Modal({
-			...globals,
-			isOpen,
-			content: Dialog,
-		});
+		return html`
+			${Underlay({
+				...globals,
+				isOpen,
+			})}
+			${Button({
+				...globals,
+				size: "m",
+				variant: "secondary",
+				label: "Click to open Dialog",
+				treatment: "outline",
+				customClasses: ['spectrum-CSSExample-overlayShowButton'],
+				onclick: () => {
+					updateArgs({ isOpen: !isOpen });
+				},
+			})}
+			${Modal({
+				...globals,
+				isOpen,
+				content: Dialog,
+			})}
+		`
 	} else {
 		return Dialog;
 	}

components/underlay/gulpfile.js

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require("@spectrum-css/component-builder-simple");

components/underlay/index.css

@@ -13,34 +13,47 @@ governing permissions and limitations under the License.
 @import '../overlay/index.css';
 
 .spectrum-Underlay {
-  /* Bug: this must be 0ms, not 0 */
-  --spectrum-dialog-confirm-background-entry-animation-delay: 0ms;
-  --spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
-  --spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
+  --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
+  --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
+  --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
+  --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
+  --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
+  --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
+  --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
+
+    /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
+  --spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));;
 }
 
 .spectrum-Underlay {
   @inherit: %spectrum-overlay;
 
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block: 0;
+  inset-inline: 0;
+
+  background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
 
   /* Float above things by default */
   z-index: 1;
 
   overflow: hidden;
 
   /* Exit animations */
-  transition: opacity var(--spectrum-dialog-confirm-background-exit-animation-duration) var(--spectrum-dialog-confirm-background-exit-animation-ease) var(--spectrum-dialog-confirm-background-exit-animation-delay),
-              visibility 0ms linear calc(var(--spectrum-dialog-confirm-background-exit-animation-delay) + var(--spectrum-dialog-confirm-background-exit-animation-duration));
+  transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))
+                      var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease))
+                      var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
+              visibility 0ms
+              linear calc(
+                      var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) +
+                      var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
 }
 
 .spectrum-Underlay.is-open {
   @inherit: %spectrum-overlay--open;
 
   /* Entry animations */
-  transition: opacity var(--spectrum-dialog-confirm-background-entry-animation-duration) var(--spectrum-dialog-confirm-background-entry-animation-ease) var(--spectrum-dialog-confirm-background-entry-animation-delay);
+  transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration))
+                      var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease))
+                      var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
 }

components/underlay/metadata/mods.md

@@ -0,0 +1,9 @@
+| Modifiable Custom Properties                         |
+| ---------------------------------------------------- |
+| `--mod-underlay-background-color`                    |
+| `--mod-underlay-background-entry-animation-delay`    |
+| `--mod-underlay-background-entry-animation-duration` |
+| `--mod-underlay-background-entry-animation-ease`     |
+| `--mod-underlay-background-exit-animation-delay`     |
+| `--mod-underlay-background-exit-animation-duration`  |
+| `--mod-underlay-background-exit-animation-ease`      |

components/underlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/underlay",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "description": "The Spectrum CSS underlay component",
   "license": "Apache-2.0",
   "author": "Adobe",
@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=11"
   },
   "devDependencies": {
-    "@spectrum-css/component-builder": "^4.0.14",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/component-builder-simple": "^2.0.16",
+    "@spectrum-css/tokens": "^11.2.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

components/underlay/stories/template.js

@@ -3,7 +3,6 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
   rootClass = "spectrum-Underlay",

components/underlay/stories/underlay.stories.js

@@ -34,6 +34,7 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {
+	isOpen: true,
   content: [
     "This is a underlay. Don't use it like this. Use it with a Modal and a Dialog.",
   ],

components/underlay/themes/express.css

@@ -0,0 +1,12 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: express) {}

components/underlay/skin.css → components/underlay/themes/spectrum.css

@@ -3,14 +3,11 @@ Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
-
 Unless required by applicable law or agreed to in writing, software distributed under
 the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
 
-.spectrum-Underlay {
-  /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
-  background: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
-}
+@container (--system: spectrum) {}
+