Update the snackbar notification design (gravitational#46126)

* Add an alert CTA label This label allows to customize text on a button that contains the alert link. * Comment * Use the new alert CTA label to display a link button The link button replaces current visual representation of a cluster alert, where the entire alert message is a link. * Update api/types/cluster_alert.go Co-authored-by: Zac Bergquist <[email protected]> * Rename CTA to "link text" * Rename CTA to "link text" * review * Remove unnecessary functions * Update the snackbar notification design * Review * Review * Get rid of min-height * Revert e/ update --------- Co-authored-by: Zac Bergquist <[email protected]>
incident-io · Sep 9, 2024 · 4464ef9 · 4464ef9
1 parent 8352594
commit 4464ef9
Show file tree

Hide file tree

Showing 11 changed files with 303 additions and 276 deletions.
diff --git a/web/packages/design/src/Alert/Alert.tsx b/web/packages/design/src/Alert/Alert.tsx
@@ -369,14 +369,14 @@ const ActionButtons = ({
 };
 
 /** Renders either a regular or a link button, depending on the action. */
-const ActionButton = ({
+export const ActionButton = ({
   action: { href, content, onClick },
   fill,
   intent,
 }: {
   action: Action;
-  fill: ButtonFill;
-  intent: ButtonIntent;
+  fill?: ButtonFill;
+  intent?: ButtonIntent;
 }) =>
   href ? (
     <Button

diff --git a/web/packages/design/src/Alert/index.ts b/web/packages/design/src/Alert/index.ts
@@ -18,6 +18,7 @@
 
 export {
   type Action,
+  ActionButton,
   Alert,
   Danger,
   Info,

diff --git a/web/packages/shared/components/Notification/Notification.story.tsx b/web/packages/shared/components/Notification/Notification.story.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useState } from 'react';
-import { Info, Warning } from 'design/Icon';
+import { Bots } from 'design/Icon';
 import Flex from 'design/Flex';
 
 import { Notification } from './Notification';
@@ -45,8 +45,6 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -60,8 +58,6 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -75,8 +71,33 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'neutral',
+            content: {
+              title: 'Neutral with title and description',
+              description: loremIpsum,
+            },
+          }}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'neutral',
+            content: {
+              title: 'Custom icon with title and description',
+              description: loremIpsum,
+              icon: Bots,
+            },
+          }}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -87,10 +108,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: 'Multiline info without title. ' + loremIpsum,
+            content: {
+              title: 'Info with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -99,10 +122,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'warn',
-            content: 'Multiline warning without title. ' + loremIpsum,
+            content: {
+              title: 'Warning with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -111,10 +136,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'error',
-            content: 'Multiline error without title. ' + loremIpsum,
+            content: {
+              title: 'Error with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -125,10 +152,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: 'Info without title',
+            content: 'Multiline info without title. ' + loremIpsum,
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -137,10 +162,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'warn',
-            content: 'Warning without title',
+            content: 'Multiline warning without title. ' + loremIpsum,
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -149,10 +172,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'error',
-            content: 'Error without title',
+            content: 'Multiline error without title. ' + loremIpsum,
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -163,53 +184,27 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: {
-              title: 'Info with link',
-              description: loremIpsum,
-              link: {
-                href: 'https://goteleport.com',
-                text: 'goteleport.com',
-              },
-            },
-          }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
-          onRemove={() => {}}
-          isAutoRemovable={false}
-        />
-        <Notification
-          item={{
-            id: crypto.randomUUID(),
-            severity: 'warn',
-            content: {
-              title: 'Warning with link',
-              description: loremIpsum,
-              link: {
-                href: 'https://goteleport.com',
-                text: 'goteleport.com',
-              },
-            },
+            content: 'Info without title',
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'error',
+            severity: 'info',
             content: {
-              title: 'Error with link',
+              title: 'Info with link',
               description: loremIpsum,
-              link: {
+              action: {
                 href: 'https://goteleport.com',
-                text: 'goteleport.com',
+                content: 'Learn More',
               },
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -225,67 +220,61 @@ export const Notifications = () => {
               list: [loremIpsum, loremIpsum],
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'warn',
-            content: {
-              title: 'Warning with list',
-              list: [loremIpsum, loremIpsum],
-            },
+            severity: 'info',
+            content:
+              'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'error',
+            severity: 'info',
             content: {
-              title: 'Error with list',
-              list: [loremIpsum, loremIpsum],
+              title:
+                'A very long title with a very long address that spans multiple lines tcp-postgres.foo.bar.baz.cloud.gravitational.io and some more text on another line',
+              description:
+                'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
       </Flex>
-
       <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content:
-              'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
+            content: {
+              description: 'Info with description, without a title',
+            },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
             content: {
-              title:
-                'A very long title with a very long address that spans multiple lines tcp-postgres.foo.bar.baz.cloud.gravitational.io and some more text on another line',
-              description:
-                'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
+              list: ['Info with a list', 'But no title'],
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -310,10 +299,7 @@ export const AutoRemovable = () => {
               "This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowInfo(false)}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           isAutoRemovable={true}
-          autoRemoveDurationMs={5000}
         />
       ) : (
         <div>Info notification has been removed</div>
@@ -327,10 +313,7 @@ export const AutoRemovable = () => {
               "This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowWarning(false)}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           isAutoRemovable={true}
-          autoRemoveDurationMs={5000}
         />
       ) : (
         <div>Warning notification has been removed</div>
@@ -344,8 +327,6 @@ export const AutoRemovable = () => {
               "This can only be removed by clicking on the X. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowError(false)}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           isAutoRemovable={false}
         />
       ) : (
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ @@
     export {
       type Action,
+      ActionButton,
       Alert,
       Danger,
       Info,
@@ Expand Down @@