fix: pull out rendering for Dialog into individual methods

adobe · Jul 26, 2022 · 84aa3ec · 84aa3ec
1 parent e750e05
commit 84aa3ec
Show file tree

Hide file tree

Showing 2 changed files with 192 additions and 41 deletions.
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 import {
     CSSResultArray,
     html,
+    nothing,
     PropertyValues,
     SpectrumElement,
     TemplateResult,
@@ -118,57 +119,86 @@ export class Dialog extends FocusVisiblePolyfillMixin(
         );
     }
 
+    protected renderHero(): TemplateResult {
+        return html`
+            <slot name="hero"></slot>
+        `;
+    }
+
+    protected renderHeading(): TemplateResult {
+        return html`
+            <slot
+                name="heading"
+                class=${ifDefined(this.hasHero ? this.hasHero : undefined)}
+                @slotchange=${this.onHeadingSlotchange}
+            ></slot>
+        `;
+    }
+
+    protected renderContent(): TemplateResult {
+        return html`
+            <div class="content">
+                <slot @slotchange=${this.onContentSlotChange}></slot>
+            </div>
+        `;
+    }
+
+    protected renderFooter(): TemplateResult {
+        if (!this.hasFooter) return html``;
+        return html`
+            <div class="footer">
+                <slot name="footer"></slot>
+            </div>
+        `;
+    }
+
+    protected renderButtons(): TemplateResult {
+        if (!this.hasButtons) return html``;
+        return html`
+            <sp-button-group
+                class="button-group ${this.hasFooter
+                    ? nothing
+                    : 'button-group--noFooter'}"
+            >
+                <slot name="button"></slot>
+            </sp-button-group>
+        `;
+    }
+
+    protected renderDismiss(): TemplateResult {
+        if (!this.dismissable) return html``;
+        return html`
+            <sp-action-button
+                class="close-button"
+                label="Close"
+                quiet
+                size="m"
+                @click=${this.close}
+            >
+                <sp-icon-cross500
+                    class="spectrum-UIIcon-Cross500"
+                    slot="icon"
+                ></sp-icon-cross500>
+            </sp-action-button>
+        `;
+    }
+
     protected override render(): TemplateResult {
         return html`
             <div class="grid">
-                <slot name="hero"></slot>
-                <slot
-                    name="heading"
-                    class=${ifDefined(this.hasHero ? this.hasHero : undefined)}
-                    @slotchange=${this.onHeadingSlotchange}
-                ></slot>
+                ${this.renderHero()} ${this.renderHeading()}
                 ${this.error
                     ? html`
                           <sp-icon-alert class="type-icon"></sp-icon-alert>
                       `
-                    : html``}
+                    : nothing}
                 ${this.noDivider
-                    ? html``
+                    ? nothing
                     : html`
                           <sp-divider size="m" class="divider"></sp-divider>
                       `}
-                <div class="content">
-                    <slot @slotchange=${this.onContentSlotChange}></slot>
-                </div>
-                ${this.hasFooter
-                    ? html`
-                          <div class="footer">
-                              <slot name="footer"></slot>
-                          </div>
-                      `
-                    : html``}
-                ${this.hasButtons
-                    ? html`
-                          <sp-button-group
-                              class="button-group ${this.hasFooter
-                                  ? ''
-                                  : 'button-group--noFooter'}"
-                          >
-                              <slot name="button"></slot>
-                          </sp-button-group>
-                      `
-                    : html``}
-                ${this.dismissable
-                    ? html`
-                          <sp-close-button
-                              class="close-button"
-                              label="Close"
-                              quiet
-                              size="m"
-                              @click=${this.close}
-                          ></sp-close-button>
-                      `
-                    : html``}
+                ${this.renderContent()} ${this.renderFooter()}
+                ${this.renderButtons()} ${this.renderDismiss()}
             </div>
         `;
     }

diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/dialog/sp-dialog.js';
 import { Dialog } from '@spectrum-web-components/dialog';
@@ -77,4 +78,124 @@ describe('Dialog', () => {
         await elementUpdated(el);
         expect(closeSpy.calledOnce).to.be.true;
     });
+    it('allows hero override', async () => {
+        class Override extends Dialog {
+            renderHero(): TemplateResult {
+                return html`
+                    <div id="hero-container"></div>
+                `;
+            }
+        }
+
+        customElements.define('hero-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <hero-dialog></hero-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#hero-container');
+        expect(container).to.not.be.null;
+    });
+    it('allows heading override', async () => {
+        class Override extends Dialog {
+            renderHeading(): TemplateResult {
+                return html`
+                    <h2 id="heading-container">Test</h2>
+                `;
+            }
+        }
+
+        customElements.define('heading-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <heading-dialog></heading-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#heading-container');
+        expect(container).to.not.be.null;
+    });
+    it('allows content override', async () => {
+        class Override extends Dialog {
+            renderContent(): TemplateResult {
+                return html`
+                    <p id="content-container">Test</p>
+                `;
+            }
+        }
+
+        customElements.define('content-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <content-dialog></content-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#content-container');
+        expect(container).to.not.be.null;
+    });
+    it('allows footer override', async () => {
+        class Override extends Dialog {
+            renderFooter(): TemplateResult {
+                return html`
+                    <p id="footer-container">Test</p>
+                `;
+            }
+        }
+
+        customElements.define('footer-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <footer-dialog></footer-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#footer-container');
+        expect(container).to.not.be.null;
+    });
+    it('allows button override', async () => {
+        class Override extends Dialog {
+            renderButtons(): TemplateResult {
+                return html`
+                    <p id="button-container">Test</p>
+                `;
+            }
+        }
+
+        customElements.define('button-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <button-dialog></button-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#button-container');
+        expect(container).to.not.be.null;
+    });
+    it('allows dismiss override', async () => {
+        class Override extends Dialog {
+            renderDismiss(): TemplateResult {
+                return html`
+                    <p id="dismiss-container">Test</p>
+                `;
+            }
+        }
+
+        customElements.define('dismiss-dialog', Override);
+
+        const el = await fixture<Override>(
+            html`
+                <dismiss-dialog></dismiss-dialog>
+            `
+        );
+
+        const container = el.shadowRoot.querySelector('#dismiss-container');
+        expect(container).to.not.be.null;
+    });
 });