chore: update Space vertical demo (#34647)

* chore: update Space vertical demo close #34609 * fix snapshot
ant-design · Mar 22, 2022 · d207ba6 · d207ba6
1 parent 4209fa2
commit d207ba6
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 17 deletions.
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -894,14 +894,14 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
 exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -930,10 +930,41 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"

diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -645,14 +645,14 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -681,10 +681,41 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"

diff --git a/components/space/demo/vertical.md b/components/space/demo/vertical.md
@@ -9,25 +9,25 @@ title:
 
 相邻组件垂直间距。
 
-可以设置 `width: 100%` 独占一行。
-
 ## en-US
 
 Crowded components vertical spacing.
 
-Can set `width: 100%` to fill a row.
-
 ```jsx
 import { Space, Card } from 'antd';
 
 function SpaceVertical() {
   return (
-    <Space direction="vertical">
-      <Card title="Card" style={{ width: 300 }}>
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <Card title="Card" size="small">
+        <p>Card content</p>
+        <p>Card content</p>
+      </Card>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>
-      <Card title="Card" style={{ width: 300 }}>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>