From 156e13c7c812bf8f22e35dc19c0f08e722ec8d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Thu, 29 Jun 2023 18:15:31 +0300
Subject: [PATCH] fix(toast): hidden tailwind css not being applied

---
 packages/bee-q/src/components.d.ts                    | 11 ++++++++++-
 .../src/components/notification/bq-notification.tsx   |  3 +--
 packages/bee-q/src/components/notification/readme.md  |  3 +--
 packages/bee-q/src/components/toast/bq-toast.tsx      | 10 ++++------
 packages/bee-q/src/components/toast/readme.md         |  6 +++---
 .../bee-q/src/components/toast/scss/bq-toast.scss     |  6 +++++-
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index e4c66b932..b30493da3 100644
--- 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
index 5a778e718..50d1ba72c 100644
--- 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
index 3d6838829..db7f56f5d 100644
--- 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
index 67e451ba5..ed227c095 100644
--- 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
index cf78b5b44..56baacb5e 100644
--- 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
index 57868e88e..e53b2dac6 100644
--- 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 {