fix(Collapse): fix panel disabled style error (#3186)

* fix(Collapse): fix panel disabled style error * docs: update css vars * test: update snapshots
Tencent · Oct 12, 2024 · 19cc94a · 19cc94a
1 parent d8da25d
commit 19cc94a
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 30 deletions.
diff --git a/src/collapse-panel/collapse-panel.less b/src/collapse-panel/collapse-panel.less
@@ -9,7 +9,7 @@
 @collapse-extra-font-size: var(--td-collapse-extra-font-size, @font-size-m);
 @collapse-content-font-size: var(--td-collapse-content-font-size, @font-size-base);
 
-@collapse-header-height: var(--td-collapse-header-height, 96rpx);
+@collapse-header-height: var(--td-collapse-header-height, auto);
 @collapse-horizontal-padding: var(--td-collapse-horizontal-padding, 32rpx);
 @collapse-content-padding: var(--td-collapse-content-padding, 32rpx);
 @collapse-content-line-height: var(--td-collapse-content-line-height, 1.5);
@@ -18,7 +18,6 @@
 @collapse-panel-bg-color: var(--td-collapse-panel-bg-color, @bg-color-container);
 
 .@{prefix}-collapse-panel {
-  .border(bottom, @collapse-border-color);
   background-color: @collapse-panel-bg-color;
 
   &--disabled {
@@ -52,17 +51,10 @@
       .border(bottom, @collapse-border-color);
     }
 
-    &:after {
-      display: none;
+    &::after {
       left: 32rpx;
     }
 
-    &--expanded {
-      &:after {
-        display: block;
-      }
-    }
-
     &-right {
       display: inline-flex;
       align-items: center;
@@ -97,6 +89,18 @@
     font-size: @collapse-content-font-size;
     padding: @collapse-content-padding;
     line-height: @collapse-content-line-height;
+
+    &--disabled {
+      color: @text-color-disabled;
+    }
+
+    &--expanded&--bottom {
+      .border(bottom, @collapse-border-color);
+    }
+
+    &--expanded&--top {
+      .border(top, @collapse-border-color);
+    }
   }
 
   &__arrow--top {

diff --git a/src/collapse-panel/collapse-panel.ts b/src/collapse-panel/collapse-panel.ts
@@ -51,7 +51,7 @@ export default class CollapsePanel extends SuperComponent {
 
   methods = {
     updateExpanded(activeValues = []) {
-      if (!this.$parent || this.data.ultimateDisabled) {
+      if (!this.$parent) {
         return;
       }
 

diff --git a/src/collapse-panel/collapse-panel.wxml b/src/collapse-panel/collapse-panel.wxml
@@ -30,7 +30,9 @@
     </t-cell>
   </view>
   <view class="{{classPrefix}}__wrapper" animation="{{animation}}" aria-hidden="{{expanded ? '' : true}}">
-    <view class="{{classPrefix}}__content {{prefix}}-class-content">
+    <view
+      class="{{_.cls(classPrefix + '__content', [['disabled', ultimateDisabled],  ['expanded', expanded], placement])}} {{prefix}}-class-content"
+    >
       {{content}}
       <slot />
       <slot name="content" />

diff --git a/src/collapse/README.en-US.md b/src/collapse/README.en-US.md
@@ -50,16 +50,16 @@ t-class-header | \-
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-collapse-border-color | @border-color | - 
+--td-collapse-border-color | @border-level-1-color | - 
 --td-collapse-content-font-size | @font-size-base | - 
 --td-collapse-content-line-height | 1.5 | - 
 --td-collapse-content-padding | 32rpx | - 
---td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-content-text-color | @text-color-primary | - 
 --td-collapse-extra-font-size | @font-size-m | - 
---td-collapse-header-height | 96rpx | - 
---td-collapse-header-text-color | @font-gray-1 | - 
---td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-header-height | auto | - 
+--td-collapse-header-text-color | @text-color-primary | - 
+--td-collapse-header-text-disabled-color | @text-color-disabled | - 
 --td-collapse-horizontal-padding | 32rpx | - 
 --td-collapse-icon-color | @font-gray-3 | - 
 --td-collapse-panel-bg-color | @bg-color-container | - 
---td-collapse-title-font-size | @font-size-m | -
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/collapse/README.md b/src/collapse/README.md
@@ -104,16 +104,16 @@ t-class-header | 头部样式类
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-collapse-border-color | @border-color | - 
+--td-collapse-border-color | @border-level-1-color | - 
 --td-collapse-content-font-size | @font-size-base | - 
 --td-collapse-content-line-height | 1.5 | - 
 --td-collapse-content-padding | 32rpx | - 
---td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-content-text-color | @text-color-primary | - 
 --td-collapse-extra-font-size | @font-size-m | - 
---td-collapse-header-height | 96rpx | - 
---td-collapse-header-text-color | @font-gray-1 | - 
---td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-header-height | auto | - 
+--td-collapse-header-text-color | @text-color-primary | - 
+--td-collapse-header-text-disabled-color | @text-color-disabled | - 
 --td-collapse-horizontal-padding | 32rpx | - 
 --td-collapse-icon-color | @font-gray-3 | - 
 --td-collapse-panel-bg-color | @bg-color-container | - 
---td-collapse-title-font-size | @font-size-m | -
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/collapse/__test__/__snapshots__/demo.test.js.snap b/src/collapse/__test__/__snapshots__/demo.test.js.snap
@@ -136,11 +136,10 @@ exports[`Collapse Collapse theme demo works fine 1`] = `
   <t-collapse
     defaultValue="{{
       Array [
-        0,
+        3,
       ]
     }}"
     expandIcon="{{true}}"
-    expandMutex="{{true}}"
     theme="card"
   >
     <t-collapse-panel

diff --git a/src/collapse/__test__/__snapshots__/index.test.js.snap b/src/collapse/__test__/__snapshots__/index.test.js.snap
@@ -85,7 +85,7 @@ exports[`collapse :defaultExpandAll 1`] = `
           class="t-collapse-panel__wrapper"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            class="t-collapse-panel__content t-collapse-panel__content--expanded t-collapse-panel__content--bottom t-class-content"
           >
             
       
@@ -172,7 +172,7 @@ exports[`collapse :defaultExpandAll 1`] = `
           class="t-collapse-panel__wrapper"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            class="t-collapse-panel__content t-collapse-panel__content--expanded t-collapse-panel__content--bottom t-class-content"
           >
             
       

diff --git a/src/collapse/_example/collapse.wxml b/src/collapse/_example/collapse.wxml
@@ -1,7 +1,7 @@
 <t-navbar title="Collapse" leftArrow />
 <view class="demo">
   <view class="demo-title">Collapse 折叠面板</view>
-  <view class="demo-desc">用于对复杂区域进行分组和隐藏 常用于订单信息展示等</view>
+  <view class="demo-desc">可以折叠/展开的内容区域。</view>
 
   <t-demo title="01 组件类型" desc="基础折叠面板">
     <base />

diff --git a/src/collapse/_example/theme/index.wxml b/src/collapse/_example/theme/index.wxml
@@ -1,4 +1,4 @@
-<t-collapse theme="card" defaultValue="{{[0]}}" expandMutex expandIcon>
+<t-collapse theme="card" defaultValue="{{[3]}}" expandIcon>
   <t-collapse-panel header="折叠面板标题" value="{{0}}">
     此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
   </t-collapse-panel>