From f95e76f24d9821cc573c900cd4f664df6289ed9c Mon Sep 17 00:00:00 2001
From: "Y." <anly_yaw@163.com>
Date: Fri, 3 Jan 2025 18:43:16 +0800
Subject: [PATCH] fix(Tabs): fix the badge activation color error (#3429)

* fix(Tabs): fix the badge activation color error

* test: update snapshots
---
 .../__test__/__snapshots__/demo.test.js.snap  |  2 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |  2 +-
 .../_example/base/index.wxml                  |  2 +-
 .../_example/base/index.wxss                  |  2 +-
 .../__test__/__snapshots__/demo.test.js.snap  | 84 +------------------
 src/tabs/_example/size/index.wxss             |  2 +-
 src/tabs/_example/theme/index.wxml            | 12 ---
 src/tabs/_example/with-content/index.wxml     |  4 +-
 src/tabs/_example/with-content/index.wxss     |  3 +
 src/tabs/tabs.less                            | 10 +++
 src/tabs/tabs.wxml                            |  5 +-
 11 files changed, 24 insertions(+), 104 deletions(-)

diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
index b5d44fabb..6aed389ef 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
@@ -25,7 +25,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
         title="PullDownRefresh 下拉刷新"
       />
       <wx-view
-        class="pulldown-reflesh__content"
+        class="pulldown-refresh__content"
       >
         <t-skeleton
           loading="{{true}}"
diff --git a/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 19847702b..b937f02bc 100644
--- a/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -34,7 +34,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
         用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
       </wx-view>
       <wx-view
-        class="pulldown-reflesh__content"
+        class="pulldown-refresh__content"
       >
         <t-skeleton
           loading="{{true}}"
diff --git a/src/pull-down-refresh/_example/base/index.wxml b/src/pull-down-refresh/_example/base/index.wxml
index 33ea1613f..8470ed271 100644
--- a/src/pull-down-refresh/_example/base/index.wxml
+++ b/src/pull-down-refresh/_example/base/index.wxml
@@ -12,7 +12,7 @@
       desc="用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。"
       notice="渲染框架支持情况：WebView"
     />
-    <view class="pulldown-reflesh__content">
+    <view class="pulldown-refresh__content">
       <t-skeleton rowCol="{{rowCol1}}" loading></t-skeleton>
       <view class="row">
         <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
diff --git a/src/pull-down-refresh/_example/base/index.wxss b/src/pull-down-refresh/_example/base/index.wxss
index 47c915f23..cf802dd53 100644
--- a/src/pull-down-refresh/_example/base/index.wxss
+++ b/src/pull-down-refresh/_example/base/index.wxss
@@ -18,7 +18,7 @@
   line-height: 44rpx;
 }
 
