From 3f915b54942161949e59111a8b5ff67676a86fc9 Mon Sep 17 00:00:00 2001
From: Tom Fechtner <tom.fechtner@bullhorn.com>
Date: Wed, 31 Jul 2024 19:02:21 +0100
Subject: [PATCH] fix(Toast): some styling fixes for Toast banners (#1571)

* BES-169: Fix Toast UI position & padding

* BH-88988: Fix Toast UI animation position & padding

* BH-88988: Added Toast UI style & close examples

* feat(Data Table, Overlay, CriteriaBuilder): Fixes for data table state updates, overlay backdrop clicks and criteria value changes (#1568)

* feat(Data Table): Allow skipping explicit table.state update

* feat(modals): added novo-dropdown to ng-content select options in novo-notification

* skipUpdate skips state clear entirely

* Select null check error fix

* feat(Overlay): added backDropClick event emitter

* updated all clear-button methods to account for new emitOnly input

* added unsavedChanges to preferences interface

* BooleanInput emitOnly

* Allow for value changes to text criteria to dirty the form

* Allow for value changes to text criteria to dirty the form

* moved DataTableSavedSearchOwner interface to novo-elements

* revert null checks from Select.ts, based on MR comment

---------

Co-authored-by: Nathan Dickerson <nathan.dickerson@bullhorn.com>

---------

Co-authored-by: Tom Fechtner <tom@sourcebreaker.com>
Co-authored-by: Dan Voegelin <dvoegelin@bullhorn.com>
Co-authored-by: Kevin Florian <102239533+kflo411@users.noreply.github.com>
Co-authored-by: Nathan Dickerson <nathan.dickerson@bullhorn.com>
---
 .../novo-elements/src/elements/toast/Toast.scss    | 14 ++++++--------
 .../toast-options/toast-options-example.html       | 10 +++++++++-
 .../toast-service/toast-service-example.html       |  1 +
 .../toaster/toast-service/toast-service-example.ts | 11 +++++++++++
 .../toaster/toast-usage/toast-usage-example.html   |  4 ++--
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/projects/novo-elements/src/elements/toast/Toast.scss b/projects/novo-elements/src/elements/toast/Toast.scss
index 8c215132f..4f10a57b8 100644
--- a/projects/novo-elements/src/elements/toast/Toast.scss
+++ b/projects/novo-elements/src/elements/toast/Toast.scss
@@ -3,7 +3,7 @@
 
 :host {
   display: grid;
-  grid-template-columns: 5rem 1fr;
+  grid-template-columns: 5rem 1fr 15px;
   justify-content: flex-start;
   align-content: center;
   align-items: center;
@@ -41,9 +41,7 @@
     align-items: center;
     align-self: flex-start;
     cursor: pointer;
-    position: absolute;
-    top: 8px;
-    right: 8px;
+    height: 100%;
   }
 
   .toast-icon i,
@@ -133,8 +131,8 @@
     padding-bottom: 20px;
     @include ease("all", "swift-ease-in-out");
     &.animate {
-      padding-bottom: 20px;
-      bottom: -6px;
+      padding-bottom: 10px;
+      bottom: 0;
     }
     @for $i from 2 through 100 {
       &:nth-last-of-type(#{$i}) {
@@ -150,8 +148,8 @@
     padding-top: 20px;
     @include ease("all", "swift-ease-in-out");
     &.animate {
-      padding-top: 20px;
-      top: -6px;
+        padding-top: 10px;
+        top: 0;
     }
     @for $i from 2 through 100 {
       &:nth-last-of-type(#{$i}) {
diff --git a/projects/novo-examples/src/components/toaster/toast-options/toast-options-example.html b/projects/novo-examples/src/components/toaster/toast-options/toast-options-example.html
index 42f82b902..2843caf09 100644
--- a/projects/novo-examples/src/components/toaster/toast-options/toast-options-example.html
+++ b/projects/novo-examples/src/components/toaster/toast-options/toast-options-example.html
@@ -6,6 +6,7 @@
     [icon]="icon.value"
     [title]="title.value ? 'Save Failed' : null"
     [margin]="margin.value ? '1rem' : 0"
+    [isCloseable]="closeable.value"
     message="Oops! Looks like you're missing some required fields"></novo-toast>
 </div>
 <novo-row gap="3rem" align="flex-start">
@@ -56,4 +57,11 @@
       <novo-radio name="margin" [value]="true">inset</novo-radio>
     </novo-radio-group>
   </novo-field>
-</novo-row>
\ No newline at end of file
+  <novo-field>
+    <novo-label>Closeable</novo-label>
+    <novo-radio-group #closeable appearance="vertical" [value]="false">
+      <novo-radio name="margin" [value]="false">false</novo-radio>
+      <novo-radio name="margin" [value]="true">true</novo-radio>
+    </novo-radio-group>
+  </novo-field>
+</novo-row>
diff --git a/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.html b/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.html
index d58626717..6dbc8c916 100644
--- a/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.html
+++ b/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.html
@@ -4,3 +4,4 @@
 <button theme="dialogue" color="primary" icon="coffee" (click)="toastToggled('growlTopLeft')">Growl: Top Left</button>
 <button theme="dialogue" color="negative" icon="times" (click)="toastToggled('growlBottomRight')">Growl: Bottom Right</button>
 <button theme="dialogue" color="primary" icon="coffee" (click)="toastToggled('growlBottomLeft')">Growl: Bottom Left</button>
+<button theme="dialogue" color="success" icon="coffee" (click)="toastToggled('topAccent')" data-automation-id="toast-trigger">Fixed Top Accent</button>
diff --git a/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.ts b/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.ts
index d8f5265ef..fb912a14c 100644
--- a/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.ts
+++ b/projects/novo-examples/src/components/toaster/toast-service/toast-service-example.ts
@@ -26,6 +26,17 @@ export class ToastServiceExample {
         theme: 'success',
         position: 'fixedTop',
       };
+    } else if (arg === 'topAccent') {
+      this.options = {
+        title: 'Top',
+        message: 'This positioning is fixedTop with accent style and is closeable',
+        icon: 'coffee',
+        theme: '',
+        accent: 'success',
+        position: 'fixedTop',
+        isCloseable: true,
+        hideDelay: -1
+      };
     } else if (arg === 'bottom') {
       this.options = {
         title: 'Bottom',
diff --git a/projects/novo-examples/src/components/toaster/toast-usage/toast-usage-example.html b/projects/novo-examples/src/components/toaster/toast-usage/toast-usage-example.html
index 7978a2a69..f6c4f7382 100644
--- a/projects/novo-examples/src/components/toaster/toast-usage/toast-usage-example.html
+++ b/projects/novo-examples/src/components/toaster/toast-usage/toast-usage-example.html
@@ -8,7 +8,7 @@
     <novo-action icon="refresh"></novo-action>
     <novo-action icon="times"></novo-action>
   </novo-header>
-  <novo-toast [theme]="toast.theme" [icon]="toast.icon" title="Save Failed"
+  <novo-toast [accent]="toast.accent" [theme]="toast.theme" [icon]="toast.icon" title="Save Failed"
     message="Oops! Looks like you're missing some required fields"></novo-toast>
   <div class="content">
     <p>
@@ -24,4 +24,4 @@
     </p>
     <button (click)="changeToast()">Change toast!</button>
   </div>
-</div>
\ No newline at end of file
+</div>