Skip to content

Commit 591b644

Browse files
web-padawanweb-padawan
authored
refactor: update OverlayMixin properties to use sync: true (#8226)
1 parent be6a81c commit 591b644

15 files changed

+89
-300
lines changed

‎packages/avatar-group/src/vaadin-lit-avatar-group-overlay.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,6 @@ class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMix
3232
return overlayStyles;
3333
}
3434

35-
static get properties() {
36-
return {
37-
/**
38-
* When true, the overlay is visible and attached to body.
39-
* This property config is overridden to set `sync: true`.
40-
*/
41-
opened: {
42-
type: Boolean,
43-
notify: true,
44-
observer: '_openedChanged',
45-
reflectToAttribute: true,
46-
sync: true,
47-
},
48-
};
49-
}
50-
5135
/** @protected */
5236
render() {
5337
return html`

‎packages/combo-box/src/vaadin-lit-combo-box-overlay.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,6 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(
4545
return [overlayStyles, comboBoxOverlayStyles, comboBoxOverlayStyles];
4646
}
4747

48-
static get properties() {
49-
return {
50-
/**
51-
* When true, the overlay is visible and attached to body.
52-
* This property config is overridden to set `sync: true`.
53-
*/
54-
opened: {
55-
type: Boolean,
56-
notify: true,
57-
observer: '_openedChanged',
58-
reflectToAttribute: true,
59-
sync: true,
60-
},
61-
};
62-
}
63-
6448
/** @protected */
6549
render() {
6650
return html`

‎packages/context-menu/src/vaadin-lit-context-menu-overlay.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,6 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
3131
return 'vaadin-context-menu-overlay';
3232
}
3333

34-
static get properties() {
35-
return {
36-
/**
37-
* When true, the overlay is visible and attached to body.
38-
* This property config is overridden to set `sync: true`.
39-
*/
40-
opened: {
41-
type: Boolean,
42-
notify: true,
43-
observer: '_openedChanged',
44-
reflectToAttribute: true,
45-
sync: true,
46-
},
47-
};
48-
}
49-
5034
static get styles() {
5135
return [overlayStyles, styles];
5236
}

‎packages/date-picker/src/vaadin-lit-date-picker-overlay.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,6 @@ class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(Po
3030
return [overlayStyles, datePickerOverlayStyles];
3131
}
3232

