From b09499ec4f6ceeb2042fdcd8230772529e8f9737 Mon Sep 17 00:00:00 2001 From: jsica Date: Mon, 4 Dec 2023 14:21:09 -0500 Subject: [PATCH] Error in activity reporter not visible, need to scroll to the top Add a scrollToMessage method for the vcd-banner-activity-reporter. This increases the visibility of success and error messages by having them in the view of the user. Testing Done: - Edited examples locally to have a page where the error/success message is not visible. - Observed that the scrolling to the error/success message worked. Signed-off-by: Juliana Sica --- projects/components/CHANGELOG.MD | 1 + .../banner-activity-reporter.component.ts | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/projects/components/CHANGELOG.MD b/projects/components/CHANGELOG.MD index b899815f..3762bd54 100644 --- a/projects/components/CHANGELOG.MD +++ b/projects/components/CHANGELOG.MD @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix ErrorBannerExampleComponent when closed with X button ### Changed * errorMessage reset value is `null` instead of `undefined` +* Add a scrollToMessage method for the vcd-banner-activity-reporter ## [15.0.1-dev.12] ### Fixed diff --git a/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts b/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts index 5b8a34fb..032ec5b5 100644 --- a/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts +++ b/projects/components/src/common/activity-reporter/banner-activity-reporter.component.ts @@ -49,6 +49,7 @@ export class BannerActivityReporterComponent extends ActivityReporter { reportError(errorText: string): void { this.errorText = errorText; this.running = false; + this.scrollToMessage(); } /** @@ -59,6 +60,7 @@ export class BannerActivityReporterComponent extends ActivityReporter { this.successMessage = successMessage; } this.running = false; + this.scrollToMessage(); } /** @@ -75,6 +77,14 @@ export class BannerActivityReporterComponent extends ActivityReporter { this.successMessage = null; } + /** + * To view error and success messages, scroll to the top of the page for visibility + */ + scrollToMessage(): void { + const element = document.querySelector('vcd-banner-activity-reporter'); + element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }); + } + /* * Reset the banner activity state manually. *