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

🚀 refactor(drawer): adjust drawer styles and structure #647

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

🚀 refactor(drawer): adjust drawer styles and structure #647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
8c43a13
refactor(drawer): adjust structure and styles
matheushdsbr Mar 22, 2023
7dde687
refactor(drawer): remove drawer props of dailog and bring to drawer.h…
matheushdsbr Mar 24, 2023
c2745a8
style(drawer): adjust styles
matheushdsbr Mar 24, 2023
aaabd78
docs(drawer): add drawer.header props
matheushdsbr Mar 24, 2023
857f8d5
refactor(drawer): adjust the order of props
matheushdsbr Mar 27, 2023
764d2bb
style(drawer): add margin-top to divider
matheushdsbr Mar 27, 2023
4edeb87
test(drawer): add @testing-library/dom and @testing-library/user-even…
matheushdsbr Apr 3, 2023
42e85ca
test(drawer): add tests to drawer.header
matheushdsbr Apr 4, 2023
5c68f0e
refactor(drawer|dialog): adjust props name
matheushdsbr Apr 5, 2023
8a2a9c3
test(drawer): add aria-label to tests and adjust prop name to backHan…
matheushdsbr Apr 5, 2023
7cdc84a
test(drawer): add tests to drawer.header
matheushdsbr Apr 5, 2023
c1c6ca1
refactor(drawer): adjust breakline and add !importants to padding and…
matheushdsbr Apr 5, 2023
a6e5320
refactor(dialog): refactor dialog.header to add close button in it
matheushdsbr Apr 6, 2023
7da4d63
docs(dialog): add dialog.header props
matheushdsbr Apr 6, 2023
f68cf04
test(drawer): update snapshot
matheushdsbr Apr 6, 2023
dcce8d7
test(bottomsheet): adjust test show bottom onclose
matheushdsbr Apr 6, 2023
76a8e9e
refactor(drawer): add heading component to adjust drawer.head structure
matheushdsbr Apr 13, 2023
d8ffac1
test(drawer): add aria-label and update snapshot
matheushdsbr Apr 13, 2023
0e4b902
chore(drawer): update yarn.lock
matheushdsbr Apr 13, 2023
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
9 changes: 8 additions & 1 deletion packages/doc/content/components/components/dialog/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ render(() => {
isOpen={isOpen}
onClose={handleOnClose}
>
<Dialog.Header>
<Dialog.Header onClose={handleOnClose}>
Are you sure you want to downgrade to a Platinum plan?
</Dialog.Header>
<Dialog.Content>
Expand Down Expand Up @@ -257,4 +257,11 @@ render(() => {

### Props

### Dialog

<PropsTable component="Dialog" platform="web" />


### Dialog.Header

<PropsTable component="Dialog.Header" platform="web" />
283 changes: 251 additions & 32 deletions packages/doc/content/components/components/drawer/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,46 +28,265 @@ render(() => {
alert('This is your custom action');
};

const BoxContent = styled(Box)`
height: 100%;
max-width: 340px;

display: flex;
flex-direction: column;

margin-top: 100px;
`;

return (
<>
<Button onClick={handleOpen}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Header>
<Box display="flex" justifyContent="flex-end" alignItems="center" width="100%">
<Box
style={{
textAlign: 'center'
}}
width="100%"
>Drawer title</Box>
</Box>
</Drawer.Header>
<Drawer.Content>
<Box
display="flex"
flexDirection="column"
justifyContent="center"
style={{
paddingTop: 10,
height: '100%'
}}
>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium mt="large" fontSize="xxlarge">Learn how to edit this area</Text.Medium>
<Text mt="xxssmall" color="light">Live the mission</Text>
<Text mt="xxsmall" color="uplift">Watch de video</Text>
</Box>
</Drawer.Content>
<Drawer.Footer>
<Button onClick={handleOnAction}>large button</Button>
<Button.Text onClick={handleOnClose}>Cancel</Button.Text>
</Drawer.Footer>
</Drawer>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Header onClose={handleOnClose} title="section title" />

<Drawer.Content>
<BoxContent>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium marginTop="medium" size="xxlarge">Learn how to edit this area</Text.Medium>
<Text marginTop="xxsmall" color="deep">This section is dinamic and can be edit.</Text>
<Text marginTop="large" color="vibin">Watch de video</Text>
</BoxContent>
</Drawer.Content>

<Drawer.Footer>
<Box display="flex" width="100%" gap="large">
<Button onClick={handleOnAction}>Large button</Button>
<Button.Text onClick={handleOnClose}>Large button</Button.Text>
</Box>
</Drawer.Footer>
</Drawer>
</>
);
});
```

### Drawer with back button

```javascript state
render(() => {
const [isOpen, setIsOpen] = useState(false);

const handleOpen = () => {
setIsOpen(true);
};

const handleOnClose = () => {
setIsOpen(false);
};

const handleOnAction = () => {
alert('This is your custom action');
};

const BoxContent = styled(Box)`
height: 100%;
max-width: 340px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not assume these sizes. The box should be always 100% of Drawer.Content. and Drawer.Content should be the one setting the spacing


display: flex;
flex-direction: column;

margin-top: 100px;
`;

return (
<>
<Button onClick={handleOpen}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Header onClose={handleOnClose} backHandler={handleOnClose} title="section title" />

<Drawer.Content>
<BoxContent>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium marginTop="medium" size="xxlarge">Learn how to edit this area</Text.Medium>
<Text marginTop="xxsmall" color="deep">This section is dinamic and can be edit.</Text>
<Text marginTop="large" color="vibin">Watch de video</Text>
</BoxContent>
</Drawer.Content>

<Drawer.Footer>
<Box display="flex" width="100%" gap="large">
<Button onClick={handleOnAction}>Large button</Button>
<Button.Text onClick={handleOnClose}>Large button</Button.Text>
</Box>
</Drawer.Footer>
</Drawer>
</>
);
});
```

### Drawer with divider on header

```javascript state
render(() => {
const [isOpen, setIsOpen] = useState(false);

const handleOpen = () => {
setIsOpen(true);
};

const handleOnClose = () => {
setIsOpen(false);
};

const handleOnAction = () => {
alert('This is your custom action');
};

const BoxContent = styled(Box)`
height: 100%;
max-width: 340px;

display: flex;
flex-direction: column;

margin-top: 100px;
`;

return (
<>
<Button onClick={handleOpen}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Header onClose={handleOnClose} backHandler={handleOnClose} title="section title" divider />

<Drawer.Content>
<BoxContent>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium marginTop="medium" size="xxlarge">Learn how to edit this area</Text.Medium>
<Text marginTop="xxsmall" color="deep">This section is dinamic and can be edit.</Text>
<Text marginTop="large" color="vibin">Watch de video</Text>
</BoxContent>
</Drawer.Content>

<Drawer.Footer>
<Box display="flex" width="100%" gap="large">
<Button onClick={handleOnAction}>Large button</Button>
<Button.Text onClick={handleOnClose}>Large button</Button.Text>
</Box>
</Drawer.Footer>
</Drawer>
</>
);
});
```

### Drawer with no close button

```javascript state
render(() => {
const [isOpen, setIsOpen] = useState(false);

const handleOpen = () => {
setIsOpen(true);
};

const handleOnClose = () => {
setIsOpen(false);
};

const handleOnAction = () => {
alert('This is your custom action');
};

const BoxContent = styled(Box)`
height: 100%;
max-width: 340px;

display: flex;
flex-direction: column;

margin-top: 100px;
`;

return (
<>
<Button onClick={handleOpen}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Header onClose={handleOnClose} backHandler={handleOnClose} title="section title" hideCloseButton />

<Drawer.Content>
<BoxContent>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium marginTop="medium" size="xxlarge">Learn how to edit this area</Text.Medium>
<Text marginTop="xxsmall" color="deep">This section is dinamic and can be edit.</Text>
<Text marginTop="large" color="vibin">Watch de video</Text>
</BoxContent>
</Drawer.Content>

<Drawer.Footer>
<Box display="flex" width="100%" gap="large">
<Button onClick={handleOnAction}>Large button</Button>
<Button.Text onClick={handleOnClose}>Large button</Button.Text>
</Box>
</Drawer.Footer>
</Drawer>
</>
);
});
```

### Drawer with no header

```javascript state
render(() => {
const [isOpen, setIsOpen] = useState(false);

const handleOpen = () => {
setIsOpen(true);
};

const handleOnClose = () => {
setIsOpen(false);
};

const handleOnAction = () => {
alert('This is your custom action');
};

const BoxContent = styled(Box)`
height: 100%;
max-width: 340px;

display: flex;
flex-direction: column;

margin-top: 100px;
`;

return (
<>
<Button onClick={handleOpen}>Open Drawer</Button>
<Drawer isOpen={isOpen} onClose={handleOnClose}>
<Drawer.Content>
<BoxContent>
<Video width="40" height="40" fill="#D8385E" />
<Text.Medium marginTop="medium" size="xxlarge">Learn how to edit this area</Text.Medium>
<Text marginTop="xxsmall" color="deep">This section is dinamic and can be edit.</Text>
<Text marginTop="large" color="vibin">Watch de video</Text>
</BoxContent>
</Drawer.Content>

<Drawer.Footer>
<Box display="flex" width="100%" gap="large">
<Button onClick={handleOnAction}>Large button</Button>
<Button.Text onClick={handleOnClose}>Large button</Button.Text>
</Box>
</Drawer.Footer>
</Drawer>
</>
);
});
```

### Props

#### Drawer
<PropsTable component="Drawer" platform="web" />

#### Drawer.Header
<PropsTable component="Drawer.Header" platform="web" />
2 changes: 2 additions & 0 deletions packages/yoga/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@
"react-phone-input-2": "^2.15.1"
},
"devDependencies": {
"@testing-library/dom": "^9.2.0",
"@testing-library/react": "^12.0.4",
"@testing-library/react-native": "^9.1.0",
"@testing-library/user-event": "^14.4.3",
"babel-plugin-inline-react-svg": "^1.1.1",
"styled-components": "^4.4.0"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/yoga/src/BottomSheet/web/BottomSheet.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,8 @@ describe('<BottomSheet />', () => {
it('should show the close button', () => {
render(
<ThemeProvider>
<BottomSheet isOpen hideCloseButton={false} onClose={() => {}}>
<BottomSheet.Header>Title</BottomSheet.Header>
<BottomSheet isOpen onClose={() => {}}>
<BottomSheet.Header onClose={() => {}}>Title</BottomSheet.Header>
</BottomSheet>
</ThemeProvider>,
);
Expand Down
19 changes: 4 additions & 15 deletions packages/yoga/src/Dialog/web/Dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ import { createPortal } from 'react-dom';
import styled from 'styled-components';
import { func, bool, node, number, string } from 'prop-types';

import { Close } from '@gympass/yoga-icons';
import { usePortal, useCombinedRefs } from '../../hooks';
import { Button, Card, Box } from '../..';
import { Card } from '../..';

export const StyledDialog = styled(Card)`
${({
Expand Down Expand Up @@ -54,13 +53,9 @@ const Overlay = styled.div`
`;

const Dialog = React.forwardRef(
(
{ isOpen, hideCloseButton, children, dialogId, onClose, zIndex, ...props },
forwardedRef,
) => {
({ isOpen, children, dialogId, onClose, zIndex, ...props }, forwardedRef) => {
const dialogRef = useCombinedRefs(forwardedRef);
const dialogElement = usePortal(dialogId ?? 'dialog');
const isCloseButtonVisible = onClose && !hideCloseButton;

const closeDialog = useCallback(
e => {
Expand Down Expand Up @@ -97,11 +92,6 @@ const Dialog = React.forwardRef(
zIndex={zIndex}
>
<StyledDialog onClose={onClose} {...props}>
{isCloseButtonVisible && (
<Box d="flex" justifyContent="flex-end" w="100%">
<Button.Icon icon={Close} inverted onClick={onClose} />
</Box>
)}
{children}
</StyledDialog>
</Overlay>,
Expand All @@ -118,18 +108,17 @@ Dialog.propTypes = {
dialogId: string,
/** Control the dialog visibility. */
isOpen: bool,
/** Hide the close button when onClose prop is defined. */
hideCloseButton: bool,
Comment on lines -121 to -122
Copy link
Contributor

@MicaelRodrigues MicaelRodrigues May 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you remove hideCloseButton prop? It will break some implementations that are using it.
Example, in partners portal:

https://github.com/gympass/partners-reports-mfe/blob/master/src/components/templates/DrawerPage/DrawerPage.tsx

/** Function to close the dialog. */
onClose: func,
backHandler: func,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following the name convention of "onClose", WDYT of onBack here?

zIndex: number,
children: node.isRequired,
};

Dialog.defaultProps = {
isOpen: false,
hideCloseButton: false,
onClose: undefined,
backHandler: undefined,
zIndex: 3,
dialogId: undefined,
};
Expand Down
Loading