From 1b7eeecb693a6b8a28db7592435628b43aeff7c8 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 19 Nov 2024 06:33:59 +0900
Subject: [PATCH] Add prop to suppress redundant warning

---
 .../src/font-size-picker/font-size-picker-toggle-group.tsx | 1 +
 .../toggle-group-control/component.tsx                     | 3 ++-
 packages/components/src/toggle-group-control/types.ts      | 7 +++++++
 packages/components/src/utils/deprecated-36px-size.ts      | 3 +++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
index 1e4cbcd1b72660..1b3619c800e453 100644
--- a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
@@ -19,6 +19,7 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index d74be79b921bff..f9d96cf3b935b8 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -32,6 +32,7 @@ function UnconnectedToggleGroupControl(
 	const {
 		__nextHasNoMarginBottom = false,
 		__next40pxDefaultSize = false,
+		__shouldNotWarnDeprecated36pxSize,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -82,11 +83,11 @@ function UnconnectedToggleGroupControl(
 		? ToggleGroupControlAsButtonGroup
 		: ToggleGroupControlAsRadioGroup;
 
-	// Add Warning for deprecated 36px size.
 	maybeWarnDeprecated36pxSize( {
 		componentName: 'ToggleGroupControl',
 		size,
 		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
 	} );
 
 	return (
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 463d8d26e64410..cfa9d00080467c 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -128,6 +128,13 @@ export type ToggleGroupControlProps = Pick<
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };
 
 export type ToggleGroupControlContextProps = {
diff --git a/packages/components/src/utils/deprecated-36px-size.ts b/packages/components/src/utils/deprecated-36px-size.ts
index be5baa2515637c..0f87c2cd270c73 100644
--- a/packages/components/src/utils/deprecated-36px-size.ts
+++ b/packages/components/src/utils/deprecated-36px-size.ts
@@ -7,12 +7,15 @@ export function maybeWarnDeprecated36pxSize( {
 	componentName,
 	__next40pxDefaultSize,
 	size,
+	__shouldNotWarnDeprecated36pxSize,
 }: {
 	componentName: string;
 	__next40pxDefaultSize: boolean | undefined;
 	size: string | undefined;
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 } ) {
 	if (
+		__shouldNotWarnDeprecated36pxSize ||
 		__next40pxDefaultSize ||
 		( size !== undefined && size !== 'default' )
 	) {