test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
RUNZE LU 2023-09-27 14:58:46 +08:00 committed by GitHub
parent ef97dab580
commit eba1b25e8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/amis-ui/scss/components/_collapse.scss
View File

@ -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);
}
}
}
/* 移动端样式调整 */

2
packages/amis-ui/src/components/Collapse.tsx
View File

@ -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
)}

6
packages/amis/__tests__/renderers/Collapse.test.tsx
View File

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

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

@ -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"

18
packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap
View File

@ -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"