Skip to content

Commit 7f5a2ac

Browse files
iOvergaardiOvergaard
authored
Merge pull request #137 from umbraco/feature/uui-toast-notification-animation-duration
use --uui-toast-notification-animation-duration for transition duration
2 parents 975a57d + 6a7e30e commit 7f5a2ac

File tree

3 files changed

+81
-22
lines changed

3 files changed

+81
-22
lines changed

‎packages/uui-toast-notification-container/lib/uui-toast-notification-container.test.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { UUIToastNotificationContainerElement } from './uui-toast-notification-c
1919
function sleep(ms: number) {
2020
return new Promise(resolve => setTimeout(resolve, ms));
2121
}
22+
const ANIMATION_DURATION = 25;
2223

2324
describe('UUIToastNotificationContainerElement', () => {
2425
let element: UUIToastNotificationContainerElement;
@@ -30,6 +31,11 @@ describe('UUIToastNotificationContainerElement', () => {
3031
<uui-toast-notification-container></uui-toast-notification-container>
3132
`
3233
);
34+
// Set the prop on the container, we will use it to test that it inherits to the children.
35+
element.style.setProperty(
36+
'--uui-toast-notification-animation-duration',
37+
ANIMATION_DURATION + 'ms'
38+
);
3339
toastElement = await fixture(
3440
html` <uui-toast-notification></uui-toast-notification> `
3541
);
@@ -49,13 +55,10 @@ describe('UUIToastNotificationContainerElement', () => {
4955
it('has a removeToast method', () => {
5056
expect(element).to.have.property('removeToast').that.is.a('function');
5157
});
52-
// TODO: test the method
5358

5459
it('has a closeToast method', () => {
5560
expect(element).to.have.property('closeToast').that.is.a('function');
5661
});
57-
58-
// TODO: Test the method
5962
});
6063

6164
describe('template', () => {
@@ -65,14 +68,23 @@ describe('UUIToastNotificationContainerElement', () => {
6568
});
6669
});
6770

68-
// Test appending a toast will open automatically.
6971
describe('child toast notifications', () => {
72+
it('appended toast notification inherits the animation duration custom property', async () => {
73+
element.appendChild(toastElement);
74+
75+
await elementUpdated(element);
76+
expect(
77+
getComputedStyle(toastElement).getPropertyValue(
78+
'--uui-toast-notification-animation-duration'
79+
)
80+
).to.be.equal(ANIMATION_DURATION + 'ms');
81+
});
82+
7083
it('appended toast notification will open automatically', async () => {
7184
element.appendChild(toastElement);
7285

7386
await elementUpdated(element);
7487

75-
//await sleep(100); // wait a bit.
7688
expect(toastElement.open).to.be.true;
7789
});
7890

‎packages/uui-toast-notification/lib/uui-toast-notification.element.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export class UUIToastNotificationElement extends LitElement {
3838
height: 0;
3939
pointer-events: none;
4040
41-
transition: height 480ms ease-in-out;
41+
transition: height
42+
var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;
4243
}
4344
:host([is-open]) {
4445
pointer-events: all;
@@ -74,7 +75,8 @@ export class UUIToastNotificationElement extends LitElement {
7475
border-radius: calc(var(--uui-border-radius) * 2);
7576
7677
opacity: 0;
77-
transition: opacity 480ms;
78+
transition: opacity
79+
var(--uui-toast-notification-animation-duration, 480ms);
7880
}
7981
:host([is-open]) #toast > div {
8082
opacity: 1;
@@ -230,6 +232,17 @@ export class UUIToastNotificationElement extends LitElement {
230232
demandCustomElement(this, 'uui-icon');
231233
}
232234

235+
private _getAnimationDuration(): number {
236+
return (
237+
parseInt(
238+
getComputedStyle(this).getPropertyValue(
239+
'--uui-toast-notification-animation-duration'
240+
),
241+
10
242+
) || 480
243+
);
244+
}
245+
233246
private _requestAnimationUpdate = 0;
234247
private _makeOpen() {
235248
if (this._open === true) {
@@ -265,7 +278,7 @@ export class UUIToastNotificationElement extends LitElement {
265278
new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED)
266279
);
267280
}
268-
}, 480);
281+
}, this._getAnimationDuration());
269282
});
270283
});
271284
}
@@ -312,7 +325,7 @@ export class UUIToastNotificationElement extends LitElement {
312325
this.parentNode.removeChild(this);
313326
}
314327
}
315-
}, 480);
328+
}, this._getAnimationDuration());
316329
});
317330
}
318331
}

‎packages/uui-toast-notification/lib/uui-toast-notification.test.ts

Lines changed: 47 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@ function sleep(ms: number) {
1818
return new Promise(resolve => setTimeout(resolve, ms));
1919
}
2020

21+
const ANIMATION_DURATION: number = 25; // still needs to be some time, otherwise it goes too fast for the rendering and the test to work properly.
22+
2123
describe('UUIToastNotificationElement', () => {
2224
let element: UUIToastNotificationElement;
2325

2426
beforeEach(async () => {
2527
element = await fixture(
2628
html` <uui-toast-notification></uui-toast-notification> `
2729
);
30+
element.style.setProperty(
31+
'--uui-toast-notification-animation-duration',
32+
ANIMATION_DURATION + 'ms'
33+
);
2834
});
2935

3036
it('passes the a11y audit', async () => {
@@ -50,6 +56,14 @@ describe('UUIToastNotificationElement', () => {
5056
it('has a resumeAutoClose method', () => {
5157
expect(element).to.have.property('resumeAutoClose').that.is.a('function');
5258
});
59+
it('private _getAnimationDuration', () => {
60+
expect(element)
61+
.to.have.property('_getAnimationDuration')
62+
.that.is.a('function');
63+
expect((element as any)._getAnimationDuration()).to.be.equal(
64+
ANIMATION_DURATION
65+
);
66+
});
5367
});
5468

5569
describe('template', () => {
@@ -73,13 +87,22 @@ describe('UUIToastNotificationElement', () => {
7387

7488
describe('closing', () => {
7589
it('emits a closing event when elements starts to closing', async () => {
90+
const openedListener = oneEvent(
91+
element,
92+
UUIToastNotificationEvent.OPENED
93+
);
94+
const closingListener = oneEvent(
95+
element,
96+
UUIToastNotificationEvent.CLOSING
97+
);
98+
7699
element.open = true;
77-
await elementUpdated(element);
78-
const listener = oneEvent(element, UUIToastNotificationEvent.CLOSING);
79-
await sleep(600); // enough time for opening-animation to be done.
100+
await openedListener;
101+
80102
expect(element.open).to.be.true;
81103
element.open = false;
82-
const event = await listener;
104+
const event = await closingListener;
105+
83106
expect(event).to.exist;
84107
expect(event.type).to.equal(UUIToastNotificationEvent.CLOSING);
85108
expect(element.open).to.be.false;
@@ -88,7 +111,7 @@ describe('UUIToastNotificationElement', () => {
88111
element.open = true;
89112
await elementUpdated(element);
90113
const listener = oneEvent(element, UUIToastNotificationEvent.CLOSING);
91-
await sleep(100); // enough time for the rendering and opening-animation to start.
114+
await sleep(ANIMATION_DURATION / 2); // enough time for the rendering and opening-animation to start, but not finished.
92115
expect(element.open).to.be.true;
93116
element.open = false;
94117
const event = await listener;
@@ -103,7 +126,7 @@ describe('UUIToastNotificationElement', () => {
103126
element.addEventListener(UUIToastNotificationEvent.CLOSING, e => {
104127
e.preventDefault();
105128
});
106-
await sleep(100); // enough time for the rendering and opening-animation to start.
129+
await sleep(ANIMATION_DURATION / 2); // enough time for the rendering and opening-animation to start, but not finished.
107130
expect(element.open).to.be.true;
108131
element.open = false;
109132
const event = await listener;
@@ -114,22 +137,33 @@ describe('UUIToastNotificationElement', () => {
114137
});
115138
describe('closed', () => {
116139
it('emits a opening event when elements is closed', async () => {
117-
element.open = true;
118-
await elementUpdated(element);
140+
const openedListener = oneEvent(
141+
element,
142+
UUIToastNotificationEvent.OPENED
143+
);
119144
const listener = oneEvent(element, UUIToastNotificationEvent.CLOSED);
120-
await sleep(600); // enough time for opening-animation to be done.
145+
146+
element.open = true;
147+
await openedListener;
148+
121149
expect(element.open).to.be.true;
150+
122151
element.open = false;
123152
const event = await listener;
124153
expect(event).to.exist;
125154
expect(event.type).to.equal(UUIToastNotificationEvent.CLOSED);
126155
expect(element.open).to.be.false;
127156
});
128157
it('emits a close event though toast is still running its opening-animation', async () => {
129-
element.open = true;
130-
await elementUpdated(element);
158+
const openedListener = oneEvent(
159+
element,
160+
UUIToastNotificationEvent.OPENED
161+
);
131162
const listener = oneEvent(element, UUIToastNotificationEvent.CLOSED);
132-
await sleep(100); // enough time for the rendering and opening-animation to start.
163+
164+
element.open = true;
165+
await openedListener;
166+
133167
expect(element.open).to.be.true;
134168
element.open = false;
135169
const event = await listener;
@@ -151,7 +185,7 @@ describe('UUIToastNotificationElement', () => {
151185
expect(openEvent.type).to.equal(UUIToastNotificationEvent.OPENING);
152186
expect(element.open).to.be.true;
153187

154-
await sleep(100); // enough time for the rendering and opening-animation to start.
188+
await sleep(ANIMATION_DURATION / 2); // enough time for the rendering and opening-animation to start, but not finished.
155189

156190
const closeListener = oneEvent(
157191
element,

0 commit comments

Comments
 (0)