fix(tag): remove mini size of tag (#2468)

* fix(tag): remove mini size * fix(tag): update tag's demo, which is relate to size * fix(tag): fix api * fix(tag): fix
opentiny · Oct 29, 2024 · f6b4482 · f6b4482
1 parent fad66a7
commit f6b4482
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 30 deletions.
diff --git a/examples/sites/demos/apis/tag-group.js b/examples/sites/demos/apis/tag-group.js
@@ -32,7 +32,7 @@ export default {
         },
         {
           name: 'size',
-          type: "'medium' | 'small' | 'mini'",
+          type: "'medium' | 'small'",
           defaultValue: "'medium'",
           desc: {
             'zh-CN': '尺寸',

diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js
@@ -271,7 +271,7 @@ type IEffect = 'dark' | 'light' | 'plain'
       name: 'ISize',
       type: 'type',
       code: `
-type ISize = 'medium' | 'small' | 'mini' | ''
+type ISize = 'medium' | 'small' | ''
 `
     },
     {

diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
@@ -4,8 +4,6 @@
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
     <div>小型标签：small</div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <div>超小标签：mini</div>
-    <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
@@ -11,8 +11,4 @@ test('TagGroup 尺寸', async ({ page }) => {
   const smallTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--small').nth(0)
   await expect(smallTag).toHaveCSS('height', '20px')
   await expect(smallTag).toHaveCSS('line-height', '18px')
-
-  const miniTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--mini').nth(0)
-  await expect(miniTag).toHaveCSS('height', '18px')
-  await expect(miniTag).toHaveCSS('line-height', '15px')
 })
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
@@ -4,8 +4,6 @@
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
     <div>小型标签：small</div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <div>超小标签：mini</div>
-    <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -3,12 +3,10 @@
     <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
     <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>
 

diff --git a/examples/sites/demos/pc/app/tag/size.spec.ts b/examples/sites/demos/pc/app/tag/size.spec.ts
@@ -7,10 +7,8 @@ test('各型号尺寸是否正常', async ({ page }) => {
   const normal = page.getByText('默认标签')
   const medium = page.getByText('中等标签')
   const small = page.getByText('小型标签')
-  const mini = page.getByText('超小标签')
 
   await expect(normal).toHaveCSS('height', '24px')
   await expect(medium).toHaveCSS('height', '32px')
   await expect(small).toHaveCSS('height', '20px')
-  await expect(mini).toHaveCSS('height', '18px')
 })
diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
@@ -3,12 +3,10 @@
     <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
     <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>
 

diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -69,8 +69,8 @@ export default {
         'en-US': 'Size'
       },
       desc: {
-        'zh-CN': '通过 <code>size</code> 设置尺寸大小，可选值： <code>(medium / small / mini)</code> 。',
-        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small/mini)</code> .'
+        'zh-CN': '通过 <code>size</code> 设置尺寸大小，可选值： <code>(medium / small)</code> 。',
+        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small)</code> .'
       },
       codeFiles: ['size.vue']
     },

diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
@@ -17,7 +17,9 @@
 
   //------------------------------------------------------- 尺寸 场景：font-size, border-radius ,padding-x,y   -------
 
-  /** 由于 tag 有border的，所有的padding值比设计图减少1 */
+  /** 由于 tag 有border的，所有的padding值比设计图减少1 
+   *  去掉mini 尺寸。  small  正常  medium。 如果用户使用了mini时，尺寸等于small
+  */
 
   // 超小标签字号
   --tv-Tag-font-size-mini: var(--tv-font-size-sm);
@@ -35,28 +37,28 @@
   // 小型标签字号
   --tv-Tag-font-size-small: var(--tv-font-size-sm);
   // 小型标签水平间距
-  --tv-Tag-padding-x-small: 7px;
+  --tv-Tag-padding-x-small: 3px;
   // 小型标签垂直间距
-  --tv-Tag-padding-y-small: 2px;
+  --tv-Tag-padding-y-small: 0;
   // 小型标签圆角
-  --tv-Tag-border-radius-small: var(--tv-border-radius-sm);
+  --tv-Tag-border-radius-small: var(--tv-border-radius-xs);
   // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size-small: 14px;
+  --tv-Tag-only-icon-font-size-small: 12px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding-small: 0.5px;
+  --tv-Tag-only-icon-padding-small: 2px;
 
   // 默认标签字号
-  --tv-Tag-font-size: var(--tv-font-size-md);
+  --tv-Tag-font-size: var(--tv-font-size-sm);
   // 默认标签水平间距
-  --tv-Tag-padding-x: 11px;
+  --tv-Tag-padding-x: 7px;
   // 默认标签垂直间距
-  --tv-Tag-padding-y: 2.5px;
+  --tv-Tag-padding-y: 2px;
   // 默认标签圆角
-  --tv-Tag-border-radius: var(--tv-border-radius-md);
+  --tv-Tag-border-radius: var(--tv-border-radius-sm);
   // 标签在仅图标模式时，图标的大小
-  --tv-Tag-only-icon-font-size: 16px;
+  --tv-Tag-only-icon-font-size: 14px;
   // 标签在仅图标模式时，标签的内边距
-  --tv-Tag-only-icon-padding: 3px;
+  --tv-Tag-only-icon-padding: 0.5px;
 
   // 中等标签字号
   --tv-Tag-font-size-medium: var(--tv-font-size-md); //14