docs: optimize site of components 3 (ant-design#23779)

* docs: optimize site of components in rtl 3 * add
smwhr · Apr 30, 2020 · 01b98e7 · 01b98e7
1 parent ba9d75e
commit 01b98e7
Show file tree

Hide file tree

Showing 21 changed files with 555 additions and 530 deletions.
diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap
@@ -34,31 +34,47 @@ exports[`renders ./components/message/demo/loading.md correctly 1`] = `
 `;
 
 exports[`renders ./components/message/demo/other.md correctly 1`] = `
-<div>
-  <button
-    class="ant-btn"
-    type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
   >
-    <span>
-      Success
-    </span>
-  </button>
-  <button
-    class="ant-btn"
-    type="button"
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Success
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
   >
-    <span>
-      Error
-    </span>
-  </button>
-  <button
-    class="ant-btn"
-    type="button"
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Error
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    <span>
-      Warning
-    </span>
-  </button>
+    <button
+      class="ant-btn"
+      type="button"
+    >
+      <span>
+        Warning
+      </span>
+    </button>
+  </div>
 </div>
 `;
 

diff --git a/components/message/demo/other.md b/components/message/demo/other.md
@@ -14,7 +14,7 @@ title:
 Messages of success, error and warning types.
 
 ```jsx
-import { message, Button } from 'antd';
+import { message, Button, Space } from 'antd';
 
 const success = () => {
   message.success('This is a success message');
@@ -29,17 +29,11 @@ const warning = () => {
 };
 
 ReactDOM.render(
-  <div>
+  <Space>
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
-  </div>,
+  </Space>,
   mountNode,
 );
 ```
-
-<style>
-#components-message-demo-other .ant-btn {
-  margin-right: 8px;
-}
-</style>
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
@@ -14,7 +14,7 @@ title:
 Use `confirm()` to show a confirmation modal dialog.
 
 ```jsx
-import { Modal, Button } from 'antd';
+import { Modal, Button, Space } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 const { confirm } = Modal;
@@ -71,15 +71,15 @@ function showPropsConfirm() {
 }
 
 ReactDOM.render(
-  <div>
+  <Space>
     <Button onClick={showConfirm}>Confirm</Button>
     <Button onClick={showDeleteConfirm} type="dashed">
       Delete
     </Button>
     <Button onClick={showPropsConfirm} type="dashed">
       With extra props
     </Button>
-  </div>,
+  </Space>,
   mountNode,
 );
 ```
diff --git a/components/modal/demo/hooks.md b/components/modal/demo/hooks.md
@@ -14,7 +14,7 @@ title:
 Use `Modal.useModal` to get `contextHolder` with context accessible issue.
 
 ```jsx
-import { Modal, Button } from 'antd';
+import { Modal, Button, Space } from 'antd';
 
 const ReachableContext = React.createContext();
 const UnreachableContext = React.createContext();
@@ -35,35 +35,36 @@ const App = () => {
 
   return (
     <ReachableContext.Provider value="Light">
-      <Button
-        onClick={() => {
-          modal.confirm(config);
-        }}
-      >
-        Confirm
-      </Button>
-      <Button
-        onClick={() => {
-          modal.warning(config);
-        }}
-      >
-        Warning
-      </Button>
-      <Button
-        onClick={() => {
-          modal.info(config);
-        }}
-      >
-        Info
-      </Button>
-      <Button
-        onClick={() => {
-          modal.error(config);
-        }}
-      >
-        Error
-      </Button>
-
+      <Space>
+        <Button
+          onClick={() => {
+            modal.confirm(config);
+          }}
+        >
+          Confirm
+        </Button>
+        <Button
+          onClick={() => {
+            modal.warning(config);
+          }}
+        >
+          Warning
+        </Button>
+        <Button
+          onClick={() => {
+            modal.info(config);
+          }}
+        >
+          Info
+        </Button>
+        <Button
+          onClick={() => {
+            modal.error(config);
+          }}
+        >
+          Error
+        </Button>
+      </Space>
       {/* `contextHolder` should always under the context you want to access */}
       {contextHolder}
 

diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
@@ -14,7 +14,7 @@ title:
 In the various types of information modal dialog, only one button to close dialog is provided.
 
 ```jsx
-import { Modal, Button } from 'antd';
+import { Modal, Button, Space } from 'antd';
 
 function info() {
   Modal.info({
@@ -50,12 +50,12 @@ function warning() {
 }
 
 ReactDOM.render(
-  <div>
+  <Space>
     <Button onClick={info}>Info</Button>
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
-  </div>,
+  </Space>,
   mountNode,
 );
 ```
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -91,12 +91,6 @@ modal.update({
 modal.destroy();
 ```
 
-<style>
-.code-box-demo .ant-btn {
-  margin-right: 8px;
-}
-</style>
-
 - `Modal.destroyAll`
 
 `Modal.destroyAll()` could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -93,12 +93,6 @@ modal.update({
 modal.destroy();
 ```
 
-<style>
-.code-box-demo .ant-btn {
-  margin-right: 8px;
-}
-</style>
-
 - `Modal.destroyAll`
 
 使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）