feat: add resive observer of Notification and content with ref to wra…#389
Conversation
|
Preview is ready. |
|
Fix the problem that side notifications actions does not hidden after unhover + fix the problem with achrive notifications (visal) |
| {Array.from({length: 20}, (_, index) => ( | ||
| <i key={index}>{'Long expanded content. '}</i> | ||
| ))} | ||
| <Button view="flat-secondary" onClick={handleCollapse}> |
There was a problem hiding this comment.
If that's complicated, then maybe we should reconsider how to handle notifications' resizing
| ref.current.style.transition = 'max-height 0.3s'; | ||
| setWrapperMaxHeight(0); | ||
| requestAnimationFrame(() => { | ||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
Let's leave an explanation comment for this
There was a problem hiding this comment.
Added the comment here
| content: React.ReactNode; | ||
| content: | ||
| | React.ReactNode | ||
| | ((props: {rootRef?: React.RefObject<HTMLDivElement>}) => React.ReactNode); |
There was a problem hiding this comment.
If I understood correctly, this is wrapperRef, is that right?
If so, then rootRef is kinda misleading.
It can mean Notifications ref or something like that
I suggest to use wrapperRef for this prop
But I'm not insisting on that
There was a problem hiding this comment.
Changed naming to wrapperRef
3 participants
Fixes layout for notifications with dynamic content (expand/collapse): list item height is recalculated when the card resizes. Storybook includes an example with autoscroll on collapse for looooong content.