docs: optimize site of components 1 (#23670)

* docs: optimize site of components 1

* fix: lint

* fix: use space

* fix: snap

* revert: button demo

* fix snap

components/button/index.en-US.md

@@ -54,12 +54,15 @@ Following the Ant Design specification, we will add one space between if Button
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
 
-
 <style>
 [id^=components-button-demo-] .ant-btn {
   margin-right: 8px;
   margin-bottom: 12px;
 }
+[id^="components-button-demo-"] .ant-btn-rtl {
+  margin-right: 0;
+  margin-left: 8px;
+}
 [id^=components-button-demo-] .ant-btn-group > .ant-btn,
 [id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
   margin-right: 0;

components/button/index.zh-CN.md

@@ -62,6 +62,10 @@ subtitle: 按钮
   margin-right: 8px;
   margin-bottom: 12px;
 }
+[id^="components-button-demo-"] .ant-btn-rtl {
+  margin-right: 0;
+  margin-left: 8px;
+}
 [id^="components-button-demo-"] .ant-btn-group > .ant-btn {
   margin-right: 0;
 }

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

@@ -658,6 +658,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
   </span>
   <div
     class="ant-select ant-select-single ant-select-show-arrow"
+    style="margin:0 8px"
   >
     <div
       class="ant-select-selector"

components/collapse/demo/extra.md

@@ -69,7 +69,11 @@ class Demo extends React.Component {
         </Collapse>
         <br />
         <span>Expand Icon Position: </span>
-        <Select value={expandIconPosition} onChange={this.onPositionChange}>
+        <Select
+          value={expandIconPosition}
+          style={{ margin: '0 8px' }}
+          onChange={this.onPositionChange}
+        >
           <Option value="left">left</Option>
           <Option value="right">right</Option>
         </Select>

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

@@ -1147,7 +1147,9 @@ Array [
       </div>
     </div>
   </div>,
-  <pre>
+  <pre
+    class="demo-code"
+  >
     &lt;Row gutter={[16, 16]}&gt;
   &lt;Col span={6} /&gt;
   &lt;Col span={6} /&gt;
@@ -1155,7 +1157,9 @@ Array [
   &lt;Col span={6} /&gt;
 &lt;/Row&gt;
   </pre>,
-  <pre>
+  <pre
+    class="demo-code"
+  >
     &lt;Row gutter={[16, 16]}&gt;
   &lt;Col span={6} /&gt;
   &lt;Col span={6} /&gt;

components/grid/demo/playground.md

@@ -103,8 +103,8 @@ class App extends React.Component {
         </div>
         <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
         <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
-        <pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
-        <pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
+        <pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
+        <pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
       </>
     );
   }
@@ -131,6 +131,9 @@ ReactDOM.render(<App />, mountNode);
   background: #f9f9f9;
   border-radius: 6px;
 }
+#components-grid-demo-playground pre.demo-code {
+  direction: ltr;
+}
 ```
 
 <style>

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

@@ -934,12 +934,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               class="ant-list-item-action"
             >
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="star"
                       class="anticon anticon-star"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -956,19 +961,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="like"
                       class="anticon anticon-like"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -985,19 +1000,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="message"
                       class="anticon anticon-message"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1014,8 +1039,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     2
-                </span>
+                  </div>
+                </div>
               </li>
             </ul>
           </div>
@@ -1073,12 +1103,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               class="ant-list-item-action"
             >
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="star"
                       class="anticon anticon-star"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1095,19 +1130,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="like"
                       class="anticon anticon-like"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1124,19 +1169,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="message"
                       class="anticon anticon-message"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1153,8 +1208,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     2
-                </span>
+                  </div>
+                </div>
               </li>
             </ul>
           </div>
@@ -1212,12 +1272,17 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               class="ant-list-item-action"
             >
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="star"
                       class="anticon anticon-star"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1234,19 +1299,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="like"
                       class="anticon anticon-like"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1263,19 +1338,29 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     156
-                </span>
+                  </div>
+                </div>
                 <em
                   class="ant-list-item-action-split"
                 />
               </li>
               <li>
-                <span>
+                <div
+                  class="ant-space ant-space-horizontal"
+                >
+                  <div
+                    class="ant-space-item"
+                    style="margin-right:8px"
+                  >
                     <span
                       aria-label="message"
                       class="anticon anticon-message"
                       role="img"
-                    style="margin-right:8px"
                     >
                       <svg
                         aria-hidden="true"
@@ -1292,8 +1377,13 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                         />
                       </svg>
                     </span>
+                  </div>
+                  <div
+                    class="ant-space-item"
+                  >
                     2
-                </span>
+                  </div>
+                </div>
               </li>
             </ul>
           </div>

components/list/demo/vertical.md

@@ -14,7 +14,7 @@ title:
 Set the `itemLayout` property to `vertical` to create a vertical list.
 
 ```jsx
-import { List, Avatar } from 'antd';
+import { List, Avatar, Space } from 'antd';
 import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
 
 const listData = [];
@@ -31,10 +31,10 @@ for (let i = 0; i < 23; i++) {
 }
 
 const IconText = ({ icon, text }) => (
-  <span>
-    {React.createElement(icon, { style: { marginRight: 8 } })}
+  <Space>
+    {React.createElement(icon)}
     {text}
-  </span>
+  </Space>
 );
 
 ReactDOM.render(

components/steps/demo/step-next.md

@@ -73,7 +73,7 @@ class App extends React.Component {
             </Button>
           )}
           {current > 0 && (
-            <Button style={{ margin: 8 }} onClick={() => this.prev()}>
+            <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
               Previous
             </Button>
           )}

site/theme/static/demo.less

@@ -108,10 +108,11 @@
     background: inherit;
     transform: scale(0.9);
 
-    .ant-row-rtl & {
+    .ant-row.ant-row-rtl & {
       right: auto;
-      left: -21px;
-      padding-right: 0;
+      left: -22px;
+      margin-right: 0;
+      padding-right: 8px;
       padding-left: 6px;
     }
   }