-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Border Controls: Passthrough popover props instead of class names #40836
Border Controls: Passthrough popover props instead of class names #40836
Conversation
packages/components/src/border-control/border-control-dropdown/component.tsx
Outdated
Show resolved
Hide resolved
Size Change: +3.94 kB (0%) Total Size: 1.23 MB
ℹ️ View Unchanged
|
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.
Thanks for this change, this will definitely help me in my refactoring Popover PR :)
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.
The changes look correct to me.
While I understand the reasoning behind these changes, and I acknowledge that the Dropdown
component also exposes a popoverProps
prop, I'd like to make sure that this solution is a good pattern to adopt moving forward. especially in terms of components composition and future maintainability.
Closing this PR due to a new approach that will be adopted as part of #40740. |
Related:
What?
Updates the
BorderControl
andBorderBoxControl
components to pass throughpopoverProps
via their internal dropdowns instead of CSS classnames.Why?
This change is to provide greater flexibility and unblock new work refactoring the
Popover
component. Given the border control components are still experimental this change in their API should be ok.How?
popoverProps
as a means for plumbing through class names.BorderBoxControl
's newpopoversProps
prop (any ideas on better naming here would be appreciated).Note: The class names are still relied upon to provide the correct positioning of the border color/style dropdowns in the block editor. This will change in a followup as #40740 proceeds.
Testing Instructions
npm run test-unit packages/components/src/border-control/test/index.js
npm run test-unit packages/components/src/border-box-control/test/index.js
npm run build:package-types
Screenshots or screencast
Screen.Recording.2022-05-05.at.12.54.46.pm.mp4