From 34f775c83b46fc68875dc0858bcb8daf9134dd8a Mon Sep 17 00:00:00 2001 From: Sandhya Adhirvuh Date: Fri, 17 Apr 2026 12:51:01 -0400 Subject: [PATCH 1/2] add class --- .../src/assets/stack-blitz/package-lock.json | 6 +++--- .../toast/src/lib/modules/toast/toast.component.scss | 11 +++++++++++ .../toast/src/lib/modules/toast/toaster.component.ts | 10 ++++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/apps/code-examples/src/assets/stack-blitz/package-lock.json b/apps/code-examples/src/assets/stack-blitz/package-lock.json index 26307d0917..cf97126c62 100644 --- a/apps/code-examples/src/assets/stack-blitz/package-lock.json +++ b/apps/code-examples/src/assets/stack-blitz/package-lock.json @@ -2526,9 +2526,9 @@ } }, "node_modules/@blackbaud/skyux-design-tokens": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@blackbaud/skyux-design-tokens/-/skyux-design-tokens-4.0.2.tgz", - "integrity": "sha512-G6T+iNbPArcGEVYZyv89+noI/NnQjY27kP1gwTDfvnpLmQ5cN4NvzcIKd3JU+RvZ+1nkfZHU7sFI44hpZTQ2eA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@blackbaud/skyux-design-tokens/-/skyux-design-tokens-4.1.0.tgz", + "integrity": "sha512-S5FxAx25OaOORgCC4Lz9cmQHQ8XNC/a/lnO0jUbrBAbJSJV2iSh13OxvevcT90oWaPNhdkEsruUAR3nv/MmAYA==", "license": "MIT", "engines": { "node": ">= 4.2.1", diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.scss b/libs/components/toast/src/lib/modules/toast/toast.component.scss index 46e9733f67..b2633d0b20 100644 --- a/libs/components/toast/src/lib/modules/toast/toast.component.scss +++ b/libs/components/toast/src/lib/modules/toast/toast.component.scss @@ -256,6 +256,17 @@ sky-toast { } .sky-theme-modern { + .sky-toaster-newest-on-top { + sky-toast:last-child { + .sky-toast { + margin-bottom: var( + --sky-override-toast-last-child-margin-bottom, + var(--sky-comp-omnibar-toaster-space-inset-bottom) + ); + } + } + } + sky-toast { .sky-toast-btn-close { transition: diff --git a/libs/components/toast/src/lib/modules/toast/toaster.component.ts b/libs/components/toast/src/lib/modules/toast/toaster.component.ts index 6e2cd1d9b3..6b5cdc7d7b 100644 --- a/libs/components/toast/src/lib/modules/toast/toaster.component.ts +++ b/libs/components/toast/src/lib/modules/toast/toaster.component.ts @@ -14,6 +14,7 @@ import { ViewContainerRef, ViewEncapsulation, inject, + signal, } from '@angular/core'; import { SKY_STACKING_CONTEXT, SkyDynamicComponentService } from '@skyux/core'; @@ -41,6 +42,9 @@ import { SkyToastDisplayDirection } from './types/toast-display-direction'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyToastComponent, SkyToastResourcesModule], + host: { + '[class.sky-toaster-newest-on-top]': 'isNewestOnTop()', + }, }) export class SkyToasterComponent implements AfterViewInit, OnDestroy { public toastsForDisplay: SkyToast[] | undefined; @@ -62,6 +66,12 @@ export class SkyToasterComponent implements AfterViewInit, OnDestroy { readonly #containerOptions = inject(SkyToastContainerOptions, { optional: true, }); + + protected isNewestOnTop = signal( + this.#containerOptions?.displayDirection === + SkyToastDisplayDirection.NewestOnTop, + ); + readonly #dynamicComponentSvc = inject(SkyDynamicComponentService); readonly #domAdapter = inject(SkyToastAdapterService); readonly #environmentInjector = inject(EnvironmentInjector); From aaf9b0b85aa55e67b219abf7a4890a3248aa8ebf Mon Sep 17 00:00:00 2001 From: Sandhya Adhirvuh Date: Fri, 17 Apr 2026 12:54:40 -0400 Subject: [PATCH 2/2] unit test --- .../src/lib/modules/toast/toast.component.scss | 5 +---- .../modules/toast/toaster.component.spec.ts | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.scss b/libs/components/toast/src/lib/modules/toast/toast.component.scss index b2633d0b20..f4c2cd26d4 100644 --- a/libs/components/toast/src/lib/modules/toast/toast.component.scss +++ b/libs/components/toast/src/lib/modules/toast/toast.component.scss @@ -259,10 +259,7 @@ sky-toast { .sky-toaster-newest-on-top { sky-toast:last-child { .sky-toast { - margin-bottom: var( - --sky-override-toast-last-child-margin-bottom, - var(--sky-comp-omnibar-toaster-space-inset-bottom) - ); + margin-bottom: var(--sky-comp-omnibar-toaster-space-inset-bottom); } } } diff --git a/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts b/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts index 8f19f7e407..8331299e38 100644 --- a/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts +++ b/libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts @@ -327,4 +327,22 @@ describe('Toaster component', () => { validateToastMessage(toasts[0], 'Message 1'); validateToastMessage(toasts[1], 'Message 2'); })); + + it('should add sky-toaster-newest-on-top class to host when displayDirection is NewestOnTop', fakeAsync(() => { + options.displayDirection = SkyToastDisplayDirection.NewestOnTop; + + openMessage(); + + const toaster = document.querySelector('sky-toaster'); + expect(toaster).toHaveCssClass('sky-toaster-newest-on-top'); + })); + + it('should not add sky-toaster-newest-on-top class to host when displayDirection is OldestOnTop', fakeAsync(() => { + options.displayDirection = SkyToastDisplayDirection.OldestOnTop; + + openMessage(); + + const toaster = document.querySelector('sky-toaster'); + expect(toaster).not.toHaveCssClass('sky-toaster-newest-on-top'); + })); });