From 1873b540aa2253c82943a6a7c2bfb14a3d9dfcb8 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 17 Jul 2024 09:28:49 +0200 Subject: [PATCH 1/5] docs(sbb-alert): add close fade-out animation --- .../alert-group.snapshot.spec.snap.js | 4 +- .../alert/alert-group/alert-group.spec.ts | 3 +- src/elements/alert/alert-group/alert-group.ts | 27 +++++---- .../__snapshots__/alert.snapshot.spec.snap.js | 4 +- src/elements/alert/alert/alert.scss | 42 +++++++++++++- src/elements/alert/alert/alert.spec.ts | 16 ++++- src/elements/alert/alert/alert.stories.ts | 8 ++- src/elements/alert/alert/alert.ts | 58 +++++++++++++++---- src/elements/alert/alert/readme.md | 15 +++-- 9 files changed, 137 insertions(+), 40 deletions(-) diff --git a/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js b/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js index dfb3a4d562..6dff5f3b84 100644 --- a/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js +++ b/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js @@ -8,7 +8,7 @@ snapshots["sbb-alert-group renders DOM"] = role="status" > { .shadowRoot!.querySelector( '.sbb-alert__close-button-wrapper sbb-transparent-button', )!; - closeButton.focus(); closeButton.click(); await waitForLitRender(element); @@ -73,6 +72,8 @@ describe(`sbb-alert-group`, () => { // Then the alert should be removed from sbb-alert-group, tabindex should be set to 0, // focus should be on sbb-alert-group, accessibility title should be removed and empty event should be fired. + await waitForCondition(() => didDismissAlertSpy.events.length === 2); + expect(didDismissAlertSpy.count).to.be.equal(2); expect(element.querySelectorAll('sbb-alert').length).to.be.equal(0); expect(element.tabIndex).to.be.equal(0); expect(document.activeElement!.id).to.be.equal(alertGroupId); diff --git a/src/elements/alert/alert-group/alert-group.ts b/src/elements/alert/alert-group/alert-group.ts index 26d926862a..cd48a7b026 100644 --- a/src/elements/alert/alert-group/alert-group.ts +++ b/src/elements/alert/alert-group/alert-group.ts @@ -57,11 +57,24 @@ export class SbbAlertGroupElement extends SbbHydrationMixin(LitElement) { private _abort = new SbbConnectedAbortController(this); - private _removeAlert(event: Event): void { + public override connectedCallback(): void { + super.connectedCallback(); + const signal = this._abort.signal; + this.addEventListener( + SbbAlertElement.events.dismissalRequested, + (e) => (e.target as SbbAlertElement).close(), + { + signal, + }, + ); + this.addEventListener(SbbAlertElement.events.didClose, (e) => this._alertClosed(e), { + signal, + }); + } + + private _alertClosed(event: Event): void { const target = event.target as SbbAlertElement; const hasFocusInsideAlertGroup = document.activeElement === target; - - target.parentNode?.removeChild(target); this._didDismissAlert.emit(target); // Restore focus @@ -77,14 +90,6 @@ export class SbbAlertGroupElement extends SbbHydrationMixin(LitElement) { } } - public override connectedCallback(): void { - super.connectedCallback(); - const signal = this._abort.signal; - this.addEventListener(SbbAlertElement.events.dismissalRequested, (e) => this._removeAlert(e), { - signal, - }); - } - private _slotChanged(event: Event): void { const hadAlerts = this._hasAlerts; this._hasAlerts = diff --git a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js index d8f2d7bd65..9635bb92e5 100644 --- a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js +++ b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js @@ -3,7 +3,7 @@ export const snapshots = {}; snapshots["sbb-alert should render default properties DOM"] = ` { it('should fire animation events', async () => { const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen); const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen); + const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose); + const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose); + const dismissalSpy = new EventSpy(SbbAlertElement.events.dismissalRequested); - await fixture(html`Interruption`); + const alert: SbbAlertElement = await fixture( + html`Interruption`, + ); await waitForCondition(() => willOpenSpy.events.length === 1); expect(willOpenSpy.count).to.be.equal(1); await waitForCondition(() => didOpenSpy.events.length === 1); expect(didOpenSpy.count).to.be.equal(1); + + alert.requestDismissal(); + expect(dismissalSpy.count).to.be.equal(1); + + alert.close(); + + await waitForCondition(() => didCloseSpy.events.length === 1); + expect(willCloseSpy.count).to.be.equal(1); + expect(didCloseSpy.count).to.be.equal(1); }); it('should hide close button in readonly mode', async () => { diff --git a/src/elements/alert/alert/alert.stories.ts b/src/elements/alert/alert/alert.stories.ts index 334561110d..f3db653536 100644 --- a/src/elements/alert/alert/alert.stories.ts +++ b/src/elements/alert/alert/alert.stories.ts @@ -10,7 +10,11 @@ import { SbbAlertElement } from './alert.js'; import readme from './readme.md?raw'; const Default = ({ 'content-slot-text': contentSlotText, ...args }: Args): TemplateResult => html` - ${contentSlotText} + (e.target! as SbbAlertElement).close()} + >${contentSlotText} `; const DefaultWithOtherContent = (args: Args): TemplateResult => { @@ -134,7 +138,7 @@ const animation: InputType = { control: { type: 'inline-radio', }, - options: ['open', 'none'], + options: ['all', 'open', 'close', 'none'], }; const defaultArgTypes: ArgTypes = { diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index fd1866d8e9..644482216e 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -23,8 +23,6 @@ import '../../divider.js'; import '../../link.js'; import '../../title.js'; -type SbbAlertState = Exclude; - /** * It displays messages which require user's attention. * @@ -33,6 +31,8 @@ type SbbAlertState = Exclude; * @slot title - Title content. * @event {CustomEvent} willOpen - Emits when the fade in animation starts. * @event {CustomEvent} didOpen - Emits when the fade in animation ends and the button is displayed. + * @event {CustomEvent} willClose - Emits whenever the `sbb-notification` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-notification` is closed. * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') @@ -41,6 +41,8 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { public static readonly events = { willOpen: 'willOpen', didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', dismissalRequested: 'dismissalRequested', } as const; @@ -82,15 +84,15 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined; /** The enabled animations. */ - @property({ reflect: true }) public animation: 'open' | 'none' = 'open'; + @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all'; /** The state of the alert. */ - private get _state(): SbbAlertState { - return (this.getAttribute('data-state') as SbbAlertState | null) ?? 'closed'; - } - private set _state(value: SbbAlertState) { + private set _state(value: SbbOpenedClosedState) { this.setAttribute('data-state', value); } + private get _state(): SbbOpenedClosedState { + return this.getAttribute('data-state') as SbbOpenedClosedState; + } /** Emits when the fade in animation starts. */ private _willOpen: EventEmitter = new EventEmitter(this, SbbAlertElement.events.willOpen); @@ -98,7 +100,16 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { /** Emits when the fade in animation ends and the button is displayed. */ private _didOpen: EventEmitter = new EventEmitter(this, SbbAlertElement.events.didOpen); - /** Emits when dismissal of an alert was requested. */ + /** Emits whenever the `sbb-notification` begins the closing transition. */ + private _willClose: EventEmitter = new EventEmitter(this, SbbAlertElement.events.willClose); + + /** Emits whenever the `sbb-notification` is closed. */ + private _didClose: EventEmitter = new EventEmitter(this, SbbAlertElement.events.didClose); + + /** + * @deprecated + * Emits when dismissal of an alert was requested. + */ private _dismissalRequested: EventEmitter = new EventEmitter( this, SbbAlertElement.events.dismissalRequested, @@ -112,24 +123,47 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { this._open(); } - /** Requests dismissal of the alert. */ + /** Requests dismissal of the alert. + * @deprecated in favour of 'willClose' and 'didClose' events + */ public requestDismissal(): void { this._dismissalRequested.emit(); } + /** Close the alert. */ + public close(): void { + if (this._willClose.emit()) { + this._state = 'closing'; + } + } + /** Open the alert. */ private _open(): void { - this._state = 'opening'; this._willOpen.emit(); + this._state = 'opening'; } private _onAnimationEnd(event: AnimationEvent): void { if (this._state === 'opening' && event.animationName === 'open-opacity') { - this._state = 'opened'; - this._didOpen.emit(); + this._handleOpening(); + } + + if (this._state === 'closing' && event.animationName === 'close') { + this._handleClosing(); } } + private _handleOpening(): void { + this._state = 'opened'; + this._didOpen.emit(); + } + + private _handleClosing(): void { + this._state = 'closed'; + this._didClose.emit(); + setTimeout(() => this.remove()); + } + protected override render(): TemplateResult { return html`
diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index 8f4a8b2f9a..487f81f8e2 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -85,7 +85,7 @@ As a base rule, opening animations should be active if an alert arrives after th | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | -| `animation` | `animation` | public | `'open' \| 'none'` | `'open'` | The enabled animations. | +| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | | `iconName` | `icon-name` | public | `string \| undefined` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | | `linkContent` | `link-content` | public | `string \| undefined` | | Content of the link. | @@ -100,15 +100,18 @@ As a base rule, opening animations should be active if an alert arrives after th | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------ | ------- | -------------------------------- | ---------- | ------ | -------------- | +| `close` | public | Close the alert. | | `void` | | | `requestDismissal` | public | Requests dismissal of the alert. | | `void` | | ## Events -| Name | Type | Description | Inherited From | -| -------------------- | ------------------- | ------------------------------------------------------------------ | -------------- | -| `didOpen` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | -| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | -| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | +| Name | Type | Description | Inherited From | +| -------------------- | ------------------- | -------------------------------------------------------------------- | -------------- | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | +| `didOpen` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | +| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | +| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | ## Slots From 2bfb24b5fb6735ad4e11055b9f2d2805c775dea8 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 17 Jul 2024 09:50:28 +0200 Subject: [PATCH 2/5] docs(sbb-alert, sbb-notification): update events doc --- src/elements/alert/alert/alert.ts | 8 ++++---- src/elements/alert/alert/readme.md | 14 +++++++------- src/elements/notification/notification.ts | 8 ++++---- src/elements/notification/readme.md | 12 ++++++------ 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 644482216e..64aaf25978 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -29,10 +29,10 @@ import '../../title.js'; * @slot - Use the unnamed slot to add content to the `sbb-alert`. * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS. * @slot title - Title content. - * @event {CustomEvent} willOpen - Emits when the fade in animation starts. - * @event {CustomEvent} didOpen - Emits when the fade in animation ends and the button is displayed. - * @event {CustomEvent} willClose - Emits whenever the `sbb-notification` begins the closing transition. - * @event {CustomEvent} didClose - Emits whenever the `sbb-notification` is closed. + * @event {CustomEvent} willOpen - Emits when the opening animation starts. + * @event {CustomEvent} didOpen - Emits when the opening animation ends. + * @event {CustomEvent} willClose - Emits when the closing animation starts. Can be canceled. + * @event {CustomEvent} didClose - Emits when the closing animation ends. * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index 487f81f8e2..f35a76c611 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -105,13 +105,13 @@ As a base rule, opening animations should be active if an alert arrives after th ## Events -| Name | Type | Description | Inherited From | -| -------------------- | ------------------- | -------------------------------------------------------------------- | -------------- | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | -| `didOpen` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | -| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | -| `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | -| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | +| Name | Type | Description | Inherited From | +| -------------------- | ------------------- | --------------------------------------------------------- | -------------- | +| `didClose` | `CustomEvent` | Emits when the closing animation ends. | | +| `didOpen` | `CustomEvent` | Emits when the opening animation ends. | | +| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| `willClose` | `CustomEvent` | Emits when the closing animation starts. Can be canceled. | | +| `willOpen` | `CustomEvent` | Emits when the opening animation starts. | | ## Slots diff --git a/src/elements/notification/notification.ts b/src/elements/notification/notification.ts index 153c6427f0..624147a741 100644 --- a/src/elements/notification/notification.ts +++ b/src/elements/notification/notification.ts @@ -31,10 +31,10 @@ const DEBOUNCE_TIME = 150; * * @slot - Use the unnamed slot to add content to the notification message. * @slot title - Use this to provide a notification title (optional). - * @event {CustomEvent} willOpen - Emits whenever the `sbb-notification` starts the opening transition. - * @event {CustomEvent} didOpen - Emits whenever the `sbb-notification` is opened. - * @event {CustomEvent} willClose - Emits whenever the `sbb-notification` begins the closing transition. - * @event {CustomEvent} didClose - Emits whenever the `sbb-notification` is closed. + * @event {CustomEvent} willOpen - Emits when the opening animation starts. + * @event {CustomEvent} didOpen - Emits when the opening animation ends. + * @event {CustomEvent} willClose - Emits when the closing animation starts. + * @event {CustomEvent} didClose - Emits when the closing animation ends. * @cssprop [--sbb-notification-margin=0] - Can be used to modify the margin in order to get a smoother animation. * See style section for more information. */ diff --git a/src/elements/notification/readme.md b/src/elements/notification/readme.md index 1514f12e88..dbd74addc4 100644 --- a/src/elements/notification/readme.md +++ b/src/elements/notification/readme.md @@ -97,12 +97,12 @@ As a base rule, opening animations should be active if a notification arrives af ## Events -| Name | Type | Description | Inherited From | -| ----------- | ------------------- | -------------------------------------------------------------------- | -------------- | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | -| `didOpen` | `CustomEvent` | Emits whenever the `sbb-notification` is opened. | | -| `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ---------------------------------------- | -------------- | +| `didClose` | `CustomEvent` | Emits when the closing animation ends. | | +| `didOpen` | `CustomEvent` | Emits when the opening animation ends. | | +| `willClose` | `CustomEvent` | Emits when the closing animation starts. | | +| `willOpen` | `CustomEvent` | Emits when the opening animation starts. | | ## CSS Properties From 254ba228a6a28e58f03731948d2cb8428645ff1e Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 17 Jul 2024 10:36:18 +0200 Subject: [PATCH 3/5] test(sbb-alert-group): update spec tests --- src/elements/alert/alert-group/alert-group.spec.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/elements/alert/alert-group/alert-group.spec.ts b/src/elements/alert/alert-group/alert-group.spec.ts index 652ac8ea7d..cbd6d6b1a9 100644 --- a/src/elements/alert/alert-group/alert-group.spec.ts +++ b/src/elements/alert/alert-group/alert-group.spec.ts @@ -1,4 +1,5 @@ import { expect } from '@open-wc/testing'; +import { sendMouse } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import type { SbbTransparentButtonElement } from '../../button.js'; @@ -82,8 +83,8 @@ describe(`sbb-alert-group`, () => { expect(didDismissAlertSpy.count).to.be.equal(2); expect(emptySpy.count).to.be.greaterThan(0); - // When clicking away (simulated by blur event) - element.dispatchEvent(new CustomEvent('blur')); + // When clicking away + await sendMouse({ type: 'click', position: [0, 0] }); await waitForLitRender(element); // Then the active element id should be unset and tabindex should be removed From 0a5b3f920865e2fc176f1bee22b047f050ca6cff Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Fri, 19 Jul 2024 10:59:07 +0200 Subject: [PATCH 4/5] docs(sbb-alert): inherit from SbbOpenCloseBaseElement --- src/elements/alert/alert/alert.ts | 68 +++++++++--------------------- src/elements/alert/alert/readme.md | 23 +++++----- 2 files changed, 32 insertions(+), 59 deletions(-) diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 64aaf25978..1e1e3afbd9 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -1,18 +1,10 @@ -import { - type CSSResultGroup, - html, - LitElement, - nothing, - type PropertyValues, - type TemplateResult, -} from 'lit'; +import { type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { LinkTargetType } from '../../core/base-elements.js'; +import { type LinkTargetType, SbbOpenCloseBaseElement } from '../../core/base-elements.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { EventEmitter } from '../../core/eventing.js'; import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js'; -import type { SbbOpenedClosedState } from '../../core/interfaces.js'; import { SbbIconNameMixin } from '../../icon.js'; import type { SbbTitleLevel } from '../../title.js'; @@ -36,9 +28,9 @@ import '../../title.js'; * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') -export class SbbAlertElement extends SbbIconNameMixin(LitElement) { +export class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { public static override styles: CSSResultGroup = style; - public static readonly events = { + public static override readonly events = { willOpen: 'willOpen', didOpen: 'didOpen', willClose: 'willClose', @@ -86,29 +78,9 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { /** The enabled animations. */ @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all'; - /** The state of the alert. */ - private set _state(value: SbbOpenedClosedState) { - this.setAttribute('data-state', value); - } - private get _state(): SbbOpenedClosedState { - return this.getAttribute('data-state') as SbbOpenedClosedState; - } - - /** Emits when the fade in animation starts. */ - private _willOpen: EventEmitter = new EventEmitter(this, SbbAlertElement.events.willOpen); - - /** Emits when the fade in animation ends and the button is displayed. */ - private _didOpen: EventEmitter = new EventEmitter(this, SbbAlertElement.events.didOpen); - - /** Emits whenever the `sbb-notification` begins the closing transition. */ - private _willClose: EventEmitter = new EventEmitter(this, SbbAlertElement.events.willClose); - - /** Emits whenever the `sbb-notification` is closed. */ - private _didClose: EventEmitter = new EventEmitter(this, SbbAlertElement.events.didClose); - /** - * @deprecated * Emits when dismissal of an alert was requested. + * @deprecated */ private _dismissalRequested: EventEmitter = new EventEmitter( this, @@ -120,7 +92,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { protected override async firstUpdated(changedProperties: PropertyValues): Promise { super.firstUpdated(changedProperties); - this._open(); + this.open(); } /** Requests dismissal of the alert. @@ -130,37 +102,37 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) { this._dismissalRequested.emit(); } + /** Open the alert. */ + public open(): void { + this.willOpen.emit(); + this.state = 'opening'; + } + /** Close the alert. */ public close(): void { - if (this._willClose.emit()) { - this._state = 'closing'; + if (this.willClose.emit()) { + this.state = 'closing'; } } - /** Open the alert. */ - private _open(): void { - this._willOpen.emit(); - this._state = 'opening'; - } - private _onAnimationEnd(event: AnimationEvent): void { - if (this._state === 'opening' && event.animationName === 'open-opacity') { + if (this.state === 'opening' && event.animationName === 'open-opacity') { this._handleOpening(); } - if (this._state === 'closing' && event.animationName === 'close') { + if (this.state === 'closing' && event.animationName === 'close') { this._handleClosing(); } } private _handleOpening(): void { - this._state = 'opened'; - this._didOpen.emit(); + this.state = 'opened'; + this.didOpen.emit(); } private _handleClosing(): void { - this._state = 'closed'; - this._didClose.emit(); + this.state = 'closed'; + this.didClose.emit(); setTimeout(() => this.remove()); } diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index f35a76c611..7e38f31594 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -98,20 +98,21 @@ As a base rule, opening animations should be active if an alert arrives after th ## Methods -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | ------- | -------------------------------- | ---------- | ------ | -------------- | -| `close` | public | Close the alert. | | `void` | | -| `requestDismissal` | public | Requests dismissal of the alert. | | `void` | | +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | -------------------------------- | ---------- | ------ | ----------------------- | +| `close` | public | Close the alert. | | `void` | SbbOpenCloseBaseElement | +| `open` | public | Open the alert. | | `void` | SbbOpenCloseBaseElement | +| `requestDismissal` | public | Requests dismissal of the alert. | | `void` | | ## Events -| Name | Type | Description | Inherited From | -| -------------------- | ------------------- | --------------------------------------------------------- | -------------- | -| `didClose` | `CustomEvent` | Emits when the closing animation ends. | | -| `didOpen` | `CustomEvent` | Emits when the opening animation ends. | | -| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | -| `willClose` | `CustomEvent` | Emits when the closing animation starts. Can be canceled. | | -| `willOpen` | `CustomEvent` | Emits when the opening animation starts. | | +| Name | Type | Description | Inherited From | +| -------------------- | ------------------- | --------------------------------------------------------- | ----------------------- | +| `didClose` | `CustomEvent` | Emits when the closing animation ends. | SbbOpenCloseBaseElement | +| `didOpen` | `CustomEvent` | Emits when the opening animation ends. | SbbOpenCloseBaseElement | +| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| `willClose` | `CustomEvent` | Emits when the closing animation starts. Can be canceled. | SbbOpenCloseBaseElement | +| `willOpen` | `CustomEvent` | Emits when the opening animation starts. | SbbOpenCloseBaseElement | ## Slots From 293925b9df1f8247413f182357063a362c4cd6c1 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Jul 2024 11:24:14 +0200 Subject: [PATCH 5/5] fix(sbb-alert): pr feedback --- src/elements/alert/alert/alert.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 1e1e3afbd9..5b3782270f 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -118,9 +118,7 @@ export class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { private _onAnimationEnd(event: AnimationEvent): void { if (this.state === 'opening' && event.animationName === 'open-opacity') { this._handleOpening(); - } - - if (this.state === 'closing' && event.animationName === 'close') { + } else if (this.state === 'closing' && event.animationName === 'close') { this._handleClosing(); } }