diff --git a/.changeset/fix-dialog-footer-button-height.md b/.changeset/fix-dialog-footer-button-height.md new file mode 100644 index 00000000000..65c0501dacc --- /dev/null +++ b/.changeset/fix-dialog-footer-button-height.md @@ -0,0 +1,5 @@ +--- +'@spectrum-web-components/dialog': patch +--- + +- **Fixed**: Prevented `` footer buttons from stretching when `footer` slot content wraps onto multiple lines. diff --git a/1st-gen/packages/dialog/src/spectrum-dialog.css b/1st-gen/packages/dialog/src/spectrum-dialog.css index 949b5ab3dca..5dbca7946d9 100644 --- a/1st-gen/packages/dialog/src/spectrum-dialog.css +++ b/1st-gen/packages/dialog/src/spectrum-dialog.css @@ -131,6 +131,7 @@ .button-group { display: flex; grid-area: buttonGroup; + align-self: end; justify-content: flex-end; padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); diff --git a/1st-gen/packages/dialog/test/dialog.test.ts b/1st-gen/packages/dialog/test/dialog.test.ts index d8d074136a0..7bb6ce94efb 100644 --- a/1st-gen/packages/dialog/test/dialog.test.ts +++ b/1st-gen/packages/dialog/test/dialog.test.ts @@ -22,6 +22,8 @@ import { spy } from 'sinon'; import { TemplateResult } from '@spectrum-web-components/base'; import { Dialog } from '@spectrum-web-components/dialog'; +import '@spectrum-web-components/button/sp-button.js'; +import '@spectrum-web-components/checkbox/sp-checkbox.js'; import '@spectrum-web-components/dialog/sp-dialog.js'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; @@ -69,6 +71,32 @@ describe('Dialog', () => { await expect(el).to.be.accessible(); }); + it('does not stretch buttons when footer content wraps', async () => { + const el = await fixture(html` + +

Disclaimer

+ Dialog content. + + I agree to the terms and conditions for this operation. + + + Confirm + +
+ `); + + await elementUpdated(el); + await nextFrame(); + + const footer = el.shadowRoot.querySelector('.footer') as HTMLElement; + const buttonGroup = el.shadowRoot.querySelector( + '.button-group' + ) as HTMLElement; + + expect(footer.getBoundingClientRect().height).to.be.greaterThan( + buttonGroup.getBoundingClientRect().height + ); + }); it('does not recycle applied content ids', async () => { const el = await fixture(html`