Deprecate bottom margin on BaseControl-based components #64408
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mirka
added
[Type] Code Quality
mirka
added
the
Needs Dev Note
|
Size Change: +497 B (+0.03%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
49 tasks
mirka
force-pushed
the
base-control-deprecate
branch
from
b676d47 to
0b5efce
Compare
mirka
changed the title
mirka
commented
Aug 12, 2024
Comment on lines
-86
to
-87
| return ( | ||
| <SelectControlWithState { ...args }> |
There was a problem hiding this comment.
Removed unnecessary custom render function, as this can be done via the children arg.
Comment on lines
+52
to
+58
| if ( ! __nextHasNoMarginBottom ) { | ||
| deprecated( 'Bottom margin styles for wp.components.ToggleControl', { | ||
| since: '6.7', | ||
| version: '7.0', | ||
| hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.', | ||
| } ); | ||
| } |
There was a problem hiding this comment.
ToggleControl needs to throw its own warning, because the legacy margin is added through its own custom implementation, not through BaseControl.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
20 tasks
tyxla
approved these changes
Aug 13, 2024
There was a problem hiding this comment.
I've done an extensive review of all usages, tested all instances in Storybook, and did some smoke testing, and everything worked as expected ✅
Great work handling the deprecation message of all those nested cases 👏
I left a few questions and minor suggestions, and nothing of them is blocking.
Thanks for persisting through this one @mirka 🚀
packages/components/CHANGELOG.md
Outdated
| @@ -2,6 +2,10 @@ | |||
|
|
|||
| ## Unreleased | |||
|
|
|||
| ### Deprecations | |||
|
|
|||
| - Deprecate bottom margin on `BaseControl`-based components. Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version. See linked PR for full list of affected components ([#64408](https://github.com/WordPress/gutenberg/pull/64408)). | |||
There was a problem hiding this comment.
It could be a good idea to list all affected components here. IMHO it's totally fine (and actually useful to our future selves) to add one CHANGELOG line per component. Makes it easier when someone scans the CHANGELOG for suspected changes.
| @@ -31,6 +32,7 @@ const UnconnectedBaseControl = ( | |||
| ) => { | |||
| const { | |||
| __nextHasNoMarginBottom = false, | |||
| __associatedWPComponentName = 'BaseControl', | |||
There was a problem hiding this comment.
Should we disallow usage of this prop outside the @wordpress/components package? Right now, anyone can modify it, which shouldn't be allowed outside the package, IMHO. It can be a simple ESLint rule.
There was a problem hiding this comment.
I think it's fine. If anyone cares enough to use this prop it's probably for a good reason. I'm imagining an extender that has a component library using BaseControl as a wrapper, and they want to show better deprecation messages to their own consumers.
In the Gutenberg repo, any direct usages of BaseControl moving forward shouldn't throw the deprecation warning in the first place (we lint for this). So I think it's a non-issue for now.
| @@ -95,6 +95,7 @@ export function CheckboxControl( | |||
| return ( | |||
| <BaseControl | |||
| __nextHasNoMarginBottom={ __nextHasNoMarginBottom } | |||
| __associatedWPComponentName="CheckboxControl" | |||
There was a problem hiding this comment.
We're adding the __associatedWPComponentName prop only to components that can disable the __nextHasNoMarginBottom right?
| @@ -167,6 +169,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > = | |||
| MarkTemplate.bind( {} ); | |||
|
|
|||
| WithIntegerStepAndMarks.args = { | |||
| __nextHasNoMarginBottom: true, | |||
There was a problem hiding this comment.
Ah, would have been nice to have an object to declare common props. Not a blocker of course.
There was a problem hiding this comment.
Haha yes, I considered abstracting it but decided against doing it here because it would be annoying to review it in this big PR 😂
getdave
pushed a commit
that referenced
this pull request
Aug 14, 2024
* BaseControl: Deprecate bottom margin * Propagate to components * Missed spots * Add changelog * List all affected components in changelog Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
This was referenced Sep 21, 2024
97 tasks
mirka
removed
the
Needs Dev Note
mirka
added
the
has dev note
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #38730 🎉 😱
What?
Start to log formal deprecation warnings on all BaseControl-based components:
Why?
To start the formal deprecation period so we can eventually switch the default behavior to the margin-free styles.
How?
For all components except for ToggleControl, the deprecation warning is thrown from the BaseControl component. The actual component name (e.g. "CheckboxControl") is passed to the BaseControl via a temporary private prop so the warning message can be more helpful.
Testing Instructions
✅ Unit tests should pass (no deprecation warnings should be thrown in the tests)
✅ No deprecation warnings should be thrown in the Storybook stories by default
You can try toggling the
__nextHasNoMarginBottomprop in the stories to see what message gets logged in the DevTools console. The component name in the message should be correct.✍️ Dev Note
See Dev Note in #39358.