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 37af599. |
| @@ -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.
| 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.
| }, | ||
| }); | ||
|
|
||
| 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.
set to 300, so the min-width style can be verified |
# [16.8.0](v16.7.0...v16.8.0) (2025-01-09) ### Bug Fixes * **react-datetime:** upgrade react-datetime to support React18 ([#1303](#1303)) ([9caf2c2](9caf2c2)) ### Features * **Chip:** change background color on hover/active ([#1302](#1302)) ([73e33eb](73e33eb)) * **Drawer:** new component ([#1306](#1306)) ([2543c67](2543c67)) * **icons:** New floppy disk icon ([#1304](#1304)) ([d9c5353](d9c5353)), closes [/github.com/Telefonica/mistica-design/issues/1956#issuecomment-2535956321](https://github.com//github.com/Telefonica/mistica-design/issues/1956/issues/issuecomment-2535956321)
|
🎉 This PR is included in version 16.8.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
https://jira.tid.es/browse/WEB-2113