update tag demo

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

@@ -58,25 +58,30 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
 exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
 <div>
   <div
-    class="ant-tag ant-tag-checkable"
+    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
   >
-    Unchecked
+    Tag1
   </div>
   <div
     class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
   >
-    Checked
+    Tag2
   </div>
   <div
-    class="ant-tag ant-tag-checkable"
+    class="ant-tag ant-tag-checkable ant-tag-checkable-checked"
   >
-    Uncontrolled
+    Tag3
   </div>
 </div>
 `;
 
 exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
 <div>
+  <h4
+    style="margin-bottom:16px;"
+  >
+    Presets:
+  </h4>
   <div>
     <div
       class="ant-tag ant-tag-pink"
@@ -149,83 +154,12 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
       </span>
     </div>
   </div>
-  <div
+  <h4
-    style="margin-top:24px;"
+    style="margin:16px 0;"
-  >
-    <div
-      class="ant-tag ant-tag-pink-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        pink-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-red-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        red-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-orange-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        orange-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-green-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        green-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-cyan-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        cyan-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-blue-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        blue-inverse
-      </span>
-    </div>
-    <div
-      class="ant-tag ant-tag-purple-inverse"
-      data-show="true"
-    >
-      <span
-        class="ant-tag-text"
-      >
-        purple-inverse
-      </span>
-    </div>
-  </div>
-  <div
-    style="margin-top:24px;"
   >
+    Custom:
+  </h4>
+  <div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"

components/tag/demo/checkable.md

@@ -7,22 +7,25 @@ title:
 
 ## zh-CN
 
-可通过 Tag.CheckableTag 实现类似 Checkbox 的效果，该组件为完全受控组件，不支持非受控用法。
+可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。
+
+> 该组件为完全受控组件，不支持非受控用法。
 
 ## en-US
 
-Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode.
+`CheckableTag` works like Checkbox, click it to toggle checked state.
+
+> it is an absolute controlled component and has no uncontrolled mode.
 
 ````jsx
 import { Tag } from 'antd';
-const CheckableTag = Tag.CheckableTag;
+const { CheckableTag } = Tag;
 
-class UncontrolledCheckableTag extends React.Component {
+class MyTag extends React.Component {
-  state = { checked: false };
+  state = { checked: true };
   handleChange = (checked) => {
     this.setState({ checked });
   }
-
   render() {
     return <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />;
   }
@@ -30,10 +33,9 @@ class UncontrolledCheckableTag extends React.Component {
 
 ReactDOM.render(
   <div>
-    <CheckableTag>Unchecked</CheckableTag>
+    <MyTag>Tag1</MyTag>
-    <CheckableTag checked>Checked</CheckableTag>
+    <MyTag>Tag2</MyTag>
-    <UncontrolledCheckableTag>Uncontrolled</UncontrolledCheckableTag>
+    <MyTag>Tag3</MyTag>
-  </div>,
+  </div>
-  mountNode
+, mountNode);
-);
 ````

components/tag/demo/colorful.md

@@ -23,6 +23,7 @@ import { Tag } from 'antd';
 
 ReactDOM.render(
   <div>
+    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
     <div>
       <Tag color="pink">pink</Tag>
       <Tag color="red">red</Tag>
@@ -32,16 +33,8 @@ ReactDOM.render(
       <Tag color="blue">blue</Tag>
       <Tag color="purple">purple</Tag>
     </div>
-    <div style={{ marginTop: 24 }}>
+    <h4 style={{ margin: '16px 0' }}>Custom:</h4>
-      <Tag color="pink-inverse">pink-inverse</Tag>
+    <div>
-      <Tag color="red-inverse">red-inverse</Tag>
-      <Tag color="orange-inverse">orange-inverse</Tag>
-      <Tag color="green-inverse">green-inverse</Tag>
-      <Tag color="cyan-inverse">cyan-inverse</Tag>
-      <Tag color="blue-inverse">blue-inverse</Tag>
-      <Tag color="purple-inverse">purple-inverse</Tag>
-    </div>
-    <div style={{ marginTop: 24 }}>
       <Tag color="#f50">#f50</Tag>
       <Tag color="#2db7f5">#2db7f5</Tag>
       <Tag color="#87d068">#87d068</Tag>