demo: tag demo supports dark mode (#40202)

components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -96,7 +96,8 @@ Array [
     </div>
   </div>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"
@@ -410,14 +411,16 @@ Array [
 exports[`renders ./components/tag/demo/control.tsx extend context correctly 1`] = `
 Array [
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Unremovable
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 2
@@ -444,7 +447,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 3
@@ -471,7 +475,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"

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

@@ -96,7 +96,8 @@ Array [
     </div>
   </div>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"
@@ -410,14 +411,16 @@ Array [
 exports[`renders ./components/tag/demo/control.tsx correctly 1`] = `
 Array [
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Unremovable
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 2
@@ -444,7 +447,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag edit-tag"
+    class="ant-tag"
+    style="user-select:none"
   >
     <span>
       Tag 3
@@ -471,7 +475,8 @@ Array [
     </span>
   </span>,
   <span
-    class="ant-tag site-tag-plus"
+    class="ant-tag"
+    style="background:#ffffff;border-style:dashed"
   >
     <span
       aria-label="plus"

components/tag/demo/animation.md

@@ -5,17 +5,3 @@
 ## en-US
 
 Animating the Tag by using [rc-tween-one](https://github.com/react-component/tween-one).
-
-```css
-.site-tag-plus {
-  background: #fff;
-  border-style: dashed;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-tag-plus {
-    background: transparent;
-    border-style: dashed;
-  }
-</style>

components/tag/demo/animation.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
-import { Input, Tag } from 'antd';
+import { Input, Tag, theme } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
 
 const App: React.FC = () => {
-  const [tags, setTags] = useState<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
-  const [inputVisible, setInputVisible] = useState<boolean>(false);
+  const { token } = theme.useToken();
+  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
+  const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<InputRef>(null);
 
@@ -58,6 +59,12 @@ const App: React.FC = () => {
   };
 
   const tagChild = tags.map(forMap);
+
+  const tagPlusStyle = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  };
+
   return (
     <>
       <div style={{ marginBottom: 16 }}>
@@ -79,7 +86,7 @@ const App: React.FC = () => {
           {tagChild}
         </TweenOneGroup>
       </div>
-      {inputVisible && (
+      {inputVisible ? (
         <Input
           ref={inputRef}
           type="text"
@@ -90,9 +97,8 @@ const App: React.FC = () => {
           onBlur={handleInputConfirm}
           onPressEnter={handleInputConfirm}
         />
-      )}
-      {!inputVisible && (
-        <Tag onClick={showInput} className="site-tag-plus">
+      ) : (
+        <Tag onClick={showInput} style={tagPlusStyle}>
           <PlusOutlined /> New Tag
         </Tag>
       )}

components/tag/demo/control.md

@@ -5,25 +5,3 @@
 ## en-US
 
 Generating a set of Tags by array, you can add and remove dynamically.
-
-```css
-.site-tag-plus {
-  background: #fff;
-  border-style: dashed;
-}
-.edit-tag {
-  user-select: none;
-}
-.tag-input {
-  width: 78px;
-  margin-right: 8px;
-  vertical-align: top;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-tag-plus {
-    background: transparent;
-    border-style: dashed;
-  }
-</style>

components/tag/demo/control.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
-import { Input, Tag, Tooltip } from 'antd';
+import { Input, Tag, Tooltip, theme } from 'antd';
 
 const App: React.FC = () => {
-  const [tags, setTags] = useState<string[]>(['Unremovable', 'Tag 2', 'Tag 3']);
+  const { token } = theme.useToken();
+  const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
   const [inputVisible, setInputVisible] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [editInputIndex, setEditInputIndex] = useState(-1);
@@ -56,6 +57,17 @@ const App: React.FC = () => {
     setInputValue('');
   };
 
+  const tagInputStyle = {
+    width: 78,
+    marginRight: 8,
+    verticalAlign: 'top',
+  };
+
+  const tagPlusStyle = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  };
+
   return (
     <>
       {tags.map((tag, index) => {
@@ -65,7 +77,7 @@ const App: React.FC = () => {
               ref={editInputRef}
               key={tag}
               size="small"
-              className="tag-input"
+              style={tagInputStyle}
               value={editInputValue}
               onChange={handleEditInputChange}
               onBlur={handleEditInputConfirm}
@@ -78,9 +90,9 @@ const App: React.FC = () => {
 
         const tagElem = (
           <Tag
-            className="edit-tag"
             key={tag}
             closable={index !== 0}
+            style={{ userSelect: 'none' }}
             onClose={() => handleClose(tag)}
           >
             <span
@@ -104,20 +116,19 @@ const App: React.FC = () => {
           tagElem
         );
       })}
-      {inputVisible && (
+      {inputVisible ? (
         <Input
           ref={inputRef}
           type="text"
           size="small"
-          className="tag-input"
+          style={tagInputStyle}
           value={inputValue}
           onChange={handleInputChange}
           onBlur={handleInputConfirm}
           onPressEnter={handleInputConfirm}
         />
-      )}
-      {!inputVisible && (
-        <Tag className="site-tag-plus" onClick={showInput}>
+      ) : (
+        <Tag style={tagPlusStyle} onClick={showInput}>
           <PlusOutlined /> New Tag
         </Tag>
       )}