From 8c43a13e3314319224d574489df5ec256b62f206 Mon Sep 17 00:00:00 2001 From: Matheus Henrique Date: Wed, 22 Mar 2023 11:04:58 -0300 Subject: [PATCH 01/19] refactor(drawer): adjust structure and styles --- .../components/components/drawer/index.mdx | 111 ++++++++++++++---- packages/yoga/src/Dialog/web/Dialog.jsx | 2 + packages/yoga/src/Drawer/Drawer.theme.js | 4 +- packages/yoga/src/Drawer/web/Drawer.jsx | 25 ++-- 4 files changed, 103 insertions(+), 39 deletions(-) diff --git a/packages/doc/content/components/components/drawer/index.mdx b/packages/doc/content/components/components/drawer/index.mdx index 02ab1a5153..292148fd5a 100644 --- a/packages/doc/content/components/components/drawer/index.mdx +++ b/packages/doc/content/components/components/drawer/index.mdx @@ -28,39 +28,34 @@ 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 ( <> - - - - Drawer title - - + - + + Learn how to edit this area + This section is dinamic and can be edit. + Watch de video + + - - Cancel + + + Large button + @@ -68,6 +63,70 @@ render(() => { }); ``` +### Drawer with back button usage + +```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 ( + <> + + + + + Drawer title + + + + + + + + + + + + Large button + + + + + ); +}); +``` + ### Props diff --git a/packages/yoga/src/Dialog/web/Dialog.jsx b/packages/yoga/src/Dialog/web/Dialog.jsx index 0809438b21..fcb3cf1d87 100644 --- a/packages/yoga/src/Dialog/web/Dialog.jsx +++ b/packages/yoga/src/Dialog/web/Dialog.jsx @@ -122,6 +122,7 @@ Dialog.propTypes = { hideCloseButton: bool, /** Function to close the dialog. */ onClose: func, + onBack: func, zIndex: number, children: node.isRequired, }; @@ -130,6 +131,7 @@ Dialog.defaultProps = { isOpen: false, hideCloseButton: false, onClose: undefined, + onBack: undefined, zIndex: 3, dialogId: undefined, }; diff --git a/packages/yoga/src/Drawer/Drawer.theme.js b/packages/yoga/src/Drawer/Drawer.theme.js index 1b2e58c7dc..456315ea9b 100644 --- a/packages/yoga/src/Drawer/Drawer.theme.js +++ b/packages/yoga/src/Drawer/Drawer.theme.js @@ -1,9 +1,9 @@ const Drawer = ({ spacing }) => ({ padding: { top: spacing.small, - right: spacing.xxxlarge, + right: spacing.xxlarge, bottom: spacing.xxlarge, - left: spacing.xxxlarge, + left: spacing.xxlarge, }, width: { default: 600, diff --git a/packages/yoga/src/Drawer/web/Drawer.jsx b/packages/yoga/src/Drawer/web/Drawer.jsx index 4d34824683..8cea4d46e5 100644 --- a/packages/yoga/src/Drawer/web/Drawer.jsx +++ b/packages/yoga/src/Drawer/web/Drawer.jsx @@ -4,17 +4,7 @@ import { node, number } from 'prop-types'; import Dialog from '../../Dialog'; const StyledDrawer = styled(Dialog)` - ${({ - theme: { - yoga: { - components: { drawer }, - }, - }, - }) => ` - padding: ${drawer.padding.top}px ${drawer.padding.right}px ${drawer.padding.bottom}px ${drawer.padding.left}px; - width: min(${drawer.width.default}px, 100%); - `} - border-radius: 0!important; + border-radius: 0 !important; height: 100%; align-self: flex-end; position: absolute; @@ -23,6 +13,19 @@ const StyledDrawer = styled(Dialog)` animation-duration: 400ms; animation-fill-mode: forwards; transition: 0.25s ease-in-out; + + padding: 16px 16px 40px 40px; + + ${({ + theme: { + yoga: { + components: { drawer }, + }, + }, + }) => ` + width: min(${drawer.width.default}px, 100%); + `} + @keyframes content { 0% { transform: translate3d(100%, 0, 0); From 7dde68727375c391f16241a0109a1b5b0f72ad18 Mon Sep 17 00:00:00 2001 From: Matheus Henrique Date: Fri, 24 Mar 2023 16:19:29 -0300 Subject: [PATCH 02/19] refactor(drawer): remove drawer props of dailog and bring to drawer.header --- .../components/components/drawer/index.mdx | 212 +++++++++++++++--- packages/yoga/src/Dialog/web/Dialog.jsx | 17 +- packages/yoga/src/Drawer/web/Content.jsx | 4 +- packages/yoga/src/Drawer/web/Drawer.jsx | 2 +- packages/yoga/src/Drawer/web/Footer.jsx | 13 +- packages/yoga/src/Drawer/web/Header.jsx | 122 +++++++++- 6 files changed, 321 insertions(+), 49 deletions(-) diff --git a/packages/doc/content/components/components/drawer/index.mdx b/packages/doc/content/components/components/drawer/index.mdx index 292148fd5a..9e69098d3f 100644 --- a/packages/doc/content/components/components/drawer/index.mdx +++ b/packages/doc/content/components/components/drawer/index.mdx @@ -41,29 +41,31 @@ render(() => { return ( <> - - - - - - - - - - Large button - - - + + + + + + + + + + + + Large button + + + ); }); ``` -### Drawer with back button usage +### Drawer with back button ```javascript state render(() => { @@ -94,18 +96,172 @@ render(() => { return ( <> - - - - Drawer title + + + + + + + + + + + + Large button - + + + + ); +}); +``` + +### 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 ( + <> + + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### 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 ( + <> + + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### 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 ( + <> + +