chore: update alert slot handling for footer (#1814)

Co-authored-by: James Nestor <jnestor@cisco.com>
momentum-design · Nov 6, 2024 · 3566989 · 3566989
1 parent d5dbf37
commit 3566989
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 39 deletions.
diff --git a/web-components/src/components/alert/Alert.ts b/web-components/src/components/alert/Alert.ts
@@ -6,13 +6,12 @@
  *
  */
 
-import "@/components/button/Button";
 import { buttonColor, buttonVariant } from "@/components/button/Button";
 import "@/components/icon/Icon";
 import "@/components/link/Link";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property, TemplateResult } from "lit-element";
+import { html, internalProperty, LitElement, property, query, TemplateResult } from "lit-element";
 import { nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map";
 import styles from "./scss/module.scss";
@@ -44,6 +43,17 @@ export namespace Alert {
     @property({ type: Boolean }) showMore = false;
     @property({ type: String }) href = "";
 
+    @query('slot[name="alert-footer"]')
+    private readonly alertFooterSlot!: HTMLSlotElement;
+
+    @internalProperty()
+    private hasFooterSlotContent = false;
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      this.updateFooterSlotInUse();
+    }
+
     close() {
       this.dispatchEvent(
         new CustomEvent("alert-close", {
@@ -105,7 +115,7 @@ export namespace Alert {
           return html`
             <md-icon
               name="chat-bold"
-              size="${this.newMomentum ? 32 : 24}"
+              size="${this.newMomentum ? 24 : 32}"
               iconSet="momentumDesign"
               color="var(--alert-title-text-color)"
             ></md-icon>
@@ -124,17 +134,12 @@ export namespace Alert {
       };
     }
 
-    get slottedFooterClassMap() {
+    private get slottedFooterClassMap() {
       return {
         "is-empty": !this.hasFooterSlotContent
       };
     }
 
-    get hasFooterSlotContent() {
-      //TODO: improve this check
-      return this.innerHTML.includes('<div slot="alert-footer">');
-    }
-
     legacyRender(): TemplateResult {
       return html`
         <div role="alert" aria-live="polite" part="alert" class="md-alert ${classMap(this.alertClassMap)}">
@@ -208,9 +213,17 @@ export namespace Alert {
       `;
     }
 
+    handleSlotContentChange(_event: Event) {
+      this.updateFooterSlotInUse();
+    }
+
+    private updateFooterSlotInUse() {
+      this.hasFooterSlotContent = this.alertFooterSlot?.assignedNodes().length > 0;
+    }
+
     renderSlottedFooter(): TemplateResult {
       return html` <div class="md-new-alert__footer ${classMap(this.slottedFooterClassMap)}">
-        <slot name="alert-footer"></slot>
+        <slot name="alert-footer" @slotchange=${this.handleSlotContentChange}></slot>
       </div>`;
     }
 
@@ -252,8 +265,12 @@ export namespace Alert {
       `;
     }
 
+    get alertRender(): TemplateResult {
+      return this.newMomentum ? this.newRender() : this.legacyRender();
+    }
+
     render(): TemplateResult {
-      return html` ${this.show ? (!this.newMomentum ? this.legacyRender() : this.newRender()) : nothing} `;
+      return html` ${this.show ? this.alertRender : nothing} `;
     }
   }
 }

diff --git a/web-components/src/components/alert/scss/alert.scss b/web-components/src/components/alert/scss/alert.scss
@@ -214,8 +214,7 @@
         color: CanvasText;
       }
     }
-    .md-badge {
-      // forced-color-adjust: none;
+    .md-badge {      
       background-color: inherit;
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -8200,7 +8200,7 @@ debug@~2.2.0:
   dependencies:
     ms "0.7.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==
@@ -12239,7 +12239,7 @@ import-meta-resolve@^4.0.0:
   resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz#f9db8bead9fafa61adb811db77a2bf22c5399706"
   integrity sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
@@ -15395,11 +15395,6 @@ lodash._basefor@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
   integrity sha512-6bc3b8grkpMgDcVJv9JYZAk/mHgcqMljzm7OsbmcE2FGUMmmLQTPHlh/dFqR8LA0GQ7z4K67JSotVKu5058v1A==
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha512-bSYo8Pc/f0qAkr8fPJydpJjtrHiSynYfYBjtANIgXv5xEf1WlTC63dIDlgu0s9dmTvzRu1+JJTxcIAHe+sH0FQ==
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -15408,29 +15403,17 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
+lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
   integrity sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ==
 
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha512-S8dUjWr7SUT/X6TBIQ/OYoCHo1Stu1ZRy6uMUSKqzFnZp5G5RyQizSm6kvxD2Ewyy6AVfMg4AToeZzKfF99T5w==
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha512-ev5SP+iFpZOugyab/DEUQxUeZP5qyciVTlgQ1f4Vlw7VUcCD8fVnyIqVUEIaoFH9zjAqdgi69KiofzvVmda/ZQ==
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
   integrity sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA==
@@ -15606,11 +15589,6 @@ lodash.once@^4.0.0, lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw==
-
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"