feat: Space support align stretch (ant-design#36310)

* feat/Space-component-support-align-stretch: support align to stretch Signed-off-by: Chang Wei <changwei1006@gmail.com> * feat/Space-component-support-align-stretch: update document of zh-CN and en-US Signed-off-by: Chang Wei <changwei1006@gmail.com> * feat/Space-component-support-align-stretch: update demo Signed-off-by: Chang Wei <changwei1006@gmail.com> * feat/Space-component-support-align-stretch: update snapshot by command `npm test -- components/space -u` Signed-off-by: Chang Wei <changwei1006@gmail.com>
infra-fe · Jul 5, 2022 · bfa8aae · bfa8aae
1 parent e7bc2e2
commit bfa8aae
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 3 deletions.
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -148,6 +148,42 @@ exports[`renders ./components/space/demo/align.md extend context correctly 1`] =
       </div>
     </div>
   </div>
+  <div
+    class="space-align-block"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-stretch"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        stretch
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="mock-block"
+        >
+          Block
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -148,6 +148,42 @@ exports[`renders ./components/space/demo/align.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="space-align-block"
+  >
+    <div
+      class="ant-space ant-space-horizontal ant-space-align-stretch"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        stretch
+      </div>
+      <div
+        class="ant-space-item"
+        style="margin-right:8px"
+      >
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            Primary
+          </span>
+        </button>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="mock-block"
+        >
+          Block
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/components/space/demo/align.md b/components/space/demo/align.md
@@ -47,6 +47,13 @@ const App: React.FC = () => (
         <span className="mock-block">Block</span>
       </Space>
     </div>
+    <div className="space-align-block">
+      <Space align="stretch">
+        stretch
+        <Button type="primary">Primary</Button>
+        <span className="mock-block">Block</span>
+      </Space>
+    </div>
   </div>
 );
 

diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md
@@ -16,7 +16,7 @@ Avoid components clinging together and set a unified space.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| align | Align items | `start` \| `end` \|`center` \|`baseline` \|`stretch` | - | 4.2.0 |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | The space size | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | Set split | ReactNode | - | 4.7.0 |

diff --git a/components/space/index.tsx b/components/space/index.tsx
@@ -22,7 +22,7 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: SpaceSize | [SpaceSize, SpaceSize];
   direction?: 'horizontal' | 'vertical';
   // No `stretch` since many components do not support that.
-  align?: 'start' | 'end' | 'center' | 'baseline';
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
   split?: React.ReactNode;
   wrap?: boolean;
 }

diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
@@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` \|`stretch` | - | 4.2.0 |
 | direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | 间距大小 | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 |
 | split | 设置拆分 | ReactNode | - | 4.7.0 |

diff --git a/components/space/style/index.less b/components/space/style/index.less
@@ -27,6 +27,10 @@
     &-baseline {
       align-items: baseline;
     }
+
+    &-stretch {
+      align-items: stretch;
+    }
   }
 }