docs(dropdown): improve demo (ant-design#28032)

ebonow · Nov 27, 2020 · 25f1c23 · 25f1c23
1 parent 94f2ae9
commit 25f1c23
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 83 deletions.
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -383,57 +383,107 @@ exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
 `;
 
 exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomLeft
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomCenter
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomRight
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      topLeft
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
   >
-    <span>
-      topCenter
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap:wrap;margin-bottom:-8px"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            bottomLeft
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            bottomCenter
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            bottomRight
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    <span>
-      topRight
-    </span>
-  </button>,
-]
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-center"
+      style="flex-wrap:wrap;margin-bottom:-8px"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            topLeft
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px;padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            topCenter
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+        style="padding-bottom:8px"
+      >
+        <button
+          class="ant-btn ant-dropdown-trigger"
+          type="button"
+        >
+          <span>
+            topRight
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `

diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
@@ -14,7 +14,7 @@ title:
 Support 6 placements.
 
 ```jsx
-import { Menu, Dropdown, Button } from 'antd';
+import { Menu, Dropdown, Button, Space } from 'antd';
 
 const menu = (
   <Menu>
@@ -37,39 +37,30 @@ const menu = (
 );
 
 ReactDOM.render(
-  <>
-    <Dropdown overlay={menu} placement="bottomLeft">
-      <Button>bottomLeft</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="bottomCenter">
-      <Button>bottomCenter</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="bottomRight">
-      <Button>bottomRight</Button>
-    </Dropdown>
-    <br />
-    <Dropdown overlay={menu} placement="topLeft">
-      <Button>topLeft</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="topCenter">
-      <Button>topCenter</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="topRight">
-      <Button>topRight</Button>
-    </Dropdown>
-  </>,
+  <Space direction="vertical">
+    <Space wrap>
+      <Dropdown overlay={menu} placement="bottomLeft">
+        <Button>bottomLeft</Button>
+      </Dropdown>
+      <Dropdown overlay={menu} placement="bottomCenter">
+        <Button>bottomCenter</Button>
+      </Dropdown>
+      <Dropdown overlay={menu} placement="bottomRight">
+        <Button>bottomRight</Button>
+      </Dropdown>
+    </Space>
+    <Space wrap>
+      <Dropdown overlay={menu} placement="topLeft">
+        <Button>topLeft</Button>
+      </Dropdown>
+      <Dropdown overlay={menu} placement="topCenter">
+        <Button>topCenter</Button>
+      </Dropdown>
+      <Dropdown overlay={menu} placement="topRight">
+        <Button>topRight</Button>
+      </Dropdown>
+    </Space>
+  </Space>,
   mountNode,
 );
 ```
-
-```css
-#components-dropdown-demo-placement .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-.ant-row-rtl #components-dropdown-demo-placement .ant-btn {
-  margin-right: 0;
-  margin-bottom: 8px;
-  margin-left: 8px;
-}
-```