feat(Tag): add border less & synch checkable

components/tag/__tests__/__snapshots__/demo.test.js.snap

@@ -2,6 +2,54 @@
 
 exports[`renders ./components/tag/demo/basic.vue correctly 1`] = `<div><span class="ant-tag">Tag 1<!----></span><span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a><!----></span><span class="ant-tag">Tag 2<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag">Prevent Default<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>`;
 
+exports[`renders ./components/tag/demo/border-less.vue correctly 1`] = `
+<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 1<!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 2<!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 3<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></div>
+  <!---->
+  <div class="ant-space-item" style="padding-bottom: 8px;"><span class="ant-tag ant-tag-borderless">Tag 4<span role="img" aria-label="close" tabindex="-1" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" fill-rule="evenodd" viewBox="64 64 896 896"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></div>
+  <!---->
+</div>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
+<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-processing ant-tag-borderless"> processing <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-success ant-tag-borderless"> success <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-error ant-tag-borderless"> error <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-warning ant-tag-borderless"> warning <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-magenta ant-tag-borderless"> magenta <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-red ant-tag-borderless"> red <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-volcano ant-tag-borderless"> volcano <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-orange ant-tag-borderless"> orange <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-gold ant-tag-borderless"> gold <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-lime ant-tag-borderless"> lime <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-green ant-tag-borderless"> green <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-cyan ant-tag-borderless"> cyan <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-blue ant-tag-borderless"> blue <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 0px; padding-bottom: 8px;"><span class="ant-tag ant-tag-geekblue ant-tag-borderless"> geekblue <!----></span></div>
+  <!---->
+  <div class="ant-space-item" style="padding-bottom: 8px;"><span class="ant-tag ant-tag-purple ant-tag-borderless"> purple <!----></span></div>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/tag/demo/checkable.vue correctly 1`] = `<div><span class="ant-tag ant-tag-checkable">Tag1</span><span class="ant-tag ant-tag-checkable">Tag2</span><span class="ant-tag ant-tag-checkable">Tag3</span></div>`;
 
 exports[`renders ./components/tag/demo/colorful.vue correctly 1`] = `

components/tag/demo/border-less.vue

@@ -0,0 +1,43 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 无边框
+  en-US: Border Less
+---
+
+## zh-CN
+
+无边框模式。
+
+## en-US
+border less.
+
+</docs>
+
+<template>
+  <a-space :size="[0, 'small']" wrap>
+    <a-tag :bordered="false">Tag 1</a-tag>
+    <a-tag :bordered="false">Tag 2</a-tag>
+    <a-tag :bordered="false" closable>Tag 3</a-tag>
+    <a-tag :bordered="false" closable>Tag 4</a-tag>
+  </a-space>
+  <a-divider />
+  <a-space :size="[0, 'small']" wrap>
+    <a-tag :bordered="false" color="processing">processing</a-tag>
+    <a-tag :bordered="false" color="success">success</a-tag>
+    <a-tag :bordered="false" color="error">error</a-tag>
+    <a-tag :bordered="false" color="warning">warning</a-tag>
+    <a-tag :bordered="false" color="magenta">magenta</a-tag>
+    <a-tag :bordered="false" color="red">red</a-tag>
+    <a-tag :bordered="false" color="volcano">volcano</a-tag>
+    <a-tag :bordered="false" color="orange">orange</a-tag>
+    <a-tag :bordered="false" color="gold">gold</a-tag>
+    <a-tag :bordered="false" color="lime">lime</a-tag>
+    <a-tag :bordered="false" color="green">green</a-tag>
+    <a-tag :bordered="false" color="cyan">cyan</a-tag>
+    <a-tag :bordered="false" color="blue">blue</a-tag>
+    <a-tag :bordered="false" color="geekblue">geekblue</a-tag>
+    <a-tag :bordered="false" color="purple">purple</a-tag>
+  </a-space>
+</template>

components/tag/demo/checkable.vue

@@ -2,7 +2,7 @@
 ---
 order: 1
 title:
-  zh-CN: 可选择
+  zh-CN: 可选择标签
   en-US: Checkable
 ---
 
@@ -19,18 +19,23 @@ title:
 </docs>
 
 <template>
-  <div>
-    <a-checkable-tag v-model:checked="checked1" @change="handleChange">Tag1</a-checkable-tag>
-    <a-checkable-tag v-model:checked="checked2" @change="handleChange">Tag2</a-checkable-tag>
-    <a-checkable-tag v-model:checked="checked3" @change="handleChange">Tag3</a-checkable-tag>
-  </div>
+  <span style="margin-right: 8px">Categories:</span>
+  <a-space :size="[0, 8]" wrap>
+    <a-checkable-tag
+      v-for="(tag, index) in tagsData"
+      :key="tag"
+      v-model:checked="selectTags[index]"
+      @change="checked => handleChange(tag, checked)"
+    >
+      {{ tag }}
+    </a-checkable-tag>
+  </a-space>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
-const handleChange = (checked: boolean) => {
-  console.log(checked);
+import { reactive } from 'vue';
+const tagsData = reactive(['Movies', 'Books', 'Music', 'Sports']);
+const selectTags = reactive([false, true, false, false]);
+const handleChange = (tag: string, checked: boolean) => {
+  console.log(tag, checked);
 };
-const checked1 = ref(false);
-const checked2 = ref(false);
-const checked3 = ref(false);
 </script>

components/tag/demo/index.vue

@@ -7,6 +7,7 @@
     <HotTags />
     <Icon />
     <Status />
+    <BorderLess />
   </demo-sort>
 </template>
 
@@ -18,6 +19,7 @@ import Control from './control.vue';
 import HotTags from './hot-tags.vue';
 import Icon from './icon.vue';
 import Status from './status.vue';
+import BorderLess from './border-less.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -33,6 +35,7 @@ export default defineComponent({
     HotTags,
     Icon,
     Status,
+    BorderLess,
   },
 });
 </script>

components/tag/index.en-US.md

@@ -23,6 +23,7 @@ Tag for categorizing or markup.
 | closeIcon | Custom close icon             | VNode \| slot | -       | 2.0.0   |
 | color     | Color of the Tag              | string        | -       |         |
 | icon      | Set the icon of tag           | VNode \| slot | -       | 2.0.0   |
+| bordered  | Whether has border style      | boolean       | `true`  | 4.x     |
 
 ### Tag Events
 

components/tag/index.tsx

@@ -30,6 +30,7 @@ export const tagProps = () => ({
   onClick: eventType<(e: MouseEvent) => void>(),
   'onUpdate:visible': Function as PropType<(vis: boolean) => void>,
   icon: PropTypes.any,
+  bordered: { type: Boolean, default: true },
 });
 
 export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>;
@@ -98,6 +99,7 @@ const Tag = defineComponent({
         [`${prefixCls.value}-has-color`]: props.color && !isInternalColor.value,
         [`${prefixCls.value}-hidden`]: !visible.value,
         [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        [`${prefixCls.value}-borderless`]: !props.bordered,
       }),
     );
     const handleClick = (e: MouseEvent) => {

components/tag/index.zh-CN.md

@@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAA
 | closeIcon | 自定义关闭按钮   | VNode \| slot | -      | 2.0.0 |
 | color     | 标签色           | string        | -      |       |
 | icon      | 设置图标         | VNode \| slot | -      | 2.0.0 |
+| bordered  | 是否有边框       | boolean       | `true` | 4.x   |
 
 ### 事件
 

components/tag/style/index.ts

@@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
   tagDefaultColor: string;
   tagIconSize: number;
   tagPaddingHorizontal: number;
+  tagBorderlessBg: string;
 }
 
 // ============================== Styles ==============================
@@ -31,6 +32,9 @@ const genTagStatusStyle = (
       color: token[`color${cssVariableType}`],
       background: token[`color${capitalizedCssVariableType}Bg`],
       borderColor: token[`color${capitalizedCssVariableType}Border`],
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent',
+      },
     },
   };
 };
@@ -48,6 +52,9 @@ const genPresetStyle = (token: TagToken) =>
         background: darkColor,
         borderColor: darkColor,
       },
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent',
+      },
     },
   }));
 
@@ -138,6 +145,10 @@ const genBaseStyle = (token: TagToken): CSSObject => {
         marginInlineStart: paddingInline,
       },
     },
+    [`${componentCls}-borderless`]: {
+      borderColor: 'transparent',
+      background: token.tagBorderlessBg,
+    },
   };
 };
 
@@ -158,6 +169,7 @@ export default genComponentStyleHook('Tag', token => {
     tagDefaultColor,
     tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
     tagPaddingHorizontal: 8, // Fixed padding.
+    tagBorderlessBg: token.colorFillTertiary,
   });
 
   return [