feat(dialog): use latest @spectrum-css/dialog beta

MIGRATION: `sp-dialog` no longer supports the `open` attribute and will be open by default MIGRATION: `sp-dialog`'s `title` slot renamed to `heading` MIGRATION: `dismissible` attribute renamed to `dismissable`
adobe · Nov 24, 2020 · 1a599a6 · 1a599a6
1 parent 9360b60
commit 1a599a6
Show file tree

Hide file tree

Showing 9 changed files with 378 additions and 510 deletions.
diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md
@@ -31,7 +31,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
 <sp-dialog-wrapper
     id="dialog-wrapper-demo"
     headline="Dialog title"
-    dismissible
+    dismissable
     underlay
     footer="Content for footer"
     hidden
@@ -92,3 +92,40 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
     Toggle Dialog
 </sp-button>
 ```
+
+### Fullscreen Takeover Mode
+
+```html
+<sp-dialog-wrapper
+    id="dialog-wrapper-demo"
+    headline="Dialog title"
+    mode="fullscreenTakeover"
+    confirm-label="Keep Both"
+    secondary-label="Replace"
+    cancel-label="Cancel"
+    footer="Content for footer"
+    hidden
+>
+    Content of the dialog
+</sp-dialog-wrapper>
+<sp-button
+    onClick="
+        const dialogWrapper = this.previousElementSibling;
+        dialogWrapper.hidden = false;
+        dialogWrapper.open = true;
+        function handleEvent({type}) {
+            spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
+            dialogWrapper.open = false;
+            dialogWrapper.removeEventListener('confirm', handleEvent);
+            dialogWrapper.removeEventListener('secondary', handleEvent);
+            dialogWrapper.removeEventListener('cancel', handleEvent);
+        }
+        dialogWrapper.addEventListener('confirm', handleEvent);
+        dialogWrapper.addEventListener('secondary', handleEvent);
+        dialogWrapper.addEventListener('cancel', handleEvent);
+    "
+    variant="primary"
+>
+    Toggle Dialog
+</sp-button>
+```
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
@@ -50,13 +50,14 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/dialog": "^3.0.0-beta.3"
+        "@spectrum-css/dialog": "^3.0.0-beta.4"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
         "@spectrum-web-components/button": "^0.9.4",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
+        "@spectrum-web-components/modal": "^0.0.1",
         "@spectrum-web-components/shared": "^0.7.4",
         "@spectrum-web-components/underlay": "^0.3.3",
         "tslib": "^2.0.0"

diff --git a/packages/dialog/src/dialog-wrapper.css b/packages/dialog/src/dialog-wrapper.css
diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css
@@ -12,17 +12,77 @@ governing permissions and limitations under the License.
 
 @import './spectrum-dialog.css';
 
-::slotted([slot='button']) {
-    margin-left: var(
-        --spectrum-buttongroup-button-gap-x,
-        var(--spectrum-global-dimension-static-size-200)
-    );
-}
-
 .content {
     overflow: hidden;
 }
 
 .content[tabindex] {
     overflow: auto;
 }
+
+::slotted(img[slot='hero']) {
+    width: 100%;
+    height: auto;
+}
+
+/**
+ * When precessing CSS we don't take into account @media syntax: 
+ * https://github.com/adobe/spectrum-web-components/issues/593
+ * This manually prefers the "desktop" styling for this content.Z
+ */
+
+:host([mode='fullscreen']),
+:host([mode='fullscreenTakeover']) {
+    /* .spectrum-Dialog--fullscreen,
+   * .spectrum-Dialog--fullscreenTakeover */
+    max-height: none;
+    max-width: none;
+}
+:host([mode='fullscreen']) .grid,
+:host([mode='fullscreenTakeover']) .grid {
+    /* .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid,
+   * .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid */
+    display: grid;
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: '.    .       .       .            .' '.    heading header  buttonGroup  .' '.    divider divider divider      .' '.    content content content      .' '.    .       .       .            .';
+}
+:host([mode='fullscreen']) ::slotted([slot='heading']),
+:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-heading,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading */
+    font-size: 28px;
+}
+:host([mode='fullscreen']) .content,
+:host([mode='fullscreenTakeover']) .content {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-content,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content */
+    max-height: none;
+}
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    padding-top: 0;
+}
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    display: none;
+}
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .buttonGroup {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup */
+    grid-area: buttonGroup;
+    align-self: start;
+}
diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js
@@ -13,42 +13,6 @@ governing permissions and limitations under the License.
 const config = {
     spectrum: 'dialog',
     components: [
-        {
-            name: 'dialog-wrapper',
-            host: {
-                selector: '.spectrum-Dialog-wrapper',
-            },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: '.is-open',
-                    name: 'open',
-                },
-                {
-                    type: 'boolean',
-                    selector: '.spectrum-Dialog--responsive',
-                    name: 'responsive',
-                },
-            ],
-            descendantAttributes: [
-                {
-                    type: 'boolean',
-                    name: 'mode="fullscreen"',
-                    selector: '.spectrum-Dialog--fullscreen',
-                },
-                {
-                    type: 'boolean',
-                    name: 'mode="fullscreen"',
-                    selector: '.spectrum-Dialog--fullscreenTakeover',
-                },
-            ],
-            classes: [
-                {
-                    selector: '.spectrum-Dialog',
-                    name: 'dialog',
-                },
-            ],
-        },
         {
             name: 'dialog',
             host: {
@@ -67,8 +31,8 @@ const config = {
                 },
                 {
                     type: 'boolean',
-                    selector: '.spectrum-Dialog--dismissible',
-                    name: 'dismissible',
+                    selector: '.spectrum-Dialog--dismissable',
+                    name: 'dismissable',
                 },
                 {
                     type: 'boolean',
@@ -96,8 +60,8 @@ const config = {
             ],
             slots: [
                 {
-                    selector: '.spectrum-Dialog-title',
-                    name: 'title',
+                    selector: '.spectrum-Dialog-heading',
+                    name: 'heading',
                 },
                 {
                     selector: '.spectrum-Dialog-hero',
@@ -109,6 +73,14 @@ const config = {
                 },
             ],
             classes: [
+                {
+                    selector: '.spectrum-Dialog-grid',
+                    name: 'grid',
+                },
+                {
+                    selector: '.spectrum-Dialog-divider',
+                    name: 'divider',
+                },
                 {
                     selector: '.spectrum-Dialog-content',
                     name: 'content',
@@ -133,6 +105,14 @@ const config = {
                     selector: '.spectrum-Button',
                     name: 'button',
                 },
+                {
+                    selector: '.spectrum-Dialog-buttonGroup',
+                    name: 'buttonGroup',
+                },
+                {
+                    selector: '.spectrum-Dialog-buttonGroup--noFooter',
+                    name: 'buttonGroup--noFooter',
+                },
             ],
             exclude: [/\.spectrum-Dialog-wrapper/],
         },

diff --git a/packages/dialog/src/spectrum-dialog-wrapper.css b/packages/dialog/src/spectrum-dialog-wrapper.css