From 4e134b1bbbf390c5548fe86bb92159e1a13a1eca Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 27 Dec 2024 02:52:32 +0900
Subject: [PATCH] Navigator: Deprecate 36px default size for buttons

---
 .../src/navigator/navigator-back-button/hook.ts     | 13 +++++++++++--
 .../src/navigator/navigator-button/hook.ts          | 13 +++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index d6fcd39647bff9..020428bb328cea 100644
--- 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
index 59d2aaa65662d7..75d9fc7f9b51f4 100644
--- 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,