From fd1e05e3850205b6f3713a98878a6b632e353e77 Mon Sep 17 00:00:00 2001
From: yhy <yuhaiyang697@hellobike.com>
Date: Fri, 12 Jan 2024 11:20:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20toast=20=E6=B6=88?=
 =?UTF-8?q?=E5=A4=B1=E6=9C=AA=E7=A7=BB=E9=99=A4=20dom=20=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/quarkd/src/toast/index.tsx | 8 ++++++--
 packages/quarkd/src/toast/style.css | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/quarkd/src/toast/index.tsx b/packages/quarkd/src/toast/index.tsx
index 9f437d7c..77171ede 100644
--- a/packages/quarkd/src/toast/index.tsx
+++ b/packages/quarkd/src/toast/index.tsx
@@ -65,7 +65,7 @@ class QuarkToast extends QuarkElement {
         if (!el.classList.contains("quark-toast-leave")) return;
         if (el && el.parentNode && !this.show) {
           try {
-            // document.body.removeChild(this);
+            document.body.removeChild(this);
           } catch (error) {
             // todo something
           }
@@ -146,8 +146,8 @@ class QuarkToast extends QuarkElement {
         <div
           class={`quark-toast quark-toast--${this.loadingIconDirection}`}
           ref={this.toastRef}
+          style={{ minHeight: `var(--toast-height, 120px)` }}
         >
-          {this.type !== "text" && this.renderIcon()}
           <quark-loading
             ref={this.loadingtRef}
             size={this.iconSize}
@@ -179,6 +179,10 @@ class QuarkToast extends QuarkElement {
           maxWidth: `var(--toast-max-width, 240px)`,
           padding: `var(--toast-text-padding, 16px 20px)`,
           fontSize: `var(--toast-font-size, 14px)`,
+          minHeight:
+            this.type !== "text" && this.loadingIconDirection !== "horizontal"
+              ? `var(--toast-height, 120px)`
+              : "auto",
         }}
       >
         {this.type !== "text" && this.renderIcon()}
diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
index 0c306564..0ea9f943 100644
--- a/packages/quarkd/src/toast/style.css
+++ b/packages/quarkd/src/toast/style.css
@@ -22,7 +22,6 @@
   box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
   pointer-events: all;
   width: var(--toast-width, 120px);
-  min-height: var(--toast-height, 120px);
   text-align: center;
   transition: opacity var(--toast-transition-fade-in, 0.3s) ease-in;
   position: fixed;
@@ -43,6 +42,7 @@
   height: auto;
   min-width: var(--toast-min-width, 120px);
   max-width: var(--toast-max-width, 240px);
+  min-height: auto !important;
 }
 
 :host([show]) .quark-toast {
@@ -51,7 +51,7 @@
 
 :host([type="text"]) .quark-toast {
   padding: var(--toast-text-padding, 16px 20px);
-  width: auto;
+  width: max-content;
   height: auto;
   min-width: var(--toast-min-width, 120px);
   max-width: var(--toast-max-width, 240px);