Skip to content

Update the snackbar notification design #46126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bl-nero merged 17 commits into from
Sep 9, 2024
Merged

Update the snackbar notification design #46126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3452d94
Add an alert CTA label
bl-nero Aug 28, 2024
e5fd1b6
Comment
bl-nero Aug 28, 2024
35e86f9
Use the new alert CTA label to display a link button
bl-nero Aug 28, 2024
2caaddf
Update api/types/cluster_alert.go
bl-nero Aug 29, 2024
a157da8
Rename CTA to "link text"
bl-nero Sep 2, 2024
8341e1d
Merge branch 'master' into bl-nero/banners
bl-nero Sep 2, 2024
26c47e4
Merge branch 'bl-nero/banners' into bl-nero/banners-ui
bl-nero Sep 2, 2024
3709fee
Rename CTA to "link text"
bl-nero Sep 2, 2024
188d872
review
bl-nero Sep 2, 2024
2befd1b
Remove unnecessary functions
bl-nero Sep 2, 2024
7d78c5b
Update the snackbar notification design
bl-nero Aug 29, 2024
50628cf
Review
bl-nero Sep 4, 2024
513e342
Review
bl-nero Sep 5, 2024
8a47b16
Merge branch 'master' into bl-nero/notifications
bl-nero Sep 6, 2024
a327871
Get rid of min-height
bl-nero Sep 6, 2024
54caf86
Merge branch 'master' into bl-nero/notifications
bl-nero Sep 6, 2024
366b1bb
Revert e/ update
bl-nero Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions web/packages/design/src/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions web/packages/design/src/Alert/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

export {
type Action,
ActionButton,
Alert,
Danger,
Info,
Expand Down
165 changes: 73 additions & 92 deletions web/packages/shared/components/Notification/Notification.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -45,8 +45,6 @@ export const Notifications = () => {
description: loremIpsum,
},
}}
Icon={Info}
getColor={theme => theme.colors.info}
onRemove={() => {}}
isAutoRemovable={false}
/>
Expand All @@ -60,8 +58,6 @@ export const Notifications = () => {
description: loremIpsum,
},
}}
Icon={Warning}
getColor={theme => theme.colors.warning}
onRemove={() => {}}
isAutoRemovable={false}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
/>
) : (
Expand Down
Loading