Skip to content

Commit 353c193

Browse files
jounijouni
authored
experiment: add confirm-dialog base styles and visual tests (#9474)
1 parent fb233fa commit 353c193

File tree

12 files changed

+145
-15
lines changed

12 files changed

+145
-15
lines changed

‎dev/confirm-dialog.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Confirm dialog</title>
7+
<title>Confirm Dialog</title>
88
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
99
<script type="module" src="./common.js"></script>
1010

@@ -13,24 +13,30 @@
1313
</script>
1414
</head>
1515
<body>
16-
<vaadin-button id="open">Open</vaadin-button>
16+
<vaadin-button class="short">Short Message</vaadin-button>
17+
<vaadin-button class="long">Long Message</vaadin-button>
18+
19+
<vaadin-confirm-dialog class="short" header="Save Changes" confirm-text="Save" cancel-button-visible>
20+
Save or not?
21+
</vaadin-confirm-dialog>
1722

1823
<vaadin-confirm-dialog
19-
header="Unsaved changes"
24+
class="long"
25+
header="Unsaved Changes"
2026
confirm-text="Save"
2127
reject-text="Discard"
2228
cancel-button-visible
2329
reject-button-visible
2430
>
25-
Do you want to save or discard the changes?
31+
Do you want to save or discard the changes? That is the question. But whatever you choose, there will be no
32+
consequences.
2633
</vaadin-confirm-dialog>
2734

2835
<script>
29-
const dialog = document.querySelector('vaadin-confirm-dialog');
30-
const button = document.querySelector('#open');
31-
32-
button.addEventListener('click', (event) => {
33-
dialog.opened = true;
36+
document.querySelectorAll('vaadin-button').forEach((btn) => {
37+
btn.addEventListener('click', (e) => {
38+
document.querySelector(`vaadin-confirm-dialog.${btn.className}`).opened = true;
39+
});
3440
});
3541
</script>
3642
</body>

‎packages/confirm-dialog/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/styles/*-base-styles.d.ts",
25+
"!src/styles/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/confirm-dialog/src/styles/vaadin-confirm-dialog-overlay-base-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const confirmDialogOverlayStyles: CSSResult;

‎packages/confirm-dialog/src/styles/vaadin-confirm-dialog-overlay-base-styles.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
8+
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
9+
10+
const confirmDialogOverlay = css`
11+
@layer base {
12+
:host {
13+
--vaadin-dialog-min-width: var(--vaadin-confirm-dialog-min-width, 15em);
14+
--vaadin-dialog-max-width: var(--vaadin-confirm-dialog-max-width, 25em);
15+
}
16+
17+
::slotted([slot='header']) {
18+
display: contents;
19+
font: inherit !important;
20+
color: inherit !important;
21+
}
22+
23+
[part='header'] {
24+
color: var(--vaadin-dialog-title-color, var(--_vaadin-color-strong));
25+
font-weight: var(--vaadin-dialog-title-font-weight, 600);
26+
font-size: var(--vaadin-dialog-title-font-size, 1em);
27+
line-height: var(--vaadin-dialog-title-line-height, inherit);
28+
}
29+
30+
[part='overlay'] {
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
35+
[part='content'] {
36+
flex: 1;
37+
}
38+
39+
/* TODO remove this wrapper element */
40+
#resizerContainer {
41+
display: contents;
42+
}
43+
}
44+
`;
45+
46+
export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];

‎packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(CSSInject
3535
return confirmDialogOverlayStyles;
3636
}
3737

38+
static get properties() {
39+
return {
40+
cancelButtonVisible: {
41+
type: Boolean,
42+
value: false,
43+
},
44+
45+
rejectButtonVisible: {
46+
type: Boolean,
47+
value: false,
48+
},
49+
};
50+
}
51+
3852
/** @protected */
3953
render() {
4054
return html`
@@ -46,10 +60,10 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(CSSInject
4660
<div part="message"><slot></slot></div>
4761
</div>
4862
<footer part="footer" role="toolbar">
49-
<div part="cancel-button">
63+
<div part="cancel-button" ?hidden="${!this.cancelButtonVisible}">
5064
<slot name="cancel-button"></slot>
5165
</div>
52-
<div part="reject-button">
66+
<div part="reject-button" ?hidden="${!this.rejectButtonVisible}">
5367
<slot name="reject-button"></slot>
5468
</div>
5569
<div part="confirm-button">
@@ -121,6 +135,14 @@ class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropert
121135
type: String,
122136
value: '',
123137
},
138+
139+
cancelButtonVisible: {
140+
type: Boolean,
141+
},
142+
143+
rejectButtonVisible: {
144+
type: Boolean,
145+
},
124146
};
125147
}
126148

