fix(DropdownMenu): use rpx units (#3094)

* fix(DropdownMenu): use rpx units * test: update snapshots
Tencent · Aug 23, 2024 · 5c1f2ee · 5c1f2ee
1 parent b83cf02
commit 5c1f2ee
Show file tree

Hide file tree

Showing 25 changed files with 67 additions and 56 deletions.
diff --git a/src/badge/__test__/__snapshots__/demo.test.js.snap b/src/badge/__test__/__snapshots__/demo.test.js.snap
@@ -28,7 +28,7 @@ exports[`Badge Badge base demo works fine 1`] = `
       <t-icon
         ariaLabel="通知"
         name="notification"
-        size="24"
+        size="48rpx"
       />
     </t-badge>
     <t-badge
@@ -77,7 +77,7 @@ exports[`Badge Badge base demo works fine 1`] = `
       <t-icon
         ariaLabel="通知"
         name="notification"
-        size="24"
+        size="48rpx"
       />
     </t-badge>
     <t-badge
@@ -195,7 +195,7 @@ exports[`Badge Badge theme demo works fine 1`] = `
       <t-icon
         ariaLabel="通知"
         name="notification"
-        size="24"
+        size="48rpx"
       />
     </t-badge>
   </wx-view>
@@ -220,7 +220,7 @@ exports[`Badge Badge theme demo works fine 1`] = `
       <t-icon
         ariaLabel="通知"
         name="notification"
-        size="24"
+        size="48rpx"
       />
     </t-badge>
   </wx-view>

diff --git a/src/badge/_example/base/index.wxml b/src/badge/_example/base/index.wxml
@@ -2,7 +2,7 @@
 <view class="demo-wrapper">
   <t-badge dot class="wrapper" content="消息" />
   <t-badge dot offset="{{ [1, -1] }}" class="wrapper">
-    <t-icon name="notification" size="24" ariaLabel="通知" />
+    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
   </t-badge>
   <t-badge dot offset="{{ [1, 1] }}" class="wrapper">
     <t-button>按钮</t-button>
@@ -13,7 +13,7 @@
 <view class="demo-wrapper">
   <t-badge count="8" content="消息" offset="{{ [4] }}" class="wrapper" />
   <t-badge count="2" offset="{{ [2, -2] }}" class="wrapper">
-    <t-icon name="notification" size="24" ariaLabel="通知" />
+    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
   </t-badge>
   <t-badge count="8" offset="{{ [2, 2] }}" class="wrapper">
     <t-button>按钮</t-button>

diff --git a/src/badge/_example/theme/index.wxml b/src/badge/_example/theme/index.wxml
@@ -8,14 +8,14 @@
 <view class="demo-desc">圆形徽标</view>
 <view class="demo-wrapper">
   <t-badge count="2" offset="{{ [2, -2] }}">
-    <t-icon name="notification" size="24" ariaLabel="通知" />
+    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
   </t-badge>
 </view>
 
 <view class="demo-desc">方形徽标</view>
 <view class="demo-wrapper">
   <t-badge count="2" shape="square" offset="{{ [1, -2] }}">
-    <t-icon name="notification" size="24" ariaLabel="通知" />
+    <t-icon name="notification" size="48rpx" ariaLabel="通知" />
   </t-badge>
 </view>
 

diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -39,7 +39,7 @@ exports[`calendar :base 1`] = `
                 ariaLabel="关闭"
                 ariaRole="button"
                 class="t-icon class t-class"
-                style="font-size: 24px;"
+                style="font-size: 48rpx;"
                 bind:tap="onTap"
               >
                 <wx-label

diff --git a/src/calendar/template.wxml b/src/calendar/template.wxml
@@ -13,7 +13,7 @@
     wx:if="{{usePopup}}"
     name="close"
     class="{{classPrefix}}__close-btn"
-    size="24"
+    size="48rpx"
     aria-role="button"
     aria-label="关闭"
     bind:tap="handleClose"

diff --git a/src/cascader/cascader.wxml b/src/cascader/cascader.wxml
@@ -8,7 +8,7 @@
     </view>
     <view class="{{name}}__close-btn" bind:tap="onClose">
       <slot name="close-btn" />
-      <t-icon wx:if="{{closeBtn}}" size="24" name="close" />
+      <t-icon wx:if="{{closeBtn}}" size="48rpx" name="close" />
     </view>
     <view class="{{name}}__content">
       <block wx:if="{{steps && steps.length}}">
@@ -20,7 +20,7 @@
             <view class="{{name}}__step-label {{name}}__step-label--{{index === stepIndex ? 'active' : ''}}">
               {{ item }}
             </view>
-            <t-icon name="chevron-right" size="22" t-class="{{name}}__step-arrow" />
+            <t-icon name="chevron-right" size="44rpx" t-class="{{name}}__step-arrow" />
           </view>
         </view>
         <block wx:if="{{theme == 'tab'}}">

diff --git a/src/dialog/dialog.wxml b/src/dialog/dialog.wxml
@@ -22,7 +22,7 @@
     <slot name="top" />
     <view wx:if="{{closeBtn}}" class="{{classPrefix}}__close-btn" bind:tap="onClose">
       <template wx:if="{{_.isObject(closeBtn)}}" is="icon" data="{{ name: 'close', size: 22, ...closeBtn }}" />
-      <t-icon wx:else name="close" size="22" />
+      <t-icon wx:else name="close" size="44rpx" />
     </view>
     <view class="{{classPrefix}}__content {{prefix}}-class-content">
       <view wx:if="{{title}}" class="{{classPrefix}}__header">{{title}}</view>

diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
@@ -45,20 +45,22 @@ close | \- | \-
 
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-dropdown-menu-active-colorm | @brand-color | - 
---td-dropdown-menu-bg-colorm | @bg-color-container | - 
---td-dropdown-menu-border-width | 1px | - 
---td-dropdown-menu-colorm | @font-gray-1 | - 
---td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
---td-dropdown-menu-font-sizem | 28rpx | - 
---td-dropdown-menu-icon-sizem | 48rpx | - 
 --td-dropdown-body-max-height | 560rpx | - 
 --td-dropdown-menu-bg-color | @bg-color-container | - 
 --td-tree-bg-color | @bg-color-container | - 
 --td-tree-item-active-color | @brand-color | - 
 --td-tree-item-font-size | 32rpx | - 
 --td-tree-item-height | 96rpx | - 
 --td-tree-root-bg-color | @bg-color-secondarycontainer | - 
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-border-width | 1px | - 
+--td-dropdown-menu-colorm | @text-color-primary | - 
+--td-dropdown-menu-disabled-colorm | @text-color-disabled | - 
+--td-dropdown-menu-font-sizem | 28rpx | - 
+--td-dropdown-menu-height | 96rpx | - 
+--td-dropdown-menu-icon-sizem | 48rpx | - 
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
@@ -106,21 +106,24 @@ t-class-column-item | 菜单列选项样式类
 t-class-column-item-label | 菜单列选项标签样式类
 t-class-footer | 底部样式类
 
-### CSS 变量
+
+### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-dropdown-menu-active-colorm | @brand-color | - 
---td-dropdown-menu-bg-colorm | @bg-color-container | - 
---td-dropdown-menu-border-width | 1px | - 
---td-dropdown-menu-colorm | @font-gray-1 | - 
---td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
---td-dropdown-menu-font-sizem | 28rpx | - 
---td-dropdown-menu-icon-sizem | 48rpx | - 
 --td-dropdown-body-max-height | 560rpx | - 
 --td-dropdown-menu-bg-color | @bg-color-container | - 
 --td-tree-bg-color | @bg-color-container | - 
 --td-tree-item-active-color | @brand-color | - 
 --td-tree-item-font-size | 32rpx | - 
 --td-tree-item-height | 96rpx | - 
 --td-tree-root-bg-color | @bg-color-secondarycontainer | - 
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-border-width | 1px | - 
+--td-dropdown-menu-colorm | @text-color-primary | - 
+--td-dropdown-menu-disabled-colorm | @text-color-disabled | - 
+--td-dropdown-menu-font-sizem | 28rpx | - 
+--td-dropdown-menu-height | 96rpx | - 
+--td-dropdown-menu-icon-sizem | 48rpx | - 
diff --git a/src/dropdown-menu/dropdown-menu.less b/src/dropdown-menu/dropdown-menu.less
@@ -1,5 +1,6 @@
 @import '../common/style/index.less';
 
+@dropdown-menu-height: var(--td-dropdown-menu-height, 96rpx);
 @dropdown-menu-bg-color: var(--td-dropdown-menu-bg-colorm, @bg-color-container);
 @dropdown-menu-color: var(--td-dropdown-menu-colorm, @text-color-primary);
 @dropdown-menu-active-color: var(--td-dropdown-menu-active-colorm, @brand-color);
@@ -13,7 +14,7 @@
 .@{dropdownMenu} {
   position: relative;
   display: flex;
-  height: 48px;
+  height: @dropdown-menu-height;
   background: @dropdown-menu-bg-color;
   .border(bottom);
 

diff --git a/src/icon/__test__/__snapshots__/demo.test.js.snap b/src/icon/__test__/__snapshots__/demo.test.js.snap
@@ -18187,7 +18187,7 @@ exports[`Icon Icon iconImage demo works fine 1`] = `
       <t-icon
         data-name="https://tdesign.gtimg.com/mobile/demos/icon1.png"
         name="https://tdesign.gtimg.com/mobile/demos/icon1.png"
-        size="24"
+        size="48rpx"
         bind:click="onIconTap"
       />
     </wx-view>
@@ -18197,7 +18197,7 @@ exports[`Icon Icon iconImage demo works fine 1`] = `
       <t-icon
         data-name="https://tdesign.gtimg.com/mobile/demos/icon2.png"
         name="https://tdesign.gtimg.com/mobile/demos/icon2.png"
-        size="24"
+        size="48rpx"
         bind:click="onIconTap"
       />
     </wx-view>

diff --git a/src/icon/_example/iconImage/index.wxml b/src/icon/_example/iconImage/index.wxml
@@ -1,5 +1,5 @@
 <view class="demo__list">
   <view class="demo__card" wx:for="{{imageIconList}}" wx:key="index">
-    <t-icon name="{{item}}" size="24" data-name="{{item}}" bind:click="onIconTap" />
+    <t-icon name="{{item}}" size="48rpx" data-name="{{item}}" bind:click="onIconTap" />
   </view>
 </view>
diff --git a/src/navbar/__test__/__snapshots__/demo.test.js.snap b/src/navbar/__test__/__snapshots__/demo.test.js.snap
@@ -16,15 +16,15 @@ exports[`Navbar Navbar back-home demo works fine 1`] = `
         ariaRole="button"
         class="custom-capsule__icon back"
         name="chevron-left"
-        size="20"
+        size="40rpx"
         bind:tap="onBack"
       />
       <t-icon
         ariaLabel="首页"
         ariaRole="button"
         class="custom-capsule__icon home"
         name="home"
-        size="20"
+        size="40rpx"
         bind:tap="onGoHome"
       />
     </wx-view>

diff --git a/src/navbar/_example/back-home/index.wxml b/src/navbar/_example/back-home/index.wxml
@@ -1,15 +1,15 @@
 <t-navbar t-class-placeholder="t-navbar-placeholder" t-class-content="t-navbar-content" title="标题文字">
   <view slot="capsule" class="custom-capsule">
     <t-icon
-      size="20"
+      size="40rpx"
       bind:tap="onBack"
       aria-role="button"
       aria-label="返回"
       name="chevron-left"
       class="custom-capsule__icon back"
     />
     <t-icon
-      size="20"
+      size="40rpx"
       bind:tap="onGoHome"
       aria-role="button"
       aria-label="首页"

diff --git a/src/popup/__test__/__snapshots__/demo.test.js.snap b/src/popup/__test__/__snapshots__/demo.test.js.snap
@@ -120,7 +120,7 @@ exports[`Popup Popup custom-close demo works fine 1`] = `
       <t-icon
         color="#fff"
         name="close-circle"
-        size="32"
+        size="64rpx"
         tClass="close-btn"
         bind:tap="onClose"
       />

diff --git a/src/popup/_example/custom-close/index.wxml b/src/popup/_example/custom-close/index.wxml
@@ -1,6 +1,6 @@
 <t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="center">
   <view class="block">
-    <t-icon t-class="close-btn" name="close-circle" size="32" color="#fff" bind:tap="onClose" />
+    <t-icon t-class="close-btn" name="close-circle" size="64rpx" color="#fff" bind:tap="onClose" />
   </view>
 </t-popup>
 

diff --git a/src/rate/__test__/__snapshots__/demo.test.js.snap b/src/rate/__test__/__snapshots__/demo.test.js.snap
@@ -256,7 +256,7 @@ exports[`Rate Rate special demo works fine 1`] = `
       class="rate-wrapper"
     >
       <t-rate
-        size="30"
+        size="60rpx"
         texts="{{
           Array [
             "非常糟糕",

diff --git a/src/rate/_example/special/index.wxml b/src/rate/_example/special/index.wxml
@@ -1,6 +1,6 @@
 <view class="demo-rate">
   <view class="rate-wrapper">
-    <t-rate value="{{value}}" size="30" bind:change="onChange" texts="{{texts}}" />
+    <t-rate value="{{value}}" size="60rpx" bind:change="onChange" texts="{{texts}}" />
   </view>
   <view class="desc desc--{{value > 3 ? 'active' : ''}}">{{texts[value - 1]}}</view>
 </view>
diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -20,7 +20,7 @@ exports[`search Props :base 1`] = `
             ariaLabel=""
             ariaRole=""
             class="t-icon class t-class"
-            style="font-size: 24px;"
+            style="font-size: 48rpx;"
             bind:tap="onTap"
           >
             <wx-label

diff --git a/src/search/search.wxml b/src/search/search.wxml
@@ -10,7 +10,7 @@
     <t-icon
       wx:if="{{leftIcon}}"
       name="{{leftIcon}}"
-      size="24"
+      size="48rpx"
       class="{{prefix}}-icon {{prefix}}-class-left"
       aria-hidden="{{true}}"
     />
@@ -48,7 +48,7 @@
       aria-role="button"
       aria-label="清除"
     >
-      <t-icon name="close-circle-filled" size="24" />
+      <t-icon name="close-circle-filled" size="48rpx" />
     </view>
   </view>
   <view

diff --git a/src/step-item/step-item.wxml b/src/step-item/step-item.wxml
@@ -14,7 +14,7 @@
     <view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
     <view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
       <slot wx:if="{{icon == 'slot'}}" name="icon" />
-      <t-icon wx:else name="{{icon}}" size="22" />
+      <t-icon wx:else name="{{icon}}" size="44rpx" />
     </view>
     <view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
       <t-icon wx:if="{{curStatus == 'finish'}}" name="check" />

diff --git a/src/steps/__test__/__snapshots__/demo.test.js.snap b/src/steps/__test__/__snapshots__/demo.test.js.snap
@@ -122,7 +122,7 @@ exports[`Steps Steps special demo works fine 1`] = `
         <t-icon
           color="rgba(0, 0, 0, .4)"
           name="chevron-right"
-          size="22"
+          size="44rpx"
           slot="title-right"
         />
       </t-step-item>
@@ -132,7 +132,7 @@ exports[`Steps Steps special demo works fine 1`] = `
         <t-icon
           color="rgba(0, 0, 0, .4)"
           name="chevron-right"
-          size="22"
+          size="44rpx"
           slot="title-right"
         />
       </t-step-item>
@@ -142,7 +142,7 @@ exports[`Steps Steps special demo works fine 1`] = `
         <t-icon
           color="rgba(0, 0, 0, .4)"
           name="chevron-right"
-          size="22"
+          size="44rpx"
           slot="title-right"
         />
       </t-step-item>
@@ -152,7 +152,7 @@ exports[`Steps Steps special demo works fine 1`] = `
         <t-icon
           color="rgba(0, 0, 0, .4)"
           name="chevron-right"
-          size="22"
+          size="44rpx"
           slot="title-right"
         />
       </t-step-item>

diff --git a/src/steps/_example/special/index.wxml b/src/steps/_example/special/index.wxml
@@ -8,7 +8,7 @@
 <view class="block">
   <t-steps layout="vertical" theme="dot" current="{{count - 1}}" bind:change="onCascader">
     <t-step-item wx:for="{{count}}" wx:key="index" title="{{_.getText(count - 1, index)}}">
-      <t-icon name="chevron-right" size="22" color="rgba(0, 0, 0, .4)" slot="title-right" />
+      <t-icon name="chevron-right" size="44rpx" color="rgba(0, 0, 0, .4)" slot="title-right" />
     </t-step-item>
   </t-steps>
 

diff --git a/src/tab-bar-item/tab-bar-item.wxml b/src/tab-bar-item/tab-bar-item.wxml
@@ -37,7 +37,7 @@
       <slot name="icon" />
     </view>
     <view class="{{_.cls(classPrefix + '__text', [['small', !!icon]])}}">
-      <t-icon wx:if="{{hasChildren}}" name="view-list" size="16" t-class="{{classPrefix}}__icon-menu" />
+      <t-icon wx:if="{{hasChildren}}" name="view-list" size="32rpx" t-class="{{classPrefix}}__icon-menu" />
       <slot />
     </view>
   </view>