From 337622ed95b031a803932c4cd537b766716679e5 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Thu, 31 Mar 2022 17:02:12 +0800
Subject: [PATCH] feat(components): [tag] add new API for rounded

- Add new api `round` for rounded tag.
- Add documentation for rounded tag.
- Update document styles.
---
 docs/.vitepress/vitepress/styles/base.scss | 10 +++-
 docs/en-US/component/tag.md                | 11 +++++
 docs/examples/tag/rounded.vue              | 54 ++++++++++++++++++++++
 docs/examples/tag/theme.vue                | 16 ++++---
 packages/components/tag/src/tag.ts         |  1 +
 packages/components/tag/src/tag.vue        |  3 +-
 packages/theme-chalk/src/common/var.scss   |  1 +
 packages/theme-chalk/src/tag.scss          |  3 ++
 8 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 docs/examples/tag/rounded.vue

diff --git a/docs/.vitepress/vitepress/styles/base.scss b/docs/.vitepress/vitepress/styles/base.scss
index 1eb490fefa..0e28038e55 100644
--- a/docs/.vitepress/vitepress/styles/base.scss
+++ b/docs/.vitepress/vitepress/styles/base.scss
@@ -45,6 +45,14 @@ h5,
 h6 {
   margin: 0;
   line-height: 1.25;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  // Special case for handling tagged header.
+  .el-tag {
+    margin-left: 8px;
+  }
 }
 
 h1,
@@ -137,7 +145,7 @@ a {
 }
 
 a.header-anchor {
-  float: left;
+  position: absolute;
   margin-top: 0.125em;
   margin-left: -0.87em;
   padding-right: 0.23em;
diff --git a/docs/en-US/component/tag.md b/docs/en-US/component/tag.md
index e15f0d8622..1eddf08aa3 100644
--- a/docs/en-US/component/tag.md
+++ b/docs/en-US/component/tag.md
@@ -53,6 +53,16 @@ tag/theme
 
 :::
 
+## Rounded <el-tag>> 2.1.7</el-tag>
+
+Tag can also be rounded like button.
+
+:::demo
+
+tag/rounded
+
+:::
+
 ## 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`
@@ -74,6 +84,7 @@ tag/checkable
 | color               | background color of the Tag          | string  | —                           | —       |
 | size                | tag size                             | string  | large / default /small      | default |
 | effect              | component theme                      | string  | dark / light / plain        | light   |
+| round               | whether Tag is rounded               | boolean | —                           | false   |
 
 ## Events
 
diff --git a/docs/examples/tag/rounded.vue b/docs/examples/tag/rounded.vue
new file mode 100644
index 0000000000..8d71910c07
--- /dev/null
+++ b/docs/examples/tag/rounded.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-wrap gap-2 my-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">
+    <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">
+    <el-tag
+      v-for="item in items"
+      :key="item.label"
+      :type="item.type"
+      class="mx-1"
+      effect="plain"
+      round
+    >
+      {{ item.label }}
+    </el-tag>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { TagProps } from 'element-plus'
+
+type Item = { type: TagProps['type']; label: string }
+
+const items = ref<Array<Item>>([
+  { type: '', label: 'Tag 1' },
+  { type: 'success', label: 'Tag 2' },
+  { type: 'info', label: 'Tag 3' },
+  { type: 'danger', label: 'Tag 4' },
+  { type: 'warning', label: 'Tag 5' },
+])
+</script>
diff --git a/docs/examples/tag/theme.vue b/docs/examples/tag/theme.vue
index 815769fd2a..dfe32eb5d0 100644
--- a/docs/examples/tag/theme.vue
+++ b/docs/examples/tag/theme.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="tag-group my-2">
-    <span class="tag-group__title m-1">Dark</span>
+  <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>
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
+      class="mx-1"
       effect="dark"
     >
       {{ item.label }}
@@ -13,15 +13,15 @@
     <el-tag
       v-for="item in items"
       :key="item.label"
-      class="mx-1"
       :type="item.type"
+      class="mx-1"
       effect="dark"
       closable
     >
       {{ item.label }}
     </el-tag>
   </div>
-  <div class="tag-group my-2">
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
     <span class="tag-group__title m-1">Plain</span>
     <el-tag
       v-for="item in items"
@@ -48,7 +48,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const items = ref([
+import type { TagProps } from 'element-plus'
+
+type Item = { type: TagProps['type']; label: string }
+
+const items = ref<Array<Item>>([
   { type: '', label: 'Tag 1' },
   { type: 'success', label: 'Tag 2' },
   { type: 'info', label: 'Tag 3' },
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index 7476cda451..048ee25b2f 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -27,6 +27,7 @@ export const tagProps = buildProps({
     values: ['dark', 'light', 'plain'],
     default: 'light',
   },
+  round: Boolean,
 } as const)
 export type TagProps = ExtractPropTypes<typeof tagProps>
 
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 5a76daabe2..89ce471589 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -45,7 +45,7 @@ const emit = defineEmits(tagEmits)
 const tagSize = useSize()
 const ns = useNamespace('tag')
 const classes = computed(() => {
-  const { type, hit, effect, closable } = props
+  const { type, hit, effect, closable, round } = props
   return [
     ns.b(),
     ns.is('closable', closable),
@@ -53,6 +53,7 @@ const classes = computed(() => {
     ns.m(tagSize.value),
     ns.m(effect),
     ns.is('hit', hit),
+    ns.is('round', round),
   ]
 })
 
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3aa225f629..f300f564c1 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -886,6 +886,7 @@ $tag: map.merge(
   (
     'font-size': 12px,
     'border-radius': 4px,
+    'border-radius-rounded': 9999px,
   ),
   $tag
 );
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 26aeed466b..9a405e1b9d 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -78,6 +78,9 @@ $tag-icon-span-gap: map.merge(
   @include when(hit) {
     border-color: getCssVar('color', 'primary');
   }
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
 
   .#{$namespace}-tag__close {
     color: var(--el-tag-text-color);