fix(alert): hide empty header

Fixes #1530
RedHat-UX · Sep 19, 2024 · d510d97 · d510d97
1 parent a9ae0fb
commit d510d97
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/mean-months-laugh.md b/.changeset/mean-months-laugh.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-alert>`: hide header when it is empty
diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
@@ -3,6 +3,10 @@
   max-width: var(--_max-width, initial);
 }
 
+[hidden] {
+  display: none !important;
+}
+
 header {
   display: flex;
   align-items: center;

diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
@@ -191,7 +191,7 @@ export class RhAlert extends LitElement {
           <rh-icon id="icon" set="ui" icon="${this.icon}"></rh-icon>
         </div>
         <div id="middle-column">
-          <header>
+          <header ?hidden="${this.#slots.isEmpty('header')}">
             <div id="header">
               <slot name="header"></slot>
             </div>${!this.dismissable && this.variant !== 'toast' ? '' : html`