Components: Refactor DropdownMenu to stop using unstable props #15968

gziolo · 2019-06-03T15:10:32Z

Description

There were 4 unstable props introduced temporarily in #14843:

gutenberg/packages/components/src/dropdown-menu/index.js

Lines 27 to 30 in c2768ec

    
           __unstableLabelPosition, 
        
           __unstableMenuClassName, 
        
           __unstablePopoverClassName, 
        
           __unstableToggleClassName,

They were added for backward compatibility. This PR further explores how to approach it differently.

Proposed changes:

__unstableLabelPosition gets replaced with position property in popoverProps prop.
__unstablePopoverClassName got implemented as className property in popoverProps 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 of className property of popoverProps 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:

Added a new popoverProps prop to the DropdownMenu component which allows passing props directly to the nested Popover component.
Added a new toggleProps prop to the DropdownMenu component which allows passing props directly to the nested IconButton component.
Added a new menuProps prop to the DropdownMenu component which allows passing props directly to the nested NavigableMenu component.

There are also 2 deprecations introduced:

menuLabel prop in DropdownComponent has been deprecated. Consider using menuProps object and its aria-label property instead.

position prop in DropdownComponent has been deprecated. Consider using popoverProps object and its position 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.

youknowriad · 2019-06-14T09:15:51Z

packages/components/src/dropdown-menu/index.js

@@ -67,7 +64,7 @@ function DropdownMenu( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }
-						labelPosition={ __unstableLabelPosition }
+						labelPosition={ position }


I'm not sure about this change? Can you clarify? It seems that the position prop is meant to be used for something else?

If I'd make it a stable api, I'd probably name it tooltipPosition

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.

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.

@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:

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/popover/index.js#L267

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.

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.

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.

gziolo · 2019-07-26T14:34:47Z

@youknowriad and @jorgefilipecosta - your feedback was addressed and this is ready for final review.

jorgefilipecosta

Works well on my tests 👍

packages/components/src/dropdown-menu/index.js

…ropdown menu

…onents

* 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

gziolo added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Jun 3, 2019

gziolo requested a review from aduth June 3, 2019 15:10

gziolo requested review from ajitbohra, chrisvanpatten, ellatrix, jorgefilipecosta, talldan and youknowriad as code owners June 3, 2019 15:10

gziolo self-assigned this Jun 3, 2019

gziolo mentioned this pull request Jun 3, 2019

UI Components: Refactor BlockSettingsMenu and MoreMenu as DropdownMenu #14843

Merged

gziolo added this to the 5.9 (Gutenberg) milestone Jun 6, 2019

gziolo force-pushed the update/refactor-dropdown-menu branch 2 times, most recently from 1bbabd5 to d63b97a Compare June 6, 2019 14:30

gziolo requested review from nerrad and ntwb as code owners June 6, 2019 14:30

nerrad removed this from the Gutenberg 5.9 milestone Jun 10, 2019

gziolo requested a review from a team June 13, 2019 14:25

youknowriad reviewed Jun 14, 2019

View reviewed changes

gziolo force-pushed the update/refactor-dropdown-menu branch 2 times, most recently from 4cf8206 to ca98123 Compare July 26, 2019 14:21

gziolo requested review from daniloercoli, etoledom and SergioEstevao as code owners July 26, 2019 14:21

gziolo force-pushed the update/refactor-dropdown-menu branch from ca98123 to 46bef32 Compare August 8, 2019 09:52

jorgefilipecosta approved these changes Aug 9, 2019

View reviewed changes

packages/components/src/dropdown-menu/index.js Outdated Show resolved Hide resolved

gziolo added 3 commits August 12, 2019 13:35

Remove __unstableLabelPosition by reusing position provided for the d…

7d5488b

…ropdown menu

Replaces unstable class names with the documented contentClassName prop

8aa7ad8

Refactor DropdownMenu component to allow passing props to nested comp…

20ab9cd

…onents

gziolo added 2 commits August 12, 2019 13:35

Add CHANGELOG entries and deprecations messages for update props

5c246a3

Swap params for mergeProps helper

bb25919

gziolo force-pushed the update/refactor-dropdown-menu branch from 46bef32 to bb25919 Compare August 12, 2019 12:28

gziolo added this to the Gutenberg 6.3 milestone Aug 12, 2019

gziolo merged commit e2c01f7 into master Aug 12, 2019

gziolo deleted the update/refactor-dropdown-menu branch August 12, 2019 12:44

Mamaduka mentioned this pull request Feb 18, 2024

Block Editor: Remove 'BlockSettingsMenu' styles #59147

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components: Refactor DropdownMenu to stop using unstable props #15968

Components: Refactor DropdownMenu to stop using unstable props #15968

gziolo commented Jun 3, 2019 •

edited

youknowriad Jun 14, 2019

youknowriad Jun 14, 2019

gziolo Jun 14, 2019 •

edited

youknowriad Jun 24, 2019

gziolo Jun 24, 2019

jorgefilipecosta Jul 2, 2019

gziolo Jul 26, 2019

gziolo commented Jul 26, 2019

jorgefilipecosta left a comment

	__unstableLabelPosition,
	__unstableMenuClassName,
	__unstablePopoverClassName,
	__unstableToggleClassName,

Components: Refactor DropdownMenu to stop using unstable props #15968

Components: Refactor DropdownMenu to stop using unstable props #15968

Conversation

gziolo commented Jun 3, 2019 • edited

Description

How has this been tested?

youknowriad Jun 14, 2019

Choose a reason for hiding this comment

youknowriad Jun 14, 2019

Choose a reason for hiding this comment

gziolo Jun 14, 2019 • edited

Choose a reason for hiding this comment

youknowriad Jun 24, 2019

Choose a reason for hiding this comment

gziolo Jun 24, 2019

Choose a reason for hiding this comment

jorgefilipecosta Jul 2, 2019

Choose a reason for hiding this comment

gziolo Jul 26, 2019

Choose a reason for hiding this comment

gziolo commented Jul 26, 2019

jorgefilipecosta left a comment

Choose a reason for hiding this comment

gziolo commented Jun 3, 2019 •

edited

gziolo Jun 14, 2019 •

edited