refactor: toast component changes (#620)

Author: alexbarnsley

resources/assets/css/_toasts.css

@@ -3,19 +3,32 @@
         @apply relative inline-flex flex-col sm:flex-row items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden;
     }
 
+    .toast__titled {
+        @apply relative inline-flex flex-col items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden;
+    }
+
     .toast-body {
         @apply p-4 text-left mr-4 sm:mt-0;
     }
 
     .toast-icon {
-        @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-14;
+        @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-full;
+    }
+
+    .toast-icon__titled {
+        @apply space-x-2 flex items-center px-4 py-2 flex-shrink-0 text-white w-full;
     }
 
     .toast-button,
     .toast-spinner {
         @apply absolute sm:relative top-0 sm:top-auto right-0 sm:right-auto m-2.5 sm:my-0 sm:ml-0 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600;
     }
 
+    .toast-button__titled,
+    .toast-spinner__titled {
+        @apply absolute top-0 right-0 m-2.5 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600;
+    }
+
     .toast-info {
         @apply bg-theme-primary-50;
     }
@@ -32,19 +45,24 @@
         @apply bg-theme-success-50;
     }
 
-    .toast-info .toast-icon {
+    .toast-info .toast-icon,
+    .toast-info .toast-icon__titled {
         @apply bg-theme-primary-100 dark:bg-theme-primary-700 text-theme-primary-700 dark:text-white;
     }
-    .toast-warning .toast-icon {
+    .toast-warning .toast-icon,
+    .toast-warning .toast-icon__titled {
         @apply bg-theme-warning-100 dark:bg-theme-warning-700 text-theme-warning-900 dark:text-white;
     }
-    .toast-danger .toast-icon {
+    .toast-danger .toast-icon,
+    .toast-danger .toast-icon__titled {
         @apply bg-theme-danger-100 dark:bg-theme-danger-500 text-theme-danger-700 dark:text-white;
     }
-    .toast-hint .toast-icon {
+    .toast-hint .toast-icon,
+    .toast-hint .toast-icon__titled {
         @apply bg-theme-hint-100 dark:bg-theme-hint-700 text-theme-hint-700 dark:text-white;
     }
-    .toast-success .toast-icon {
+    .toast-success .toast-icon,
+    .toast-success .toast-icon__titled {
         @apply bg-theme-success-100 dark:bg-theme-success-700 text-theme-success-700 dark:text-white;
     }
 

resources/views/toast.blade.php

@@ -1,10 +1,12 @@
 @props ([
     'type' => 'info',
     'title' => null,
-    'message' => '',
+    'message' => null,
     'wireClose' => false,
     'alpineClose' => false,
     'target' => null,
+    'hideSpinner' => false,
+    'alwaysShowTitle' => false,
 ])
 
 @php
@@ -27,19 +29,48 @@
     ], $type);
 @endphp
 
-<div role="alert" aria-live="polite" {{ $attributes->class('toast')->class($toastClass) }}>
-    <span class="toast-icon">
-        <x-ark-icon :name="$icon" size="sm" />
-        <span class="text-sm font-semibold sm:hidden">{{ $title ?? trans('ui::toasts.'.$type) }}</span>
+<div
+    role="alert"
+    aria-live="polite"
+    {{ $attributes->class([
+        'toast' => ! $alwaysShowTitle,
+        'toast__titled' => $alwaysShowTitle,
+        $toastClass,
+    ]) }}
+>
+    <span @class([
+        'toast-icon' => ! $alwaysShowTitle,
+        'toast-icon__titled' => $alwaysShowTitle,
+    ])>
+        <x-ark-icon
+            :name="$icon"
+            size="sm"
+        />
+
+        <span @class([
+            'text-sm font-semibold',
+            'sm:hidden' => ! $alwaysShowTitle,
+        ])>
+            {{ $title ?? trans('ui::toasts.'.$type) }}
+        </span>
     </span>
 
-    <div class="toast-body">{{ $message }}</div>
+    <div class="toast-body">
+        @if ($message)
+            {{ $message }}
+        @else
+            {!! $slot !!}
+        @endif
+    </div>
 
     <button
         @if ($wireClose) wire:click="{{ $wireClose }}" @endif
         @if ($alpineClose) @click="{{ $alpineClose }}" @endif
         type="button"
-        class="toast-button"
+        @class([
+            'toast-button' => ! $alwaysShowTitle,
+            'toast-button__titled' => $alwaysShowTitle,
+        ])
         @if ($target)
         wire:loading.remove
         wire:target="{{ $target }}"
@@ -48,13 +79,18 @@ class="toast-button"
         <x-ark-icon name="cross" size="sm" />
     </button>
 
-    <div
-        class="toast-spinner"
-        @if ($target)
-        wire:loading
-        wire:target="{{ $target }}"
-        @endif
-    >
-        <x-ark-spinner-icon circle-color="spinner" :stroke-width="3" />
-    </div>
+    @unless ($hideSpinner)
+        <div
+            @class([
+                'toast-spinner' => ! $alwaysShowTitle,
+                'toast-spinner__titled' => $alwaysShowTitle,
+            ])
+            @if ($target)
+            wire:loading
+            wire:target="{{ $target }}"
+            @endif
+        >
+            <x-ark-spinner-icon circle-color="spinner" :stroke-width="3" />
+        </div>
+    @endunless
 </div>