From d207ba65b853d06f238632025ba590778b43c37c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 22 Mar 2022 14:49:42 +0800
Subject: [PATCH] chore: update Space vertical demo (#34647)

* chore: update Space vertical demo

close #34609

* fix snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap    | 41 ++++++++++++++++---
 .../__tests__/__snapshots__/demo.test.js.snap | 41 ++++++++++++++++---
 components/space/demo/vertical.md             | 14 +++----
 3 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 12f9fe8a3a..9b68323533 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -894,14 +894,46 @@ 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"
+      >
+        <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"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -932,8 +964,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      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
index aef6fb490b..9634bca1a5 100644
--- a/components/space/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -645,14 +645,46 @@ 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"
+      >
+        <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"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -683,8 +715,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      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
index 36509ad548..22edfdab48 100644
--- 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" style={{ width: 300 }}>
+      <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>