Skip to content

fix(dialog): adjust button alignment in footer and add test for button stretch behavior #6229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JinMokai wants to merge 4 commits into
base: main
Choose a base branch
from
+34 −0
Open

fix(dialog): adjust button alignment in footer and add test for button stretch behavior #6229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c6c5ff
fix(dialog): adjust button alignment in footer and add test for butto…
JinMokai May 3, 2026
7368a32
fix(dialog): prevent footer buttons from stretching when content wraps
JinMokai May 4, 2026
5838c0d
Merge branch 'main' into fix/dialog-footer-button-height-5905
JinMokai May 6, 2026
91cb1b4
Merge branch 'main' into fix/dialog-footer-button-height-5905
Rajdeepc May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-dialog-footer-button-height.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@spectrum-web-components/dialog': patch
---

- **Fixed**: Prevented `<sp-dialog>` footer buttons from stretching when `footer` slot content wraps onto multiple lines.
1 change: 1 addition & 0 deletions 1st-gen/packages/dialog/src/spectrum-dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
28 changes: 28 additions & 0 deletions 1st-gen/packages/dialog/test/dialog.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<Dialog>(html`
<sp-dialog size="s" style="--mod-dialog-confirm-small-width: 320px;">
<h2 slot="heading">Disclaimer</h2>
Dialog content.
<sp-checkbox slot="footer" style="inline-size: 110px;">
I agree to the terms and conditions for this operation.
</sp-checkbox>
<sp-button slot="button" variant="accent" treatment="fill">
Confirm
</sp-button>
</sp-dialog>
`);

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<Dialog>(html`
<sp-dialog size="s">
Expand Down
Loading