fix(toast): hidden tailwind css not being applied

Endava · Jun 29, 2023 · 156e13c · 156e13c
1 parent 24e7533
commit 156e13c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
@@ -307,7 +307,7 @@ export namespace Components {
          */
         "time": number;
         /**
-          * This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically.
+          * This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically
          */
         "toast": () => Promise<void>;
         /**
@@ -595,6 +595,9 @@ export namespace Components {
         "value": string;
     }
     interface BqToast {
+        /**
+          * Method to be called to hide the toast component
+         */
         "hide": () => Promise<void>;
         /**
           * If true will hide toast icon
@@ -608,11 +611,17 @@ export namespace Components {
           * Placement of toast
          */
         "placement": TToastPlacement;
+        /**
+          * Method to be called to show the toast component
+         */
         "show": () => Promise<void>;
         /**
           * The length of time, in milliseconds, after which the toast will close itself
          */
         "time": number;
+        /**
+          * This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically
+         */
         "toast": () => Promise<void>;
         /**
           * Type of toast

diff --git a/packages/bee-q/src/components/notification/bq-notification.tsx b/packages/bee-q/src/components/notification/bq-notification.tsx
@@ -150,8 +150,7 @@ export class BqNotification {
     this.handleShow();
   }
 
-  /** This method can be used to display notifications in a fixed-position element
-   * that allows for stacking multiple notifications vertically. */
+  /** This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically */
   @Method()
   async toast() {
     if (notificationPortal.parentElement === null) {

diff --git a/packages/bee-q/src/components/notification/readme.md b/packages/bee-q/src/components/notification/readme.md
@@ -49,8 +49,7 @@ Type: `Promise<void>`
 
 ### `toast() => Promise<void>`
 
-This method can be used to display notifications in a fixed-position element
-that allows for stacking multiple notifications vertically.
+This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically
 
 #### Returns
 

diff --git a/packages/bee-q/src/components/toast/bq-toast.tsx b/packages/bee-q/src/components/toast/bq-toast.tsx
@@ -134,16 +134,19 @@ export class BqToast {
   // Requires JSDocs for public API documentation.
   // ===============================================
 
+  /** Method to be called to show the toast component */
   @Method()
   async show(): Promise<void> {
     this.handleShow();
   }
 
+  /** Method to be called to hide the toast component */
   @Method()
   async hide(): Promise<void> {
     this.handleHide();
   }
 
+  /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */
   @Method()
   async toast() {
     if (toastPortal.parentElement === null) {
@@ -205,12 +208,7 @@ export class BqToast {
 
   render() {
     return (
-      <Host
-        class={{ '!hidden': !this.open }}
-        aria-hidden={!this.open ? 'true' : 'false'}
-        hidden={!this.open ? 'true' : 'false'}
-        role="status"
-      >
+      <Host aria-hidden={!this.open ? 'true' : 'false'} hidden={!this.open ? 'true' : 'false'} role="status">
         <output class="bq-toast" part="wrapper">
           <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part="icon">
             <slot name="icon">

diff --git a/packages/bee-q/src/components/toast/readme.md b/packages/bee-q/src/components/toast/readme.md
@@ -28,7 +28,7 @@
 
 ### `hide() => Promise<void>`
 
-
+Method to be called to hide the toast component
 
 #### Returns
 
@@ -38,7 +38,7 @@ Type: `Promise<void>`
 
 ### `show() => Promise<void>`
 
-
+Method to be called to show the toast component
 
 #### Returns
 
@@ -48,7 +48,7 @@ Type: `Promise<void>`
 
 ### `toast() => Promise<void>`
 
-
+This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically
 
 #### Returns
 

diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -5,7 +5,11 @@
 @import './bq-toast.variables';
 
 :host {
-  @apply inline-block animate-slide-in will-change-transform;
+  @apply hidden animate-slide-in will-change-transform;
+}
+
+:host([open]) {
+  @apply inline-block;
 }
 
 .bq-toast {