fix(tag): update style

src/tag/CheckTag.tsx

@@ -39,7 +39,7 @@ const TagCheck: React.FC<TagCheckProps> = React.memo(
     const checkTagClass = classNames(
       `${baseClass}`,
       `${baseClass}--checkable`,
-      `${baseClass}--${shape}`,
+      `${baseClass}--shape-${shape}`,
       `${baseClass}--size-${size}`,
       {
         [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
@@ -70,11 +70,15 @@ const TagCheck: React.FC<TagCheckProps> = React.memo(
     };
 
     return (
-      <button className={checkTagClass} style={tagStyle} onClick={handleClick} ref={ref} disabled={disabled} {...other}>
+      <span className={checkTagClass} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
         <span className={`${baseClass}__icon`}>{icon}</span>
         <span className={`${baseClass}__text`}>{content || children}</span>
-        {closable ? <Icon name="close" className={`${baseClass}__close`} onClick={handleClose} /> : null}
-      </button>
+        {closable ? (
+          <span className={`${baseClass}__icon-close`} onClick={handleClose}>
+            <Icon name="close" />
+          </span>
+        ) : null}
+      </span>
     );
   }),
 );

src/tag/Tag.tsx

@@ -18,7 +18,7 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     content = null,
     disabled = false,
     icon = undefined,
-    maxWidth = '',
+    maxWidth,
     children = '',
     shape = 'square',
     size = 'medium',
@@ -30,19 +30,15 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
   } = props;
 
   const { classPrefix } = useConfig();
