fix(tag): update tag's size when only icon, update one place of button's icon size (#2440)

Author: shenjunjian

examples/sites/demos/pc/app/tag/size-composition-api.vue

@@ -4,11 +4,19 @@
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
     <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
+    <br /><br />
+    <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
+
+const TinyIconHeartempty = IconHeartempty()
 </script>
 
 <style>

examples/sites/demos/pc/app/tag/size.vue

@@ -4,15 +4,22 @@
     <tiny-tag type="success"> 默认标签 </tiny-tag>
     <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
     <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
+    <br /><br />
+    <tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
+    <tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
   </div>
 </template>
 
 <script lang="jsx">
 import { TinyTag } from '@opentiny/vue'
+import { IconHeartempty } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTag
+    TinyTag,
+    TinyIconHeartempty: IconHeartempty()
   }
 }
 </script>

examples/sites/demos/pc/app/tag/webdoc/tag.js

@@ -11,11 +11,13 @@ export default {
       desc: {
         'zh-CN': `
           通过默认插槽，可以将文字和图标显示为一个标签。 <br>
-          通过 <code>value</code> 属性，也可以设置标签值。
+          通过 <code>value</code> 属性，也可以设置标签值。 <br>
+          通过 <code>only-icon</code> 属性，设置标签只有图标。
         `,
         'en-US': `
           Through the default slot, text and ICONS can be displayed as a label. <br>
-          Tag values can also be set using the <code>value</code> property.
+          Tag values can also be set using the <code>value</code> property. <br>
+          Use the <code>only-icon</code> property to set the label to only ICONS.
         `
       },
       codeFiles: ['basic-usage.vue']

packages/theme/src/button/vars.less

@@ -66,7 +66,7 @@
   // 小型按钮最小宽度
   --tv-Button-min-width-small: 72px;
   // 小型按钮内图标的大小
-  --tv-Button-size-icon-font-size-small: 14px;
+  --tv-Button-size-icon-font-size-small: 16px;
   // 超小按钮字号
   --tv-Button-font-size-mini: var(--tv-font-size-sm);
   // 超小按钮高度

packages/theme/src/tag/index.less

@@ -29,16 +29,36 @@
   text-overflow: ellipsis;
   overflow: hidden;
 
+  &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
+    padding: var(--tv-Tag-only-icon-padding);
+
+    svg {
+      font-size: var(--tv-Tag-only-icon-font-size);
+      margin-right: 0; // 此时不需要右边距了
+    }
+  }
+
   /** size 场景 */
   .size-mixin(@size) {
     @fs: %('var(--tv-Tag-font-size%a)', @size);
     @px: %('var(--tv-Tag-padding-x%a)', @size);
     @py: %('var(--tv-Tag-padding-y%a)', @size);
     @br: %('var(--tv-Tag-border-radius%a)', @size);
+    @icon-fs: %('var(--tv-Tag-only-icon-font-size%a)', @size);
+    @icon-py: %('var(--tv-Tag-only-icon-padding%a)', @size);
 
     font-size: e(@fs);
     padding: e(@py) e(@px);
     border-radius: e(@br);
+
+    &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
+      padding: e(@icon-py);
+
+      svg {
+        font-size: e(@icon-fs);
+        margin-right: 0; // 此时不需要右边距了
+      }
+    }
   }
 
   .size-mixin(e(''));
@@ -149,13 +169,4 @@
     margin-right: var(--tv-Tag-slot-icon-margin-right);
     fill: currentColor;
   }
-
-  &.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
-    padding: var(--tv-Tag-only-icon-padding);
-
-    svg {
-      font-size: var(--tv-Tag-only-icon-font-size);
-      margin-right: 0; // 此时不需要右边距了
-    }
-  }
 }

packages/theme/src/tag/vars.less

@@ -24,6 +24,11 @@
   --tv-Tag-padding-y-mini: 0.5px;
   // 超小标签圆角
   --tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-mini: 12px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-mini: 2px;
+
   // 小型标签字号
   --tv-Tag-font-size-small: var(--tv-font-size-sm);
   // 小型标签水平间距
@@ -32,6 +37,11 @@
   --tv-Tag-padding-y-small: 0;
   // 小型标签圆角
   --tv-Tag-border-radius-small: var(--tv-border-radius-xs);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-small: 14px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-small: 2px;
+
   // 默认标签字号
   --tv-Tag-font-size: var(--tv-font-size-md);
   // 默认标签水平间距
@@ -40,6 +50,11 @@
   --tv-Tag-padding-y: 0.5px;
   // 默认标签圆角
   --tv-Tag-border-radius: var(--tv-border-radius-sm);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size: 16px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding: 3px;
+
   // 中等标签字号
   --tv-Tag-font-size-medium: var(--tv-font-size-md);
   // 中等标签水平间距
@@ -48,6 +63,10 @@
   --tv-Tag-padding-y-medium: 4.5px;
   // 中等标签圆角
   --tv-Tag-border-radius-medium: var(--tv-border-radius-md);
+  // 标签在仅图标模式时，图标的大小
+  --tv-Tag-only-icon-font-size-medium: 20px;
+  // 标签在仅图标模式时，标签的内边距
+  --tv-Tag-only-icon-padding-medium: 5px;
 
   //------------------------------------------------------- 颜色 场景：（1、考虑border，虽然cloud design没有，但适配其它肯定有border的) ----
 
@@ -201,8 +220,4 @@
   //------------------------------------------------------- 其它 场景：-----------------------------------
   // 标签插槽有前置图标时，图标的右间距
   --tv-Tag-slot-icon-margin-right: var(--tv-space-sm);
-  // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size: var(--tv-font-size-sm);
-  // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding: 3px;
 }