From 659d20d3e54805c6abefb7cca8d43c3640a6e3a3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 30 Sep 2024 18:44:16 +0900
Subject: [PATCH] Button: Add `__next40pxDefaultSize` in dataviews,
 reusable-blocks, etc. (#65715)

* Fix in Dataforms layouts

* Fix in Patterns header

* Fix in Patterns import popover

* Fix in nux

* Fix in ReusableBlockConvertButton

* Update snapshot

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../dataviews/src/dataforms-layouts/panel/index.tsx |  4 +---
 .../src/dataforms-layouts/panel/style.scss          | 13 -------------
 .../src/components/import-dropdown/index.js         |  4 ++--
 .../src/components/import-dropdown/style.scss       |  5 +++++
 .../src/components/import-form/index.js             |  3 +--
 .../src/components/import-form/style.scss           |  1 -
 packages/list-reusable-blocks/src/style.scss        |  4 ----
 packages/nux/src/components/dot-tip/index.js        |  6 ++----
 .../dot-tip/test/__snapshots__/index.js.snap        |  4 ++--
 .../reusable-block-convert-button.js                |  6 ++----
 10 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
index 9f118584998bd..94e107dc20665 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -44,12 +44,10 @@ function DropdownHeader( {
 				<Spacer />
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						className="dataforms-layouts-panel__dropdown-header-action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
 						onClick={ onClose }
+						size="small"
 					/>
 				) }
 			</HStack>
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
index e6840bed9d6e0..ae69c4ff45243 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/style.scss
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -44,16 +44,3 @@
 .dataforms-layouts-panel__dropdown-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].dataforms-layouts-panel__dropdown-header-action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index d20ba9fcf1099..fdad08f80d213 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -17,8 +17,8 @@ function ImportDropdown( { onUpload } ) {
 			contentClassName="list-reusable-blocks-import-dropdown__content"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
+					className="list-reusable-blocks-import-dropdown__button"
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					variant="primary"
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
index 8c2dc9c94bd71..abef499a63b29 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
@@ -1,3 +1,8 @@
 .list-reusable-blocks-import-dropdown__content .components-popover__content {
 	padding: 10px;
 }
+
+[class].list-reusable-blocks-import-dropdown__button {
+	// Todo: Make core button height and gutenberg button height equal.
+	height: 30px;
+}
diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js
index b78869df61eb6..ba6cffb956f04 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -84,8 +84,7 @@ function ImportForm( { instanceId, onUpload } ) {
 			</label>
 			<input id={ inputId } type="file" onChange={ onChangeFile } />
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				type="submit"
 				isBusy={ isLoading }
 				accessibleWhenDisabled
diff --git a/packages/list-reusable-blocks/src/components/import-form/style.scss b/packages/list-reusable-blocks/src/components/import-form/style.scss
index 844130b7c5914..e72d63fd2a490 100644
--- a/packages/list-reusable-blocks/src/components/import-form/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-form/style.scss
@@ -5,7 +5,6 @@
 
 .list-reusable-blocks-import-form__button {
 	margin-top: 10px;
-	margin-bottom: 10px;
 	float: right;
 }
 
diff --git a/packages/list-reusable-blocks/src/style.scss b/packages/list-reusable-blocks/src/style.scss
index ad85c70058609..6767bd0bd7e15 100644
--- a/packages/list-reusable-blocks/src/style.scss
+++ b/packages/list-reusable-blocks/src/style.scss
@@ -6,10 +6,6 @@
 	align-items: center;
 	position: relative;
 	top: -3px;
-	// Todo: Make core button height and gutenberg button height equal.
-	.components-button {
-		height: 26px;
-	}
 }
 
 @include wordpress-admin-schemes();
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
index 80db7568b351b..e2768789ad1fd 100644
--- a/packages/nux/src/components/dot-tip/index.js
+++ b/packages/nux/src/components/dot-tip/index.js
@@ -57,8 +57,7 @@ export function DotTip( {
 			<p>{ children }</p>
 			<p>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="link"
 					onClick={ onDismiss }
 				>
@@ -66,8 +65,7 @@ export function DotTip( {
 				</Button>
 			</p>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="small"
 				className="nux-dot-tip__disable"
 				icon={ close }
 				label={ __( 'Disable tips' ) }
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index 90edc7a19990a..a160b7f655576 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -19,7 +19,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <p>
       <button
-        class="components-button is-link"
+        class="components-button is-next-40px-default-size is-link"
         type="button"
       >
         Got it
@@ -27,7 +27,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <button
       aria-label="Disable tips"
-      class="components-button nux-dot-tip__disable has-icon"
+      class="components-button nux-dot-tip__disable is-small has-icon"
       type="button"
     >
       <svg
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index bceca4876654c..e0d8592df4d8c 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -191,8 +191,7 @@ export default function ReusableBlockConvertButton( {
 							/>
 							<HStack justify="right">
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () => {
 										setIsModalOpen( false );
@@ -203,8 +202,7 @@ export default function ReusableBlockConvertButton( {
 								</Button>
 
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 								>