feat(fuselage): ToastBar visual improvements (#1025)

RocketChat · Apr 24, 2023 · 031c4a5 · 031c4a5
1 parent c41a022
commit 031c4a5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 76 deletions.
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.stories.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.stories.tsx
@@ -56,27 +56,12 @@ Error.args = {
   variant: 'error',
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  children: 'Lorem ipsum dolor sit amet',
-};
-
-export const SuccessWithCloseButton = Template.bind({});
-SuccessWithCloseButton.args = {
-  children: 'Lorem ipsum dolor sit amet',
-  variant: 'success',
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = {
   onClose: action('clicked'),
 };
 
-export const ErrorWithCloseButton = Template.bind({});
-ErrorWithCloseButton.args = {
+export const TinyText = Template.bind({});
+TinyText.args = {
   children: 'Lorem ipsum dolor sit amet',
-  variant: 'error',
-  onClose: action('clicked'),
-};
-
-export const DefaultWithCloseButton = Template.bind({});
-DefaultWithCloseButton.args = {
-  children: 'Lorem ipsum dolor sit amet',
-  onClose: action('clicked'),
 };
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
@@ -2,74 +2,114 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$toastbar-color: theme('toastbar-color', colors.font(default));
+
+$toastbar-border-radius: theme(
+  'toastbar-border-radius',
+  lengths.border-radius(medium)
+);
+
+$toastbar-success-color: theme(
+  'toastbar-success-color',
+  colors.status-font(on-success)
+);
+
+$toastbar-error-color: theme(
+  'toastbar-error-color',
+  colors.status-font(on-danger)
+);
+
+$toastbar-background-color: theme(
+  'toastbar-background-color',
+  colors.surface(tint)
+);
+
+$toastbar-progressbar-background-color: theme(
+  'toastbar-progressbar-background-color',
+  colors.surface(neutral)
+);
+
 .rcx-toastbar {
   position: relative;
 
   min-width: lengths.size(232);
   max-width: lengths.size(416);
 
-  border-radius: theme('toastbar-border-radius', lengths.border-radius(medium));
+  color: $toastbar-color;
+
+  border-radius: $toastbar-border-radius;
+
+  background-color: $toastbar-background-color;
 
   @include typography.use-font-scale(p2);
 
-  &--info {
-    background-color: theme(
-      'toastbar-info-background-color',
-      colors.surface(neutral)
-    );
+  &::before {
+    position: absolute;
+    top: 0;
+
+    display: block;
+
+    width: 100%;
+    height: lengths.size(4);
+
+    content: '';
+
+    border-radius: $toastbar-border-radius $toastbar-border-radius 0 0;
+    background-color: transparent;
   }
 
   &--success {
-    color: theme('toastbar-success-color', colors.status-font(on-success));
-    background-color: theme(
-      'toastbar-success-background-color',
-      colors.status-background(success)
-    );
+    &::before {
+      background-color: $toastbar-success-color;
+    }
   }
 
   &--error {
-    color: theme('toastbar-error-color', colors.font(danger));
-    background-color: theme(
-      'toastbar-error-background-color',
-      colors.status-background(danger)
-    );
+    &::before {
+      background-color: $toastbar-error-color;
+    }
   }
-}
 
-.rcx-toastbar-inner {
-  display: flex;
+  &_inner {
+    display: flex;
 
-  padding: lengths.padding(16);
-}
+    padding: lengths.padding(16);
+  }
 
-.rcx-toastbar-content {
-  width: lengths.size(full);
-  margin: lengths.margin(0) lengths.margin(16);
-}
+  &_content {
+    width: lengths.size(full);
+    margin: lengths.margin(0) lengths.margin(16);
+  }
 
-$toastbar-border-radius: theme(
-  'toastbar-progressbar-border-radius',
-  lengths.border-radius(medium)
-);
+  &_icon {
+    &--success {
+      color: $toastbar-success-color;
+    }
 
-.rcx-toastbar-progressbar {
-  position: absolute;
-  bottom: 0;
+    &--error {
+      color: $toastbar-error-color;
+    }
+  }
 
-  overflow: hidden;
+  &_progressbar {
+    position: absolute;
+    bottom: 0;
 
-  width: 100%;
-  height: lengths.size(4);
+    overflow: hidden;
 
-  border-radius: 0 0 $toastbar-border-radius $toastbar-border-radius;
+    width: 100%;
+    height: lengths.size(4);
 
-  &::after {
-    display: block;
+    border-radius: 0 0 $toastbar-border-radius $toastbar-border-radius;
 
-    height: 100%;
+    &::after {
+      display: block;
 
-    content: '';
+      height: 100%;
+
+      content: '';
 
-    background-color: colors.surface-neutral-alpha(10);
+      background-color: $toastbar-progressbar-background-color;
+    }
   }
 }
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
@@ -25,8 +25,8 @@ export function ToastBar({
   onClose,
 }: ToastBarProps) {
   const iconName =
-    (variant === 'success' && 'check') ||
-    (variant === 'error' && 'warning') ||
+    (variant === 'success' && 'circle-check') ||
+    (variant === 'error' && 'ban') ||
     'info';
 
   const sideOpen = keyframes`
@@ -73,26 +73,22 @@ export function ToastBar({
         elevation='2nb'
         borderRadius='x4'
       >
-        <div className='rcx-toastbar-inner'>
-          <Icon size='x20' name={iconName} />
-          <div className='rcx-toastbar-content' id={toastId}>
+        <div className='rcx-toastbar_inner'>
+          <Icon
+            className={`rcx-toastbar_icon--${variant}`}
+            size='x20'
+            name={iconName}
+          />
+          <div className='rcx-toastbar_content' id={toastId}>
             {children}
           </div>
           {onClose && (
             <div className='rcx-toastbar-close'>
-              <IconButton
-                tiny
-                {...{
-                  success: variant === 'success',
-                  danger: variant === 'error',
-                }}
-                onClick={() => onClose(toastId)}
-                icon='cross'
-              />
+              <IconButton tiny onClick={() => onClose(toastId)} icon='cross' />
             </div>
           )}
         </div>
-        <Box className={[progressBarAnimation, 'rcx-toastbar-progressbar']} />
+        <Box className={[progressBarAnimation, 'rcx-toastbar_progressbar']} />
       </Box>
     </Box>
   );

diff --git a/packages/fuselage/src/styles/lengths.scss b/packages/fuselage/src/styles/lengths.scss
@@ -65,6 +65,7 @@
 $border-width-sizes: (
   'default': 1,
   'medium': 2,
+  'large': 4,
 );
 
 @function border-width($value, $scape: px) {
@@ -78,7 +79,7 @@ $border-width-sizes: (
     }
     @return functions.to-rem(map.get($border-width-sizes, $value));
   } @else {
-    @error 'value must be none, default, medium, 1, 2, or 4';
+    @error 'value must be none, default, medium, large, 1, 2, or 4';
   }
 }