Support Multiple CheckTag and CheckTagGroup (#1606)

* feat: tag * feat(web): check-tag * feat(web): checktag * feat: update tag en md * feat(web): support ENTER_REG --------- Co-authored-by: sheepluo <[email protected]>
Tencent · Oct 7, 2023 · a289308 · a289308
1 parent 9def3fe
commit a289308
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 31 deletions.
diff --git a/docs/web/api/tag.en-US.md b/docs/web/api/tag.en-US.md
@@ -26,6 +26,28 @@ Deletable or addable tags. Adding tags can be combined with input box components
 
 ### Selectable Tags
 
-Tags have two states: selected and unselected. You can switch by clicking on the tag. Similar to the effect of a checkbox.
+Tags have two states: selected and unselected. You can switch by clicking on the tag. Similar to the effect of a checkbox. you can set any theme style checked tag with `checkedProps` and unchecked tag with `uncheckedProps`.
 
 {{ selectable }}
+
+### Selectable TagGroup
+
+{{ check-tag-group }}
+
+### Overflow Text Tag
+
+You can set max width of tag with `maxWidth`, overflow text would be ellipsis.
+
+{{ long-text }}
+
+### Different Sizes of Tags
+
+Available in large, medium (default) and small sizes.
+
+{{ size }}
+
+### Different Shapes of Tags
+
+Available in square, round and mark shapes.
+
+{{ shape }}
diff --git a/docs/web/api/tag.md b/docs/web/api/tag.md
@@ -18,12 +18,6 @@ spline: data
 
 {{ icon }}
 
-### 自定义标签颜色
-
-可根据不同场景自定义标签颜色。
-
-{{ color }}
-
 ### 可删除和添加标签
 
 可删除或添加的标签。添加标签可组合输入框组件使用。
@@ -32,6 +26,28 @@ spline: data
 
 ### 可选择标签
 
-标签有已选和未选两种状态，可以通过点击标签来切换。类似多选框的效果。
+标签有已选和未选两种状态，可以通过点击标签来切换。类似多选框的效果。可以通过 `checkedProps` 设置任意风格选中态，`uncheckedProps`设置任意风格未选中状态。
 
 {{ selectable }}
+
+### 可选择标签组
+
+{{ check-tag-group }}
+
+### 超长省略文本标签
+
+通过 `maxWidth` 设置最大宽度，超出部分自动省略。
+
+{{ long-text }}
+
+### 不同尺寸的标签
+
+提供大、中（默认）、小三种尺寸。
+
+{{ size }}
+
+### 不同形状的标签
+
+提供方形、圆角方形、标记型三种形状。
+
+{{ shape }}
diff --git a/js/common.ts b/js/common.ts
@@ -40,6 +40,7 @@ export const ARROW_DOWN_REG = /ArrowDown/i;
 export const ARROW_UP_REG = /ArrowUp/i;
 export const ESCAPE_REG = /Escape/i;
 export const SPACE_REG = /Space/i;
+export const ENTER_REG = /Enter/i;
 export const SHIFT_REG = /Shift/i;
 export const CLEAR_REG = /KeyC/i;
 export const ALL_REG = /(KeyA|KeyL)/i;
diff --git a/style/web/components/tag/_index.less b/style/web/components/tag/_index.less
@@ -49,37 +49,18 @@
       }
     }
 
-    &.@{prefix}-tag--checked {
-      color: @tag-checked-color;
-      background-color: @tag-checked-background-color;
-
-      &:hover {
-        background-color: @tag-checked-hover-bg;
-      }
-    }
-
     &:active {
       cursor: default;
     }
 
-    &.@{prefix}-tag--check {
-      transition: background-color @anim-duration-base @anim-time-fn-easing;
-      cursor: pointer;
-
-      &:hover:not(.@{prefix}-tag--checked):not(.@{prefix}-tag--disabled) {
-        background-color: @tag-check-hover-bg;
-      }
-    }
-
     // 失效标签
     &.@{prefix}-tag--disabled {
       color: @tag-disabled-color;
       background-color: @tag-disabled-bg;
       cursor: not-allowed;
 
       &:hover {
-        color: @tag-disabled-color;
-        background-color: @tag-disabled-bg;
+        cursor: not-allowed;
       }
 
       .t-icon {
@@ -271,8 +252,50 @@
   }
 }
 
-a {
+.@{prefix}-tag.@{prefix}-tag--check:not(.@{prefix}-tag--disabled) {
+  transition: background-color @anim-duration-base @anim-time-fn-easing;
+  cursor: pointer;
+
+  &.@{prefix}-tag--default.@{prefix}-tag--dark:not(.@{prefix}-tag--checked) {
+    &:hover {
+      background-color: @tag-grey-hover-color;
+    }
+  }
 
+  &.@{prefix}-tag--primary.@{prefix}-tag--dark.@{prefix}-tag--checked {
+    &:hover {
+      background-color: @tag-default-hover-color;
+    }
+  }
+
+  &.@{prefix}-tag--default.@{prefix}-tag--outline:not(.@{prefix}-tag--checked) {
+    &:hover {
+      color: @tag-grey-outline-hover-color;
+    }
+  }
+}
+
+.@{prefix}-tag--check.@{prefix}-tag--disabled.@{prefix}-tag--primary {
+  &.@{prefix}-tag--dark {
+    background-color: @tag-default-disabled-color;
+    cursor: not-allowed;
+  }
+
+  &.@{prefix}-tag--outline {
+    color: @tag-disabled-color;
+    background-color: @tag-grey-outline-disabled-color;
+    border-color: @tag-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.@{prefix}-check-tag-group {
+  .@{prefix}-tag:not(:last-child) {
+    margin-right: @check-tag-margin-left;
+  }
+}
+
+a {
   .@{prefix}-tag {
     cursor: pointer;
     transition: all @anim-duration-base linear;

diff --git a/style/web/components/tag/_var.less b/style/web/components/tag/_var.less
@@ -1,17 +1,21 @@
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// 因为通过讨论 Tag 组件的选中态只针对于一个特定主题
 // checked [false - default; true - primary]
 @tag-default-background-color: @bg-color-component;
 @tag-default-border-color: transparent;
-@tag-default-hover-color: @brand-color;
+@tag-default-hover-color: @brand-color-hover;
 @tag-default-click-color: @brand-color-active;
+@tag-default-disabled-color: @brand-color-disabled;
 @tag-checked-color: @text-color-anti;
 @tag-checked-background-color: @brand-color;
 @tag-check-hover-bg: @bg-color-component-hover;
 @tag-checked-hover-bg: @brand-color-hover;
 @tag-default-click-bg: @bg-color-component-active;
 
+@tag-grey-hover-color: @bg-color-component-hover;
+@tag-grey-outline-disabled-color: @bg-color-component-disabled;
+@tag-grey-outline-hover-color: @brand-color-hover;
+
 // disabled
 @tag-disabled-color: @text-color-disabled;
 @tag-disabled-bg: @bg-color-component-disabled;
@@ -78,3 +82,4 @@
 // margin
 @tag-icon-margin-right: @comp-margin-xs;
 @tag-close-icon-margin-right: @comp-margin-s;
+@check-tag-margin-left: @comp-margin-s;