Skip to content
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

Fix: Button Replace remaining 40px default size violations [Block Editor 4] #65257

Merged
merged 6 commits into from
Sep 18, 2024

Conversation

vipul0425
Copy link
Contributor

Part of - #65018

What?

This would fix in that in subtask block-editor-4.

Why?

To make the consistent button across Gutenberg, and we would have a lint rule added once fixed, all the button usage.

How?

Change from __next40pxDefaultSize={ false } to __next40pxDefaultSize on component.

Testing Instructions

Testing steps and screenshots are added below.

Copy link

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

__next40pxDefaultSize={ false }
{ ...propsWithTabIndex }
>
<Button __next40pxDefaultSize { ...propsWithTabIndex }>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom style height: auto is causing it to be 90px, so __next40pxDefaultSize has no effect in this case. I have not changed the styles as it was looking good. Let me know if anything needs to be changed.

inserter-lightbox-button-before

@@ -15,8 +15,7 @@ function PatternCategoriesList( {
{ patternCategories.map( ( { name, label } ) => {
return (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@vipul0425 vipul0425 Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
block-pattern-explorer-before pattern-explorer-sidebar-after

@@ -61,8 +61,7 @@ function BlockPatternsTab( {
{ children }
</CategoryTabs>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
block-patterns-tab-explore-before block-patterns-tab-explore-after

@@ -110,8 +109,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
</FlexItem>
<FlexItem>
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
media-preview-insert-before media-preview-insert-after

@@ -71,8 +71,7 @@ function MediaTab( {
allowedTypes={ ALLOWED_MEDIA_TYPES }
render={ ( { open } ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
media-tab-button-before media-tab-button-after

@@ -138,8 +138,7 @@ export default function QuickInserter( {

{ setInserterIsOpened && (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed the custom CSS for height as it was overriding the default size styles. Let me know if any further changes are needed.

Thanks 🙇

Before After
quick-inserter-before quick-inserter-after

@akasunil akasunil added the [Type] Code Quality Issues or PRs that relate to code quality label Sep 12, 2024
@mirka mirka requested a review from a team September 13, 2024 09:56
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants