**Breaking** [Alert] Introduce notice type, remove mode prop, and tit…

…le slot will always show if it has content (#912) * Alert - title always gets 'full' mode * Alert - 'notice' type * Alert - remove model="full", remove smaller font for notice, allow title always
brave · Nov 27, 2024 · 134e0ed · 134e0ed
1 parent 821c66c
commit 134e0ed
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 39 deletions.
diff --git a/src/components/alert/alert.stories.svelte b/src/components/alert/alert.stories.svelte
@@ -2,7 +2,7 @@
   import { Meta, Story, Template } from '@storybook/addon-svelte-csf'
   import Button from '../button/button.svelte'
 
-  import Alert, { modes, types } from './alert.svelte'
+  import Alert, { types } from './alert.svelte'
   import { showAlert } from './alertCenter.svelte'
   import Icon from '../icon/icon.svelte'
   import Slot from '../../storyHelpers/Slot.svelte'
@@ -16,12 +16,11 @@
   let duration = 2000
   let customButton = false
 
-  $: alertUser = (mode, type) =>
+  $: alertUser = (type) =>
     showAlert(
       {
         content,
         title,
-        mode: mode ?? 'simple',
         type: type ?? 'error',
         actions: hasAction
           ? [
@@ -59,7 +58,7 @@
       name="content-after"
       explanation="optional content after the main content of the alert"
     >
-      <Alert {...args} mode="simple">
+      <Alert {...args}>
         Some content
         <Button kind="plain-faint" fab slot="content-after">
           <Icon name="close" />
@@ -72,8 +71,8 @@
       This can be used to override the default icon for the different types of
       Alert"
     >
-      <Alert {...args} mode="full">
-        <div slot="title">Title</div>
+      <Alert {...args}>
+        <div slot="title">{args.title}</div>
         Some content
       </Alert>
     </Slot>
@@ -98,11 +97,10 @@
   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' },
+    title: { type: 'string', defaultValue: 'Title' },
     '--leo-alert-center-width': {
       type: 'string',
       description: 'The width to apply to the alert center'
@@ -116,13 +114,16 @@
       description: 'The css padding for the alert'
     }
   }}
+  args={{
+    title: 'Alert title',
+  }}
 />
 
 <Template let:args>
   <Alert {...args}>
-    <div slot="title">Title</div>
+    <div slot="title">{args.title}</div>
     Alert content
-    <div slot="actions" class:reverse={args.mode === 'full'}>
+    <div slot="actions">
       <Button kind="plain-faint">Secondary</Button>
       <Button kind="filled">Primary</Button>
     </div>
@@ -132,14 +133,14 @@
 <Story name="Alert" />
 <Story name="All" let:args>
   <div class="container">
-    {#each modes as mode}
+    {#each [true, false] as hasTitle}
       {#each types as type}
-        <Alert {mode} {type} {...args}>
-          <div slot="title">Title</div>
+        <Alert {type} {...args}>
+          <div slot="title">{#if hasTitle}{args.title}{/if}</div>
           Alert content
-          <div slot="actions" class="actions" class:reverse={mode === 'full'}>
-            <Button kind="plain-faint">Secondary</Button>
+          <div slot="actions" class="actions">
             <Button kind="filled">Primary</Button>
+            <Button kind="plain-faint">Secondary</Button>
           </div>
         </Alert>
       {/each}
@@ -178,7 +179,7 @@
   </div>
   <Button
     onClick={() => {
-      alertUser(args.mode, args.type)
+      alertUser(args.type)
     }}>Show Alert</Button
   >
 </Story>

diff --git a/src/components/alert/alert.svelte b/src/components/alert/alert.svelte
@@ -1,40 +1,35 @@
 <script lang="ts" context="module">
-  export const types = ['info', 'warning', 'error', 'success'] as const
-  export type AlertType = (typeof types)[number]
+  import type { IconName } from '@brave/leo/icons/meta'
 
-  export const modes = ['simple', 'full'] as const
-  export type AlertMode = (typeof modes)[number]
+  export const types = ['info', 'warning', 'error', 'success', 'notice'] as const
+  export type AlertType = (typeof types)[number]
 
-  const defaultIcons: { [P in AlertType]: string } = {
+  const defaultIcons: { [P in AlertType]: IconName } = {
     'info': 'info-filled',
     'error': 'warning-circle-filled',
     'warning': 'warning-triangle-filled',
-    'success': 'check-circle-filled'
+    'success': 'check-circle-filled',
+    'notice': 'info-outline'
   }
 </script>
 
 <script lang="ts">
   import Icon from '../icon/icon.svelte'
 
   export let type: AlertType = 'error'
-  export let mode: AlertMode = 'simple'
   export let isToast = false
+  export let hideIcon = false
+
+  // TODO: Remove when only supporting svelte >5 which can render slotted content conditionally
   export let hasActions = $$slots.actions
   export let hasContentAfter = $$slots['content-after']
-  export let hideIcon = false
 
   $: currentType = type ?? 'error'
-  $: currentMode = mode ?? 'simple'
 </script>
 
 <div
   class="leo-alert {currentType}"
   class:toast={isToast}
-  class:simple={currentMode === 'simple'}
-  class:full={currentMode === 'full'}
-  style:--default-background={`var(--leo-color-systemfeedback-${currentType}-background)`}
-  style:--default-icon-color={`var(--leo-color-systemfeedback-${currentType}-icon)`}
-  style:--default-text-color={`var(--leo-color-systemfeedback-${currentType}-text)`}
 >
   {#if !hideIcon}
   <div class="icon">
@@ -44,7 +39,7 @@
   </div>
   {/if}
   <div class="content">
-    {#if mode === 'full' && $$slots.title}
+    {#if $$slots.title}
       <div class="title">
         <slot name="title" />
       </div>
@@ -83,12 +78,42 @@
     color: var(--default-text-color, var(--leo-color-text-primary));
     padding: var(--leo-alert-padding, var(--leo-spacing-xl));
     border-radius: var(--leo-radius-m);
+    border: var(--leo-alert-border-width, var(--default-border-width)) solid
+      var(--leo-alert-border-color, var(--default-border-color));
     gap: var(--leo-spacing-xl) 0;
     font: var(--leo-font-default-regular);
 
     display: grid;
     grid-template-columns: min-content 1fr;
 
+    &.notice {
+      --default-background: transparent;
+      --default-icon-color: var(--leo-color-text-tertiary);
+      --default-text-color: var(--leo-alert-text-color, var(--leo-color-text-tertiary));
+      --default-border-width: 1px;
+      --default-border-color: var(--leo-color-divider-subtle);
+    }
+    &.success {
+      --default-background: var(--leo-color-systemfeedback-success-background);
+      --default-icon-color: var(--leo-color-systemfeedback-success-icon);
+      --default-text-color: var(--leo-color-systemfeedback-success-text);
+    }
+    &.info {
+      --default-background: var(--leo-color-systemfeedback-info-background);
+      --default-icon-color: var(--leo-color-systemfeedback-info-icon);
+      --default-text-color: var(--leo-color-systemfeedback-info-text);
+    }
+    &.error {
+      --default-background: var(--leo-color-systemfeedback-error-background);
+      --default-icon-color: var(--leo-color-systemfeedback-error-icon);
+      --default-text-color: var(--leo-color-systemfeedback-error-text);
+    }
+    &.warning {
+      --default-background: var(--leo-color-systemfeedback-warning-background);
+      --default-icon-color: var(--leo-color-systemfeedback-warning-icon);
+      --default-text-color: var(--leo-color-systemfeedback-warning-text);
+    }
+
     &:has(.content-after) {
       grid-template-columns: min-content 1fr auto;
     }
@@ -136,8 +161,4 @@
       background: var(--leo-color-green-20);
     }
   }
-
-  .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
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import type { AlertMode, AlertType } from './alert.svelte'
+  import type { AlertType } from './alert.svelte'
   import { writable } from 'svelte/store'
 
   /**
@@ -24,7 +24,6 @@
   })
 
   export interface AlertOptions {
-    mode: AlertMode
     type: AlertType
     content: string
     title?: string
@@ -37,7 +36,6 @@
   class AlertInfo {
     id = ++nextId
 
-    mode: AlertMode
     type: AlertType
     content: string
     title?: string
@@ -130,7 +128,7 @@
           {#each alert.actions as action}
             <svelte:component
               this={action.component || ButtonComponent}
-              size={alert.mode === "full" ? "medium" : "small"}
+              size="small"
               fab={action.icon && !action.text}
               kind={action.kind || 'filled'}
               onClick={() => action.action(alert)}