Skip to content

Commit 031c4a5

Browse files
dougfabrisdougfabris
authored
feat(fuselage): ToastBar visual improvements (#1025)
1 parent c41a022 commit 031c4a5

File tree

4 files changed

+98
-76
lines changed

4 files changed

+98
-76
lines changed

‎packages/fuselage/src/components/ToastBar/ToastBar.stories.tsx

+4-19
Original file line numberDiff line numberDiff line change
@@ -56,27 +56,12 @@ Error.args = {
5656
variant: 'error',
5757
};
5858

59-
export const Small = Template.bind({});
60-
Small.args = {
61-
children: 'Lorem ipsum dolor sit amet',
62-
};
63-
64-
export const SuccessWithCloseButton = Template.bind({});
65-
SuccessWithCloseButton.args = {
66-
children: 'Lorem ipsum dolor sit amet',
67-
variant: 'success',
59+
export const WithCloseButton = Template.bind({});
60+
WithCloseButton.args = {
6861
onClose: action('clicked'),
6962
};
7063

71-
export const ErrorWithCloseButton = Template.bind({});
72-
ErrorWithCloseButton.args = {
64+
export const TinyText = Template.bind({});
65+
TinyText.args = {
7366
children: 'Lorem ipsum dolor sit amet',
74-
variant: 'error',
75-
onClose: action('clicked'),
76-
};
77-
78-
export const DefaultWithCloseButton = Template.bind({});
79-
DefaultWithCloseButton.args = {
80-
children: 'Lorem ipsum dolor sit amet',
81-
onClose: action('clicked'),
8267
};

‎packages/fuselage/src/components/ToastBar/ToastBar.styles.scss

+81-41
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,114 @@
22
@use '../../styles/lengths.scss';
33
@use '../../styles/typography.scss';
44

5+
$toastbar-color: theme('toastbar-color', colors.font(default));
6+
7+
$toastbar-border-radius: theme(
8+
'toastbar-border-radius',
9+
lengths.border-radius(medium)
10+
);
11+
12+
$toastbar-success-color: theme(
13+
'toastbar-success-color',
14+
colors.status-font(on-success)
15+
);
16+
17+
$toastbar-error-color: theme(
18+
'toastbar-error-color',
19+
colors.status-font(on-danger)
20+
);
21+
22+
$toastbar-background-color: theme(
23+
'toastbar-background-color',
24+
colors.surface(tint)
25+
);
26+
27+
$toastbar-progressbar-background-color: theme(
28+
'toastbar-progressbar-background-color',
29+
colors.surface(neutral)
30+
);
31+
532
.rcx-toastbar {
633
position: relative;
734

835
min-width: lengths.size(232);
936
max-width: lengths.size(416);
1037

11-
border-radius: theme('toastbar-border-radius', lengths.border-radius(medium));
38+
color: $toastbar-color;
39+
40+
border-radius: $toastbar-border-radius;
41+
42+
background-color: $toastbar-background-color;
1243

1344
@include typography.use-font-scale(p2);
1445

15-
&--info {
16-
background-color: theme(
17-
'toastbar-info-background-color',
18-
colors.surface(neutral)
19-
);
46+
&::before {
47+
position: absolute;
48+
top: 0;
49+
50+
display: block;
51+
52+
width: 100%;
53+
height: lengths.size(4);
54+
55+
content: '';
56+
57+
border-radius: $toastbar-border-radius $toastbar-border-radius 0 0;
58+
background-color: transparent;
2059
}
2160

2261
&--success {
23-
color: theme('toastbar-success-color', colors.status-font(on-success));
24-
background-color: theme(
25-
'toastbar-success-background-color',
26-
colors.status-background(success)
27-
);
62+
&::before {
63+
background-color: $toastbar-success-color;
64+
}
2865
}
2966

3067
&--error {
31-
color: theme('toastbar-error-color', colors.font(danger));
32-
background-color: theme(
33-
'toastbar-error-background-color',
34-
colors.status-background(danger)
35-
);
68+
&::before {
69+
background-color: $toastbar-error-color;
70+
}
3671
}
37-
}
3872

39-
.rcx-toastbar-inner {
40-
display: flex;
73+
&_inner {
74+
display: flex;
4175

42-
padding: lengths.padding(16);
43-
}
76+
padding: lengths.padding(16);
77+
}
4478

45-
.rcx-toastbar-content {
46-
width: lengths.size(full);
47-
margin: lengths.margin(0) lengths.margin(16);
48-
}
79+
&_content {
80+
width: lengths.size(full);
81+
margin: lengths.margin(0) lengths.margin(16);
82+
}
4983

50-
$toastbar-border-radius: theme(
51-
'toastbar-progressbar-border-radius',
52-
lengths.border-radius(medium)
53-
);
84+
&_icon {
85+
&--success {
86+
color: $toastbar-success-color;
87+
}
5488

55-
.rcx-toastbar-progressbar {
56-
position: absolute;
57-
bottom: 0;
89+
&--error {
90+
color: $toastbar-error-color;
91+
}
92+
}
5893

59-
overflow: hidden;
94+
&_progressbar {
95+
position: absolute;
96+
bottom: 0;
6097

61-
width: 100%;
62-
height: lengths.size(4);
98+
overflow: hidden;
6399

64-
border-radius: 0 0 $toastbar-border-radius $toastbar-border-radius;
100+
width: 100%;
101+
height: lengths.size(4);
65102

66-
&::after {
67-
display: block;
103+
border-radius: 0 0 $toastbar-border-radius $toastbar-border-radius;
68104

69-
height: 100%;
105+
&::after {
106+
display: block;
70107

71-
content: '';
108+
height: 100%;
109+
110+
content: '';
72111

73-
background-color: colors.surface-neutral-alpha(10);
112+
background-color: $toastbar-progressbar-background-color;
113+
}
74114
}
75115
}

‎packages/fuselage/src/components/ToastBar/ToastBar.tsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export function ToastBar({
2525
onClose,
2626
}: ToastBarProps) {
2727
const iconName =
28-
(variant === 'success' && 'check') ||
29-
(variant === 'error' && 'warning') ||
28+
(variant === 'success' && 'circle-check') ||
29+
(variant === 'error' && 'ban') ||
3030
'info';
3131

3232
const sideOpen = keyframes`
@@ -73,26 +73,22 @@ export function ToastBar({
7373
elevation='2nb'
7474
borderRadius='x4'
7575
>
76-
<div className='rcx-toastbar-inner'>
77-
<Icon size='x20' name={iconName} />
78-
<div className='rcx-toastbar-content' id={toastId}>
76+
<div className='rcx-toastbar_inner'>
77+
<Icon
78+
className={`rcx-toastbar_icon--${variant}`}
79+
size='x20'
80+
name={iconName}
81+
/>
82+
<div className='rcx-toastbar_content' id={toastId}>
7983
{children}
8084
</div>
8185
{onClose && (
8286
<div className='rcx-toastbar-close'>
83-
<IconButton
84-
tiny
85-
{...{
86-
success: variant === 'success',
87-
danger: variant === 'error',
88-
}}
89-
onClick={() => onClose(toastId)}
90-
icon='cross'
91-
/>
87+
<IconButton tiny onClick={() => onClose(toastId)} icon='cross' />
9288
</div>
9389
)}
9490
</div>
95-
<Box className={[progressBarAnimation, 'rcx-toastbar-progressbar']} />
91+
<Box className={[progressBarAnimation, 'rcx-toastbar_progressbar']} />
9692
</Box>
9793
</Box>
9894
);

‎packages/fuselage/src/styles/lengths.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
$border-width-sizes: (
6666
'default': 1,
6767
'medium': 2,
68+
'large': 4,
6869
);
6970

7071
@function border-width($value, $scape: px) {
@@ -78,7 +79,7 @@ $border-width-sizes: (
7879
}
7980
@return functions.to-rem(map.get($border-width-sizes, $value));
8081
} @else {
81-
@error 'value must be none, default, medium, 1, 2, or 4';
82+
@error 'value must be none, default, medium, large, 1, 2, or 4';
8283
}
8384
}
8485

0 commit comments

Comments
 (0)