diff --git a/packages/toast/README.md b/packages/toast/README.md index 2c11a9cfe1..86c661ced7 100644 --- a/packages/toast/README.md +++ b/packages/toast/README.md @@ -1,6 +1,6 @@ ## Description -`sp-toast`s display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken. +`sp-toast` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken. ### Usage @@ -28,13 +28,15 @@ import { Toast } from '@spectrum-web-components/toast'; ### Default ```html -This is important information that you should read, soon. + + This is important information that you should read, soon. + ``` ### With actions ```html - + This is important information that you should read, soon. Do something @@ -45,7 +47,7 @@ import { Toast } from '@spectrum-web-components/toast'; ### Wrapping ```html - + This is important information that you should read, soon. Do something @@ -58,7 +60,7 @@ import { Toast } from '@spectrum-web-components/toast'; #### Negative ```html - + This is negative information that you should read, soon. ``` @@ -66,7 +68,7 @@ import { Toast } from '@spectrum-web-components/toast'; #### Positive ```html - + This is positive information that you should read, soon. ``` @@ -74,7 +76,9 @@ import { Toast } from '@spectrum-web-components/toast'; #### Info ```html -This is information that you should read. + + This is information that you should read. + ``` ## Accessibility diff --git a/packages/toast/src/Toast.ts b/packages/toast/src/Toast.ts index 25f165030b..de7c86f6db 100644 --- a/packages/toast/src/Toast.ts +++ b/packages/toast/src/Toast.ts @@ -208,18 +208,15 @@ export class Toast extends SpectrumElement { `; } - protected firstUpdated(changes: PropertyValues): void { - super.firstUpdated(changes); - this.open = true; - } - protected updated(changes: PropertyValues): void { super.updated(changes); - if (changes.has('open') && this.timeout) { - if (this.open) { + if (changes.has('open')) { + if (this.open && this.timeout) { this.startCountdown(); } else { - this.stopCountdown(); + if (this.timeout) { + this.stopCountdown(); + } const applyDefault = this.dispatchEvent( new CustomEvent('close', { composed: true, diff --git a/packages/toast/test/toast.test.ts b/packages/toast/test/toast.test.ts index b49ee61b3f..d60a401acb 100644 --- a/packages/toast/test/toast.test.ts +++ b/packages/toast/test/toast.test.ts @@ -18,6 +18,7 @@ import { html, expect, nextFrame, + waitUntil, } from '@open-wc/testing'; import { ClearButton } from '@spectrum-web-components/button'; import { waitForPredicate } from '../../../test/testing-helpers.js'; @@ -62,9 +63,11 @@ describe('Toast', () => { ); await elementUpdated(el); - expect(el.open).to.be.true; + expect(el.open).to.be.false; ((el as unknown) as TestableToast)._timeout = 100; + el.open = true; + await elementUpdated(el); await waitForPredicate(() => el.open === false); expect(el.open).to.be.false; @@ -77,10 +80,13 @@ describe('Toast', () => { ); await elementUpdated(el); - expect(el.open).to.be.true; + expect(el.open).to.be.false; const testableEl = (el as unknown) as TestableToast; testableEl._timeout = 100; + el.open = true; + await elementUpdated(el); + const firstStart = testableEl.countdownStart; await nextFrame(); @@ -112,13 +118,18 @@ describe('Toast', () => { ); await elementUpdated(el); - await nextFrame(); const testableEl = (el as unknown) as TestableToast; - expect(el.open).to.be.true; + expect(el.open, 'not open to start').to.be.false; + + el.open = true; + await elementUpdated(el); + await nextFrame(); + expect(testableEl.countdownStart, 'initially not 0').to.not.equal(0); testableEl._timeout = 100; + el.dispatchEvent(new FocusEvent('focusin')); await elementUpdated(el); @@ -131,13 +142,13 @@ describe('Toast', () => { 0 ); - await waitForPredicate(() => el.open === false); - expect(el.open).to.be.false; + await waitUntil(() => el.open === false, 'closes'); + expect(el.open, 'not open to end').to.be.false; }); it('closes', async () => { const el = await fixture( html` - Help text. + Help text. ` ); @@ -198,4 +209,26 @@ describe('Toast', () => { await elementUpdated(el); expect(el.variant).to.equal(toastVariants[0]); }); + it('maintains [variant] when disconnected/connected', async () => { + const el = await fixture( + html` + + This toast maintains variants. + + ` + ); + + await elementUpdated(el); + expect(el.variant).to.equal('positive'); + + el.remove(); + + await elementUpdated(el); + expect(el.variant).to.equal('positive'); + + document.body.append(el); + + await elementUpdated(el); + expect(el.variant).to.equal('positive'); + }); });