feat(components): [check-tag] add type prop (#15727)

* feat(components): [check-tag] add type prop

* feat(components): update

docs/en-US/component/tag.md

@@ -53,7 +53,7 @@ tag/theme
 
 :::
 
-## Rounded <el-tag>> 2.1.7</el-tag>
+## Rounded
 
 Tag can also be rounded like button.
 
@@ -63,9 +63,9 @@ tag/rounded
 
 :::
 
-## Checkable tag
+## Checkable Tag
 
-Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
+Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`. You can use `type` prop in ^(2.5.4).
 
 :::demo basic check-tag usage, the API is rather simple.
 
@@ -78,13 +78,13 @@ tag/checkable
 ### Tag Attributes
 
 | Name                | Description                          | Type                                                               | Default |
-| ------------------- | ------------------------------------ | ----------------------------------------------------------- | ------- |
-| type                | type of Tag                          | ^[enum]`'success' \| 'info' \| 'warning' \| 'danger' \| ''` | ''      |
+|---------------------|--------------------------------------|--------------------------------------------------------------------|---------|
+| type                | type of Tag                          | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |
 | closable            | whether Tag can be removed           | ^[boolean]                                                         | false   |
 | disable-transitions | whether to disable animations        | ^[boolean]                                                         | false   |
 | hit                 | whether Tag has a highlighted border | ^[boolean]                                                         | false   |
-| color               | background color of the Tag          | ^[string]                                                   | ''      |
-| size                | size of Tag                          | ^[enum]`'large' \| 'default' \| 'small' \| ''`              | ''      |
+| color               | background color of the Tag          | ^[string]                                                          | —       |
+| size                | size of Tag                          | ^[enum]`'large' \| 'default' \| 'small'`                           | —       |
 | effect              | theme of Tag                         | ^[enum]`'dark' \| 'light' \| 'plain'`                              | light   |
 | round               | whether Tag is rounded               | ^[boolean]                                                         | false   |
 
@@ -106,8 +106,9 @@ tag/checkable
 ### CheckTag Attributes
 
 | Name                      | Description      | Type                                                               | Default |
-| ------------------------- | ----------- | ---------- | ------- |
+|---------------------------|------------------|--------------------------------------------------------------------|---------|
 | checked / v-model:checked | is checked       | ^[boolean]                                                         | false   |
+| type ^(2.5.4)             | type of CheckTag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |
 
 ### CheckTag Events
 

docs/examples/tag/basic.vue

@@ -1,7 +1,10 @@
 <template>
-  <el-tag>Tag 1</el-tag>
-  <el-tag class="ml-2" type="success">Tag 2</el-tag>
-  <el-tag class="ml-2" type="info">Tag 3</el-tag>
-  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
-  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
+  <div class="flex gap-2">
+    <el-tag type="primary">Tag 1</el-tag>
+    <el-tag type="success">Tag 2</el-tag>
+    <el-tag type="info">Tag 3</el-tag>
+    <el-tag type="warning">Tag 4</el-tag>
+    <el-tag type="danger">Tag 5</el-tag>
+  </div>
 </template>
+<script setup lang="ts"></script>

docs/examples/tag/checkable.vue

@@ -1,16 +1,58 @@
 <template>
-  <div>
-    <el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
+  <div class="flex gap-2">
+    <el-check-tag checked>Checked</el-check-tag>
     <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
   </div>
+  <div class="flex gap-2 mt-4">
+    <el-check-tag :checked="checked1" type="primary" @change="onChange1">
+      Tag 1
+    </el-check-tag>
+    <el-check-tag :checked="checked2" type="success" @change="onChange2">
+      Tag 2
+    </el-check-tag>
+    <el-check-tag :checked="checked3" type="info" @change="onChange3">
+      Tag 3
+    </el-check-tag>
+    <el-check-tag :checked="checked4" type="warning" @change="onChange4">
+      Tag 4
+    </el-check-tag>
+    <el-check-tag :checked="checked5" type="danger" @change="onChange5">
+      Tag 5
+    </el-check-tag>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
 const checked = ref(false)
+const checked1 = ref(true)
+const checked2 = ref(true)
+const checked3 = ref(true)
+const checked4 = ref(true)
+const checked5 = ref(true)
 
 const onChange = (status: boolean) => {
   checked.value = status
 }
+
+const onChange1 = (status: boolean) => {
+  checked1.value = status
+}
+
+const onChange2 = (status: boolean) => {
+  checked2.value = status
+}
+
+const onChange3 = (status: boolean) => {
+  checked3.value = status
+}
+
+const onChange4 = (status: boolean) => {
+  checked4.value = status
+}
+
+const onChange5 = (status: boolean) => {
+  checked5.value = status
+}
 </script>

docs/examples/tag/editable.vue

@@ -1,8 +1,8 @@
 <template>
+  <div class="flex gap-2">
     <el-tag
       v-for="tag in dynamicTags"
       :key="tag"
-    class="mx-1"
       closable
       :disable-transitions="false"
       @close="handleClose(tag)"
@@ -13,14 +13,15 @@
       v-if="inputVisible"
       ref="InputRef"
       v-model="inputValue"
-    class="ml-1 w-20"
+      class="w-20"
       size="small"
       @keyup.enter="handleInputConfirm"
       @blur="handleInputConfirm"
     />
-  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
+    <el-button v-else class="button-new-tag" size="small" @click="showInput">
       + New Tag
     </el-button>
+  </div>
 </template>
 
 <script lang="ts" setup>

docs/examples/tag/removable.vue

@@ -1,20 +1,16 @@
 <template>
-  <el-tag
-    v-for="tag in tags"
-    :key="tag.name"
-    class="mx-1"
-    closable
-    :type="tag.type"
-  >
+  <div class="flex gap-2">
+    <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
       {{ tag.name }}
     </el-tag>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 
 const tags = ref([
-  { name: 'Tag 1', type: '' },
+  { name: 'Tag 1', type: 'primary' },
   { name: 'Tag 2', type: 'success' },
   { name: 'Tag 3', type: 'info' },
   { name: 'Tag 4', type: 'warning' },

docs/examples/tag/rounded.vue

@@ -1,34 +1,31 @@
 <template>
-  <div class="flex flex-wrap gap-2 my-2">
+  <div class="flex gap-2">
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
-      class="mx-1"
       effect="dark"
       round
     >
       {{ item.label }}
     </el-tag>
   </div>
-  <div class="flex flex-wrap gap-2">
+  <div class="flex gap-2 mt-4">
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
-      class="mx-1"
       effect="light"
       round
     >
       {{ item.label }}
     </el-tag>
   </div>
-  <div class="flex flex-wrap gap-2 my-2">
+  <div class="flex gap-2 mt-4">
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
-      class="mx-1"
       effect="plain"
       round
     >
@@ -45,10 +42,10 @@ import type { TagProps } from 'element-plus'
 type Item = { type: TagProps['type']; label: string }
 
 const items = ref<Array<Item>>([
-  { type: '', label: 'Tag 1' },
+  { type: 'primary', label: 'Tag 1' },
   { type: 'success', label: 'Tag 2' },
   { type: 'info', label: 'Tag 3' },
-  { type: 'danger', label: 'Tag 4' },
-  { type: 'warning', label: 'Tag 5' },
+  { type: 'warning', label: 'Tag 4' },
+  { type: 'danger', label: 'Tag 5' },
 ])
 </script>

docs/examples/tag/sizes.vue

@@ -1,13 +1,7 @@
 <template>
-  <el-row>
-    <el-tag class="mx-1" size="large">Large</el-tag>
-    <el-tag class="mx-1">Default</el-tag>
-    <el-tag class="mx-1" size="small">Small</el-tag>
-  </el-row>
-
-  <el-row class="mt-4">
-    <el-tag class="mx-1" size="large" closable>Large</el-tag>
-    <el-tag class="mx-1" closable>Default</el-tag>
-    <el-tag class="mx-1" size="small" closable>Small</el-tag>
-  </el-row>
+  <div class="flex gap-2">
+    <el-tag size="large">Large</el-tag>
+    <el-tag>Default</el-tag>
+    <el-tag size="small">Small</el-tag>
+  </div>
 </template>

docs/examples/tag/theme.vue

@@ -1,69 +1,36 @@
 <template>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1 line-height-2">Dark</span>
+  <div class="flex gap-2">
+    <span>Dark</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
       :type="item.type"
-      class="mx-1"
       effect="dark"
     >
       {{ item.label }}
     </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      :type="item.type"
-      class="mx-1"
-      effect="dark"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
   </div>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1">Light</span>
+  <div class="flex gap-2 mt-4">
+    <span>Light</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
       effect="light"
     >
       {{ item.label }}
     </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      class="mx-1"
-      :type="item.type"
-      effect="light"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
   </div>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1">Plain</span>
+  <div class="flex gap-2 mt-4">
+    <span>Plain</span>
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
       effect="plain"
     >
       {{ item.label }}
     </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      class="mx-1"
-      :type="item.type"
-      effect="plain"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
   </div>
 </template>
 
@@ -75,10 +42,10 @@ import type { TagProps } from 'element-plus'
 type Item = { type: TagProps['type']; label: string }
 
 const items = ref<Array<Item>>([
-  { type: '', label: 'Tag 1' },
+  { type: 'primary', label: 'Tag 1' },
   { type: 'success', label: 'Tag 2' },
   { type: 'info', label: 'Tag 3' },
-  { type: 'danger', label: 'Tag 4' },
-  { type: 'warning', label: 'Tag 5' },
+  { type: 'warning', label: 'Tag 4' },
+  { type: 'danger', label: 'Tag 5' },
 ])
 </script>

packages/components/check-tag/src/check-tag.ts

@@ -12,6 +12,14 @@ export const checkTagProps = buildProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @description type of Tag
+   */
+  type: {
+    type: String,
+    values: ['primary', 'success', 'info', 'warning', 'danger'],
+    default: 'primary',
+  },
 } as const)
 export type CheckTagProps = ExtractPropTypes<typeof checkTagProps>
 

packages/components/check-tag/src/check-tag.vue

@@ -17,7 +17,11 @@ const props = defineProps(checkTagProps)
 const emit = defineEmits(checkTagEmits)
 
 const ns = useNamespace('check-tag')
-const containerKls = computed(() => [ns.b(), ns.is('checked', props.checked)])
+const containerKls = computed(() => [
+  ns.b(),
+  ns.is('checked', props.checked),
+  ns.m(props.type || 'primary'),
+])
 
 const handleChange = () => {
   const checked = !props.checked

packages/components/tag/src/tag.ts

@@ -10,8 +10,8 @@ export const tagProps = buildProps({
    */
   type: {
     type: String,
-    values: ['success', 'info', 'warning', 'danger', ''],
-    default: '',
+    values: ['primary', 'success', 'info', 'warning', 'danger'],
+    default: 'primary',
   },
   /**
    * @description whether Tag can be removed
@@ -28,17 +28,13 @@ export const tagProps = buildProps({
   /**
    * @description background color of the Tag
    */
-  color: {
-    type: String,
-    default: '',
-  },
+  color: String,
   /**
    * @description size of Tag
    */
   size: {
     type: String,
     values: componentSizes,
-    default: '',
   },
   /**
    * @description theme of Tag

packages/components/tag/src/tag.vue

@@ -50,7 +50,7 @@ const containerKls = computed(() => {
   return [
     ns.b(),
     ns.is('closable', closable),
-    ns.m(type),
+    ns.m(type || 'primary'),
     ns.m(tagSize.value),
     ns.m(effect),
     ns.is('hit', hit),

packages/theme-chalk/src/check-tag.scss

@@ -18,10 +18,15 @@
   }
 
   @include when(checked) {
-    background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary');
+    @each $type in $types {
+      &.#{bem('check-tag', '', $type)} {
+        background-color: getCssVar('color', $type, 'light-8');
+        color: getCssVar('color', $type);
+
         &:hover {
-      background-color: getCssVar('color', 'primary', 'light-7');
+          background-color: getCssVar('color', $type, 'light-7');
+        }
+      }
     }
   }
 }

packages/theme-chalk/src/tag.scss

@@ -63,7 +63,6 @@ $tag-icon-span-gap: map.merge(
 @include b(tag) {
   @include genTheme('light-9', 'light-8', '');
 
-  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
   @each $type in $types {
     &.#{bem('tag', '', $type)} {
       @include css-var-from-global(('tag', 'text-color'), ('color', $type));