-.pulldown-reflesh__content {
+.pulldown-refresh__content {
   margin: 64rpx 32rpx 0;
   position: relative;
 }
diff --git a/src/tabs/__test__/__snapshots__/demo.test.js.snap b/src/tabs/__test__/__snapshots__/demo.test.js.snap
index ca7852f3f..7fcde9d9c 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.js.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.js.snap
@@ -239,47 +239,6 @@ exports[`Tabs Tabs theme demo works fine 1`] = `
   <wx-view
     style="height: 16px"
   />
-  <t-tabs
-    defaultValue="{{0}}"
-    spaceEvenly="{{false}}"
-    theme="tag"
-  >
-    <t-tab-panel
-      label="选项"
-      value="{{0}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{1}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{2}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{3}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{4}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{5}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{6}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{7}}"
-    />
-  </t-tabs>
-  <wx-view
-    style="height: 16px"
-  />
   <t-tabs
     defaultValue="{{0}}"
     theme="card"
@@ -301,47 +260,6 @@ exports[`Tabs Tabs theme demo works fine 1`] = `
       value="{{3}}"
     />
   </t-tabs>
-  <wx-view
-    style="height: 16px"
-  />
-  <t-tabs
-    defaultValue="{{0}}"
-    spaceEvenly="{{false}}"
-    theme="card"
-  >
-    <t-tab-panel
-      label="选项"
-      value="{{0}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{1}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{2}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{3}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{4}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{5}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{6}}"
-    />
-    <t-tab-panel
-      label="选项"
-      value="{{7}}"
-    />
-  </t-tabs>
 </theme>
 `;
 
@@ -415,7 +333,7 @@ exports[`Tabs Tabs with-content demo works fine 1`] = `
       <wx-view
         class="custom-panel__content"
       >
-        选项二内容 选项二内容 选项二内容 选项二内容 选项二内容 选项二内容 选项二内容
+        选项二内容
       </wx-view>
     </t-tab-panel>
     <t-tab-panel
diff --git a/src/tabs/_example/size/index.wxss b/src/tabs/_example/size/index.wxss
index 504abc545..13b33a4ce 100644
--- a/src/tabs/_example/size/index.wxss
+++ b/src/tabs/_example/size/index.wxss
@@ -1,3 +1,3 @@
 .bigger {
-  --tab-font-size: 32rpx;
+  --td-tab-font-size: 32rpx;
 }
diff --git a/src/tabs/_example/theme/index.wxml b/src/tabs/_example/theme/index.wxml
index eb90cc567..57e4a4e22 100644
--- a/src/tabs/_example/theme/index.wxml
+++ b/src/tabs/_example/theme/index.wxml
@@ -4,18 +4,6 @@
 
 <view style="height: 16px" />
 
-<t-tabs defaultValue="{{0}}" theme="tag" space-evenly="{{false}}">
-  <t-tab-panel wx:for="{{8}}" wx:key="index" label="选项" value="{{index}}" />
-</t-tabs>
-
-<view style="height: 16px" />
-
 <t-tabs defaultValue="{{0}}" theme="card">
   <t-tab-panel wx:for="{{4}}" wx:key="index" label="选项" value="{{index}}" />
 </t-tabs>
-
-<view style="height: 16px" />
-
-<t-tabs defaultValue="{{0}}" theme="card" space-evenly="{{false}}">
-  <t-tab-panel wx:for="{{8}}" wx:key="index" label="选项" value="{{index}}" />
-</t-tabs>
diff --git a/src/tabs/_example/with-content/index.wxml b/src/tabs/_example/with-content/index.wxml
index e7e3d1413..08a5a11c8 100644
--- a/src/tabs/_example/with-content/index.wxml
+++ b/src/tabs/_example/with-content/index.wxml
@@ -10,9 +10,7 @@
     <view class="custom-panel__content">选项一内容</view>
   </t-tab-panel>
   <t-tab-panel label="选项二" value="1">
-    <view class="custom-panel__content"
-      >选项二内容 选项二内容 选项二内容 选项二内容 选项二内容 选项二内容 选项二内容</view
-    >
+    <view class="custom-panel__content">选项二内容</view>
   </t-tab-panel>
   <t-tab-panel label="选项三" value="2">
     <view class="custom-panel__content">选项三内容</view>
diff --git a/src/tabs/_example/with-content/index.wxss b/src/tabs/_example/with-content/index.wxss
index 40eff9294..efd421006 100644
--- a/src/tabs/_example/with-content/index.wxss
+++ b/src/tabs/_example/with-content/index.wxss
@@ -7,6 +7,9 @@
 }
 
 .custom-panel__content {
+  height: 240rpx;
+  font-size: 28rpx;
+  color: var(--td-text-color-placeholder);
   padding: 40rpx;
   display: flex;
   justify-content: center;
diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
index 7e6b66630..c5f2c2462 100644
--- a/src/tabs/tabs.less
+++ b/src/tabs/tabs.less
@@ -160,6 +160,16 @@
     }
   }
 
+  &__badge {
+    &--active {
+      --td-badge-content-text-color: @tab-item-active-color;
+    }
+
+    &--disabled {
+      --td-badge-content-text-color: @tab-item-disabled-color;
+    }
+  }
+
   &__icon {
     font-size: @tab-icon-size;
     margin-right: calc(@spacer / 4);
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 55b455740..611045a21 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -45,7 +45,10 @@
             >
               <template wx:if="{{item.icon}}" is="icon" data="{{ tClass: classPrefix + '__icon', ...item.icon }}" />
               <block wx:if="{{item.badgeProps}}">
-                <template is="badge" data="{{ ...item.badgeProps, content: item.label }}" />
+                <template
+                  is="badge"
+                  data="{{ ...item.badgeProps, content: item.label, tClass: _.cls(classPrefix + '__badge', [ ['disabled', item.disabled], ['active', currentIndex === index]])}}"
+                />
               </block>
               <block wx:else>{{item.label}}</block>
             </view>