Fix: Button: Replace remaining 40px default size violation [Edit Site…

… 2] (WordPress#65258) * Fix font library modal fonts to use 40px default button size * Fix install font button to use default 40px size * Fix the installed fonts button size to use 40px default * Fix upload font button size to use 40px default size * Fix add the default button 40px size for randomize color pallete button * Fix edit site style revision button to use 40px default size * Fix edit site shadow components buttons to use default 40px size * Fix the style for the button height on the font library modal * Add !important to override the button size for 40px Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
bph · Sep 16, 2024 · c80fc61 · c80fc61
1 parent 4ca78cd
commit c80fc61
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/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
 			onClick={ () => {
 				onClick();
 				if ( navigatorPath ) {

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/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
 								variant="primary"
 								onClick={ handleInstall }
 								isBusy={ isInstalling }

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/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
 								isDestructive
 								variant="tertiary"
 								onClick={ handleUninstallClick }
@@ -447,8 +446,7 @@ function InstalledFonts() {
 							</Button>
 						) }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="primary"
 							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -94,7 +94,11 @@ $footer-height: 70px;
 .font-library-modal__font-card {
 	border: $border-width solid $gray-200;
 	width: 100%;
-	height: auto;
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756147260
+	height: auto !important;
+
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
@@ -144,7 +148,11 @@ $footer-height: 70px;
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: $grid-unit-80 * 4; // 256px
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756155039
+	height: $grid-unit-80 * 4 !important; // 256px
+
 	width: 100%;
 }
 

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/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
 								className="font-library-modal__upload-area"
 								onClick={ openFileDialog }
 							>

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/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
 						variant="secondary"
 						icon={ shuffle }
 						onClick={ randomizeThemeColors }

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/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
 							className="edit-site-global-styles-screen-revisions__revision-button"
 							accessibleWhenDisabled
 							disabled={ isSelected }

diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/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
 									variant="tertiary"
 									onClick={ () =>
 										setIsRenameModalVisible( false )
@@ -246,8 +245,7 @@ export default function ShadowsEditPanel() {
 							</FlexItem>
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 								>
@@ -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
 								icon={ shadowIcon }
 								{ ...toggleProps }
 							>
@@ -394,8 +391,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						{ canRemove && (
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									icon={ reset }
 									{ ...removeButtonProps }
 								/>