diff --git a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss index 39b459ea00..c65021df6d 100644 --- a/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss +++ b/src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss @@ -76,6 +76,9 @@ align-items: center; gap: var(--sbb-expansion-panel-title-gap); overflow: hidden; + + // Align with toggle icon + min-height: var(--sbb-size-icon-ui-medium); } .sbb-expansion-panel-header__toggle-icon { diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts index 9112a1b98d..8f52bd8221 100644 --- a/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts +++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.visual.spec.ts @@ -32,9 +32,10 @@ describe(`sbb-expansion-panel`, () => { const titleLevelCases = ['1', '4']; const iconCases = [ - { name: 'none', icon: undefined, slotted: false }, - { name: 'prop', icon: 'arrow-right-small', slotted: false }, - { name: 'slotted', icon: 'arrow-right-small', slotted: true }, + { name: 'none', icon: undefined, slotted: false, disabled: false }, + { name: 'none-disabled', icon: undefined, slotted: false, disabled: true }, + { name: 'prop', icon: 'arrow-right-small', slotted: false, disabled: false }, + { name: 'slotted', icon: 'arrow-right-small', slotted: true, disabled: false }, ]; describeViewports({ viewports: ['zero', 'medium'] }, () => { @@ -51,7 +52,7 @@ describe(`sbb-expansion-panel`, () => { Header - Content + Content `); }); @@ -74,7 +75,7 @@ describe(`sbb-expansion-panel`, () => { Header - Content + Content `); }); @@ -97,7 +98,7 @@ describe(`sbb-expansion-panel`, () => { Header - Content + Content `); }), @@ -110,11 +111,11 @@ describe(`sbb-expansion-panel`, () => { `icon=${state.name}`, visualDiffDefault.with(async (setup) => { await setup.withFixture(html` - + ${state.slotted ? html`` : nothing} Label - Content + Content `); }),