demo: update demo (#40313)

* demo: update demo

* add

* fix lint

components/card/demo/basic.md

@@ -5,10 +5,3 @@
 ## en-US
 
 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
-
-<style>
-.code-box-demo p {
-  margin: 0;
-}
-#components-card-demo-basic .ant-card { margin-bottom: 30px; }
-</style>

components/select/demo/basic.tsx

@@ -1,70 +1,42 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 
 const handleChange = (value: string) => {
   console.log(`selected ${value}`);
 };
 
 const App: React.FC = () => (
-  <>
+  <Space wrap>
     <Select
       defaultValue="lucy"
       style={{ width: 120 }}
       onChange={handleChange}
       options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'disabled', label: 'Disabled', disabled: true },
       ]}
     />
     <Select
       defaultValue="lucy"
       style={{ width: 120 }}
       disabled
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
     />
     <Select
       defaultValue="lucy"
       style={{ width: 120 }}
       loading
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
     />
     <Select
       defaultValue="lucy"
       style={{ width: 120 }}
       allowClear
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
     />
-  </>
+  </Space>
 );
 
 export default App;

components/select/demo/big-data.tsx

@@ -5,6 +5,7 @@ import { Divider, Select, Typography } from 'antd';
 const { Title } = Typography;
 
 const options: SelectProps['options'] = [];
+
 for (let i = 0; i < 100000; i++) {
   const value = `${i.toString(36)}${i}`;
   options.push({

components/select/demo/coordinate.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 
 const provinceData = ['Zhejiang', 'Jiangsu'];
+
 const cityData = {
   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
   Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
@@ -23,7 +24,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <>
+    <Space wrap>
       <Select
         defaultValue={provinceData[0]}
         style={{ width: 120 }}
@@ -36,7 +37,7 @@ const App: React.FC = () => {
         onChange={onSecondCityChange}
         options={cities.map((city) => ({ label: city, value: city }))}
       />
-    </>
+    </Space>
   );
 };
 

components/select/demo/debug.md

@@ -1,28 +1,7 @@
 ## zh-CN
 
-基本使用。
+调试使用。
 
 ## en-US
 
-Basic Usage.
-
-<style>
-#components-select-demo-debug .debug-align {
-  position: relative;
-  display: inline-block;
-  line-height: 32px;
-  height: 32px;
-  background: rgba(255, 0, 0, 0.1);
-  box-sizing: border-box;
-}
-#components-select-demo-debug .debug-align:after {
-  position: absolute;
-  content: '';
-  border: 1px solid green;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-</style>
+Debug Usage.

components/select/demo/debug.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import { Button, Input, Select } from 'antd';
+import { Button, Input, Select, Space } from 'antd';
+
+const style: React.CSSProperties = {
+  width: 500,
+  position: 'relative',
+  zIndex: 1,
+  border: '1px solid red',
+  backgroundColor: '#fff',
+};
 
 const handleChange = (value: string | string[]) => {
   console.log(`selected ${value}`);
 };
 
 const App: React.FC = () => (
-  <div
-    style={{
-      width: 500,
-      position: 'relative',
-      zIndex: 1,
-      border: '1px solid red',
-      background: '#FFF',
-    }}
-  >
+  <Space style={style} wrap>
     <Input style={{ width: 100 }} value="222" />
     <Select
       style={{ width: 120 }}
@@ -22,27 +22,11 @@ const App: React.FC = () => (
       showSearch
       placeholder="233"
       options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
-        {
-          value: 'long',
-          label: 'I am super super long!',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'disabled', disabled: true, label: 'Disabled' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'long', label: 'I am super super long!' },
       ]}
     />
     <Select
@@ -53,32 +37,16 @@ const App: React.FC = () => (
       showSearch
       placeholder="233"
       options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          disabled: true,
-          label: 'Disabled',
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
-        {
-          value: 'long',
-          label: 'I am super super long!',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'disabled', disabled: true, label: 'Disabled' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'long', label: 'I am super super long!' },
       ]}
     />
     <span className="debug-align">AntDesign</span>
     <Button>222</Button>
-  </div>
+  </Space>
 );
 
 export default App;

components/select/demo/multiple.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
 
 const options: SelectProps['options'] = [];
