chore(fuselage-toastbar): Toastbar Elevation (#921)

* chore: remove border from elevation

* fix: toastbar elevation

* fix: review

* chore: toastbar elevation fix

Author: dougfabris

packages/fuselage-toastbar/src/ToastBarZone.tsx

@@ -19,9 +19,8 @@ export const ToastBarContainer = styled(
   position: fixed;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   margin: 1rem;
-  z-index: 1;
+  z-index: 2;
   ${(p) => (p.position ? positionProps[p.position] : '')}
 `;
 

packages/fuselage/src/components/Box/props.stories.mdx

@@ -878,6 +878,8 @@ The `is` prop allows `Box` to render any component capable of handling common DO
       <Box elevation='0' />
       <Box elevation='1' />
       <Box elevation='2' />
+      <Box elevation='1nb' />
+      <Box elevation='2nb' />
     </>
   </Story>
 </Canvas>

packages/fuselage/src/components/Box/stylingProps.ts

@@ -153,7 +153,7 @@ export type StylingProps = {
   textDecorationLine: CSSProperties['textDecorationLine'];
   wordBreak: CSSProperties['wordBreak'];
 
-  elevation: '0' | '1' | '2';
+  elevation: '0' | '1' | '2' | '1nb' | '2nb';
   invisible: boolean;
   withTruncatedText: boolean;
   size: CSSProperties['blockSize'];
@@ -379,13 +379,26 @@ export const propDefs: Record<keyof StylingProps, PropDefinition> = {
         `;
       }
 
+      if (value === '1nb') {
+        return css`
+          box-shadow: 0px 0px 12px 0px ${Palette.shadow['shadow-elevation-1']};
+        `;
+      }
+
       if (value === '2') {
         return css`
           box-shadow: 0px 0px 2px 0px ${Palette.shadow['shadow-elevation-2x']},
             0px 0px 12px 0px ${Palette.shadow['shadow-elevation-2y']};
           border: 1px solid ${Palette.shadow['shadow-elevation-border']};
         `;
       }
+
+      if (value === '2nb') {
+        return css`
+          box-shadow: 0px 0px 2px 0px ${Palette.shadow['shadow-elevation-2x']},
+            0px 0px 12px 0px ${Palette.shadow['shadow-elevation-2y']};
+        `;
+      }
     },
   },
   invisible: {

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

@@ -70,7 +70,7 @@ export function ToastBar({
     >
       <Box
         className={`rcx-toastbar rcx-toastbar--${variant} ${className}`}
-        elevation='1'
+        elevation='2nb'
       >
         <div className='rcx-toastbar-inner'>
           <Icon size='x20' name={iconName} />

packages/fuselage/src/styles/mixins/elevation.scss

@@ -1,27 +1,15 @@
 @use '../colors.scss';
 @use '../../styles/functions.scss';
 
-@mixin elevation-level($level) {
+@mixin elevation-level($level, $border: true) {
   @if $level == 1 {
-    border: 1px
-      solid
-      functions.theme(
-        'color-shadow-elevation-border',
-        colors.elevation(border)
-      );
     box-shadow: 0
       0
       12px
       0
       functions.theme('color-shadow-elevation-1', colors.elevation(1));
   }
   @if $level == 2 {
-    border: 1px
-      solid
-      functions.theme(
-        'color-shadow-elevation-border',
-        colors.elevation(border)
-      );
     box-shadow: 0
         0
         2px
@@ -33,4 +21,12 @@
         0
         functions.theme('color-shadow-elevation-2y', colors.elevation('2y'));
   }
+  @if $border {
+    border: 1px
+      solid
+      functions.theme(
+        'color-shadow-elevation-border',
+        colors.elevation(border)
+      );
+  }
 }