feat(Flyout): Added optional background prop (#2627)

* allow background color to be passed to layout menu component Co-authored-by: Sanam <[email protected]>
Codecademy · Dec 15, 2022 · ad14636 · ad14636
1 parent d387957
commit ad14636
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
@@ -28,7 +28,6 @@ export const Drawer: React.FC<DrawerProps> = ({
         <DrawerBase
           animate={{ width: fullWidth }}
           aria-expanded={expanded}
-          bg="background"
           exit={{ width: 0 }}
           initial={{ width: 0 }}
           overflowX="hidden"
@@ -38,6 +37,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           {...props}
         >
           <Box
+            bg="background-current"
             height="100%"
             left="0"
             position="absolute"

diff --git a/packages/gamut/src/Flyout/index.tsx b/packages/gamut/src/Flyout/index.tsx
@@ -1,4 +1,5 @@
 import { MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { Background, Colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 
 import { IconButton } from '../Button';
@@ -31,6 +32,7 @@ export interface FlyoutProps {
    * Contents for a top-left h2.
    */
   title: React.ReactNode;
+  bg?: Colors;
 }
 
 export const Flyout: React.FC<FlyoutProps> = ({
@@ -40,6 +42,7 @@ export const Flyout: React.FC<FlyoutProps> = ({
   openFrom = 'left',
   onClose,
   title,
+  bg = 'background',
 }) => {
   return (
     <Overlay
@@ -49,36 +52,38 @@ export const Flyout: React.FC<FlyoutProps> = ({
       onRequestClose={onClose}
       shroud
     >
-      <Drawer
-        bottom={0}
-        display="flex"
-        expanded={expanded}
-        flexDirection={openFrom === 'left' ? 'row' : 'row-reverse'}
-        position="fixed"
-        top={0}
-        {...{ [openFrom]: 0 }}
-      >
-        <Text
-          as="h2"
-          fontSize={22}
-          mb={8}
-          ml={16}
-          mt={24}
-          mr={40}
-          maxWidth="100%"
+      <Background bg={bg}>
+        <Drawer
+          bottom={0}
+          display="flex"
+          expanded={expanded}
+          flexDirection={openFrom === 'left' ? 'row' : 'row-reverse'}
+          position="fixed"
+          top={0}
+          {...{ [openFrom]: 0 }}
         >
-          {title}
-        </Text>
-        <IconButton
-          aria-label={closeLabel}
-          icon={MiniDeleteIcon}
-          onClick={onClose}
-          position="absolute"
-          top="1rem"
-          right="0.5rem"
-        />
-        {children}
-      </Drawer>
+          <Text
+            as="h2"
+            fontSize={22}
+            mb={8}
+            ml={16}
+            mt={24}
+            mr={40}
+            maxWidth="100%"
+          >
+            {title}
+          </Text>
+          <IconButton
+            aria-label={closeLabel}
+            icon={MiniDeleteIcon}
+            onClick={onClose}
+            position="absolute"
+            top="1rem"
+            right="0.5rem"
+          />
+          {children}
+        </Drawer>
+      </Background>
     </Overlay>
   );
 };
diff --git a/packages/styleguide/stories/Molecules/Flyout.stories.mdx b/packages/styleguide/stories/Molecules/Flyout.stories.mdx
@@ -41,7 +41,7 @@ Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#cont
             title="About Baharroth"
             onClose={() => setExpanded(false)}
           >
-            <Box bg="background" textColor="text" m={16}>
+            <Box textColor="text" m={16}>
               Baharroth, &quot;the Cry of the Wind,&quot; is the Winged Phoenix,
               the oldest of the Swooping Hawks and the first Exarch of those
               winged Aspect Warriors. Baharroth is the founder of the Eldar