Customize widgets, edit post: refactor Button to new sizes (#65807)

* Customize widgets, edit post: refactor Button usages to new component sizing * Update snapshots * Switch to compact size in the customize widgets welcome guide * Remove unused classnames, update snapshots --- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Oct 2, 2024 · bed3a43 · bed3a43
1 parent 559391a
commit bed3a43
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 22 deletions.
diff --git a/packages/customize-widgets/src/components/error-boundary/index.js b/packages/customize-widgets/src/components/error-boundary/index.js
@@ -11,12 +11,7 @@ import { doAction } from '@wordpress/hooks';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
-			variant="secondary"
-			ref={ ref }
-		>
+		<Button size="compact" variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);

diff --git a/packages/customize-widgets/src/components/inserter/index.js b/packages/customize-widgets/src/components/inserter/index.js
@@ -37,9 +37,7 @@ function Inserter( { setIsOpened } ) {
 					{ __( 'Add a block' ) }
 				</h2>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					className="customize-widgets-layout__inserter-panel-header-close-button"
+					size="small"
 					icon={ closeSmall }
 					onClick={ () => setIsOpened( false ) }
 					aria-label={ __( 'Close inserter' ) }

diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -43,9 +43,7 @@ export default function WelcomeGuide( { sidebar } ) {
 					  ) }
 			</p>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="customize-widgets-welcome-guide__button"
+				size="compact"
 				variant="primary"
 				onClick={ () =>
 					toggle( 'core/customize-widgets', 'welcomeGuide' )

diff --git a/packages/edit-post/src/components/back-button/fullscreen-mode-close.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
@@ -91,8 +91,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	return (
 		<motion.div whileHover="expand">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className={ classes }
 				href={ buttonHref }
 				label={ buttonLabel }

diff --git a/...ges/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap b/...ges/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
@@ -5,7 +5,7 @@ exports[`FullscreenModeClose when in full screen mode should display a default s
   <div>
     <a
       aria-label="Back"
-      class="components-button edit-post-fullscreen-mode-close"
+      class="components-button edit-post-fullscreen-mode-close is-next-40px-default-size"
       href="edit.php?"
     >
       <svg

diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -82,8 +82,7 @@ export default function InitPatternModal() {
 							/>
 							<HStack justify="right">
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 									disabled={ ! title }

diff --git a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
@@ -39,9 +39,7 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				) }
 			</p>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="edit-post-preferences-modal__custom-fields-confirmation-button"
+				__next40pxDefaultSize
 				variant="secondary"
 				isBusy={ isReloading }
 				accessibleWhenDisabled

diff --git a/...dit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap b/...dit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap
@@ -97,7 +97,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
       Show & Reload Page
@@ -300,7 +300,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
       Hide & Reload Page