Fix feedback widget positioning + refactor to use popover #12135
Conversation
…nts and to fix issues with positioning on a sticky positioned parent
pettinarip
requested review from
wackerow,
corwintines,
minimalsm and
nhsz
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| const size = "3rem" | ||
| return ( | ||
| <Button | ||
| ref={ref} |
There was a problem hiding this comment.
Needed for the PopoverTrigger to work correctly.
| position="absolute" | ||
| w={{ base: size, lg: isExpanded ? "15rem" : size }} | ||
| h={size} | ||
| bottom={{ base: `${bottomOffset + 1}rem`, lg: 4 }} |
There was a problem hiding this comment.
Absolute position the button to the right inside the sticky container.
| </FixedDot> | ||
|
|
||
| <AlertDialog | ||
| <Box position="sticky" bottom="0"> |
There was a problem hiding this comment.
Keep it at the bottom of the screen.
| py="4" | ||
| px="2" | ||
| > | ||
| <PopoverCloseButton position="absolute" top="2" right="4" /> |
There was a problem hiding this comment.
Not sure why, but I had to manually position the close button. In the Chakra examples it seems to be positioned automatically.
There was a problem hiding this comment.
Nice, thanks @pettinarip
Noticing that on mobile, there is an issue with this overflowing
Ive created this issue for this: #12184
It currently exists still, but would be good to fix in this I think.
|
@corwintines good catch! added a new variant to control the internal width of the popover. |
|
@corwintines closing this in favor of #10997. |
github-actions
bot
added
the
abandoned
Description
To fix the FeedbackWidget positioning issue + fix the horizontal overflow #12035 + improve a11y aspects since we were using a wrong component (AlertDialog), this PR switches the base component to a Popover.
Related Issue
#12035
fixes: #12184