chore: fix form demo style (ant-design#46156)

wanghui2021 · Nov 29, 2023 · 005fc97 · 005fc97
1 parent 7355535
commit 005fc97
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 56 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1891,30 +1891,46 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
           <div
             class="ant-form-item-control-input-content"
           >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
-            >
-              <span>
-                Submit
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
-            >
-              <span>
-                Reset
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-link"
-              type="button"
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
             >
-              <span>
-                Fill form
-              </span>
-            </button>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="submit"
+                >
+                  <span>
+                    Submit
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Reset
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-link"
+                  type="button"
+                >
+                  <span>
+                    Fill form
+                  </span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1418,30 +1418,46 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
           <div
             class="ant-form-item-control-input-content"
           >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
-            >
-              <span>
-                Submit
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
-            >
-              <span>
-                Reset
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-link"
-              type="button"
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
             >
-              <span>
-                Fill form
-              </span>
-            </button>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="submit"
+                >
+                  <span>
+                    Submit
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Reset
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-link"
+                  type="button"
+                >
+                  <span>
+                    Fill form
+                  </span>
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/form/demo/control-hooks.tsx b/components/form/demo/control-hooks.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Form, Input, Select } from 'antd';
+import { Button, Form, Input, Select, Space } from 'antd';
 
 const { Option } = Select;
 
@@ -77,15 +77,17 @@ const App: React.FC = () => {
         }
       </Form.Item>
       <Form.Item {...tailLayout}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-        <Button htmlType="button" onClick={onReset}>
-          Reset
-        </Button>
-        <Button type="link" htmlType="button" onClick={onFill}>
-          Fill form
-        </Button>
+        <Space>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+          <Button htmlType="button" onClick={onReset}>
+            Reset
+          </Button>
+          <Button type="link" htmlType="button" onClick={onFill}>
+            Fill form
+          </Button>
+        </Space>
       </Form.Item>
     </Form>
   );