🚀 refactor(drawer): adjust drawer styles and structure #647
Conversation
|
Hey, @matheushdsbr! |
Thanks! Not yet, but thanks for mentioning it. I will analyze the situation |
|
Hey @caiotracera, I believe that to solve this bug it would be better to open another PR, the purpose of this one at first is to adjust the structure of the drawer. What do you think? |
matheushdsbr
force-pushed
the
refactor/adjust-drawer
branch
from
71d3a54
to
0e4b902
Compare
| function showCloseButton() { | ||
| if (onClose && !hideCloseButton) { | ||
| return ( | ||
| <Heading.RightButton | ||
| aria-label="close-button-drawer" | ||
| onClick={onClose} | ||
| icon={Close} | ||
| large | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| function showTitle() { | ||
| if (title) { | ||
| return ( | ||
| <Heading.Title | ||
| style={{ | ||
| letterSpacing: '1px', | ||
| textTransform: 'uppercase', | ||
| fontSize: '12px', | ||
| }} | ||
| > | ||
| {title} | ||
| </Heading.Title> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| function showBackButton() { | ||
| if (backHandler) { | ||
| return ( | ||
| <Heading.BackButton | ||
| aria-label="back-button-drawer" | ||
| onClick={backHandler} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| function showDivider() { | ||
| if (divider) { | ||
| return ( | ||
| <Box marginTop="small"> | ||
| <Divider aria-label="divider-drawer" /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } |
There was a problem hiding this comment.
Defining components within components is a bad practise.
Explanation why:
https://youtu.be/QuLfCUh-iwI?t=532
| return ( | ||
| <Box width="100%"> | ||
| <Box paddingTop="small" paddingRight="small" paddingLeft="xxlarge"> | ||
| <Heading noPadding role="heading" aria-label="header-drawer"> |
There was a problem hiding this comment.
Don't define a fixed aria-label. You defining a "meaning" that not explain the usage of the "Heading". If really needed (which i don't think it ) it should be costumizable.
| padding: ${theme.spacing.zero} !important; | ||
| border-radius: ${theme.borders.zero} !important; |
There was a problem hiding this comment.
If you are using !important here probably something is not right with the css structure.
Can you check?
| /** Hide the close button when onClose prop is defined. */ | ||
| hideCloseButton: bool, |
There was a problem hiding this comment.
Why did you remove hideCloseButton prop? It will break some implementations that are using it.
Example, in partners portal:
| /** Function to close the dialog. */ | ||
| onClose: func, | ||
| backHandler: func, |
There was a problem hiding this comment.
Following the name convention of "onClose", WDYT of onBack here?
|
|
||
| const BoxContent = styled(Box)` | ||
| height: 100%; | ||
| max-width: 340px; |
There was a problem hiding this comment.
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
Description 📄
In this PR I'm refactoring the drawer and adding some new props.
I realized that the Drawer receives the body of the Dialog as a base, but I needed to add some props to the
<Drawer.Header>, so I thought about refactoring the<Dialog.Header>by changing a little how it works. This change also affected the<BottomSheet.Header>.The
<Drawer.Header>now has the option toonClose,backHandlerandtitle.onCloseandbackHandlerare very similar, they receive a function, but each with its own icon:onClose-> Close icon,backHandler-> ArrowLeft icon,title-> stringTo use
<Drawer.Header>just use its props.This PR will trigger a breaking change <---
Need to adjust components that are using <Dialog.Header> and <BottomSheet.Header>
Obs:
Added
@testing-library/user-eventand@testing-library/dompackage to perform click actions on tests withuserEventas recommended by testing library docPlatforms 📲
Type of change 🔍
How Has This Been Tested? 🧪
[Enter the tips to test this PR]
Checklist: 🔍
Screenshots 📸
With back button
With divider on header
With no close button
With no header