From 190e2a28a79b99d8b4f2736d160ac64863a43cc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Tue, 28 Apr 2020 14:33:39 +0800
Subject: [PATCH] :clapper: improve tag demo (#23703)

---
 .../__tests__/__snapshots__/demo.test.js.snap | 32 +++++++++----------
 components/tag/demo/checkable.md              | 24 +++-----------
 components/tag/demo/hot-tags.md               | 10 +++---
 components/tag/style/index.less               |  1 +
 4 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index bfbc8259ac..677735d68c 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -202,23 +202,23 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
-<div>
+Array [
   <span
-    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
+    class="ant-tag ant-tag-checkable"
   >
     Tag1
-  </span>
+  </span>,
   <span
-    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
+    class="ant-tag ant-tag-checkable"
   >
     Tag2
-  </span>
+  </span>,
   <span
-    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
+    class="ant-tag ant-tag-checkable"
   >
     Tag3
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
@@ -457,33 +457,33 @@ exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
 `;
 
 exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
-<div>
+Array [
   <span
     style="margin-right:8px"
   >
     Categories:
-  </span>
+  </span>,
   <span
     class="ant-tag ant-tag-checkable"
   >
     Movies
-  </span>
+  </span>,
   <span
-    class="ant-tag ant-tag-checkable"
+    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
   >
     Books
-  </span>
+  </span>,
   <span
     class="ant-tag ant-tag-checkable"
   >
     Music
-  </span>
+  </span>,
   <span
     class="ant-tag ant-tag-checkable"
   >
     Sports
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index 1d722f116b..7b2a68d817 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -22,26 +22,12 @@ import { Tag } from 'antd';
 
 const { CheckableTag } = Tag;
 
-class MyTag extends React.Component {
-  state = { checked: true };
-
-  handleChange = checked => {
-    this.setState({ checked });
-  };
-
-  render() {
-    return (
-      <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />
-    );
-  }
-}
-
 ReactDOM.render(
-  <div>
-    <MyTag>Tag1</MyTag>
-    <MyTag>Tag2</MyTag>
-    <MyTag>Tag3</MyTag>
-  </div>,
+  <>
+    <CheckableTag>Tag1</CheckableTag>
+    <CheckableTag>Tag2</CheckableTag>
+    <CheckableTag>Tag3</CheckableTag>
+  </>,
   mountNode,
 );
 ```
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
index 8f4a802d5a..d263c02ddb 100644
--- a/components/tag/demo/hot-tags.md
+++ b/components/tag/demo/hot-tags.md
@@ -18,11 +18,11 @@ import { Tag } from 'antd';
 
 const { CheckableTag } = Tag;
 
-const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
+const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
 
 class HotTags extends React.Component {
   state = {
-    selectedTags: [],
+    selectedTags: ['Books'],
   };
 
   handleChange(tag, checked) {
@@ -35,9 +35,9 @@ class HotTags extends React.Component {
   render() {
     const { selectedTags } = this.state;
     return (
-      <div>
+      <>
         <span style={{ marginRight: 8 }}>Categories:</span>
-        {tagsFromServer.map(tag => (
+        {tagsData.map(tag => (
           <CheckableTag
             key={tag}
             checked={selectedTags.indexOf(tag) > -1}
@@ -46,7 +46,7 @@ class HotTags extends React.Component {
             {tag}
           </CheckableTag>
         ))}
-      </div>
+      </>
     );
   }
 }
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index c7ded3f6dd..36f113e099 100644
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@@ -64,6 +64,7 @@
   &-checkable {
     background-color: transparent;
     border-color: transparent;
+    cursor: pointer;
     &:not(&-checked):hover {
       color: @primary-color;
     }