feat(Drawer): new component #1306
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 07dafe9. |
| @@ -20,29 +20,22 @@ export const Portal = ({children, className}: Props): JSX.Element | null => { | |||
| const [container, setContainer] = React.useState<HTMLDivElement | null>(null); | |||
There was a problem hiding this comment.
Previous implementation was adding two nodes (because of strict mode in dev) and removing one, leaving leftovers in the dom.
src/drawer.css.ts
Outdated
| export const container = style({ | ||
| position: 'fixed', | ||
| display: 'flex', | ||
| paddingBottom: 'env(safe-area-inset-bottom)', |
There was a problem hiding this comment.
pending to verify inside an iphone
| checkTestIds(<Drawer title="Title" subtitle="Subtitle" description="Description" onClose={() => {}} />, [ | ||
| { | ||
| componentName: 'Drawer', | ||
| internalTestIds: ['title', 'subtitle', 'description'], |
There was a problem hiding this comment.
are these defined in the spec?
There was a problem hiding this comment.
Not in spec, but I was assuming the same testids for these elements that we were using in cards, etc
| }, [onClose]); | ||
|
|
||
| const dismiss = React.useCallback(() => { | ||
| return close().then(() => onDismiss?.()); |
There was a problem hiding this comment.
what's the difference between onDismiss and onClose? I initially thought that onDismiss was called immediately and onClose when the animation ends, but it seems both are called when the animation ends :/
There was a problem hiding this comment.
ok, I see the difference. onDismiss is only called when the drawer is closed by a dismiss action (esc key /close button, click outside). But can't we call onDismiss immediately without waiting for animation?
There was a problem hiding this comment.
Yes, we could call it immediately but I decided to not emit the close/dismiss event while the drawer is visible.
If you want to make some action on dismiss/close/action, you could be visually missing that change if it happens behind the drawer
| )} | ||
| /> | ||
| <div | ||
| data-testid="drawerLayout" |
There was a problem hiding this comment.
Not really. I've added it to differentiate the boundaries of the different parts of the Drawer composite. The DrawerLayout is a separate component as Drawer.
Can be removed if you want to.
There was a problem hiding this comment.
Opening the width prop we are opening also problems like.. what happened if the setup width is more than the device viewport? Is it possible to avoid this problem?
The width should never exceed the viewport's width. If the width is greater than the viewport, the drawer should occupy 100% - 40px (to ensure the overlay is displayed).
maybe something like
max-width: calc(100vw - 40px);
There was a problem hiding this comment.
done. We could also add a min-width.
Please update specs with this information
| }, | ||
| }); | ||
|
|
||
| export const overlay = style([ |
There was a problem hiding this comment.
@aweell I think the overlay transition is not needed in mobile. What do you think?
There was a problem hiding this comment.
I like it. And If the drawer is white over a white background, it adds contrast.
https://jira.tid.es/browse/WEB-2113