Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Flyout): Added optional background prop #2627

Merged
merged 16 commits into from
Dec 15, 2022
Merged

feat(Flyout): Added optional background prop #2627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fb8ae97
test
Dec 12, 2022
98aa318
delete copy pasta
Dec 12, 2022
a10f29d
like this?
Dec 12, 2022
5a343e9
modify stories to work with new prop
Dec 12, 2022
e431fe1
height
Dec 13, 2022
a6f7d40
didnt work
Dec 13, 2022
b390e3c
gonna try this
Dec 13, 2022
0f27435
Merge branch 'main' into hr-disc-1007-flyout-bg
Dec 13, 2022
78ad907
lint fix
Dec 13, 2022
02d4cea
Merge branch 'hr-disc-1007-flyout-bg' of github.com:Codecademy/gamut …
Dec 13, 2022
af3e7c0
mmm
Dec 13, 2022
0564b1b
:anger:
Dec 13, 2022
fd02754
lint
Dec 13, 2022
5c046d1
Revert ":anger:"
Dec 13, 2022
2006b92
Update index.tsx
Dec 13, 2022
b8a43e9
Merge branch 'main' into hr-disc-1007-flyout-bg
saghdaey Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/gamut/src/Drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -38,6 +37,7 @@ export const Drawer: React.FC<DrawerProps> = ({
{...props}
>
<Box
bg="background-current"
height="100%"
left="0"
position="absolute"
Expand Down
63 changes: 34 additions & 29 deletions packages/gamut/src/Flyout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -31,6 +32,7 @@ export interface FlyoutProps {
* Contents for a top-left h2.
*/
title: React.ReactNode;
bg?: Colors;
}

export const Flyout: React.FC<FlyoutProps> = ({
Expand All @@ -40,6 +42,7 @@ export const Flyout: React.FC<FlyoutProps> = ({
openFrom = 'left',
onClose,
title,
bg = 'background',
}) => {
return (
<Overlay
Expand All @@ -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>
);
};
2 changes: 1 addition & 1 deletion packages/styleguide/stories/Molecules/Flyout.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down