@@ -139,6 +161,8 @@ class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropert
139161
.withBackdrop="${!this.modeless}"
140162
?resizable="${this.resizable}"
141163
aria-label="${this.ariaLabel}"
164+
.cancelButtonVisible="${this.cancelButtonVisible}"
165+
.rejectButtonVisible="${this.rejectButtonVisible}"
142166
restore-focus-on-close
143167
focus-trap
144168
></vaadin-confirm-dialog-overlay>

‎packages/confirm-dialog/src/vaadin-confirm-dialog.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
8989
id="dialog"
9090
.opened="${this.opened}"
9191
.overlayClass="${this.overlayClass}"
92+
.cancelButtonVisible="${this.cancelButtonVisible}"
93+
.rejectButtonVisible="${this.rejectButtonVisible}"
9294
aria-label="${this.header || 'confirmation'}"
9395
theme="${ifDefined(this._theme)}"
9496
no-close-on-outside-click

‎packages/confirm-dialog/test/confirm-dialog.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -627,9 +627,9 @@ describe('vaadin-confirm-dialog', () => {
627627
it('should reset style after setting width to null', async () => {
628628
const originalWidth = getComputedStyle(overlay.$.overlay).width;
629629

630-
confirm.width = '500px';
630+
confirm.width = '300px';
631631
await nextRender();
632-
expect(getComputedStyle(overlay.$.overlay).width).to.equal('500px');
632+
expect(getComputedStyle(overlay.$.overlay).width).to.equal('300px');
633633

634634
confirm.width = null;
635635
await nextRender();
@@ -668,13 +668,13 @@ describe('vaadin-confirm-dialog', () => {
668668
});
669669

670670
it('should update width after opening the dialog', async () => {
671-
confirm.width = '200px';
671+
confirm.width = '300px';
672672
document.body.appendChild(confirm);
673673
await nextRender();
674674
overlay = confirm.$.dialog.$.overlay;
675675
confirm.opened = true;
676676
await oneEvent(overlay, 'vaadin-overlay-open');
677-
expect(getComputedStyle(overlay.$.overlay).width).to.be.equal('200px');
677+
expect(getComputedStyle(overlay.$.overlay).width).to.be.equal('300px');
678678
});
679679

680680
it('should update height after opening the dialog', async () => {

‎packages/confirm-dialog/test/visual/base/confirm-dialog.test.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../src/vaadin-confirm-dialog.js';
4+
5+
describe('confirm-dialog', () => {
6+
let div, element;
7+
8+
beforeEach(async () => {
9+
div = document.createElement('div');
10+
div.style.height = '100%';
11+
12+
element = fixtureSync(
13+
`
14+
<vaadin-confirm-dialog header="Action required" opened>
15+
Please press a button to confirm.
16+
</vaadin-confirm-dialog>
17+
`,
18+
div,
19+
);
20+
await oneEvent(element.$.dialog.$.overlay, 'vaadin-overlay-open');
21+
});
22+
23+
it('basic', async () => {
24+
await visualDiff(div, 'basic');
25+
});
26+
27+
it('cancel', async () => {
28+
element.cancelButtonVisible = true;
29+
await visualDiff(div, 'cancel');
30+
});
31+
32+
it('reject', async () => {
33+
element.rejectButtonVisible = true;
34+
await visualDiff(div, 'reject');
35+
});
36+
37+
it('cancel reject', async () => {
38+
element.cancelButtonVisible = true;
39+
element.rejectButtonVisible = true;
40+
await visualDiff(div, 'cancel-reject');
41+
});
42+
});

‎packages/confirm-dialog/test/visual/base/screenshots/confirm-dialog/baseline/basic.png‎

10.8 KB
Loading

‎packages/confirm-dialog/test/visual/base/screenshots/confirm-dialog/baseline/cancel-reject.png‎

11.9 KB
Loading

0 commit comments

Comments
 (0)