[AlertCenter]: adds dismiss button ui to AlertCenter alerts

brave · Feb 15, 2024 · 39fd582 · 39fd582
1 parent 72044c0
commit 39fd582
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 15 deletions.
diff --git a/examples/plain-html/index.html b/examples/plain-html/index.html
@@ -122,6 +122,7 @@
 
       showAlert({
         content: `progress is ${progress}`,
+        canDismiss: true,
         actions: [{
           text: 'dismiss',
           action: a => a.dismiss()

diff --git a/src/components/alert/alert.stories.svelte b/src/components/alert/alert.stories.svelte
@@ -11,6 +11,7 @@
   let content = 'Hello World'
   let title = 'Title'
   let canDismiss = true
+  let hasAction = false
   let duration = 2000
 
   $: alertUser = (mode, type) =>
@@ -20,17 +21,16 @@
         title,
         mode: mode ?? 'simple',
         type: type ?? 'error',
-        actions: canDismiss
-          ? [
-              {
-                text: 'dismiss',
-                icon: 'check-normal',
-                action: (a) => a.dismiss()
-              }
-            ]
-          : []
+        actions: hasAction ? [
+          {
+            text: 'Retry',
+            kind: 'filled',
+            action: () => {}
+          }
+        ] : []
       },
-      duration
+      duration,
+      canDismiss
     )
 </script>
 
@@ -50,6 +50,14 @@
         Some content
       </Alert>
     </Slot>
+    <Slot name="content-after" explanation="optional content after the main content of the alert">
+      <Alert {...args} mode="simple">
+        Some content
+        <Button kind='plain-faint' fab slot="content-after">
+          <Icon name="close" />
+        </Button>
+      </Alert>
+    </Slot>
     <Slot
       name="title"
       explanation="the icon on the left hand side of the Alert.
@@ -144,6 +152,10 @@
     Dismissable
     <input type="checkbox" bind:checked={canDismiss} />
   </label>
+  <label>
+    Has action
+    <input type="checkbox" bind:checked={hasAction} />
+  </label>
   <Button
     on:click={() => {
       alertUser(args.mode, args.type)

diff --git a/src/components/alert/alert.svelte b/src/components/alert/alert.svelte
@@ -20,6 +20,7 @@
   export let mode: AlertMode = 'simple'
   export let isToast = false
   export let hasActions = $$slots.actions
+  export let hasContentAfter = $$slots['content-after']
 
   $: currentType = type ?? 'error'
   $: currentMode = mode ?? 'simple'
@@ -47,6 +48,11 @@
     {/if}
     <slot />
   </div>
+  {#if hasContentAfter && $$slots['content-after']}
+    <div class="content-after">
+      <slot name="content-after" />
+    </div>
+  {/if}
   {#if hasActions && $$slots.actions}
     <div class="actions">
       <slot name="actions" />
@@ -78,7 +84,11 @@
     font: var(--leo-font-default-regular);
 
     display: grid;
-    grid-template-columns: min-content auto;
+    grid-template-columns: min-content 1fr;
+
+    &:has(.content-after) {
+      grid-template-columns: min-content 1fr auto;
+    }
 
     & .icon {
       --leo-icon-size: var(--leo-icon-m);
@@ -93,6 +103,10 @@
       grid-column: 2;
     }
 
+    & .content-after {
+      grid-column: 3;
+    }
+
     & .actions {
       grid-column: 2;
     }

diff --git a/src/components/alert/alertCenter.svelte b/src/components/alert/alertCenter.svelte
@@ -36,13 +36,15 @@
     actions: Action[] = []
 
     duration?: number
+    canDismiss?: boolean
     #timeout: NodeJS.Timeout
 
-    constructor(options: AlertOptions, duration?: number) {
+    constructor(options: AlertOptions, duration?: number, canDismiss?: boolean) {
       Object.assign(this, options)
       this.actions = this.actions ?? []
 
       this.duration = duration
+      this.canDismiss = canDismiss
       this.resumeDismiss()
     }
 
@@ -62,8 +64,8 @@
 
   const alerts = writable<AlertInfo[]>([])
 
-  export const showAlert = (options: AlertOptions, duration = 2000) => {
-    alerts.update((a) => [...a, new AlertInfo(options, duration)])
+  export const showAlert = (options: AlertOptions, duration = 2000, canDismiss = true) => {
+    alerts.update((a) => [...a, new AlertInfo(options, duration, canDismiss)])
   }
 
   const transitionOptions = { y: -64, duration: 120 }
@@ -93,10 +95,17 @@
       on:mouseenter={() => alert.pauseDismiss()}
       on:mouseleave={() => alert.resumeDismiss()}
     >
-      <svelte:component this={alert.component || Alert} {...alert} hasActions={alert.actions.length > 0} isToast>
+      <svelte:component this={alert.component || Alert} {...alert} hasActions={alert.actions.length > 0} hasContentAfter={alert.canDismiss} isToast>
         <div slot="title">
           {alert.title}
         </div>
+        <svelte:fragment slot='content-after'>
+          {#if alert.canDismiss}
+            <Button kind="plain-faint" fab on:click={() => alert.dismiss()}>
+              <Icon name="close" />
+            </Button>
+          {/if}
+        </svelte:fragment>
         {alert.content}
         <div slot="actions">
           {#each alert.actions as action}