feat(toast): changes/improvements from design review #270

Author: m2rt

tedi/components/notifications/toast/toast.component.scss

@@ -8,18 +8,23 @@ tedi-toast {
 
 .tedi-toast__wrapper {
   position: relative;
-  box-shadow: 0px 1px 5px 0px var(--tedi-alpha-20, rgba(0, 0, 0, 0.2));
+  padding: var(--toast-outer-spacing, 4px);
+
+  tedi-alert {
+    box-shadow: 0 4px 10px 0 var(--tedi-alpha-14, rgba(0, 0, 0, 0.14));
+  }
 }
 
 .tedi-toast__progress {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  bottom: var(--toast-outer-spacing);
+  left: var(--toast-outer-spacing);
+  width: calc(100% - var(--toast-outer-spacing) * 2);
   height: 4px;
   background: var(--toast-progress-color);
   transform-origin: left;
   animation: toast-progress linear forwards;
+  border-radius: 0 var(--alert-radius) 0 var(--alert-radius);
 
   &--success {
     --toast-progress-color: var(--alert-default-border-success);
@@ -54,15 +59,15 @@ tedi-toast {
     flex-direction: column;
     gap: var(--dimensions-05);
     max-height: calc(100vh - calc(var(--toast-margin-bottom) * 2));
-    overflow: hidden;
+    overflow: visible;
 
     >* {
       pointer-events: auto;
     }
 
     &--top-left {
       top: var(--toast-margin-bottom);
-      left: var(--toast-margin-left);
+      left: var(--toast-margin-right);
       align-items: flex-start;
 
       tedi-toast {
@@ -90,7 +95,7 @@ tedi-toast {
 
     &--bottom-left {
       bottom: var(--toast-margin-bottom);
-      left: var(--toast-margin-left);
+      left: var(--toast-margin-right);
       align-items: flex-start;
       flex-direction: column-reverse;
 

tedi/components/notifications/toast/toast.stories.ts

@@ -119,7 +119,7 @@ type Story = StoryObj<ToastComponent>;
   standalone: true,
   imports: [ButtonComponent, RowComponent, ColComponent, VerticalSpacingDirective],
   template: `
-    <div [tediVerticalSpacing]="1">
+    <div [tediVerticalSpacing]="0.5">
       <tedi-row>
         <tedi-col [lg]="12">
           <button tedi-button (click)="showSuccess()">Show success toast</button>
@@ -235,16 +235,14 @@ export const WithIcon: Story = {
   standalone: true,
   imports: [ButtonComponent, RowComponent, ColComponent, VerticalSpacingDirective],
   template: `
-    <div [tediVerticalSpacing]="1">
-      <tedi-row>
-        <tedi-col>
-          <button tedi-button (click)="show(2)">Auto close in 2s</button>
-        </tedi-col>
-        <tedi-col>
-          <button tedi-button (click)="show(10)">Auto close in 10s</button>
-        </tedi-col>
-      </tedi-row>
-    </div>
+    <tedi-row gap="2">
+      <tedi-col>
+        <button tedi-button (click)="show(2)">Auto close in 2s</button>
+      </tedi-col>
+      <tedi-col>
+        <button tedi-button (click)="show(10)">Auto close in 10s</button>
+      </tedi-col>
+    </tedi-row>
   `,
 })
 class ToastTimerDemoComponent {
@@ -337,8 +335,8 @@ export const PersistentToast: Story = {
   standalone: true,
   imports: [ButtonComponent, RowComponent, ColComponent, VerticalSpacingDirective],
   template: `
-    <div [tediVerticalSpacing]="1">
-      <tedi-row>
+    <div [tediVerticalSpacing]="0.5">
+      <tedi-row gap="2">
         <tedi-col>
           <button tedi-button variant="secondary" (click)="showTopLeft()">
             Top Left
@@ -350,7 +348,7 @@ export const PersistentToast: Story = {
           </button>
         </tedi-col>
       </tedi-row>
-      <tedi-row>
+      <tedi-row gap="2">
         <tedi-col>
           <button tedi-button variant="secondary" (click)="showBottomLeft()">
             Bottom Left
@@ -395,6 +393,7 @@ class ToastPositionDemoComponent {
 
 /**
  * Toast notifications at different screen positions.
+ * Default and also recommended value is "bottom-right"
  */
 export const Positions: Story = {
   decorators: [
@@ -426,7 +425,7 @@ this.toastService.info("Bottom Right", "Message", { position: "bottom-right" });
   standalone: true,
   imports: [ButtonComponent, RowComponent, ColComponent],
   template: `
-    <tedi-row>
+    <tedi-row gap="2">
       <tedi-col>
         <button tedi-button (click)="showPauseOnHover()">
           Pause on hover
@@ -494,7 +493,7 @@ this.toastService.danger("No Pause", "Closes even if hovered", {
   standalone: true,
   imports: [ButtonComponent, RowComponent, ColComponent],
   template: `
-    <tedi-row>
+    <tedi-row gap="2">
       <tedi-col>
         <button tedi-button (click)="showStatus()">
           Success (role=status)