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 <[email protected]> --------- Co-authored-by: Tom Fechtner <[email protected]> Co-authored-by: Dan Voegelin <[email protected]> Co-authored-by: Kevin Florian <[email protected]> Co-authored-by: Nathan Dickerson <[email protected]>
bullhorn · Jul 31, 2024 · 3f915b5 · 3f915b5
1 parent 159ddd1
commit 3f915b5
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git 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
@@ -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>
+  <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
@@ -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
@@ -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
@@ -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>
+</div>