Merge pull request #24018 from ant-design/master

chore: Feature merge master

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

@@ -1,7 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
-<div>
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -10,11 +9,9 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
     Open
   </span>
 </button>
-</div>
 `;
 
 exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
-<div>
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -47,11 +44,9 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
      New account
   </span>
 </button>
-</div>
 `;
 
 exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
-<div>
 <button
   class="ant-btn ant-btn-primary"
   type="button"
@@ -60,11 +55,9 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
     Open drawer
   </span>
 </button>
-</div>
 `;
 
 exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
-<div>
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
 >
@@ -167,7 +160,6 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
     </button>
   </div>
 </div>
-</div>
 `;
 
 exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
@@ -233,7 +225,6 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
 `;
 
 exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
-<div>
 <div
   class="ant-list ant-list-split ant-list-bordered"
 >
@@ -342,5 +333,4 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
     </div>
   </div>
 </div>
-</div>
 `;

components/drawer/demo/basic-right.md

@@ -33,7 +33,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showDrawer}>
           Open
         </Button>
@@ -48,7 +48,7 @@ class App extends React.Component {
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Drawer>
-      </div>
+      </>
     );
   }
 }

components/drawer/demo/form-in-drawer.md

@@ -36,7 +36,7 @@ class DrawerForm extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showDrawer}>
           <PlusOutlined /> New account
         </Button>
@@ -52,10 +52,7 @@ class DrawerForm extends React.Component {
                 textAlign: 'right',
               }}
             >
-              <Button
-                onClick={this.onClose}
-                style={{ marginRight: 8 }}
-              >
+              <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                 Cancel
               </Button>
               <Button onClick={this.onClose} type="primary">
@@ -160,7 +157,7 @@ class DrawerForm extends React.Component {
             </Row>
           </Form>
         </Drawer>
-      </div>
+      </>
     );
   }
 }

components/drawer/demo/multi-level-drawer.md

@@ -45,7 +45,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Button type="primary" onClick={this.showDrawer}>
           Open drawer
         </Button>
@@ -69,7 +69,7 @@ class App extends React.Component {
             This is two-level drawer
           </Drawer>
         </Drawer>
-      </div>
+      </>
     );
   }
 }

components/drawer/demo/placement.md

@@ -40,10 +40,11 @@ class App extends React.Component {
   };
 
   render() {
+    const { placement, visible } = this.state;
     return (
-      <div>
+      <>
         <Space>
-          <RadioGroup defaultValue={this.state.placement} onChange={this.onChange}>
+          <RadioGroup defaultValue={placement} onChange={this.onChange}>
             <Radio value="top">top</Radio>
             <Radio value="right">right</Radio>
             <Radio value="bottom">bottom</Radio>
@@ -55,16 +56,17 @@ class App extends React.Component {
         </Space>
         <Drawer
           title="Basic Drawer"
-          placement={this.state.placement}
+          placement={placement}
           closable={false}
           onClose={this.onClose}
-          visible={this.state.visible}
+          visible={visible}
+          key={placement}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>
           <p>Some contents...</p>
         </Drawer>
-      </div>
+      </>
     );
   }
 }

components/drawer/demo/render-in-current.md

@@ -61,14 +61,14 @@ ReactDOM.render(<App />, mountNode);
 
 ```css
 .site-drawer-render-in-current-wrapper {
-  height: 200px;
-  overflow: hidden;
   position: relative;
-  border: 1px solid #ebedf0;
-  border-radius: 2px;
+  height: 200px;
   padding: 48px;
+  overflow: hidden;
   text-align: center;
   background: #fafafa;
+  border: 1px solid #ebedf0;
+  border-radius: 2px;
 }
 ```
 

components/drawer/demo/user-profile.md

@@ -40,7 +40,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <List
           dataSource={[
             {
@@ -162,7 +162,7 @@ class App extends React.Component {
             </Col>
           </Row>
         </Drawer>
-      </div>
+      </>
     );
   }
 }
@@ -172,10 +172,10 @@ ReactDOM.render(<App />, mountNode);
 
 ```css
 .site-description-item-profile-wrapper {
+  margin-bottom: 7px;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   line-height: 1.5715;
-  margin-bottom: 7px;
 }
 
 [data-theme='compact'] .site-description-item-profile-wrapper {
@@ -184,11 +184,11 @@ ReactDOM.render(<App />, mountNode);
 }
 
 .ant-drawer-body p.site-description-item-profile-p {
+  display: block;
+  margin-bottom: 16px;
   color: rgba(0, 0, 0, 0.85);
   font-size: 16px;
   line-height: 1.5715;
-  display: block;
-  margin-bottom: 16px;
 }
 
 [data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
@@ -197,8 +197,8 @@ ReactDOM.render(<App />, mountNode);
 }
 
 .site-description-item-profile-p-label {
-  margin-right: 8px;
   display: inline-block;
+  margin-right: 8px;
   color: rgba(0, 0, 0, 0.85);
 }
 ```

components/table/demo/drag-sorting.md

@@ -19,7 +19,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 
-const type = 'DragbleBodyRow';
+const type = 'DragableBodyRow';
 
 const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
   const ref = React.useRef();

docs/react/i18n.en-US.md

@@ -27,7 +27,7 @@ Note: `fr_FR` is the filename, follow below.
 Supported languages:
 
 | Language                 | Filename |
-| --------------------- | -------- |
+| ------------------------ | -------- |
 | Arabic                   | ar_EG    |
 | Azerbaijani              | az_AZ    |
 | Bulgarian                | bg_BG    |
@@ -36,7 +36,7 @@ Supported languages:
 | Danish                   | da_DK    |
 | German                   | de_DE    |
 | Greek                    | el_GR    |
-| English (Global)      | en_GB    |
+| English (United Kingdom) | en_GB    |
 | English                  | en_US    |
 | Spanish                  | es_ES    |
 | Estonian                 | et_EE    |

docs/react/use-with-create-react-app.zh-CN.md

@@ -60,7 +60,7 @@ $ yarn add antd
 
 ```jsx
 import React from 'react';
-import { Button } from 'antd';
+import Button from 'antd/es/button';
 import './App.css';
 
 const App = () => (