🎬 improve tag demo (#23703)

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`] = `

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,
 );
 ```

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>
+      </>
     );
   }
 }

components/tag/style/index.less

@@ -64,6 +64,7 @@
   &-checkable {
     background-color: transparent;
     border-color: transparent;
+    cursor: pointer;
     &:not(&-checked):hover {
       color: @primary-color;
     }