fix(dialog): more complete support for Spectrum CSS input

adobe · Jan 4, 2021 · 925934a · 925934a
1 parent ff8c95c
commit 925934a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
@@ -17,6 +17,7 @@ import {
     TemplateResult,
     property,
     query,
+    ifDefined,
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/rule/sp-rule.js';
@@ -38,6 +39,7 @@ import styles from './dialog.css.js';
  * @fires close - Announces that the dialog has been closed.
  */
 export class Dialog extends ObserveSlotPresence(SpectrumElement, [
+    '[slot="hero"]',
     '[slot="footer"]',
     '[slot="button"]',
 ]) {
@@ -62,6 +64,10 @@ export class Dialog extends ObserveSlotPresence(SpectrumElement, [
         return this.getSlotContentPresence('[slot="button"]');
     }
 
+    protected get hasHero(): boolean {
+        return this.getSlotContentPresence('[slot="hero"]');
+    }
+
     @property({ type: Boolean, reflect: true, attribute: 'no-divider' })
     public noDivider = false;
 
@@ -105,7 +111,10 @@ export class Dialog extends ObserveSlotPresence(SpectrumElement, [
         return html`
             <div class="grid">
                 <slot name="hero"></slot>
-                <slot name="heading"></slot>
+                <slot
+                    name="heading"
+                    class=${ifDefined(this.hasHero ? this.hasHero : undefined)}
+                ></slot>
                 ${this.error
                     ? html`
                           <sp-icon class="type-icon alert-medium">

diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js
@@ -114,6 +114,13 @@ const config = {
                     name: 'buttonGroup--noFooter',
                 },
             ],
+            complexSelectors: [
+                {
+                    replacement: '.no-header::slotted([slot="heading"])',
+                    selector:
+                        '.spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader',
+                },
+            ],
             exclude: [/\.spectrum-Dialog-wrapper/],
         },
     ],

diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css
@@ -56,9 +56,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 .grid {
     /* .spectrum-Dialog .spectrum-Dialog-grid */
     display: grid;
-    grid-template-columns:
-        var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
-        var(--spectrum-dialog-confirm-padding);
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) var(--spectrum-dialog-confirm-padding);
     grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
             --spectrum-dialog-confirm-padding
         );
@@ -88,6 +89,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     outline: none;
 }
+:host([dir='ltr']) .no-header::slotted([slot='heading']) {
+    /* [dir=ltr] .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader */
+    padding-right: 0;
+}
+:host([dir='rtl']) .no-header::slotted([slot='heading']) {
+    /* [dir=rtl] .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader */
+    padding-left: 0;
+}
+.no-header::slotted([slot='heading']) {
+    /* .spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader */
+    grid-area: heading-start/heading-start/header-end/header-end;
+}
 .header {
     /* .spectrum-Dialog-header */
     grid-area: header;
@@ -180,9 +193,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 }
 :host([dismissable]) .grid {
     /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */
-    grid-template-columns:
-        var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
-        minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding);
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
+            --spectrum-dialog-confirm-padding
+        );
     grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
             --spectrum-dialog-confirm-padding
         );
@@ -283,9 +299,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 }
 @media screen and (max-inline-size: 700px) {
     .grid {
-        grid-template-columns:
-            var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
-            var(--spectrum-dialog-confirm-padding);
+        grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+                0,
+                auto
+            ) var(--spectrum-dialog-confirm-padding);
         grid-template-areas: 'hero hero    hero    hero        hero        hero' '.    .       .       .           .           .' '.    heading heading heading     typeIcon    .' '.    header  header  header      header      .' '.    divider divider divider     divider     .' '.    content content content     content     .' '.    footer  footer  buttonGroup buttonGroup .' '.    .       .       .           .           .';
     }
     :host([dismissable]) .grid,
@@ -295,9 +312,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
             );
     }
     :host([dismissable]) .grid {
-        grid-template-columns:
-            var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto)
-            minmax(0, var(--spectrum-global-dimension-size-400)) var(--spectrum-dialog-confirm-padding);
+        grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+                0,
+                auto
+            ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
+                --spectrum-dialog-confirm-padding
+            );
         grid-template-areas: 'hero hero    hero    hero        hero        hero        hero' '.    .       .       .           .           closeButton closeButton' '.    heading heading heading     typeIcon    closeButton closeButton' '.    header  header  header      header      header      .' '.    divider divider divider     divider     divider     .' '.    content content content     content     content     .' '.    footer  footer  buttonGroup buttonGroup buttonGroup .' '.    .       .       .           .           .           .';
     }
     .header {