fix(Progress): resolve circle type color error in dark mode (#2794)

* fix(Progress): resolve circle type color error in dark mode * test: update snapshots
Tencent · May 24, 2024 · 89a40d3 · 89a40d3
1 parent 22659bc
commit 89a40d3
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/src/grid/_example/icon-grid/index.wxss b/src/grid/_example/icon-grid/index.wxss
@@ -11,6 +11,6 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: #f3f3f3;
+  background-color: var(--td-bg-color-secondarycontainer);
   border-radius: 12rpx;
 }
diff --git a/src/progress/progress.less b/src/progress/progress.less
@@ -45,6 +45,7 @@
 
 // 进度条基本样式
 .@{progress} {
+  --td-progress-inner-bg-color: @brand-color;
   --td-progress-track-bg-color: @bg-color-component;
 
   &__inner {

diff --git a/src/progress/progress.wxml b/src/progress/progress.wxml
@@ -76,7 +76,7 @@
       aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
       aria-live="polite"
       class="{{classPrefix}}__canvas--circle"
-      style="background-image: conic-gradient( {{colorCircle || this.STATUS_COLOR[status] || '#0052d9'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
+      style="background-image: conic-gradient( {{colorCircle || this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"
     >
       <view
         class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"

diff --git a/src/result/_example/result.wxml b/src/result/_example/result.wxml
@@ -16,7 +16,4 @@
       <t-button theme="primary" block size="large" variant="outline" bind:tap="goResultPage">页面示例</t-button>
     </view>
   </t-demo>
-  <view class="demo-section__wrapper">
-    <t-button theme="primary" block size="large" variant="outline" bind:tap="goResultPage">页面示例</t-button>
-  </view>
 </view>
diff --git a/src/sticky/__test__/__snapshots__/demo.test.js.snap b/src/sticky/__test__/__snapshots__/demo.test.js.snap
@@ -26,6 +26,7 @@ exports[`Sticky Sticky container demo works fine 1`] = `
       offsetTop="{{0}}"
     >
       <t-button
+        hoverClass="hover-class "
         size="large"
         tClass="external-class green-button"
       >

diff --git a/src/sticky/_example/container/index.json b/src/sticky/_example/container/index.json
@@ -1,5 +1,6 @@
 {
   "component": true,
+  "styleIsolation": "shared",
   "usingComponents": {
     "t-sticky": "tdesign-miniprogram/sticky/sticky",
     "t-button": "tdesign-miniprogram/button/button"

diff --git a/src/sticky/_example/container/index.wxml b/src/sticky/_example/container/index.wxml
@@ -1,5 +1,5 @@
 <view class="wrapper">
   <t-sticky container="{{ container }}" offset-top="{{navbarHeight}}">
-    <t-button size="large" t-class="external-class green-button">指定容器</t-button>
+    <t-button size="large" t-class="external-class green-button" hover-class="hover-class ">指定容器</t-button>
   </t-sticky>
 </view>
diff --git a/src/sticky/_example/container/index.wxss b/src/sticky/_example/container/index.wxss
@@ -10,6 +10,13 @@
 }
 
 .green-button {
-  background-color: rgba(0, 168, 112, 1) !important;
+  z-index: 0 !important;
+  background-color: #008858 !important;
   color: #fff !important;
 }
+
+.hover-class::after {
+  z-index: -1;
+  background-color: #006c45;
+  border-color: #006c45;
+}