From e5040e00d71b8cb77cdaa91c8bc1c00aa94732d5 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 19 Jul 2023 10:54:16 +0800
Subject: [PATCH 1/2] fix(collapse): #2546

---
 .changeset/little-masks-argue.md              |  5 ++
 .changeset/strange-flies-switch.md            |  5 ++
 .../collapse/src/styles/collapse-panel.scss   | 60 ++++++++++---------
 3 files changed, 41 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/little-masks-argue.md
 create mode 100644 .changeset/strange-flies-switch.md

diff --git a/.changeset/little-masks-argue.md b/.changeset/little-masks-argue.md
new file mode 100644
index 000000000..7cd277282
--- /dev/null
+++ b/.changeset/little-masks-argue.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Collapse fix: 修复嵌套折叠面板样式问题
diff --git a/.changeset/strange-flies-switch.md b/.changeset/strange-flies-switch.md
new file mode 100644
index 000000000..45ca47a46
--- /dev/null
+++ b/.changeset/strange-flies-switch.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/collapse": patch
+---
+
+fix: 修复嵌套折叠面板样式问题
diff --git a/packages/ui/collapse/src/styles/collapse-panel.scss b/packages/ui/collapse/src/styles/collapse-panel.scss
index 31879998f..776b414da 100644
--- a/packages/ui/collapse/src/styles/collapse-panel.scss
+++ b/packages/ui/collapse/src/styles/collapse-panel.scss
@@ -1,24 +1,24 @@
-@import '~@hi-ui/core-css/lib/index.scss';
+@import "~@hi-ui/core-css/lib/index.scss";
 
-$panel-prefix: '#{$component-prefix}-collapse-panel' !default;
+$panel-prefix: "#{$component-prefix}-collapse-panel" !default;
 $icon-class: #{$panel-prefix}__icon !default;
 
 .#{$panel-prefix} {
-  font-size: use-text-size('normal');
+  font-size: use-text-size("normal");
   position: relative;
   z-index: 0;
   // border-bottom: use-border-size('normal') use-color-static('transparent');
 
   &::after {
-    content: '';
+    content: "";
     display: block;
     margin: 1px 20px;
     box-sizing: border-box;
-    border-bottom: 1px solid use-color('gray', 200);
+    border-bottom: 1px solid use-color("gray", 200);
   }
 
   &:last-of-type {
-    border-radius: 0 0 use-border-radius('lg') use-border-radius('lg');
+    border-radius: 0 0 use-border-radius("lg") use-border-radius("lg");
     overflow: hidden;
 
     &::after {
@@ -27,15 +27,15 @@ $icon-class: #{$panel-prefix}__icon !default;
   }
 
   &:first-of-type {
-    border-radius: use-border-radius('lg') use-border-radius('lg') 0 0;
+    border-radius: use-border-radius("lg") use-border-radius("lg") 0 0;
     overflow: hidden;
   }
 
   &__head {
     display: flex;
     align-items: center;
-    color: use-color('gray', 700);
-    font-weight: use-text-weight('semibold');
+    color: use-color("gray", 700);
+    font-weight: use-text-weight("semibold");
     cursor: pointer;
 
     .#{$component-prefix}-collapse--size-md & {
@@ -58,24 +58,24 @@ $icon-class: #{$panel-prefix}__icon !default;
     justify-content: space-between;
 
     .#{$component-prefix}-collapse--size-md & {
-      font-size: use-text-size('normal');
+      font-size: use-text-size("normal");
     }
 
     .#{$component-prefix}-collapse--size-lg & {
-      font-size: use-text-size('lg');
-      line-height: use-text-lineheight('lg');
+      font-size: use-text-size("lg");
+      line-height: use-text-lineheight("lg");
     }
   }
 
   .#{$icon-class} {
-    font-size: use-text-size('lg');
-    color: use-color('gray', 600);
+    font-size: use-text-size("lg");
+    color: use-color("gray", 600);
     line-height: 1em;
 
     // @animation
     transition-property: transform;
-    transition-duration: use-motion-duration('normal');
-    transition-timing-function: use-motion-bezier('normal');
+    transition-duration: use-motion-duration("normal");
+    transition-timing-function: use-motion-bezier("normal");
     will-change: transform;
 
     &--left {
@@ -84,36 +84,38 @@ $icon-class: #{$panel-prefix}__icon !default;
   }
 
   &__extra {
-    color: use-color('gray', 600);
+    color: use-color("gray", 600);
   }
 
   &__content-wrapper {
-
     // @animation
     overflow: hidden;
     transition-property: height;
-    transition-duration: use-motion-duration('normal');
-    transition-timing-function: use-motion-bezier('normal');
+    transition-duration: use-motion-duration("normal");
+    transition-timing-function: use-motion-bezier("normal");
     transform-origin: top;
     will-change: height;
   }
 
   &__content {
     padding: 0 use-spacing(10) use-spacing(10);
-    color: use-color('gray', 700);
+    color: use-color("gray", 700);
   }
 
   &--show {
     &::after {
-      background-color: use-color-static('transparent');
+      background-color: use-color-static("transparent");
     }
-    .#{$icon-class} {
-      &--left {
-        transform: rotate(90deg);
-      }
 
-      &--right {
-        transform: rotate(180deg);
+    > .#{$panel-prefix}__head {
+      .#{$icon-class} {
+        &--left {
+          transform: rotate(90deg);
+        }
+
+        &--right {
+          transform: rotate(180deg);
+        }
       }
     }
   }
