Button: Add __next40pxDefaultSize in dataviews, reusable-blocks, et…

…c. (#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 <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Sep 30, 2024 · 6f8a67a · 6f8a67a
1 parent 5e47d48
commit 6f8a67a
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -57,17 +57,15 @@ export function DotTip( {
 			<p>{ children }</p>
 			<p>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="link"
 					onClick={ onDismiss }
 				>
 					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
 				</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
@@ -19,15 +19,15 @@ 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
       </button>
     </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/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-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"
 								>