Navigator: Deprecate 36px default size for buttons

WordPress · Dec 26, 2024 · 4e134b1 · 4e134b1
1 parent 19c8b1f
commit 4e134b1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -11,13 +11,14 @@ import { useContextSystem } from '../../context';
 import Button from '../../button';
 import { useNavigator } from '../use-navigator';
 import type { NavigatorBackButtonProps } from '../types';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 export function useNavigatorBackButton(
 	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >
 ) {
 	const {
 		onClick,
-		as = Button,
+		as,
 
 		...otherProps
 	} = useContextSystem( props, 'Navigator.BackButton' );
@@ -33,8 +34,16 @@ export function useNavigatorBackButton(
 			[ goBack, onClick ]
 		);
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'Navigator.BackButton',
+		__next40pxDefaultSize: otherProps.__next40pxDefaultSize,
+		size: otherProps.size,
+		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version. For icon buttons, consider setting a non-default size like `size: "compact"`.',
+	} );
+
 	return {
-		as,
+		as: as ?? Button,
+		__shouldNotWarnDeprecated36pxSize: as === undefined,
 		onClick: handleClick,
 		...otherProps,
 	};

diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
@@ -12,6 +12,7 @@ import { useContextSystem } from '../../context';
 import Button from '../../button';
 import { useNavigator } from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
 	`[${ attrName }="${ attrValue }"]`;
@@ -22,7 +23,7 @@ export function useNavigatorButton(
 	const {
 		path,
 		onClick,
-		as = Button,
+		as,
 		attributeName = 'id',
 		...otherProps
 	} = useContextSystem( props, 'Navigator.Button' );
@@ -45,8 +46,16 @@ export function useNavigatorButton(
 			[ goTo, onClick, attributeName, escapedPath ]
 		);
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'Navigator.Button',
+		__next40pxDefaultSize: otherProps.__next40pxDefaultSize,
+		size: otherProps.size,
+		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version. For icon buttons, consider setting a non-default size like `size: "compact"`.',
+	} );
+
 	return {
-		as,
+		as: as ?? Button,
+		__shouldNotWarnDeprecated36pxSize: as === undefined,
 		onClick: handleClick,
 		...otherProps,
 		[ attributeName ]: escapedPath,