@@ -121,7 +123,7 @@ $icon-class: #{$panel-prefix}__icon !default;
   &--disabled {
     .#{$panel-prefix}__head {
       cursor: not-allowed;
-      color: use-color('gray', 300);
+      color: use-color("gray", 300);
     }
   }
 }

From d8547e7691d6f969c9292855caa6e1e5da0f14f6 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 19 Jul 2023 11:22:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore(collapse):=20scss=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../collapse/src/styles/collapse-panel.scss   | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/ui/collapse/src/styles/collapse-panel.scss b/packages/ui/collapse/src/styles/collapse-panel.scss
index 776b414da..b2e9d6b0d 100644
--- a/packages/ui/collapse/src/styles/collapse-panel.scss
+++ b/packages/ui/collapse/src/styles/collapse-panel.scss
@@ -1,24 +1,24 @@
-@import "~@hi-ui/core-css/lib/index.scss";
+@import '~@hi-ui/core-css/lib/index.scss';
 
-$panel-prefix: "#{$component-prefix}-collapse-panel" !default;
+$panel-prefix: '#{$component-prefix}-collapse-panel' !default;
 $icon-class: #{$panel-prefix}__icon !default;
 
 .#{$panel-prefix} {
-  font-size: use-text-size("normal");
+  font-size: use-text-size('normal');
   position: relative;
   z-index: 0;
   // border-bottom: use-border-size('normal') use-color-static('transparent');
 
   &::after {
-    content: "";
+    content: '';
     display: block;
     margin: 1px 20px;
     box-sizing: border-box;
-    border-bottom: 1px solid use-color("gray", 200);
+    border-bottom: 1px solid use-color('gray', 200);
   }
 
   &:last-of-type {
-    border-radius: 0 0 use-border-radius("lg") use-border-radius("lg");
+    border-radius: 0 0 use-border-radius('lg') use-border-radius('lg');
     overflow: hidden;
 
     &::after {
@@ -27,15 +27,15 @@ $icon-class: #{$panel-prefix}__icon !default;
   }
 
   &:first-of-type {
-    border-radius: use-border-radius("lg") use-border-radius("lg") 0 0;
+    border-radius: use-border-radius('lg') use-border-radius('lg') 0 0;
     overflow: hidden;
   }
 
   &__head {
     display: flex;
     align-items: center;
-    color: use-color("gray", 700);
-    font-weight: use-text-weight("semibold");
+    color: use-color('gray', 700);
+    font-weight: use-text-weight('semibold');
     cursor: pointer;
 
     .#{$component-prefix}-collapse--size-md & {
@@ -58,24 +58,24 @@ $icon-class: #{$panel-prefix}__icon !default;
     justify-content: space-between;
 
     .#{$component-prefix}-collapse--size-md & {
-      font-size: use-text-size("normal");
+      font-size: use-text-size('normal');
     }
 
     .#{$component-prefix}-collapse--size-lg & {
-      font-size: use-text-size("lg");
-      line-height: use-text-lineheight("lg");
+      font-size: use-text-size('lg');
+      line-height: use-text-lineheight('lg');
     }
   }
 
   .#{$icon-class} {
-    font-size: use-text-size("lg");
-    color: use-color("gray", 600);
+    font-size: use-text-size('lg');
+    color: use-color('gray', 600);
     line-height: 1em;
 
     // @animation
     transition-property: transform;
-    transition-duration: use-motion-duration("normal");
-    transition-timing-function: use-motion-bezier("normal");
+    transition-duration: use-motion-duration('normal');
+    transition-timing-function: use-motion-bezier('normal');
     will-change: transform;
 
     &--left {
@@ -84,27 +84,27 @@ $icon-class: #{$panel-prefix}__icon !default;
   }
 
   &__extra {
-    color: use-color("gray", 600);
+    color: use-color('gray', 600);
   }
 
   &__content-wrapper {
     // @animation
     overflow: hidden;
     transition-property: height;
-    transition-duration: use-motion-duration("normal");
-    transition-timing-function: use-motion-bezier("normal");
+    transition-duration: use-motion-duration('normal');
+    transition-timing-function: use-motion-bezier('normal');
     transform-origin: top;
     will-change: height;
   }
 
   &__content {
     padding: 0 use-spacing(10) use-spacing(10);
-    color: use-color("gray", 700);
+    color: use-color('gray', 700);
   }
 
   &--show {
     &::after {
-      background-color: use-color-static("transparent");
+      background-color: use-color-static('transparent');
     }
 
     > .#{$panel-prefix}__head {
@@ -123,7 +123,7 @@ $icon-class: #{$panel-prefix}__icon !default;
   &--disabled {
     .#{$panel-prefix}__head {
       cursor: not-allowed;
-      color: use-color("gray", 300);
+      color: use-color('gray', 300);
     }
   }
 }