-
   const baseClass = `${classPrefix}-tag`;
 
   const tagClassNames = classNames(
     `${baseClass}`,
-    `${baseClass}-${theme}`,
-    `${baseClass}--${shape}`,
-    `${baseClass}-${variant}`,
+    `${baseClass}--theme-${theme}`,
+    `${baseClass}--shape-${shape}`,
+    `${baseClass}--variant-${variant}`,
     `${baseClass}--size-${size}`,
     {
-      [`${classPrefix}-is-error`]: theme === 'danger',
-      [`${classPrefix}-is-success`]: theme === 'success',
-      [`${classPrefix}-is-warning`]: theme === 'warning',
       [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
       [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
     },
@@ -51,7 +47,7 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
 
   const tagStyle = {
     ...style,
-    maxWidth,
+    maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
   };
 
   const getRenderContent = useCallback(() => {
@@ -85,7 +81,11 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     <span className={tagClassNames} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
       <span className={`${baseClass}__icon`}>{icon}</span>
       <span className={`${baseClass}__text`}>{getRenderContent() || children}</span>
-      {closable ? <Icon name="close" className={`${baseClass}__close`} onClick={onClickClose} /> : null}
+      {closable ? (
+        <span className={`${baseClass}__icon-close`} onClick={onClickClose}>
+          <Icon name="close" />
+        </span>
+      ) : null}
     </span>
   );
 });

src/tag/_example/checkable.jsx

@@ -1,27 +1,40 @@
 import React, { useState } from 'react';
 import { TagCheck } from 'tdesign-mobile-react';
 
-const ClickableUse = () => {
-  const [checked, setChecked] = useState(false);
+const TagChecksOptions = [
+  {
+    name: '选中',
+    checked: true,
+  },
+  {
+    name: '未选中',
+    checked: false,
+  },
+  {
+    name: '不可选',
+    checked: false,
+    disabled: true,
+  },
+];
 
-  const handleOnChange = (v) => {
-    console.log('on checked', v);
-  };
-  const handleChange = (v) => {
-    console.log('to checked', v);
-    setChecked(v);
+const CheckeableDemo = () => {
+  const [tagChecks, setTagChecks] = useState(TagChecksOptions);
+
+  const onClick = (tagCheckIndex) => {
+    const shallowClone = [...tagChecks];
+    shallowClone[tagCheckIndex].checked = !shallowClone[tagCheckIndex].checked;
+    setTagChecks([...shallowClone]);
   };
+
   return (
-    <div className="t-tag__demo-block t-tag__demo-common">
-      <TagCheck defaultChecked onChange={handleOnChange}>
-        已点击
-      </TagCheck>
-      <TagCheck onChange={handleChange} checked={checked}>
-        未点击
-      </TagCheck>
-      <TagCheck disabled> 不可点击</TagCheck>
-    </div>
+    <>
+      {tagChecks.map((item, index) => (
+        <TagCheck key={index} checked={item.checked} disabled={item.disabled} onClick={() => onClick(index)}>
+          {item.name}
+        </TagCheck>
+      ))}
+    </>
   );
 };
 
-export default ClickableUse;
+export default CheckeableDemo;

src/tag/_example/closable.jsx

@@ -1,11 +1,17 @@
 import React, { useState } from 'react';
 import { Tag } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
 
 const TagOptions = [
   {
     size: 'medium',
     name: '标签',
   },
+  {
+    name: '标签',
+    size: 'medium',
+    icon: <Icon name="app" />,
+  },
 ];
 const ClosableDemo = () => {
   const [tags, setTags] = useState(TagOptions);
@@ -19,15 +25,13 @@ const ClosableDemo = () => {
   };
 
   return (
-    <div className="t-tag__demo-block">
-      {tags.map((opt, dex) => {
-        return (
-          <Tag key={dex} theme="primary" closable size={opt.size} onClose={() => onClose(dex)}>
-            标签
-          </Tag>
-        );
-      })}
-    </div>
+    <>
+      {tags.map((item, index) => (
+        <Tag key={index} theme="primary" closable size={item.size} icon={item.icon} onClose={() => onClose(index)}>
+          标签
+        </Tag>
+      ))}
+    </>
   );
 };
 

src/tag/_example/ellipsis.jsx

@@ -1,20 +1,10 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Ellipsis = () => (
-  <div className="t-tag__demo-common">
-    <div className="t-tag__demo-block">
-      <Tag theme="primary" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签标签标签
-      </Tag>
-      <Tag theme="primary" size="middle" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签标签
-      </Tag>
-      <Tag theme="primary" size="small" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签
-      </Tag>
-    </div>
-  </div>
+const EllipsisDemo = () => (
+  <>
+    <Tag maxWidth={130}>听说超长可以省略听说超长</Tag>
+  </>
 );
 
-export default Ellipsis;
+export default EllipsisDemo;

src/tag/_example/icon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tag } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+
+const IconDemo = () => (
+  <>
+    <Tag theme="primary" shape="round" icon={<Icon name="app" />}>
+      标签
+    </Tag>
+  </>
+);
+
+export default IconDemo;

src/tag/_example/index.jsx

@@ -1,32 +1,64 @@
 import React from 'react';
+import { TagCheck } from 'tdesign-mobile-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import ClickableUse from './checkable';
-import Shape from './shape';
+import CheckeableDemo from './checkable';
+import ShapeDemo from './shape';
 import ClosableDemo from './closable';
-import Theme from './theme';
-import Variant from './variant';
-import Size from './size';
+import ThemeDemo from './theme';
+import VariantDemo from './variant';
+import SizeDemo from './size';
+import EllipsisDemo from './ellipsis';
 
 import './style/index.less';
+import IconDemo from './icon';
 
 export default function Base() {
   return (
     <>
-      <TDemoHeader title="Tag标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
-      <TDemoBlock title="01类型" summary="展示型标签">
-        <Theme />
-        <Variant />
-        <Shape />
+      <TDemoHeader title="Tag 标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
+      <TDemoBlock title="01类型" summary="基础标签">
+        <div className="tag-demo">
+          <ThemeDemo />
+        </div>
+        <div className="tag-demo">
+          <VariantDemo />
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="带图标标签">
+        <div className="tag-demo">
+          <IconDemo />
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="圆角标签">
+        <div className="tag-demo">
+          <ShapeDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock summary="可关闭标签">
-        <ClosableDemo />
+        <div className="tag-demo">
+          <ClosableDemo />
+        </div>
+      </TDemoBlock>
+      <TDemoBlock summary="超长省略标签">
+        <div className="tag-demo">
+          <EllipsisDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock title="02 状态" summary="标签状态">
-        <ClickableUse />
+        <div className="tag-demo">
+          <CheckeableDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock title="03 规格" summary="标签规格">
-        <Size />
+        <div className="group padding-bottom d-flex">
+          <SizeDemo />
+        </div>
+
+        <div className="group d-flex">
+          <TagCheck size="large">点击标签30</TagCheck>
+          <TagCheck size="medium">点击标签24</TagCheck>
+        </div>
       </TDemoBlock>
     </>
   );

src/tag/_example/shape.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Shape = () => (
-  <div className="t-tag__demo-block t-tag__demo-common">
+const ShapeDemo = () => (
+  <>
     <Tag theme="primary" shape="round">
-      圆角标签
+      圆弧
     </Tag>
     <Tag theme="primary" shape="mark">
-      半圆角标签
+      半圆弧
     </Tag>
-  </div>
+  </>
 );
 
-export default Shape;
+export default ShapeDemo;

src/tag/_example/size.jsx

@@ -1,25 +1,18 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
-import { TagCheck } from 'tdesign-mobile-react';
 
-const Size =() => (
-  <div className="t-tag__demo-block">
-    <div className="t-tag__demo-size">
-      <Tag theme="primary" size="large">
-        展示标签大号
-      </Tag>
-      <Tag theme="primary" size="middle">
-        展示标签中号
-      </Tag>
-      <Tag theme="primary" size="small">
-        展示标签小号
-      </Tag>
-    </div>
-    <div className="t-tag__demo-size ">
-      <TagCheck size="large">点击标签大号</TagCheck>
-      <TagCheck size="middle">点击标签中号</TagCheck>
-    </div>
-  </div>
+const SizeDemo = () => (
+  <>
+    <Tag theme="primary" size="large">
+      展示标签30
+    </Tag>
+    <Tag theme="primary" size="medium">
+      展示标签24
+    </Tag>
+    <Tag theme="primary" size="small">
+      展示标签20
+    </Tag>
+  </>
 );
 
-export default Size;
+export default SizeDemo;