-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Try to fix the popover position when changing to show button text labels
#43327
Try to fix the popover position when changing to show button text labels
#43327
Conversation
Size Change: +15 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
@@ -19,6 +20,7 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group'; | |||
import WritingMenu from '../writing-menu'; | |||
|
|||
const MoreMenu = ( { showIconLabels } ) => { | |||
const anchorRef = useRef(); |
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.
Must be missing something. Where does this ref get attached?
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.
I was wondering if this one is working specifically because it isn't attached to anything, so it overrides the Popover's default positioning?
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.
Yeah this is unusual, I would also expect this ref to be attached to an element
@@ -27,6 +29,7 @@ const MoreMenu = ( { showIconLabels } ) => { | |||
showTooltip: ! showIconLabels, | |||
...( showIconLabels && { variant: 'tertiary' } ), | |||
} } | |||
popoverProps={ { anchorRef: anchorRef?.current?.firstChild } } |
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.
Why do we need the first child?
Thanks for the ping. Just linking another potentially related PR in #42971 from @ciampo, which is related to Popover positions, where it attempts to use the parent node if one isn't provided, in order to provide an |
Thank you for the ping! Without an explicit In this case, though, this menu is using the gutenberg/packages/components/src/dropdown/index.js Lines 111 to 115 in 3c619fd
I believe that what's happening on
I see two alternatives:
|
I looked a bit more into this, and this is what I believe is happening:
|
I put together a quick Storybook example for the Kapture.2022-08-18.at.11.29.31.mp4To recap: To fix this bug properly, we would need to:
Otherwise, we could get around the problem in a few ways:
|
Opened an attempt at fixing the problem directly in the |
No sure about this one..
Related PR: #41361
Before
before.labels.mov
After
after.labels.mov