-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Fix resize loop issue #8164
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Fix resize loop issue #8164
Conversation
4b276d5
to
075db4c
Compare
<PopoverRightExampleContent /> | ||
</Popover> | ||
</MenuTrigger> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This story is more of a test, to reproduce the issue before the fix and to verify it works correctly after the fix. Is there a better place to do that? If not, what should I name it? I wanted to write a unit test, but I'm not sure how to write it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's fine to have a storybook example for something like this, it's really hard to reproduce in a unit test
one option could be to use storybook's "play" feature and see if you can use that to automate what should happen
075db4c
to
c0de9b2
Compare
export const PopoverRightExample = () => ( | ||
<MenuTrigger> | ||
<Button style={{marginLeft: 'auto'}}>Open popover</Button> | ||
<Popover placement="bottom end"> | ||
<PopoverRightExampleContent /> | ||
</Popover> | ||
</MenuTrigger> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are some examples around the code base of how to add a description to the story so we know how to test it in the future. You may need to adjust the code sample I wrote below.
export const PopoverRightExample = () => ( | |
<MenuTrigger> | |
<Button style={{marginLeft: 'auto'}}>Open popover</Button> | |
<Popover placement="bottom end"> | |
<PopoverRightExampleContent /> | |
</Popover> | |
</MenuTrigger> | |
); | |
export const PopoverRightExample = { | |
render: () => ( | |
<MenuTrigger> | |
<Button style={{marginLeft: 'auto'}}>Open popover</Button> | |
<Popover placement="bottom end"> | |
<PopoverRightExampleContent /> | |
</Popover> | |
</MenuTrigger> | |
), | |
parameters: {description: 'how to test this story, what does it do?'}, | |
name: 'more descriptive name?' | |
}; |
I tried out the story, I'm unable to reproduce the warning either with or without the fix. The one thing I do notice is that the popover used to resize several time as the text reflowed, now it appears to snap to the correct width immediately, so that seems to be an improvement. We'll need to run chromatic for this as well to make sure it didn't inadvertently change anything. And we'll need to test a bunch of other popovers. I have a vague recollection that we tried this fix a while ago and something unexpected happened. If I have time, I'll try to see if I can dig anything up. Might've been something with submenu's or tooltips blocking background content. |
Closes #7017
✅ Pull Request Checklist:
📝 Test Instructions:
Open the story and verify #7017 no longer reproduces.
🧢 Your Project:
Unsplash