33-
static get properties() {
34-
return {
35-
/**
36-
* When true, the overlay is visible and attached to body.
37-
* This property config is overridden to set `sync: true`.
38-
*/
39-
opened: {
40-
type: Boolean,
41-
notify: true,
42-
observer: '_openedChanged',
43-
reflectToAttribute: true,
44-
sync: true,
45-
},
46-
};
47-
}
48-
4933
/** @protected */
5034
render() {
5135
return html`

‎packages/menu-bar/src/vaadin-lit-menu-bar-overlay.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,6 @@ export class MenuBarOverlay extends MenuOverlayMixin(OverlayMixin(DirMixin(Thema
2929
return 'vaadin-menu-bar-overlay';
3030
}
3131

32-
static get properties() {
33-
return {
34-
/**
35-
* When true, the overlay is visible and attached to body.
36-
* This property config is overridden to set `sync: true`.
37-
*/
38-
opened: {
39-
type: Boolean,
40-
notify: true,
41-
observer: '_openedChanged',
42-
reflectToAttribute: true,
43-
sync: true,
44-
},
45-
};
46-
}
47-
4832
static get styles() {
4933
return [overlayStyles, styles];
5034
}

‎packages/overlay/src/vaadin-overlay-mixin.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const OverlayMixin = (superClass) =>
2525
notify: true,
2626
observer: '_openedChanged',
2727
reflectToAttribute: true,
28+
sync: true,
2829
},
2930

3031
/**
@@ -33,13 +34,15 @@ export const OverlayMixin = (superClass) =>
3334
*/
3435
owner: {
3536
type: Object,
37+
sync: true,
3638
},
3739

3840
/**
3941
* Object with properties that is passed to `renderer` function
4042
*/
4143
model: {
4244
type: Object,
45+
sync: true,
4346
},
4447

4548
/**
@@ -53,6 +56,7 @@ export const OverlayMixin = (superClass) =>
5356
*/
5457
renderer: {
5558
type: Object,
59+
sync: true,
5660
},
5761

5862
/**
@@ -65,6 +69,7 @@ export const OverlayMixin = (superClass) =>
6569
value: false,
6670
reflectToAttribute: true,
6771
observer: '_modelessChanged',
72+
sync: true,
6873
},
6974

7075
/**
@@ -76,6 +81,7 @@ export const OverlayMixin = (superClass) =>
7681
type: Boolean,
7782
reflectToAttribute: true,
7883
observer: '_hiddenChanged',
84+
sync: true,
7985
},
8086

8187
/**
@@ -86,6 +92,7 @@ export const OverlayMixin = (superClass) =>
8692
type: Boolean,
8793
value: false,
8894
reflectToAttribute: true,
95+
sync: true,
8996
},
9097
};
9198
}

‎packages/overlay/test/animations.common.js

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -121,81 +121,64 @@ function afterOverlayClosingFinished(overlay, callback) {
121121
await nextRender();
122122
});
123123

124-
afterEach(async () => {
124+
afterEach(() => {
125125
overlay.opened = false;
126-
await nextRender();
127126
});
128127

129-
it('should flush closing overlay when re-opened while closing animation is in progress', async () => {
128+
it('should flush closing overlay when re-opened while closing animation is in progress', () => {
130129
overlay.opened = true;
131-
await nextRender();
132130
overlay._flushAnimation('opening');
133131

134132
overlay.opened = false;
135-
await nextRender();
136133

137134
overlay.opened = true;
138-
await nextRender();
139135

140136
expect(overlay.hasAttribute('closing')).to.be.false;
141137
});
142138

143-
it('should flush opening overlay when closed while opening animation is in progress', async () => {
139+
it('should flush opening overlay when closed while opening animation is in progress', () => {
144140
overlay.opened = true;
145-
await nextRender();
146141

147142
overlay.opened = false;
148-
await nextRender();
149143

150144
expect(overlay.hasAttribute('opening')).to.be.false;
151145
});
152146

153-
it('should detach the overlay even if it is scheduled for reopening', async () => {
147+
it('should detach the overlay even if it is scheduled for reopening', () => {
154148
overlay.opened = true;
155-
await nextRender();
156149

157150
overlay.opened = false;
158-
await nextRender();
159151

160152
overlay.opened = true;
161-
await nextRender();
162153

163154
overlay.opened = false;
164-
await nextRender();
165155
overlay._flushAnimation('closing');
166156

167157
expect(overlay.parentNode).not.to.equal(document.body);
168158
});
169159

170-
it('should not animate closing if the overlay is explicitly hidden', async () => {
160+
it('should not animate closing if the overlay is explicitly hidden', () => {
171161
overlay.opened = true;
172-
await nextRender();
173162

174163
overlay.hidden = true;
175-
await nextRender();
176164

177165
overlay.opened = false;
178-
await nextRender();
179166

180167
expect(overlay.parentNode).not.to.equal(document.body);
181168
});
182169

183-
it('should close the overlay if hidden is set while closing', async () => {
170+
it('should close the overlay if hidden is set while closing', () => {
184171
overlay.opened = true;
185-
await nextRender();
186172

187173
overlay.opened = false;
188-
await nextRender();
189174

190175
overlay.hidden = true;
191-
await nextRender();
192176

193177
expect(overlay.parentNode).not.to.equal(document.body);
194178
});
195179

196-
it('should close the overlay when ESC pressed while opening', async () => {
180+
it('should close the overlay when ESC pressed while opening', () => {
197181
overlay.opened = true;
198-
await nextRender();
199182
escKeyDown(document.body);
200183
expect(overlay.opened).to.equal(false);
201184
});
@@ -214,11 +197,10 @@ function afterOverlayClosingFinished(overlay, callback) {
214197
overlays[0].opened = true;
215198
});
216199

217-
afterEach(async () => {
200+
afterEach(() => {
218201
overlays.forEach((overlay) => {
219202
overlay.opened = false;
220203
});
221-
await nextRender();
222204
});
223205

224206
it('should remove pointer events on previously opened overlay', (done) => {
@@ -242,11 +224,10 @@ function afterOverlayClosingFinished(overlay, callback) {
242224
}
243225
});
244226

245-
afterEach(async () => {
227+
afterEach(() => {
246228
overlays.forEach((overlay) => {
247229
overlay.opened = false;
248230
});
249-
await nextRender();
250231
});
251232

252233
it('should not remove pointer events on last opened overlay', (done) => {
@@ -275,11 +256,10 @@ function afterOverlayClosingFinished(overlay, callback) {
275256
}
276257
});
277258

278-
afterEach(async () => {
259+
afterEach(() => {
279260
overlays.forEach((overlay) => {
280261
overlay.opened = false;
281262
});
282-
await nextRender();
283263
});
284264

285265
it('should restore pointer events on the remaining overlay', (done) => {
@@ -330,11 +310,10 @@ function afterOverlayClosingFinished(overlay, callback) {
330310
}
331311
});
332312

333-
afterEach(async () => {
313+
afterEach(() => {
334314
overlays.forEach((overlay) => {
335315
overlay.opened = false;
336316
});
337-
await nextRender();
338317
});
339318

340319
it('should not remove pointer events on last opened overlay', (done) => {

0 commit comments

Comments
 (0)