+
 for (let i = 10; i < 36; i++) {
   options.push({
     label: i.toString(36) + i,
@@ -15,7 +16,7 @@ const handleChange = (value: string[]) => {
 };
 
 const App: React.FC = () => (
-  <>
+  <Space style={{ width: '100%' }} direction="vertical">
     <Select
       mode="multiple"
       allowClear
@@ -25,7 +26,6 @@ const App: React.FC = () => (
       onChange={handleChange}
       options={options}
     />
-    <br />
     <Select
       mode="multiple"
       disabled
@@ -35,7 +35,7 @@ const App: React.FC = () => (
       onChange={handleChange}
       options={options}
     />
-  </>
+  </Space>
 );
 
 export default App;

components/select/demo/option-label-prop.md

@@ -5,9 +5,3 @@
 ## en-US
 
 Specify the prop name of Option which will be rendered in select box.
-
-```css
-.demo-option-label-item > span {
-  margin-right: 6px;
-}
-```

components/select/demo/option-label-prop.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 
 const { Option } = Select;
 
@@ -17,36 +17,36 @@ const App: React.FC = () => (
     optionLabelProp="label"
   >
     <Option value="china" label="China">
-      <div className="demo-option-label-item">
+      <Space>
         <span role="img" aria-label="China">
           🇨🇳
         </span>
         China (中国)
-      </div>
+      </Space>
     </Option>
     <Option value="usa" label="USA">
-      <div className="demo-option-label-item">
+      <Space>
         <span role="img" aria-label="USA">
           🇺🇸
         </span>
         USA (美国)
-      </div>
+      </Space>
     </Option>
     <Option value="japan" label="Japan">
-      <div className="demo-option-label-item">
+      <Space>
         <span role="img" aria-label="Japan">
           🇯🇵
         </span>
         Japan (日本)
-      </div>
+      </Space>
     </Option>
     <Option value="korea" label="Korea">
-      <div className="demo-option-label-item">
+      <Space>
         <span role="img" aria-label="Korea">
           🇰🇷
         </span>
         Korea (韩国)
-      </div>
+      </Space>
     </Option>
   </Select>
 );

components/select/demo/size.md

@@ -5,17 +5,3 @@
 ## en-US
 
 The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
-
-```css
-.code-box-demo .ant-select {
-  margin: 0 8px 10px 0;
-}
-
-.ant-row-rtl .code-box-demo .ant-select {
-  margin: 0 0 10px 8px;
-}
-
-#components-select-demo-search-box .code-box-demo .ant-select {
-  margin: 0;
-}
-```

components/select/demo/size.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { Radio, Select } from 'antd';
+import { Radio, Select, Space } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
 import type { SelectProps, RadioChangeEvent } from 'antd';
 
 const options: SelectProps['options'] = [];
+
 for (let i = 10; i < 36; i++) {
   options.push({
     value: i.toString(36) + i,
@@ -31,33 +32,33 @@ const App: React.FC = () => {
       </Radio.Group>
       <br />
       <br />
-      <Select
-        size={size}
-        defaultValue="a1"
-        onChange={handleChange}
-        style={{ width: 200 }}
-        options={options}
-      />
-      <br />
-      <Select
-        mode="multiple"
-        size={size}
-        placeholder="Please select"
-        defaultValue={['a10', 'c12']}
-        onChange={handleChange}
-        style={{ width: '100%' }}
-        options={options}
-      />
-      <br />
-      <Select
-        mode="tags"
-        size={size}
-        placeholder="Please select"
-        defaultValue={['a10', 'c12']}
-        onChange={handleChange}
-        style={{ width: '100%' }}
-        options={options}
-      />
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Select
+          size={size}
+          defaultValue="a1"
+          onChange={handleChange}
+          style={{ width: 200 }}
+          options={options}
+        />
+        <Select
+          mode="multiple"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+        <Select
+          mode="tags"
+          size={size}
+          placeholder="Please select"
+          defaultValue={['a10', 'c12']}
+          onChange={handleChange}
+          style={{ width: '100%' }}
+          options={options}
+        />
+      </Space>
     </>
   );
 };

components/select/demo/status.md

@@ -5,9 +5,3 @@
 ## en-US
 
 Add status to Select with `status`, which could be `error` or `warning`.
-
-```css
-#components-select-demo-status .ant-select {
-  margin: 0;
-}
-```

components/select/demo/suffix.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-基本使用。
+后缀图标。
 
 ## en-US
 
-Basic Usage.
+suffix icon.

components/select/demo/suffix.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MehOutlined, SmileOutlined } from '@ant-design/icons';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
 
 const smileIcon = <SmileOutlined />;
 const mehIcon = <MehOutlined />;
@@ -10,30 +10,17 @@ const handleChange = (value: string) => {
 };
 
 const App: React.FC = () => (
-  <>
+  <Space wrap>
     <Select
       suffixIcon={smileIcon}
       defaultValue="lucy"
       style={{ width: 120 }}
       onChange={handleChange}
       options={[
-        {
-          value: 'jack',
-          label: 'Jack',
-        },
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-        {
-          value: 'disabled',
-          label: 'Disabled',
-          disabled: true,
-        },
-        {
-          value: 'Yiminghe',
-          label: 'yiminghe',
-        },
+        { value: 'jack', label: 'Jack' },
+        { value: 'lucy', label: 'Lucy' },
+        { value: 'Yiminghe', label: 'yiminghe' },
+        { value: 'disabled', label: 'Disabled', disabled: true },
       ]}
     />
     <Select
@@ -41,14 +28,9 @@ const App: React.FC = () => (
       defaultValue="lucy"
       style={{ width: 120 }}
       disabled
-      options={[
-        {
-          value: 'lucy',
-          label: 'Lucy',
-        },
-      ]}
+      options={[{ value: 'lucy', label: 'Lucy' }]}
     />
-  </>
+  </Space>
 );
 
 export default App;

components/select/index.en-US.md

@@ -44,7 +44,7 @@ Select component to select value from options.
 
 ## API
 
-```jsx
+```tsx
 <Select>
   <Option value="lucy">lucy</Option>
 </Select>
@@ -149,7 +149,7 @@ You can control it by `open` prop: [codesandbox](https://codesandbox.io/s/ji-ben
 
 Select will close when it lose focus. You can prevent event to handle this:
 
-```jsx
+```tsx
 <Select
   dropdownRender={() => (
     <div
@@ -168,7 +168,7 @@ Select will close when it lose focus. You can prevent event to handle this:
 
 Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:
 
-```jsx
+```tsx
 <Select listItemHeight={10} listHeight={250} />
 ```
 

components/select/index.zh-CN.md

@@ -45,7 +45,7 @@ demo:
 
 ## API
 
-```jsx
+```tsx
 <Select>
   <Option value="lucy">lucy</Option>
 </Select>
@@ -150,7 +150,7 @@ demo:
 
 Select 当失去焦点时会关闭下拉框，如果你可以通过阻止默认行为避免丢失焦点导致的关闭：
 
-```jsx
+```tsx
 <Select
   dropdownRender={() => (
     <div

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

@@ -470,277 +470,289 @@ exports[`renders ./components/slider/demo/icon-slider.tsx extend context correct
 `;
 
 exports[`renders ./components/slider/demo/input-number.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
   <div
-    class="ant-row"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-row"
     >
       <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
       >
         <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="20"
-          aria-valuemin="1"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div>
+          class="ant-slider ant-slider-horizontal"
+        >
           <div
-            class="ant-tooltip ant-slider-tooltip"
-            style="opacity:0"
-          >
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="20"
+            aria-valuemin="1"
+            aria-valuenow="1"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+          <div>
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip ant-slider-tooltip"
+              style="opacity:0"
             >
               <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
+                class="ant-tooltip-content"
               >
-                1
+                <div
+                  class="ant-tooltip-arrow"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  1
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
       <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
       >
         <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
         >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
           >
             <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
               >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
             <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="20"
-            aria-valuemin="1"
-            aria-valuenow="1"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="1"
-            value="1"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="20"
+              aria-valuemin="1"
+              aria-valuenow="1"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="1"
+              value="1"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row"
+    class="ant-space-item"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-row"
     >
       <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
       >
         <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="1"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div>
+          class="ant-slider ant-slider-horizontal"
+        >
           <div
-            class="ant-tooltip ant-slider-tooltip"
-            style="opacity:0"
-          >
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="1"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+          <div>
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip ant-slider-tooltip"
+              style="opacity:0"
             >
               <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
+                class="ant-tooltip-content"
               >
-                0
+                <div
+                  class="ant-tooltip-arrow"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                >
+                  0
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
       <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
       >
         <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
         >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
           >
             <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
               >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
             <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="1"
-            aria-valuemin="0"
-            aria-valuenow="0"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="0.01"
-            value="0.00"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="1"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="0.01"
+              value="0.00"
+            />
+          </div>
         </div>
       </div>
     </div>

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

@@ -254,229 +254,241 @@ exports[`renders ./components/slider/demo/icon-slider.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/slider/demo/input-number.tsx correctly 1`] = `
-<div>
+<div
+  class="ant-space ant-space-vertical"
+  style="width:100%"
+>
   <div
-    class="ant-row"
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-row"
     >
       <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
       >
         <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="20"
-          aria-valuemin="1"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
+          class="ant-slider ant-slider-horizontal"
+        >
+          <div
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="20"
+            aria-valuemin="1"
+            aria-valuenow="1"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
       <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
       >
         <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
         >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
           >
             <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
               >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
             <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="20"
-            aria-valuemin="1"
-            aria-valuenow="1"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="1"
-            value="1"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="20"
+              aria-valuemin="1"
+              aria-valuenow="1"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="1"
+              value="1"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div
-    class="ant-row"
+    class="ant-space-item"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-row"
     >
       <div
-        class="ant-slider ant-slider-horizontal"
+        class="ant-col ant-col-12"
       >
         <div
-          class="ant-slider-rail"
-        />
-        <div
-          class="ant-slider-track"
-          style="left:0%;width:0%"
-        />
-        <div
-          class="ant-slider-step"
-        />
-        <div
-          aria-disabled="false"
-          aria-valuemax="1"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:0%;transform:translateX(-50%)"
-          tabindex="0"
-        />
+          class="ant-slider ant-slider-horizontal"
+        >
+          <div
+            class="ant-slider-rail"
+          />
+          <div
+            class="ant-slider-track"
+            style="left:0%;width:0%"
+          />
+          <div
+            class="ant-slider-step"
+          />
+          <div
+            aria-disabled="false"
+            aria-valuemax="1"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            class="ant-slider-handle"
+            role="slider"
+            style="left:0%;transform:translateX(-50%)"
+            tabindex="0"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-col ant-col-4"
-    >
       <div
-        class="ant-input-number"
-        style="margin:0 16px"
+        class="ant-col ant-col-4"
       >
         <div
-          class="ant-input-number-handler-wrap"
+          class="ant-input-number"
+          style="margin:0 16px"
         >
-          <span
-            aria-disabled="false"
-            aria-label="Increase Value"
-            class="ant-input-number-handler ant-input-number-handler-up"
-            role="button"
-            unselectable="on"
+          <div
+            class="ant-input-number-handler-wrap"
           >
             <span
-              aria-label="up"
-              class="anticon anticon-up ant-input-number-handler-up-inner"
-              role="img"
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="up"
+                class="anticon anticon-up ant-input-number-handler-up-inner"
+                role="img"
               >
-                <path
-                  d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-          <span
-            aria-disabled="true"
-            aria-label="Decrease Value"
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
-            role="button"
-            unselectable="on"
-          >
             <span
-              aria-label="down"
-              class="anticon anticon-down ant-input-number-handler-down-inner"
-              role="img"
+              aria-disabled="true"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+              role="button"
+              unselectable="on"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-input-number-handler-down-inner"
+                role="img"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </div>
-        <div
-          class="ant-input-number-input-wrap"
-        >
-          <input
-            aria-valuemax="1"
-            aria-valuemin="0"
-            aria-valuenow="0"
-            autocomplete="off"
-            class="ant-input-number-input"
-            role="spinbutton"
-            step="0.01"
-            value="0.00"
-          />
+          </div>
+          <div
+            class="ant-input-number-input-wrap"
+          >
+            <input
+              aria-valuemax="1"
+              aria-valuemin="0"
+              aria-valuenow="0"
+              autocomplete="off"
+              class="ant-input-number-input"
+              role="spinbutton"
+              step="0.01"
+              value="0.00"
+            />
+          </div>
         </div>
       </div>
     </div>

components/slider/demo/basic.md

@@ -5,9 +5,3 @@
 ## en-US
 
 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
-
-<style>
-.code-box-demo .ant-slider {
-  margin-bottom: 16px;
-}
-</style>

components/slider/demo/input-number.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Col, InputNumber, Row, Slider } from 'antd';
+import { Col, InputNumber, Row, Slider, Space } from 'antd';
 
-const IntegerStep = () => {
+const IntegerStep: React.FC = () => {
   const [inputValue, setInputValue] = useState(1);
 
   const onChange = (newValue: number) => {
@@ -31,14 +31,13 @@ const IntegerStep = () => {
   );
 };
 
-const DecimalStep = () => {
+const DecimalStep: React.FC = () => {
   const [inputValue, setInputValue] = useState(0);
 
   const onChange = (value: number) => {
     if (isNaN(value)) {
       return;
     }
-
     setInputValue(value);
   };
 
@@ -68,10 +67,10 @@ const DecimalStep = () => {
 };
 
 const App: React.FC = () => (
-  <div>
+  <Space style={{ width: '100%' }} direction="vertical">
     <IntegerStep />
     <DecimalStep />
-  </div>
+  </Space>
 );
 
 export default App;

components/slider/demo/vertical.tsx

@@ -13,9 +13,7 @@ const marks: SliderMarks = {
   26: '26°C',
   37: '37°C',
   100: {
-    style: {
-      color: '#f50',
-    },
+    style: { color: '#f50' },
     label: <strong>100°C</strong>,
   },
 };

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

@@ -24,38 +24,48 @@ exports[`renders ./components/switch/demo/basic.tsx extend context correctly 1`]
 `;
 
 exports[`renders ./components/switch/demo/disabled.tsx extend context correctly 1`] = `
-Array [
-  <button
-    aria-checked="true"
-    class="ant-switch ant-switch-checked ant-switch-disabled"
-    disabled=""
-    role="switch"
-    type="button"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
-    <div
-      class="ant-switch-handle"
-    />
-    <span
-      class="ant-switch-inner"
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
     >
-      <span
-        class="ant-switch-inner-checked"
+      <div
+        class="ant-switch-handle"
       />
       <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    <span>
-      Toggle disabled
-    </span>
-  </button>,
-]
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Toggle disabled
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/switch/demo/loading.tsx extend context correctly 1`] = `

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

@@ -24,38 +24,48 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/switch/demo/disabled.tsx correctly 1`] = `
-Array [
-  <button
-    aria-checked="true"
-    class="ant-switch ant-switch-checked ant-switch-disabled"
-    disabled=""
-    role="switch"
-    type="button"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
-    <div
-      class="ant-switch-handle"
-    />
-    <span
-      class="ant-switch-inner"
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked ant-switch-disabled"
+      disabled=""
+      role="switch"
+      type="button"
     >
-      <span
-        class="ant-switch-inner-checked"
+      <div
+        class="ant-switch-handle"
       />
       <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        />
+        <span
+          class="ant-switch-inner-unchecked"
+        />
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    <span>
-      Toggle disabled
-    </span>
-  </button>,
-]
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Toggle disabled
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/switch/demo/loading.tsx correctly 1`] = `

components/switch/demo/basic.md

@@ -5,9 +5,3 @@
 ## en-US
 
 The most basic usage.
-
-<style>
-.code-box-demo .ant-switch {
-  margin-bottom: 8px;
-}
-</style>

components/switch/demo/disabled.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Switch } from 'antd';
+import { Button, Space, Switch } from 'antd';
 
 const App: React.FC = () => {
   const [disabled, setDisabled] = useState(true);
@@ -9,13 +9,12 @@ const App: React.FC = () => {
   };
 
   return (
-    <>
+    <Space direction="vertical">
       <Switch disabled={disabled} defaultChecked />
-      <br />
       <Button type="primary" onClick={toggle}>
         Toggle disabled
       </Button>
-    </>
+    </Space>
   );
 };
 

docs/react/introduce.en-US.md

@@ -83,6 +83,7 @@ We provide `antd.js` and `antd.min.js` `reset.css` under [dist](https://unpkg.co
 ## Usage
 
 ```jsx
+import React from 'react';
 import { DatePicker } from 'antd';
 
 const App = () => {

docs/react/introduce.zh-CN.md

@@ -83,6 +83,7 @@ $ yarn add antd
 ## 示例
 
 ```jsx
+import React from 'react';
 import { DatePicker } from 'antd';
 
 const App = () => {