feat: form多列模式下容器类组件固定100% (#11468)

* feat: form多列模式下容器类组件固定100% * 更新快照 * 更新快照
baidu · Jan 9, 2025 · db7172f · db7172f
1 parent 5a174f4
commit db7172f
Show file tree

Hide file tree

Showing 83 changed files with 302 additions and 72 deletions.
diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss
@@ -531,80 +531,18 @@
   }
 }
 
-.#{$ns}Form--column-1 > .#{$ns}Form-item {
-  width: 100%;
-}
-
-.#{$ns}Form--column-2 > .#{$ns}Form-item {
-  width: 50%;
-}
-
-.#{$ns}Form--column-2 > .#{$ns}Form-item:nth-last-child(2) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-3 > .#{$ns}Form-item {
-  width: 33%;
-}
-
-.#{$ns}Form--column-3 > .#{$ns}Form-item:nth-last-child(-n + 3) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-4 > .#{$ns}Form-item {
-  width: 25%;
-}
-
-.#{$ns}Form--column-4 > .#{$ns}Form-item:nth-last-child(-n + 4) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-5 > .#{$ns}Form-item {
-  width: 20%;
-}
-
-.#{$ns}Form--column-5 > .#{$ns}Form-item:nth-last-child(-n + 5) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-6 > .#{$ns}Form-item {
-  width: 16.6%;
-}
-
-.#{$ns}Form--column-6 > .#{$ns}Form-item:nth-last-child(-n + 6) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-7 > .#{$ns}Form-item {
-  width: 14.2%;
-}
-
-.#{$ns}Form--column-7 > .#{$ns}Form-item:nth-last-child(-n + 7) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form--column-8 > .#{$ns}Form-item {
-  width: 12.5%;
-}
-
-.#{$ns}Form--column-8 > .#{$ns}Form-item:nth-last-child(-n + 8) {
-  margin-bottom: 0;
-}
-
-.#{$ns}Form-column-9 > .#{$ns}Form-item {
-  width: 11.1%;
-}
-
-.#{$ns}Form--column-9 > .#{$ns}Form-item:nth-last-child(-n + 9) {
-  margin-bottom: 0;
-}
+@for $i from 1 through 10 {
+  .#{$ns}Form--column-#{$i} > .#{$ns}Form-item {
+    width: 100 / $i * 1%;
+  }
 
-.#{$ns}Form-column-10 > .#{$ns}Form-item {
-  width: 10%;
-}
+  .#{$ns}Form--column-#{$i} > [data-role*='container'] {
+    flex: 100%;
+  }
 
-.#{$ns}Form--column-10 > .#{$ns}Form-item:nth-last-child(-n + 10) {
-  margin-bottom: 0;
+  .#{$ns}Form--column-#{$i} > .#{$ns}Form-item:nth-last-child(-n + #{$i}) {
+    margin-bottom: 0;
+  }
 }
 
 /* 移动端样式调整 */

diff --git a/packages/amis-ui/src/components/CollapseGroup.tsx b/packages/amis-ui/src/components/CollapseGroup.tsx
@@ -161,6 +161,7 @@ class CollapseGroup extends React.Component<
           className
         )}
         style={style}
+        data-role="container"
       >
         {this.getItems(children)}
       </div>

diff --git a/packages/amis-ui/src/components/Tabs.tsx b/packages/amis-ui/src/components/Tabs.tsx
@@ -898,6 +898,7 @@ export class Tabs extends React.Component<TabsProps, any> {
         )}
         style={style}
         {...testIdBuilder?.getTestId()}
+        data-role="container"
       >
         {!['vertical', 'sidebar', 'chrome'].includes(mode) ? (
           <div

diff --git a/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap b/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`EventAction:disabled 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"

diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`doAction:crud reload 1`] = `
           <div
             class="cxd-Crud"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -1273,6 +1274,7 @@ exports[`doAction:crud reload with data1 1`] = `
           <div
             class="cxd-Crud is-loading"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"
@@ -1543,6 +1545,7 @@ exports[`doAction:crud reload with data2 1`] = `
           <div
             class="cxd-Crud is-loading"
             data-id="crud_reload"
+            data-role="container"
           >
             <div
               class="cxd-Table cxd-Crud-body"

diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/service.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`doAction:service reload 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -227,6 +228,7 @@ exports[`doAction:service reload 2`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"

diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/form.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`doAction:form clear 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -354,6 +355,7 @@ exports[`doAction:form force validate before submit 1`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -484,6 +486,7 @@ exports[`doAction:form force validate before submit 2`] = `
         >
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -608,6 +611,7 @@ exports[`doAction:form reset 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -771,6 +775,7 @@ exports[`doAction:form reset 2`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -932,6 +937,7 @@ exports[`doAction:form setValue 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1090,6 +1096,7 @@ exports[`doAction:form static&nonstatic 1`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1204,6 +1211,7 @@ exports[`doAction:form static&nonstatic 2`] = `
           </button>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1369,6 +1377,7 @@ exports[`doAction:form submit 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1579,6 +1588,7 @@ exports[`doAction:form submit 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1798,6 +1808,7 @@ exports[`doAction:form submit 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2005,6 +2016,7 @@ exports[`doAction:form validate 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2226,6 +2238,7 @@ exports[`doAction:form validate 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -2442,6 +2455,7 @@ exports[`doAction:form validate 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"

diff --git a/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/form/__snapshots__/range.test.tsx.snap
@@ -117,6 +117,7 @@ exports[`EventAction:inputRange 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"

diff --git a/...s/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap b/...s/amis/__tests__/event-action/renderers/form/__snapshots__/validateFormItem.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`doAction:formItem validate 1`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -356,6 +357,7 @@ exports[`doAction:formItem validate 2`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -613,6 +615,7 @@ exports[`doAction:formItem validate 3`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -870,6 +873,7 @@ exports[`doAction:formItem validate 4`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1113,6 +1117,7 @@ exports[`doAction:formItem validate 5`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"
@@ -1356,6 +1361,7 @@ exports[`doAction:formItem validate 6`] = `
           </div>
           <div
             class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+            data-role="container"
           >
             <div
               class="cxd-Panel-heading"

diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:array 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"

diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/button.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Renderer:button 1`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
@@ -97,6 +98,7 @@ exports[`Renderer:button 2`] = `
 <div>
   <div
     class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+    data-role="container"
   >
     <div
       class="cxd-Panel-heading"
-Original file line number
+Diff line change
@@ Expand Up / @@ -117,6 +117,7 @@ exports[`EventAction:inputRange 1`] = ` @@
               </div>
               <div
                 class="cxd-Panel cxd-Panel--default cxd-Panel--form"
+                data-role="container"
               >
                 <div
                   class="cxd-Panel-heading"
@@ Expand Down @@