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#43327ntsekouras wants to merge 1 commit into
show button text labels#43327Conversation
|
Size Change: +15 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
| import WritingMenu from '../writing-menu'; | ||
|
|
||
| const MoreMenu = ( { showIconLabels } ) => { | ||
| const anchorRef = useRef(); |
There was a problem hiding this comment.
Must be missing something. Where does this ref get attached?
There was a problem hiding this comment.
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.
Yeah this is unusual, I would also expect this ref to be attached to an element
| showTooltip: ! showIconLabels, | ||
| ...( showIconLabels && { variant: 'tertiary' } ), | ||
| } } | ||
| popoverProps={ { anchorRef: anchorRef?.current?.firstChild } } |
There was a problem hiding this comment.
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