fix(layout): inset mode comflict with labelAlign top (#903)

* feat: fix inset mode comflict with labelAlign top * feat: add latest snapshot
alibaba · Jun 18, 2020 · 9906a0c · 9906a0c
1 parent 246953a
commit 9906a0c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 0 deletions.
diff --git a/docs/zh-cn/schema-develop/mega-layout-antd.md b/docs/zh-cn/schema-develop/mega-layout-antd.md
@@ -1243,6 +1243,7 @@ const App = () => {
           grid
           full
           autoRow
+          labelAlign="top"
           responsive={{ lg: 3, m: 2, s: 1 }}
         >
           <Field title="String" name="string"

diff --git a/docs/zh-cn/schema-develop/mega-layout.md b/docs/zh-cn/schema-develop/mega-layout.md
@@ -1240,6 +1240,7 @@ const App = () => {
           grid
           full
           autoRow
+          labelAlign="top"
           responsive={{ lg: 3, m: 2, s: 1 }}
         >
           <Field title="String" name="string"

diff --git a/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -250,6 +250,13 @@ exports[`inset mode inset style 1`] = `
   flex: initial;
 }
 
+.c0 .ant-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .ant-form-item.mega-layout-item {
   padding-left: 0;
   border: none;
@@ -342,6 +349,13 @@ exports[`inset mode inset style of component 1`] = `
   flex: initial;
 }
 
+.c0 .ant-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .ant-form-item {
   padding-left: 12px;
   border: 1px solid #D8D8D8;
@@ -435,6 +449,13 @@ exports[`inset mode inset style(hasBorder) 1`] = `
   flex: initial;
 }
 
+.c0 .ant-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .ant-form-item {
   padding-left: 12px;
   border: 1px solid #D8D8D8;
@@ -447,6 +468,13 @@ exports[`inset mode inset style(hasBorder) 1`] = `
 `;
 
 exports[`inset mode item inset style(hasBorder) 1`] = `
+.c0 .ant-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .ant-form-item.mega-layout-item {
   padding-left: 0;
   border: none;

diff --git a/packages/antd/src/components/FormMegaLayout/inset.tsx b/packages/antd/src/components/FormMegaLayout/inset.tsx
@@ -2,6 +2,9 @@ const insetStyle = (props) => {
     const result: any = {};
 
     result.borderStyle = `
+        .ant-form-item {
+            display: flex;
+        }
         ${props.hasBorder ? `
             .ant-form-item {
                 padding-left: 12px;

diff --git a/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -170,6 +170,13 @@ exports[`inset mode inset style 1`] = `
   border: none;
 }
 
+.c0 .next-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .next-form-item.mega-layout-item {
   padding-left: 0;
   border: none;
@@ -212,6 +219,13 @@ exports[`inset mode inset style of component 1`] = `
   border: none;
 }
 
+.c0 .next-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .next-form-item {
   padding-left: 12px;
   border: 1px solid #D8D8D8;
@@ -255,6 +269,13 @@ exports[`inset mode inset style(hasBorder) 1`] = `
   border: none;
 }
 
+.c0 .next-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .next-form-item {
   padding-left: 12px;
   border: 1px solid #D8D8D8;
@@ -267,6 +288,13 @@ exports[`inset mode inset style(hasBorder) 1`] = `
 `;
 
 exports[`inset mode item inset style(hasBorder) 1`] = `
+.c0 .next-form-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 .next-form-item.mega-layout-item {
   padding-left: 0;
   border: none;

diff --git a/packages/next/src/components/FormMegaLayout/inset.tsx b/packages/next/src/components/FormMegaLayout/inset.tsx
@@ -3,6 +3,9 @@ const insetStyle = (props) => {
 
 
     result.borderStyle = `
+        .next-form-item {
+            display: flex;
+        }
         ${props.hasBorder ? `
             .next-form-item {
                 padding-left: 12px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -1243,6 +1243,7 @@ const App = () => { @@
               grid
               full
               autoRow
+              labelAlign="top"
               responsive={{ lg: 3, m: 2, s: 1 }}
             >
               <Field title="String" name="string"
@@ Expand Down @@