fix(Flyout): move background color to fix overflow

Currently, if flyout overflows, the background color only extends to the bottom of the screen and on scroll is transparent. This fixes that.
Codecademy · Dec 16, 2022 · de5b8ca · de5b8ca
1 parent 64d20ea
commit de5b8ca
Show file tree

Hide file tree

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

diff --git a/packages/styleguide/stories/Molecules/Flyout.stories.mdx b/packages/styleguide/stories/Molecules/Flyout.stories.mdx
@@ -73,6 +73,8 @@ Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#cont
 
 <Props story="Flyout" />
 
+## Flyout in Dark Mode
+
 Flyouts work in light and dark `ColorModes`.
 
 <Canvas>
@@ -127,3 +129,84 @@ Flyouts work in light and dark `ColorModes`.
     }}
   </Story>
 </Canvas>
+
+## Flyout with Overflow
+
+Flyouts scroll on vertical overflow and keep the background color.
+
+<Canvas>
+  <Story name="Flyout with Overflow">
+    {(args) => {
+      const [expanded, setExpanded] = useState(false);
+      return (
+        <Box height="20rem" p={12}>
+          <Flyout
+            {...args}
+            expanded={expanded}
+            title="Traitor Legions, Renegade Space Marine Chapters"
+            onClose={() => setExpanded(false)}
+            bg="beige"
+          >
+            <Box textColor="text" m={16}>
+              Several of the Renegades listed here are simply Space Marine
+              Chapters that have turned on the Imperium of Man or been unfairly
+              declared Excommunicate Traitoris for one reason or another, but
+              still view themselves as loyal to the Emperor of Mankind and not
+              to the corrupt edifice of the Imperium His servants have built
+              over the last 10,000 years. These types of Renegade Chapters are
+              certainly no friends of Chaos or the other enemies of Humanity,
+              though their lack of allies can often lead even the
+              best-intentioned Renegades down the ultimate path of corruption to
+              the willing worship of the Dark Powers, if only to secure their
+              own survival when they are beset on all sides by enemies. Several
+              of the Renegades listed here are simply Space Marine Chapters that
+              have turned on the Imperium of Man or been unfairly declared
+              Excommunicate Traitoris for one reason or another, but still view
+              themselves as loyal to the Emperor of Mankind and not to the
+              corrupt edifice of the Imperium His servants have built over the
+              last 10,000 years. These types of Renegade Chapters are certainly
+              no friends of Chaos or the other enemies of Humanity, though their
+              lack of allies can often lead even the best-intentioned Renegades
+              down the ultimate path of corruption to the willing worship of the
+              Dark Powers, if only to secure their own survival when they are
+              beset on all sides by enemies. Several of the Renegades listed
+              here are simply Space Marine Chapters that have turned on the
+              Imperium of Man or been unfairly declared Excommunicate Traitoris
+              for one reason or another, but still view themselves as loyal to
+              the Emperor of Mankind and not to the corrupt edifice of the
+              Imperium His servants have built over the last 10,000 years. These
+              types of Renegade Chapters are certainly no friends of Chaos or
+              the other enemies of Humanity, though their lack of allies can
+              often lead even the best-intentioned Renegades down the ultimate
+              path of corruption to the willing worship of the Dark Powers, if
+              only to secure their own survival when they are beset on all sides
+              by enemies. Several of the Renegades listed here are simply Space
+              Marine Chapters that have turned on the Imperium of Man or been
+              unfairly declared Excommunicate Traitoris for one reason or
+              another, but still view themselves as loyal to the Emperor of
+              Mankind and not to the corrupt edifice of the Imperium His
+              servants have built over the last 10,000 years. These types of
+              Renegade Chapters are certainly no friends of Chaos or the other
+              enemies of Humanity, though their lack of allies can often lead
+              even the best-intentioned Renegades down the ultimate path of
+              corruption to the willing worship of the Dark Powers, if only to
+              secure their own survival when they are beset on all sides by
+              enemies.
+            </Box>
+          </Flyout>
+          <FillButton size="small" onClick={() => setExpanded(true)}>
+            Tell me more...
+          </FillButton>
+          <FlexBox mt={16}>
+            Renegade Chapters are generally made up of Chaos Space Marines whose
+            Chapters or companies turned to Chaos after the end of the Horus
+            Heresy, sometimes many millennia later. Some are not whole Chapters
+            but simply warbands composed of a few tens or hundreds of Astartes
+            drawn from the same original source and led by a charismatic
+            commander or Chaos Lord.
+          </FlexBox>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>