styles: 调整Collapse组件关闭enableFieldSetStyle的样式优先级 (#8264)

packages/amis-ui/scss/components/_collapse.scss

@@ -170,7 +170,7 @@
 
 //FieldSet Form + Collapse
 .#{$ns}Form {
-  .#{$ns}Collapse.#{$ns}Collapse--fieldset {
+  .#{$ns}Collapse {
     border: none;
 
     .#{$ns}Collapse-header {
@@ -186,6 +186,36 @@
       padding: 0;
     }
   }
+
+  /* 恢复 Form 嵌套场景下的样式 */
+  .#{$ns}Collapse-fieldset--disabled {
+    border-width: var(--collapse-default-top-border-width)
+      var(--collapse-default-right-border-width)
+      var(--collapse-default-bottom-border-width)
+      var(--collapse-default-left-border-width);
+    border-style: var(--collapse-default-top-border-style)
+      var(--collapse-default-right-border-style)
+      var(--collapse-default-bottom-border-style)
+      var(--collapse-default-left-border-style);
+    border-color: var(--collapse-default-top-border-color)
+      var(--collapse-default-right-border-color)
+      var(--collapse-default-bottom-border-color)
+      var(--collapse-default-left-border-color);
+    border-radius: var(--collapse-default-top-left-border-radius)
+      var(--collapse-default-top-right-border-radius)
+      var(--collapse-default-bottom-right-border-radius)
+      var(--collapse-default-bottom-left-border-radius);
+
+    .#{$ns}Collapse-header {
+      background: var(--Collapse-header-bg);
+      display: block;
+      border-radius: unset;
+    }
+
+    .#{$ns}Collapse-content {
+      padding: var(--Collapse-content-padding);
+    }
+  }
 }
 
 /* 移动端样式调整 */

packages/amis-ui/src/components/Collapse.tsx

@@ -283,7 +283,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
             [`Collapse--${size}`]: size,
             'Collapse--disabled': disabled,
             'Collapse--title-bottom': headerPosition === 'bottom',
-            'Collapse--fieldset': enableFieldSetStyle !== false
+            'Collapse-fieldset--disabled': enableFieldSetStyle === false
           },
           className
         )}

packages/amis/__tests__/renderers/Collapse.test.tsx

@@ -258,10 +258,10 @@ test('5. enableFieldSetStyle属性控制CollapseGroup组件在Form中的样式',
   const totalCollections = container.querySelectorAll(
     '.cxd-CollapseGroup > .cxd-Collapse'
   );
-  const fieldsetStyledCollections = container.querySelectorAll(
+  const disabledStyleCollections = container.querySelectorAll(
-    '.cxd-CollapseGroup > .cxd-Collapse.cxd-Collapse--fieldset'
+    '.cxd-CollapseGroup > .cxd-Collapse-fieldset--disabled'
   );
 
   expect(totalCollections.length).toBe(4);
-  expect(fieldsetStyledCollections.length).toBe(2);
+  expect(disabledStyleCollections.length).toBe(2);
 })

packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Renderer:fieldSet 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--fieldset no-border"
+          class="cxd-Collapse is-active no-border"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -161,7 +161,7 @@ exports[`Renderer:fieldSet with mode 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--fieldset"
+          class="cxd-Collapse is-active"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -336,7 +336,7 @@ exports[`Renderer:fieldSet with mode 2`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--fieldset"
+          class="cxd-Collapse is-active"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -511,7 +511,7 @@ exports[`Renderer:fieldSet with mode 3`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--fieldset"
+          class="cxd-Collapse is-active"
         >
           <div
             class="cxd-Collapse-contentWrapper"
@@ -678,7 +678,7 @@ exports[`Renderer:fieldSet with titlePosition & collapseTitle & title 1`] = `
           type="submit"
         />
         <fieldset
-          class="cxd-Collapse is-active cxd-Collapse--title-bottom cxd-Collapse--fieldset"
+          class="cxd-Collapse is-active cxd-Collapse--title-bottom"
         >
           <div
             class="cxd-Collapse-contentWrapper"

packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`1. Renderer:Collapse 1`] = `
     class="cxd-CollapseGroup"
   >
     <div
-      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+      class="cxd-Collapse is-active"
     >
       <div
         class="cxd-Collapse-header"
@@ -48,7 +48,7 @@ exports[`1. Renderer:Collapse 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+      class="cxd-Collapse is-active"
     >
       <div
         class="cxd-Collapse-header"
@@ -90,7 +90,7 @@ exports[`1. Renderer:Collapse 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+      class="cxd-Collapse is-active"
     >
       <div
         class="cxd-Collapse-header"
@@ -142,7 +142,7 @@ exports[`3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1
     class="cxd-CollapseGroup icon-position-right"
   >
     <div
-      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+      class="cxd-Collapse is-active"
     >
       <div
         class="cxd-Collapse-header"
@@ -179,7 +179,7 @@ exports[`3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1
       </div>
     </div>
     <div
-      class="cxd-Collapse cxd-Collapse--fieldset"
+      class="cxd-Collapse"
     >
       <div
         class="cxd-Collapse-header"
@@ -216,7 +216,7 @@ exports[`3. Renderer:Collapse with expandIcon & expandIconPosition & showArrow 1
       </div>
     </div>
     <div
-      class="cxd-Collapse cxd-Collapse--fieldset"
+      class="cxd-Collapse"
     >
       <div
         class="cxd-Collapse-header"
@@ -259,7 +259,7 @@ exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
     class="cxd-CollapseGroup"
   >
     <div
-      class="cxd-Collapse is-active cxd-Collapse--fieldset"
+      class="cxd-Collapse is-active"
     >
       <div
         class="cxd-Collapse-header"
@@ -293,7 +293,7 @@ exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
               class="cxd-CollapseGroup"
             >
               <div
-                class="cxd-Collapse is-active cxd-Collapse--fieldset"
+                class="cxd-Collapse is-active"
               >
                 <div
                   class="cxd-Collapse-header"
@@ -340,7 +340,7 @@ exports[`4. Renderer:Collapse with disabled & panel nesting 1`] = `
       </div>
     </div>
     <div
-      class="cxd-Collapse cxd-Collapse--disabled cxd-Collapse--fieldset lastOne"
+      class="cxd-Collapse cxd-Collapse--disabled lastOne"
     >
       <div
         class="cxd-Collapse-header"