Fix: Button: Replace remaining 40px default size violation [Edit Site 2] #65258

hbhalodia · 2024-09-12T05:27:07Z

Part of - #65018

What?

Issue - Button: Replace remaining 40px default size violations #65018, To use default to 40px for the button.
This would fix in edit-site global-styles components, such as font-library, pallete and shadows.

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

Add the blocks on the page/post and check for the buttons defined.
Screenshot is added for individual changed files.

hbhalodia · 2024-09-12T05:30:09Z

packages/edit-site/src/components/global-styles/font-library-modal/font-card.js

@@ -28,8 +28,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {

 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> typogrpahy --> open font library modal.

Note: This has changed some styles, but that is not looking good, should we add some higher specificity or !important? as we did previously with block library? @mirka @ciampo

Before After

Yes, I guess we can go with a !important on the height: auto?

(FYI, unrelated to this but the tabs styling was broken. Fix proposed in #65330)

Yes, I guess we can go with a !important on the height: auto?

Sure, Would do this.

hbhalodia · 2024-09-12T05:31:54Z

packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

@@ -472,8 +472,7 @@ function FontCollection( { slug } ) {
 							className="font-library-modal__footer"
 						>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> typogrpahy --> open font library modal and install fonts tab.

Before After

hbhalodia · 2024-09-12T05:35:14Z

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -437,8 +437,7 @@ function InstalledFonts() {
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> typogrpahy --> open font library modal and choose font to edit.

Before After

hbhalodia · 2024-09-12T05:36:00Z

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -447,8 +446,7 @@ function InstalledFonts() {
 							</Button>
 						) }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> typogrpahy --> open font library modal and choose font

Before After

hbhalodia · 2024-09-12T05:38:19Z

packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -230,8 +230,7 @@ function UploadFonts() {
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> typography --> open font library modal --> upload font tab.

Note: Due to higher specificity of button class, it has changed the size of upload button to 40px which is not looking nice. Should we revert this change or add some style change by adding !importnant or higher specificity? Cc: @mirka @ciampo

Before After

I raised this as a separate issue at #65333, but for the scope of this PR let's just add an !important to the height.

I raised this as a separate issue at #65333, but for the scope of this PR let's just add an !important to the height.

Sure 👍.

hbhalodia · 2024-09-12T05:39:16Z

packages/edit-site/src/components/global-styles/palette.js

@@ -87,8 +87,7 @@ function Palette( { name } ) {
 			{ window.__experimentalEnableColorRandomizer &&
 				themeColors?.length > 0 && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> color --> pallete, option for randmoize colors.

Before After

hbhalodia · 2024-09-12T05:41:24Z

packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -162,8 +162,7 @@ function RevisionsButtons( {
 						aria-current={ isSelected }
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> revisions icon --> check for individual revisions button.

Note: This has some overridden styles, so no difference in before and after.

Before After

hbhalodia · 2024-09-12T05:43:24Z

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -234,8 +234,7 @@ export default function ShadowsEditPanel() {
 						>
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> shadows --> add shadow and rename it, a modal would be opened and check for cancel button.

Before After

hbhalodia · 2024-09-12T05:44:09Z

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -246,8 +245,7 @@ export default function ShadowsEditPanel() {
 							</FlexItem>
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> shadows --> add shadow and rename it, a modal would be opened and check for save button.

Before After

hbhalodia · 2024-09-12T05:46:03Z

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -381,8 +379,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 					<HStack align="center" justify="flex-start" spacing={ 0 }>
 						<FlexItem style={ { flexGrow: 1 } }>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> shadows --> add shadow. Open shadow and check for drop shadow button.

Note: It already has a 40px size as height is auto.

Before After

hbhalodia · 2024-09-12T05:47:38Z

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -394,8 +391,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						{ canRemove && (
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize


This can be seen when you visit, site-editor --> styles --> shadows --> add shadow. Open shadow and check for drop shadow remove icon button.

Note: It already has a 40px size as height is auto.

Before After

github-actions · 2024-09-12T05:48:05Z

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: hbhalodia <[email protected]>
Co-authored-by: mirka <[email protected]>

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

hbhalodia · 2024-09-15T15:44:38Z

Hi @mirka, The requested changes are updated in the PR.
Thank You,

mirka

Looks good, thanks 🚀

hbhalodia added 7 commits September 12, 2024 10:20

Fix font library modal fonts to use 40px default button size

c05547a

Fix install font button to use default 40px size

26fbffc

Fix the installed fonts button size to use 40px default

1d4a850

Fix upload font button size to use 40px default size

d0b232a

Fix add the default button 40px size for randomize color pallete button

ca97bb2

Fix edit site style revision button to use 40px default size

a06490c

Fix edit site shadow components buttons to use default 40px size

911cefc

hbhalodia commented Sep 12, 2024

View reviewed changes

hbhalodia marked this pull request as ready for review September 12, 2024 05:47

hbhalodia mentioned this pull request Sep 12, 2024

Button: Replace remaining 40px default size violations #65018

Open

21 tasks

akasunil added the [Type] Code Quality Issues or PRs that relate to code quality label Sep 12, 2024

akasunil assigned hbhalodia Sep 12, 2024

mirka requested a review from a team September 13, 2024 14:16

hbhalodia added 3 commits September 15, 2024 21:06

Merge branch 'trunk' into fix/issue-65018-6

0d0ae24

Fix the style for the button height on the font library modal

61c6627

Add !important to override the button size for 40px

b933d43

hbhalodia requested a review from mirka September 15, 2024 15:44

mirka approved these changes Sep 16, 2024

View reviewed changes

mirka enabled auto-merge (squash) September 16, 2024 10:44

mirka merged commit c80fc61 into WordPress:trunk Sep 16, 2024
61 checks passed

github-actions bot added this to the Gutenberg 19.3 milestone Sep 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Button: Replace remaining 40px default size violation [Edit Site 2] #65258

Fix: Button: Replace remaining 40px default size violation [Edit Site 2] #65258

hbhalodia commented Sep 12, 2024

hbhalodia Sep 12, 2024

mirka Sep 13, 2024

mirka Sep 13, 2024

hbhalodia Sep 15, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

mirka Sep 13, 2024

hbhalodia Sep 15, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

hbhalodia Sep 12, 2024

github-actions bot commented Sep 12, 2024 •

edited

Loading

hbhalodia commented Sep 15, 2024

mirka left a comment

Fix: Button: Replace remaining 40px default size violation [Edit Site 2] #65258

Fix: Button: Replace remaining 40px default size violation [Edit Site 2] #65258

Conversation

hbhalodia commented Sep 12, 2024

What?

Why?

How?

Testing Instructions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 12, 2024 • edited Loading

hbhalodia commented Sep 15, 2024

mirka left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 12, 2024 •

edited

Loading