Add hidden to alert

Some additional style tweaks for displaying full width of parent container.
krhoyt · Jan 30, 2024 · 365d0d7 · 365d0d7
1 parent b403096
commit 365d0d7
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/components/alert.js b/components/alert.js
@@ -13,6 +13,10 @@ export default class RainforestAlert extends HTMLElement {
           position: relative;
         }
 
+        :host( [hidden] ) {
+          display: none;
+        }
+
         div[part=alert] {
           background-color: var( --alert-background-color, #f2f8fd );
           border-color: var( --alert-border-color, #0972d3 );
@@ -24,6 +28,10 @@ export default class RainforestAlert extends HTMLElement {
           padding: 8px 16px 8px 16px;
         }
 
+        div[part=alert] > div {
+          width: 100%;
+        }
+
         div[part=content] {
           color: var( --alert-content-color );
           font-family: 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif;
@@ -47,6 +55,7 @@ export default class RainforestAlert extends HTMLElement {
           flex-grow: 1;
           margin: 4px;
           padding: 2px 0 2px 0;
+          width: 100%;
         }
 
         rf-button[part=button] {
@@ -222,6 +231,7 @@ export default class RainforestAlert extends HTMLElement {
   // Setup
   connectedCallback() {
     this._upgrade( 'dismissable' );                
+    this._upgrade( 'hidden' );                    
     this._upgrade( 'type' );
     this._render();
   }
@@ -230,6 +240,7 @@ export default class RainforestAlert extends HTMLElement {
   static get observedAttributes() {
     return [
       'dismissable',
+      'hidden',
       'type'
     ];
   }
@@ -261,6 +272,26 @@ export default class RainforestAlert extends HTMLElement {
     } else {
       this.removeAttribute( 'dismissable' );
     }
+  }
+
+  get hidden() {
+    return this.hasAttribute( 'hidden' );
+  }
+
+  set hidden( value ) {
+    if( value !== null ) {
+      if( typeof value === 'boolean' ) {
+        value = value.toString();
+      }
+
+      if( value === 'false' ) {
+        this.removeAttribute( 'hidden' );
+      } else {
+        this.setAttribute( 'hidden', '' );
+      }
+    } else {
+      this.removeAttribute( 'hidden' );
+    }
   }  
 
   get type() {