[Alert]: moves actions to bottom of alert regardless of mode

brave · Feb 15, 2024 · 72044c0 · 72044c0
1 parent 6c7e633
commit 72044c0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 35 deletions.
diff --git a/src/components/alert/alert.stories.svelte b/src/components/alert/alert.stories.svelte
@@ -46,7 +46,7 @@
     types of Alert"
     >
       <Alert {...args}>
-        <Icon name="airplay" slot="icon" />
+        <Icon name="airplay-audio" slot="icon" />
         Some content
       </Alert>
     </Slot>
@@ -82,8 +82,11 @@
   title="Components/Alert"
   component={Alert}
   argTypes={{
+    modes: { table: { disable: true } },
     mode: { control: 'select', options: modes },
+    types: { table: { disable: true } },
     type: { control: 'select', options: types },
+    hasActions: { control: 'boolean' },
     '--leo-alert-center-width': {
       type: 'string',
       description: 'The width to apply to the alert center'

diff --git a/src/components/alert/alert.svelte b/src/components/alert/alert.svelte
@@ -19,6 +19,7 @@
   export let type: AlertType = 'error'
   export let mode: AlertMode = 'simple'
   export let isToast = false
+  export let hasActions = $$slots.actions
 
   $: currentType = type ?? 'error'
   $: currentMode = mode ?? 'simple'
@@ -39,16 +40,18 @@
     </slot>
   </div>
   <div class="content">
-    <div class="title">
-      {#if mode == 'full'}
+    {#if mode == 'full'}
+      <div class="title">
         <slot name="title" />
-      {/if}
-    </div>
+      </div>
+    {/if}
     <slot />
   </div>
-  <div class="actions">
-    <slot name="actions" />
-  </div>
+  {#if hasActions && $$slots.actions}
+    <div class="actions">
+      <slot name="actions" />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -68,22 +71,31 @@
       --leo-alert-background-color,
       var(--default-background)
     );
-    display: flex;
     color: var(--default-text-color, var(--leo-color-text-primary));
     padding: var(--leo-spacing-xl);
     border-radius: var(--leo-radius-m);
     gap: var(--leo-spacing-xl);
     font: var(--leo-font-default-regular);
 
+    display: grid;
+    grid-template-columns: min-content auto;
+
     & .icon {
       --leo-icon-size: var(--leo-icon-m);
       color: var(--leo-icon-color);
-      padding-top: var(--leo-spacing-xs);
     }
 
     & .title {
       font: var(--leo-font-heading-h4);
     }
+
+    & .content {
+      grid-column: 2;
+    }
+
+    & .actions {
+      grid-column: 2;
+    }
   }
 
   .leo-alert.toast {
@@ -104,29 +116,7 @@
     }
   }
 
-  .leo-alert.simple {
-    --leo-icon-size: 16px;
-
-    display: flex;
-    flex-direction: row;
-    align-items: start;
-    & .content {
-      flex: 1;
-    }
-  }
-
-  .leo-alert.full {
-    --leo-icon-size: 26px;
-    display: grid;
-    grid-template-columns: min-content auto;
-    grid-template-rows: auto min-content;
-
-    & .content {
-      grid-column: 2;
-    }
-
-    & .actions {
-      grid-column: 2;
-    }
+  .leo-alert.full .icon {
+    --leo-icon-size: var(--leo-icon-xl);
   }
 </style>
diff --git a/src/components/alert/alertCenter.svelte b/src/components/alert/alertCenter.svelte
@@ -93,14 +93,15 @@
       on:mouseenter={() => alert.pauseDismiss()}
       on:mouseleave={() => alert.resumeDismiss()}
     >
-      <svelte:component this={alert.component || Alert} {...alert} isToast>
+      <svelte:component this={alert.component || Alert} {...alert} hasActions={alert.actions.length > 0} isToast>
         <div slot="title">
           {alert.title}
         </div>
         {alert.content}
         <div slot="actions">
           {#each alert.actions as action}
             <Button
+              size={alert.mode === "full" ? "medium" : "small"}
               fab={action.icon && !action.text}
               kind={action.kind || 'filled'}
               on:click={() => action.action(alert)}