-
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
Components: Refactor DropdownMenu to stop using unstable props #15968
Conversation
1bbabd5
to
d63b97a
Compare
@@ -67,7 +64,7 @@ function DropdownMenu( { | |||
aria-haspopup="true" | |||
aria-expanded={ isOpen } | |||
label={ label } | |||
labelPosition={ __unstableLabelPosition } | |||
labelPosition={ position } |
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'm not sure about this change? Can you clarify? It seems that the position prop is meant to be used for something else?
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.
If I'd make it a stable api, I'd probably name it tooltipPosition
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.
Yep, but in general, it aligns where you see the popover with where you would expect to see the tooltip :)
I can add tooltipPosition
as well but maybe we should introduce toggleProps
and contentPropos
instead so you could have more control over them. The only issue I see here is that it's not easy to pass an object as a prop because it will cause re-renders every time DropdownMenu
re-renders.
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 don't think the props align, I can see valid use-cases for showing a dropdown under the toggle but the tooltip on top of it. I don't have strong opinions on whether it should be a toggleProps
prop or just a position one.
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.
@jorgefilipecosta added popoverProps
prop described as an object for Dropdown
components in #14867. There is a bit different handling for Popover
component where all remaining props are passed down using rest operator:
We probably should optimize APIs to go in one direction moving forward. In this particular case, it feels like using toggleProps
would solve the issue we have and keep it more flexible for future use cases.
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.
We probably should optimize APIs to go in one direction moving forward. In this particular case, it feels like using toggleProps would solve the issue we have and keep it more flexible for future use cases.
I think using a toggleProps object as referred seems like a good option.
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 introduced 3 new props based on the prior work with Dropdown
component as implemented in #14867:
popoverProps
toggleProps
menuProps
This allows us to deprecate two props which can be set using this pass-through objects and further simplify public API. For backward compatibility, they are still supported but they will warn on the JS console. I assumed they aren't used widely outside of Gutenberg.
4cf8206
to
ca98123
Compare
@youknowriad and @jorgefilipecosta - your feedback was addressed and this is ready for final review. |
ca98123
to
46bef32
Compare
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.
Works well on my tests 👍
46bef32
to
bb25919
Compare
* Remove __unstableLabelPosition by reusing position provided for the dropdown menu * Replaces unstable class names with the documented contentClassName prop * Refactor DropdownMenu component to allow passing props to nested components * Add CHANGELOG entries and deprecations messages for update props * Swap params for mergeProps helper
* Remove __unstableLabelPosition by reusing position provided for the dropdown menu * Replaces unstable class names with the documented contentClassName prop * Refactor DropdownMenu component to allow passing props to nested components * Add CHANGELOG entries and deprecations messages for update props * Swap params for mergeProps helper
Description
Fixes #15960.
There were 4 unstable props introduced temporarily in #14843:
gutenberg/packages/components/src/dropdown-menu/index.js
Lines 27 to 30 in c2768ec
They were added for backward compatibility. This PR further explores how to approach it differently.
Proposed changes:
__unstableLabelPosition
gets replaced withposition
property inpopoverProps
prop.__unstablePopoverClassName
got implemented asclassName
property inpopoverProps
props as it seems to be essential for styling of the popover.__unstableToggleClassName
and__unstableMenuClassName
got remove as they can be expressed as a combination ofclassName
property ofpopoverProps
prop and default classes the same UI elements provide. This might be considered as a breaking change but I don't expect it would influence plugins and sites given how specific edge case it is.This PR introduces new props for
DropdownMenu
as suggested by @jorgefilipecosta and @youknowriad:popoverProps
prop to theDropdownMenu
component which allows passing props directly to the nestedPopover
component.toggleProps
prop to theDropdownMenu
component which allows passing props directly to the nestedIconButton
component.menuProps
prop to theDropdownMenu
component which allows passing props directly to the nestedNavigableMenu
component.There are also 2 deprecations introduced:
menuLabel
prop inDropdownComponent
has been deprecated. Consider usingmenuProps
object and itsaria-label
property instead.position
prop inDropdownComponent
has been deprecated. Consider usingpopoverProps
object and itsposition
property instead.How has this been tested?
There should be no visual changes in the block's More Options menu and in the More Menu.