fix(button): [button,cascader] fix button's radius and cascader bgcol…

…or (#2572) * fix(button): set button border-raduis to 6px * fix(cascader): fix cascader's background color when hover
opentiny · Nov 28, 2024 · 3967017 · 3967017
1 parent 1be86d5
commit 3967017
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 8 deletions.
diff --git a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
@@ -18,6 +18,16 @@
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>圆角按钮</p>
+    <tiny-row>
+      <tiny-button type="primary" round> 主要按钮 </tiny-button>
+      <tiny-button round> 次要按钮 </tiny-button>
+      <tiny-button type="success" round> 成功按钮 </tiny-button>
+      <tiny-button type="info" round> 信息按钮 </tiny-button>
+      <tiny-button type="warning" round> 警告按钮 </tiny-button>
+      <tiny-button type="danger" round> 危险按钮 </tiny-button>
+    </tiny-row>
+    <p>圆形按钮</p>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEditor" circle></tiny-button>

diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -18,6 +18,16 @@
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>圆角按钮</p>
+    <tiny-row>
+      <tiny-button type="primary" round> 主要按钮 </tiny-button>
+      <tiny-button round> 次要按钮 </tiny-button>
+      <tiny-button type="success" round> 成功按钮 </tiny-button>
+      <tiny-button type="info" round> 信息按钮 </tiny-button>
+      <tiny-button type="warning" round> 警告按钮 </tiny-button>
+      <tiny-button type="danger" round> 危险按钮 </tiny-button>
+    </tiny-row>
+    <p>圆形按钮</p>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEditor" circle></tiny-button>

diff --git a/examples/sites/demos/pc/app/button/webdoc/button.js b/examples/sites/demos/pc/app/button/webdoc/button.js
@@ -10,9 +10,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>type</code> 设置按钮类型， <code>plain</code> 设置是否为朴素按钮， <code>circle</code> 设置是否为圆形按钮。</p>',
+          '通过 <code>type</code> 设置按钮类型， <code>plain</code> 设置是否为朴素按钮，<code>round</code> 设置是否为圆角按钮， <code>circle</code> 设置是否为圆形按钮。',
         'en-US':
-          '<p>Set the button type through <code>type</code> , whether it is a plain button and whether it is a circular button.</p>'
+          'Run the <code>type</code> command to set the button type. The <code>plain</code> command is used to set whether it is a plain button, <code>round</code> command is used to set whether it is a rounded button, and <code>circle</code> command is used to set whether it is a round button.'
       },
       codeFiles: ['basic-usage.vue']
     },

diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less
@@ -400,7 +400,6 @@
   --tv-border-radius-md: 2px; // 默认
   --tv-border-radius-lg: 4px;
   --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 
-  --tv-border-radius-brand: var(--tv-border-radius-md); // 品牌相关。用于圆角，按钮、分页等场景
 
   /** 5. 边框  **/
   --tv-border-width: 1px;

diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
@@ -401,7 +401,6 @@
   --tv-border-radius-md: 6px; // 默认
   --tv-border-radius-lg: 8px;
   --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 
-  --tv-border-radius-brand: var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景
 
   /** 5. 边框  **/
   --tv-border-width: 1px;

diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
@@ -20,7 +20,7 @@
   --tv-Button-line-height: var(--tv-line-height-number);
   // --------------------------------------------------- 场景1、圆角--------------------------------------------
   // 默认时按钮圆角
-  --tv-Button-border-radius: var(--tv-border-radius-brand); // 默认规范不需要 6px的圆角的效果，默认就是半圆
+  --tv-Button-border-radius: var(--tv-border-radius-md); // 默认还原为6px
   // 大圆角时按钮圆角
   --tv-Button-border-radius-round: var(--tv-border-radius-round);
   // 圆形时按钮圆角

diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
@@ -12,7 +12,7 @@
 
 .inject-CascaderNode-vars() {
   // 下拉列表子项的背景色
-  --tv-CascaderNode-hover-bg-color: var(--tv-color-bg-secondary, #f0f0f0);
+  --tv-CascaderNode-hover-bg-color: var(--tv-color-bg, #f5f5f5);
   // 下拉列表子项悬浮时的文本色
   --tv-CascaderNode-hover-text-color: var(--tv-color-text, #191919);
   // 下拉列表子项的文本色

diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less
@@ -44,7 +44,7 @@
   // 引导框按钮默认样式边框色
   --tv-Guide-button-border-color: var(--tv-color-border-secondary);
   // 引导框按钮默认样式圆角
-  --tv-Guide-button-border-radius: var(--tv-border-radius-brand);
+  --tv-Guide-button-border-radius: var(--tv-border-radius-round);
   // 引导框按钮默认样式背景色
   --tv-Guide-button-bg-color: var(--tv-color-bg-secondary);
   // 引导框按钮默认样式悬浮边框色

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -62,7 +62,7 @@
   // 分页页码项默认悬浮边框色
   --tv-Pager-page-item-border-color-hover: transparent;
   // 分页页码项项圆角
-  --tv-Pager-page-item-border-radius: var(--tv-border-radius-brand);
+  --tv-Pager-page-item-border-radius: var(--tv-border-radius-round);
   // 分页页码悬浮字重
   --tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-bold);
   // 分页页码项最小宽度