feat(tag-group): [tag-group] updata ttag-group xdesign

examples/sites/demos/apis/tag-group.js

@@ -33,7 +33,7 @@ export default {
         {
           name: 'size',
           type: "'medium' | 'small' | 'mini'",
-          defaultValue: "'medium'",
+          defaultValue: "'small'",
           desc: {
             'zh-CN': '尺寸',
             'en-US': 'Size '

examples/sites/demos/pc/app/tag-group/basic-usage-composition-api.vue

@@ -7,40 +7,10 @@ import { ref } from 'vue'
 import { TagGroup as TinyTagGroup } from '@opentiny/vue'
 
 const data = ref([
-  {
-    name: '标签一',
-  },
-  {
-    name: '标签二',
-    type: 'info'
-  },
-  {
-    name: '标签三',
-    type: 'success'
-  },
-  {
-    name: '标签四',
-    type: 'warning'
-  },
-  {
-    name: '标签五',
-    type: 'danger'
-  },
-  {
-    name: '标签六',
-    type: 'info'
-  },
-  {
-    name: '标签七',
-    type: 'success'
-  },
-  {
-    name: '标签八',
-    type: 'warning'
-  },
-  {
-    name: '标签九',
-    type: 'danger'
-  }
+  { type: 'info', name: '标签' },
+  { type: 'success', name: '标签' },
+  { type: 'warning', name: '标签' },
+  { type: 'danger', name: '标签' },
+  { name: '标签' }
 ])
 </script>

examples/sites/demos/pc/app/tag-group/basic-usage.spec.js

@@ -6,24 +6,23 @@ test('TagGroup 基础用法', async ({ page }) => {
 
   const tagGroup = page.locator('.tiny-tag-group')
 
-  const tag1 = tagGroup.getByText('标签一')
-  await expect(tag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
-  await expect(tag1).toHaveCSS('color', 'rgb(87, 93, 108)')
+  const tag1 = tagGroup.getByText('标签').nth(0)
+  await expect(tag1).toHaveCSS('background-color', 'rgb(230, 242, 255)')
+  await expect(tag1).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const tag2 = tagGroup.getByText('标签二')
-  await expect(tag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
-  await expect(tag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+  const tag2 = tagGroup.getByText('标签').nth(1)
+  await expect(tag2).toHaveCSS('background-color', 'rgb(228, 247, 233)')
+  await expect(tag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  const tag3 = tagGroup.getByText('标签三')
-  await expect(tag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
-  await expect(tag3).toHaveCSS('color', 'rgb(58, 194, 149)')
-
-  const tag4 = tagGroup.getByText('标签四')
-  await expect(tag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
-  await expect(tag4).toHaveCSS('color', 'rgb(227, 125, 41)')
+  const tag3 = tagGroup.getByText('标签').nth(2)
+  await expect(tag3).toHaveCSS('background-color', 'rgb(255, 240, 224)')
+  await expect(tag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  const tag5 = tagGroup.getByText('标签五')
-  await expect(tag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
-  await expect(tag5).toHaveCSS('color', 'rgb(222, 80, 78)')
+  const tag4 = tagGroup.getByText('标签').nth(3)
+  await expect(tag4).toHaveCSS('background-color', 'rgb(255, 234, 232)')
+  await expect(tag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
+  const tag5 = tagGroup.getByText('标签').nth(4)
+  await expect(tag5).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(tag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 })

examples/sites/demos/pc/app/tag-group/basic-usage.vue

@@ -12,41 +12,11 @@ export default {
   data() {
     return {
       data: [
-        {
-          name: '标签一'
-        },
-        {
-          name: '标签二',
-          type: 'info'
-        },
-        {
-          name: '标签三',
-          type: 'success'
-        },
-        {
-          name: '标签四',
-          type: 'warning'
-        },
-        {
-          name: '标签五',
-          type: 'danger'
-        },
-        {
-          name: '标签六',
-          type: 'info'
-        },
-        {
-          name: '标签七',
-          type: 'success'
-        },
-        {
-          name: '标签八',
-          type: 'warning'
-        },
-        {
-          name: '标签九',
-          type: 'danger'
-        }
+        { type: 'info', name: '标签' },
+        { type: 'success', name: '标签' },
+        { type: 'warning', name: '标签' },
+        { type: 'danger', name: '标签' },
+        { name: '标签' }
       ]
     }
   }

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

@@ -1,10 +1,10 @@
 <template>
   <div class="tiny-demo-tag-group-effect">
-    <div>深色标签 </div>
+    <div>深色标签</div>
     <tiny-tag-group :data="items" effect="dark"> </tiny-tag-group>
-    <div>浅色标签 </div>
+    <div>浅色标签</div>
     <tiny-tag-group :data="items" effect="light"> </tiny-tag-group>
-    <div>朴素标签 </div>
+    <div>朴素标签</div>
     <tiny-tag-group :data="items" effect="plain"> </tiny-tag-group>
   </div>
 </template>
@@ -14,17 +14,16 @@ import { ref } from 'vue'
 import { TagGroup as TinyTagGroup } from '@opentiny/vue'
 
 const items = ref([
-  { name: '标签一' },
-  { type: 'info', name: '标签二' },
-  { type: 'success', name: '标签三' },
-  { type: 'warning', name: '标签四' },
-  { type: 'danger', name: '标签五' },
-  { name: '标签六' }
+  { type: 'info', name: '标签' },
+  { type: 'success', name: '标签' },
+  { type: 'warning', name: '标签' },
+  { type: 'danger', name: '标签' },
+  { name: '标签' }
 ])
 </script>
 
 <style scoped>
 .tiny-demo-tag-group-effect > *:not(:last-child) {
   margin-bottom: 12px;
 }
-</style>
+</style>

examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js

@@ -6,66 +6,63 @@ test('TagGroup 主题', async ({ page }) => {
 
   const tagGroupsLocator = page.locator('.tiny-demo-tag-group-effect .tiny-tag-group')
 
-  const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签一' })
-  await expect(darkTag1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(0)
+  await expect(darkTag1).toHaveCSS('background-color', 'rgb(20, 118, 255)')
   await expect(darkTag1).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签二' })
-  await expect(darkTag2).toHaveCSS('background-color', 'rgb(37, 43, 58)')
+  const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(1)
+  await expect(darkTag2).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   await expect(darkTag2).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签三' })
-  await expect(darkTag3).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+  const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(2)
+  await expect(darkTag3).toHaveCSS('background-color', 'rgb(255, 136, 0)')
   await expect(darkTag3).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签四' })
-  await expect(darkTag4).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+  const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(3)
+  await expect(darkTag4).toHaveCSS('background-color', 'rgb(242, 48, 48)')
   await expect(darkTag4).toHaveCSS('color', 'rgb(255, 255, 255)')
 
-  const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签五' })
-  await expect(darkTag5).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+  const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(4)
+  await expect(darkTag5).toHaveCSS('background-color', 'rgb(25, 25, 25)')
   await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
 
+  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(0)
+  await expect(lightTag1).toHaveCSS('background-color', 'rgb(230, 242, 255)')
+  await expect(lightTag1).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签一' })
-  await expect(lightTag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
-  await expect(lightTag1).toHaveCSS('color', 'rgb(87, 93, 108)')
+  const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(1)
+  await expect(lightTag2).toHaveCSS('background-color', 'rgb(228, 247, 233)')
+  await expect(lightTag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签二' })
-  await expect(lightTag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
-  await expect(lightTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+  const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(2)
+  await expect(lightTag3).toHaveCSS('background-color', 'rgb(255, 240, 224)')
+  await expect(lightTag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签三' })
-  await expect(lightTag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
-  await expect(lightTag3).toHaveCSS('color', 'rgb(58, 194, 149)')
+  const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(3)
+  await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 234, 232)')
+  await expect(lightTag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
-  const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签四' })
-  await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
-  await expect(lightTag4).toHaveCSS('color', 'rgb(227, 125, 41)')
+  const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(4)
+  await expect(lightTag5).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(lightTag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 
-  const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签五' })
-  await expect(lightTag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
-  await expect(lightTag5).toHaveCSS('color', 'rgb(222, 80, 78)')
-
-
-  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签一' })
+  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(0)
   await expect(plainTag1).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag1).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(plainTag1).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
+  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(1)
   await expect(plainTag2).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(plainTag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
+  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(2)
   await expect(plainTag3).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag3).toHaveCSS('color', 'rgb(80, 212, 171)')
+  await expect(plainTag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
+  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(3)
   await expect(plainTag4).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag4).toHaveCSS('color', 'rgb(250, 152, 65)')
+  await expect(plainTag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
-  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
+  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(4)
   await expect(plainTag5).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag5).toHaveCSS('color', 'rgb(246, 111, 106)')
-
+  await expect(plainTag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 })

examples/sites/demos/pc/app/tag-group/tag-group-effect.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tiny-demo-tag-group-effect">
-    <div>深色标签 </div>
+    <div>深色标签</div>
     <tiny-tag-group :data="items" effect="dark"> </tiny-tag-group>
-    <div>浅色标签 </div>
+    <div>浅色标签</div>
     <tiny-tag-group :data="items" effect="light"> </tiny-tag-group>
-    <div>朴素标签 </div>
+    <div>朴素标签</div>
     <tiny-tag-group :data="items" effect="plain"> </tiny-tag-group>
   </div>
 </template>
@@ -19,12 +19,11 @@ export default {
   data() {
     return {
       items: [
-        { name: '标签一' },
-        { type: 'info', name: '标签二' },
-        { type: 'success', name: '标签三' },
-        { type: 'warning', name: '标签四' },
-        { type: 'danger', name: '标签五' },
-        { name: '标签六' }
+        { type: 'info', name: '标签' },
+        { type: 'success', name: '标签' },
+        { type: 'warning', name: '标签' },
+        { type: 'danger', name: '标签' },
+        { name: '标签' }
       ]
     }
   }
@@ -35,4 +34,4 @@ export default {
 .tiny-demo-tag-group-effect > *:not(:last-child) {
   margin-bottom: 12px;
 }
-</style>
+</style>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="tiny-demo-tag-group-size">
-    <div>中等标签：medium </div>
+    <div>大尺寸标签：medium</div>
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
-    <div>小型标签：small </div>
+    <div>默认标签：small</div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <div>超小标签：mini </div>
+    <div>超小标签：mini</div>
     <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
@@ -14,17 +14,16 @@ import { ref } from 'vue'
 import { TagGroup as TinyTagGroup } from '@opentiny/vue'
 
 const items = ref([
-  { type: '', name: '标签一' },
-  { type: 'info', name: '标签二' },
-  { type: 'success', name: '标签三' },
-  { type: 'warning', name: '标签四' },
-  { type: 'danger', name: '标签五' },
-  { type: 'info', name: '标签六' }
+  { type: 'info', name: '标签' },
+  { type: 'success', name: '标签' },
+  { type: 'warning', name: '标签' },
+  { type: 'danger', name: '标签' },
+  { name: '标签' }
 ])
 </script>
 
 <style scoped>
 .tiny-demo-tag-group-size > *:not(:last-child) {
   margin-bottom: 12px;
 }
-</style>
+</style>

examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js

@@ -5,16 +5,14 @@ test('TagGroup 尺寸', async ({ page }) => {
   await page.goto('tag-group#tag-group-size')
 
   const mediumTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--medium').nth(0)
-  await expect(mediumTag).toHaveCSS('height', '24px')
-  await expect(mediumTag).toHaveCSS('line-height', '24px')
-
+  await expect(mediumTag).toHaveCSS('height', '32px')
+  await expect(mediumTag).toHaveCSS('line-height', '32px')
 
   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', '20px')
+  await expect(smallTag).toHaveCSS('height', '24px')
+  await expect(smallTag).toHaveCSS('line-height', '24px')
 
   const miniTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--mini').nth(0)
-  await expect(miniTag).toHaveCSS('height', '16px')
-  await expect(miniTag).toHaveCSS('line-height', '16px')
-
+  await expect(miniTag).toHaveCSS('height', '18px')
+  await expect(miniTag).toHaveCSS('line-height', '18px')
 })