fix(collapse): 修复深色模式下面板左侧图标颜色错误 (#4185)

* fix(collapse): 修复深色模式下图标颜色

* fix(collapse): 修复深色模式下图标颜色

* fix(CollapsePanel): add --td-collapse-left-icon-color

* feat(CollapsePanel): add --td-collapse-disabled-color

---------

Co-authored-by: anlyyao <anly_yaw@163.com>

Author: liweijie0812

packages/components/collapse-panel/collapse-panel.less

@@ -1,8 +1,9 @@
 @import '../common/style/base.less';
 
+@collapse-disabled-color: var(--td-collapse-disabled-color, @text-color-disabled);
 @collapse-header-text-color: var(--td-collapse-header-text-color, @text-color-primary);
 @collapse-content-text-color: var(--td-collapse-content-text-color, @text-color-primary);
-@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @text-color-disabled);
+@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @collapse-disabled-color);
 
 // font-size
 @collapse-title-font: var(--td-collapse-title-font, @font-body-large);
@@ -13,7 +14,8 @@
 @collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 32rpx);
 @collapse-content-padding: var(--td-collapse-content-padding, 32rpx);
 @collapse-border-color: var(--td-collapse-border-color, @border-level-1-color);
-@collapse-icon-color: var(--td-collapse-icon-color, @font-gray-3);
+@collapse-left-icon-color: var(--td-collapse-left-icon-color, @brand-color);
+@collapse-icon-color: var(--td-collapse-icon-color, @text-color-placeholder);
 
 @collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container);
 
@@ -41,8 +43,6 @@
     align-items: center;
     padding-left: @collapse-horizontal-padding;
     height: @collapse-header-height;
-    --td-cell-title-color: @collapse-header-text-color;
-    --td-cell-left-icon-color: @collapse-icon-color;
 
     &--top {
       .border(top, @collapse-border-color);
@@ -53,22 +53,7 @@
     }
 
     &::after {
-      left: 32rpx;
-    }
-
-    &-right {
-      display: inline-flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    &-icon {
-      // 增大热区
-      height: 100%;
-      padding-left: 8px;
-      width: 44px;
-      padding-right: 8px;
-      color: @collapse-icon-color;
+      left: @spacer-2;
     }
   }
 
@@ -91,7 +76,7 @@
     padding: @collapse-content-padding;
 
     &--disabled {
-      color: @text-color-disabled;
+      color: @collapse-disabled-color;
     }
 
     &--expanded&--bottom {
@@ -108,24 +93,27 @@
   }
 }
 
+// cell: 统一用外部样式类自定义样式
 .class {
   &-title {
     font: @collapse-title-font;
+    color: @collapse-header-text-color;
+  }
 
-    &--disabled {
-      color: @text-color-disabled;
-    }
+  &-left-icon {
+    color: @collapse-left-icon-color;
   }
 
-  &-note {
-    &--disabled {
-      color: @text-color-disabled;
-    }
+  &-right-icon {
+    color: @collapse-icon-color;
   }
 
+  &-title,
+  &-note,
+  &-left-icon,
   &-right-icon {
     &--disabled {
-      color: @text-color-disabled;
+      color: @collapse-disabled-color;
     }
   }
 }

packages/components/collapse-panel/collapse-panel.wxml

@@ -20,6 +20,7 @@
       t-class="{{_.cls(classPrefix + '__header', [placement, ['expanded', expanded]])}} {{prefix}}-class-header"
       t-class-title="class-title {{ultimateDisabled ? 'class-title--disabled' : ''}}"
       t-class-note="class-note {{ultimateDisabled ? 'class-note--disabled' : ''}}"
+      t-class-left-icon="class-left-icon {{ultimateDisabled ? 'class-left-icon--disabled' : ''}}"
       t-class-right-icon="class-right-icon {{classPrefix}}__arrow--{{placement}} {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
       t-class-hover="class-header-hover"
     >

packages/components/collapse/README.en-US.md

@@ -72,11 +72,13 @@ Name | Default Value | Description
 --td-collapse-content-font | @font-body-medium | -
 --td-collapse-content-padding | 32rpx | -
 --td-collapse-content-text-color | @text-color-primary | -
+--td-collapse-disabled-color | @text-color-disabled | -
 --td-collapse-extra-font | @font-body-large | -
 --td-collapse-header-height | auto | -
 --td-collapse-header-text-color | @text-color-primary | -
---td-collapse-header-text-disabled-color | @text-color-disabled | -
+--td-collapse-header-text-disabled-color | @collapse-disabled-color | -
 --td-collapse-horizontal-padding | 32rpx | -
---td-collapse-icon-color | @font-gray-3 | -
+--td-collapse-icon-color | @text-color-placeholder | -
+--td-collapse-left-icon-color | @brand-color | -
 --td-collapse-panel-bg-color | @bg-color-container | -
 --td-collapse-title-font | @font-body-large | -

packages/components/collapse/README.md

@@ -126,11 +126,13 @@ t-class-header | 头部样式类
 --td-collapse-content-font | @font-body-medium | -
 --td-collapse-content-padding | 32rpx | -
 --td-collapse-content-text-color | @text-color-primary | -
+--td-collapse-disabled-color | @text-color-disabled | -
 --td-collapse-extra-font | @font-body-large | -
 --td-collapse-header-height | auto | -
 --td-collapse-header-text-color | @text-color-primary | -
---td-collapse-header-text-disabled-color | @text-color-disabled | -
+--td-collapse-header-text-disabled-color | @collapse-disabled-color | -
 --td-collapse-horizontal-padding | 32rpx | -
---td-collapse-icon-color | @font-gray-3 | -
+--td-collapse-icon-color | @text-color-placeholder | -
+--td-collapse-left-icon-color | @brand-color | -
 --td-collapse-panel-bg-color | @bg-color-container | -
 --td-collapse-title-font | @font-body-large | -

packages/components/collapse/__test__/__snapshots__/index.test.js.snap

@@ -23,6 +23,7 @@ exports[`collapse :defaultExpandAll 1`] = `
           <t-cell
             tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
             tClassHover="class-header-hover"
+            tClassLeftIcon="class-left-icon "
             tClassNote="class-note "
             tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
             tClassTitle="class-title "
@@ -109,6 +110,7 @@ exports[`collapse :defaultExpandAll 1`] = `
           <t-cell
             tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
             tClassHover="class-header-hover"
+            tClassLeftIcon="class-left-icon "
             tClassNote="class-note "
             tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
             tClassTitle="class-title "

packages/uniapp-components/collapse-panel/collapse-panel.less

@@ -14,7 +14,7 @@
 @collapse-content-padding: var(--td-collapse-content-padding, 32rpx);
 @collapse-content-line-height: var(--td-collapse-content-line-height, 1.5);
 @collapse-border-color: var(--td-collapse-border-color, @border-level-1-color);
-@collapse-icon-color: var(--td-collapse-icon-color, @font-gray-3);
+@collapse-icon-color: var(--td-collapse-icon-color, @text-color-placeholder);
 
 @collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container);