Skip to content

Commit 4464ef9

Browse files
bl-nerozmb3
bl-nero
and
zmb3
authored
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]>
1 parent 8352594 commit 4464ef9

File tree

11 files changed

+303
-276
lines changed

11 files changed

+303
-276
lines changed

‎web/packages/design/src/Alert/Alert.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -369,14 +369,14 @@ const ActionButtons = ({
369369
};
370370

371371
/** Renders either a regular or a link button, depending on the action. */
372-
const ActionButton = ({
372+
export const ActionButton = ({
373373
action: { href, content, onClick },
374374
fill,
375375
intent,
376376
}: {
377377
action: Action;
378-
fill: ButtonFill;
379-
intent: ButtonIntent;
378+
fill?: ButtonFill;
379+
intent?: ButtonIntent;
380380
}) =>
381381
href ? (
382382
<Button

‎web/packages/design/src/Alert/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
export {
2020
type Action,
21+
ActionButton,
2122
Alert,
2223
Danger,
2324
Info,

‎web/packages/shared/components/Notification/Notification.story.tsx

Lines changed: 73 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
*/
1818

1919
import React, { useState } from 'react';
20-
import { Info, Warning } from 'design/Icon';
20+
import { Bots } from 'design/Icon';
2121
import Flex from 'design/Flex';
2222

2323
import { Notification } from './Notification';
@@ -45,8 +45,6 @@ export const Notifications = () => {
4545
description: loremIpsum,
4646
},
4747
}}
48-
Icon={Info}
49-
getColor={theme => theme.colors.info}
5048
onRemove={() => {}}
5149
isAutoRemovable={false}
5250
/>
@@ -60,8 +58,6 @@ export const Notifications = () => {
6058
description: loremIpsum,
6159
},
6260
}}
63-
Icon={Warning}
64-
getColor={theme => theme.colors.warning}
6561
onRemove={() => {}}
6662
isAutoRemovable={false}
6763
/>
@@ -75,8 +71,33 @@ export const Notifications = () => {
7571
description: loremIpsum,
7672
},
7773
}}
78-
Icon={Warning}
79-
getColor={theme => theme.colors.error.main}
74+
onRemove={() => {}}
75+
isAutoRemovable={false}
76+
/>
77+
78+
<Notification
79+
item={{
80+
id: crypto.randomUUID(),
81+
severity: 'neutral',
82+
content: {
83+
title: 'Neutral with title and description',
84+
description: loremIpsum,
85+
},
86+
}}
87+
onRemove={() => {}}
88+
isAutoRemovable={false}
89+
/>
90+
91+
<Notification
92+
item={{
93+
id: crypto.randomUUID(),
94+
severity: 'neutral',
95+
content: {
96+
title: 'Custom icon with title and description',
97+
description: loremIpsum,
98+
icon: Bots,
99+
},
100+
}}
80101
onRemove={() => {}}
81102
isAutoRemovable={false}
82103
/>
@@ -87,10 +108,12 @@ export const Notifications = () => {
87108
item={{
88109
id: crypto.randomUUID(),
89110
severity: 'info',
90-
content: 'Multiline info without title. ' + loremIpsum,
111+
content: {
112+
title: 'Info with title and description',
113+
subtitle: 'And some subtitle, too',
114+
description: loremIpsum,
115+
},
91116
}}
92-
Icon={Info}
93-
getColor={theme => theme.colors.info}
94117
onRemove={() => {}}
95118
isAutoRemovable={false}
96119
/>
@@ -99,10 +122,12 @@ export const Notifications = () => {
99122
item={{
100123
id: crypto.randomUUID(),
101124
severity: 'warn',
102-
content: 'Multiline warning without title. ' + loremIpsum,
125+
content: {
126+
title: 'Warning with title and description',
127+
subtitle: 'And some subtitle, too',
128+
description: loremIpsum,
129+
},
103130
}}
104-
Icon={Warning}
105-
getColor={theme => theme.colors.warning}
106131
onRemove={() => {}}
107132
isAutoRemovable={false}
108133
/>
@@ -111,10 +136,12 @@ export const Notifications = () => {
111136
item={{
112137
id: crypto.randomUUID(),
113138
severity: 'error',
114-
content: 'Multiline error without title. ' + loremIpsum,
139+
content: {
140+
title: 'Error with title and description',
141+
subtitle: 'And some subtitle, too',
142+
description: loremIpsum,
143+
},
115144
}}
116-
Icon={Warning}
117-
getColor={theme => theme.colors.error.main}
118145
onRemove={() => {}}
119146
isAutoRemovable={false}
120147
/>
@@ -125,10 +152,8 @@ export const Notifications = () => {
125152
item={{
126153
id: crypto.randomUUID(),
127154
severity: 'info',
128-
content: 'Info without title',
155+
content: 'Multiline info without title. ' + loremIpsum,
129156
}}
130-
Icon={Info}
131-
getColor={theme => theme.colors.info}
132157
onRemove={() => {}}
133158
isAutoRemovable={false}
134159
/>
@@ -137,10 +162,8 @@ export const Notifications = () => {
137162
item={{
138163
id: crypto.randomUUID(),
139164
severity: 'warn',
140-
content: 'Warning without title',
165+
content: 'Multiline warning without title. ' + loremIpsum,
141166
}}
142-
Icon={Warning}
143-
getColor={theme => theme.colors.warning}
144167
onRemove={() => {}}
145168
isAutoRemovable={false}
146169
/>
@@ -149,10 +172,8 @@ export const Notifications = () => {
149172
item={{
150173
id: crypto.randomUUID(),
151174
severity: 'error',
152-
content: 'Error without title',
175+
content: 'Multiline error without title. ' + loremIpsum,
153176
}}
154-
Icon={Warning}
155-
getColor={theme => theme.colors.error.main}
156177
onRemove={() => {}}
157178
isAutoRemovable={false}
158179
/>
@@ -163,53 +184,27 @@ export const Notifications = () => {
163184
item={{
164185
id: crypto.randomUUID(),
165186
severity: 'info',
166-
content: {
167-
title: 'Info with link',
168-
description: loremIpsum,
169-
link: {
170-
href: 'https://goteleport.com',
171-
text: 'goteleport.com',
172-
},
173-
},
174-
}}
175-
Icon={Info}
176-
getColor={theme => theme.colors.info}
177-
onRemove={() => {}}
178-
isAutoRemovable={false}
179-
/>
180-
<Notification
181-
item={{
182-
id: crypto.randomUUID(),
183-
severity: 'warn',
184-
content: {
185-
title: 'Warning with link',
186-
description: loremIpsum,
187-
link: {
188-
href: 'https://goteleport.com',
189-
text: 'goteleport.com',
190-
},
191-
},
187+
content: 'Info without title',
192188
}}
193-
Icon={Warning}
194-
getColor={theme => theme.colors.warning}
195189
onRemove={() => {}}
196190
isAutoRemovable={false}
197191
/>
192+
</Flex>
193+
194+
<Flex flexDirection="column" gap={4}>
198195
<Notification
199196
item={{
200197
id: crypto.randomUUID(),
201-
severity: 'error',
198+
severity: 'info',
202199
content: {
203-
title: 'Error with link',
200+
title: 'Info with link',
204201
description: loremIpsum,
205-
link: {
202+
action: {
206203
href: 'https://goteleport.com',
207-
text: 'goteleport.com',
204+
content: 'Learn More',
208205
},
209206
},
210207
}}
211-
Icon={Warning}
212-
getColor={theme => theme.colors.error.main}
213208
onRemove={() => {}}
214209
isAutoRemovable={false}
215210
/>
@@ -225,67 +220,61 @@ export const Notifications = () => {
225220
list: [loremIpsum, loremIpsum],
226221
},
227222
}}
228-
Icon={Info}
229-
getColor={theme => theme.colors.info}
230223
onRemove={() => {}}
231224
isAutoRemovable={false}
232225
/>
226+
</Flex>
227+
228+
<Flex flexDirection="column" gap={4}>
233229
<Notification
234230
item={{
235231
id: crypto.randomUUID(),
236-
severity: 'warn',
237-
content: {
238-
title: 'Warning with list',
239-
list: [loremIpsum, loremIpsum],
240-
},
232+
severity: 'info',
233+
content:
234+
'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
241235
}}
242-
Icon={Warning}
243-
getColor={theme => theme.colors.warning.main}
244236
onRemove={() => {}}
245237
isAutoRemovable={false}
246238
/>
239+
</Flex>
240+
<Flex flexDirection="column" gap={4}>
247241
<Notification
248242
item={{
249243
id: crypto.randomUUID(),
250-
severity: 'error',
244+
severity: 'info',
251245
content: {
252-
title: 'Error with list',
253-
list: [loremIpsum, loremIpsum],
246+
title:
247+
'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',
248+
description:
249+
'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
254250
},
255251
}}
256-
Icon={Warning}
257-
getColor={theme => theme.colors.error.main}
258252
onRemove={() => {}}
259253
isAutoRemovable={false}
260254
/>
261255
</Flex>
262-
263256
<Flex flexDirection="column" gap={4}>
264257
<Notification
265258
item={{
266259
id: crypto.randomUUID(),
267260
severity: 'info',
268-
content:
269-
'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
261+
content: {
262+
description: 'Info with description, without a title',
263+
},
270264
}}
271-
Icon={Info}
272-
getColor={theme => theme.colors.info}
273265
onRemove={() => {}}
274266
isAutoRemovable={false}
275267
/>
268+
</Flex>
269+
<Flex flexDirection="column" gap={4}>
276270
<Notification
277271
item={{
278272
id: crypto.randomUUID(),
279273
severity: 'info',
280274
content: {
281-
title:
282-
'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',
283-
description:
284-
'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
275+
list: ['Info with a list', 'But no title'],
285276
},
286277
}}
287-
Icon={Info}
288-
getColor={theme => theme.colors.info}
289278
onRemove={() => {}}
290279
isAutoRemovable={false}
291280
/>
@@ -310,10 +299,7 @@ export const AutoRemovable = () => {
310299
"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.",
311300
}}
312301
onRemove={() => setShowInfo(false)}
313-
Icon={Info}
314-
getColor={theme => theme.colors.info}
315302
isAutoRemovable={true}
316-
autoRemoveDurationMs={5000}
317303
/>
318304
) : (
319305
<div>Info notification has been removed</div>
@@ -327,10 +313,7 @@ export const AutoRemovable = () => {
327313
"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.",
328314
}}
329315
onRemove={() => setShowWarning(false)}
330-
Icon={Warning}
331-
getColor={theme => theme.colors.warning}
332316
isAutoRemovable={true}
333-
autoRemoveDurationMs={5000}
334317
/>
335318
) : (
336319
<div>Warning notification has been removed</div>
@@ -344,8 +327,6 @@ export const AutoRemovable = () => {
344327
"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.",
345328
}}
346329
onRemove={() => setShowError(false)}
347-
Icon={Warning}
348-
getColor={theme => theme.colors.error.main}
349330
isAutoRemovable={false}
350331
/>
351332
) : (

0 commit comments

Comments
 (0)