From bd7e9c2ab0c41269e22b4eb4cd2b2afe3fe84e66 Mon Sep 17 00:00:00 2001
From: VATALIYA PARTH <88878890+PARTHVATALIYA@users.noreply.github.com>
Date: Thu, 12 Dec 2024 04:42:20 +0530
Subject: [PATCH 1/2] SelectControl : Deprecate 36px default size (#66898)

* Add the changelog for the deprecation

* Add the changelog for the deprecation

* Move changelog

* Suppress warning on internal usage

* Add props to WithCustomChildren and remove size from selectControl

* Fix changelog

* Update in Disabled story

* Add prop to rest of readme snippets

---------

Co-authored-by: PARTHVATALIYA <parthvataliya@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md                       |  4 ++++
 packages/components/src/dimension-control/index.tsx    |  1 +
 .../components/src/disabled/stories/index.story.tsx    |  1 +
 packages/components/src/input-control/types.ts         |  7 +++++++
 packages/components/src/select-control/README.md       |  3 +++
 packages/components/src/select-control/index.tsx       | 10 ++++++++++
 .../src/select-control/stories/index.story.tsx         |  2 ++
 .../src/select-control/test/select-control.tsx         |  8 +++++++-
 packages/components/src/select-control/types.ts        |  1 +
 packages/components/src/tree-select/index.tsx          |  1 +
 10 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c9f63514c8a60..4676047d58454 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)).
+
 ## 29.0.0 (2024-12-11)
 
 ### Breaking Changes
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 2cc39379ebde0..ffdfaeb84ee51 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -113,6 +113,7 @@ export function DimensionControl( props: DimensionControlProps ) {
 		<ContextSystemProvider value={ CONTEXT_VALUE }>
 			<SelectControl
 				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				className={ clsx(
 					className,
diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx
index f017305507814..591118681a82d 100644
--- a/packages/components/src/disabled/stories/index.story.tsx
+++ b/packages/components/src/disabled/stories/index.story.tsx
@@ -55,6 +55,7 @@ const Form = () => {
 			/>
 			<SelectControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index 13f078cd89cc1..99c5b1aea92c3 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -40,6 +40,13 @@ interface BaseProps {
 	 * @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;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index c240243408fab..d8742fce74f54 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -92,6 +92,7 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 		/>
 	);
@@ -114,6 +115,7 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
+	__next40pxDefaultSize
 	__nextHasNoMarginBottom
 />
 ```
@@ -129,6 +131,7 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
+    __next40pxDefaultSize
     __nextHasNoMarginBottom
 >
 	<optgroup label="Theropods">
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 3686661b8a58d..e93e9385a9c23 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -18,6 +18,7 @@ import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -65,6 +66,7 @@ function UnforwardedSelectControl< V extends string >(
 		variant = 'default',
 		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
+		__shouldNotWarnDeprecated36pxSize,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp( props );
 	const id = useUniqueId( idProp );
@@ -94,6 +96,13 @@ function UnforwardedSelectControl< V extends string >(
 
 	const classes = clsx( 'components-select-control', className );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'SelectControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			help={ help }
@@ -154,6 +163,7 @@ function UnforwardedSelectControl< V extends string >(
  *
  *   return (
  *     <SelectControl
+ *       __next40pxDefaultSize
  *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index d872df540602e..e9f7f09a1ddb0 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -65,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	options: [
@@ -87,6 +88,7 @@ WithLabelAndHelpText.args = {
  */
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	label: 'Label',
 	children: (
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 47b684cd20e28..37935d60384b1 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -12,7 +12,13 @@ import _SelectControl from '..';
 const SelectControl = (
 	props: React.ComponentProps< typeof _SelectControl >
 ) => {
-	return <_SelectControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_SelectControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'SelectControl', () => {
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index 4e7211ab9abfb..3d9f06385c753 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -13,6 +13,7 @@ type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
 	| '__next40pxDefaultSize'
+	| '__shouldNotWarnDeprecated36pxSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
 	| 'label'
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index bd92807bff4cc..075ae1268e3c7 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -102,6 +102,7 @@ export function TreeSelect( props: TreeSelectProps ) {
 	return (
 		<ContextSystemProvider value={ CONTEXT_VALUE }>
 			<SelectControl
+				__shouldNotWarnDeprecated36pxSize
 				{ ...{ label, options, onChange } }
 				value={ selectedId }
 				{ ...restProps }

From 795e9c2dd07caa6d915ddb46e981987544663329 Mon Sep 17 00:00:00 2001
From: VATALIYA PARTH <88878890+PARTHVATALIYA@users.noreply.github.com>
Date: Thu, 12 Dec 2024 05:28:48 +0530
Subject: [PATCH 2/2] InputControl : Deprecate 36px default size (#66897)

* Add the console warning for 36px size variation

* Add the changelog for the deprecation

* Fix changelog

* Suppress warnings when redundant

* Fix Password story

* Add size prop to usage in PaletteEdit

* Update usage in other component stories

---------

Co-authored-by: PARTHVATALIYA <parthvataliya@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md                     |  1 +
 packages/components/src/input-control/README.md      |  1 +
 packages/components/src/input-control/index.tsx      | 10 ++++++++++
 .../src/input-control/stories/index.story.tsx        |  7 ++++++-
 packages/components/src/input-control/test/index.js  | 12 +++++++++---
 .../components/src/modal/stories/index.story.tsx     |  5 ++++-
 packages/components/src/number-control/index.tsx     |  1 +
 packages/components/src/palette-edit/index.tsx       |  1 +
 .../components/src/panel/stories/index.story.tsx     |  6 +++---
 .../components/src/tree-grid/stories/index.story.tsx |  2 ++
 10 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4676047d58454..5c8643dc08cf6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Deprecations
 
 -   `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)).
+-   `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)).
 
 ## 29.0.0 (2024-12-11)
 
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 58a3b4a3b1a09..ff5c70decebeb 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -17,6 +17,7 @@ const Example = () => {
 
 	return (
 		<InputControl
+			__next40pxDefaultSize
 			value={ value }
 			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index fd0fc0a5c4553..d346d1b31b111 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -20,6 +20,7 @@ import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -36,6 +37,7 @@ export function UnforwardedInputControl(
 ) {
 	const {
 		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -68,6 +70,13 @@ export function UnforwardedInputControl(
 
 	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'InputControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			className={ classes }
@@ -125,6 +134,7 @@ export function UnforwardedInputControl(
  *
  *   return (
  *  	<InputControl
+ * 			__next40pxDefaultSize
  *  		value={ value }
  *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx
index 136301c42e7d0..40630938dbb37 100644
--- a/packages/components/src/input-control/stories/index.story.tsx
+++ b/packages/components/src/input-control/stories/index.story.tsx
@@ -46,6 +46,7 @@ export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
+	__next40pxDefaultSize: true,
 };
 
 export const WithHelpText = Template.bind( {} );
@@ -117,7 +118,6 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 	return (
 		<InputControl
 			type={ visible ? 'text' : 'password' }
-			label="Password"
 			suffix={
 				<InputControlSuffixWrapper variant="control">
 					<Button
@@ -132,3 +132,8 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 		/>
 	);
 };
+ShowPassword.args = {
+	...Default.args,
+	label: 'Password',
+	placeholder: undefined,
+};
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index ace3086c388c8..46332eb6eea70 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -17,9 +17,15 @@ import BaseInputControl from '../';
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
-	const InputControl = ( props ) => (
-		<BaseInputControl { ...props } data-testid="input" />
-	);
+	const InputControl = ( props ) => {
+		return (
+			<BaseInputControl
+				{ ...props }
+				__next40pxDefaultSize
+				data-testid="input"
+			/>
+		);
+	};
 
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
index be18ed141dd3f..3a7b817458ad2 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -75,7 +75,10 @@ const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 						anim id est laborum.
 					</p>
 
-					<InputControl style={ { marginBottom: '20px' } } />
+					<InputControl
+						__next40pxDefaultSize
+						style={ { marginBottom: '20px' } }
+					/>
 
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index efa84879b8ff3..6dd1af4024af7 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -242,6 +242,7 @@ function UnforwardedNumberControl(
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
 			size={ size }
+			__shouldNotWarnDeprecated36pxSize
 			suffix={
 				spinControls === 'custom' ? (
 					<>
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index a58ecbb685e51..2eb6e3bbe3b6f 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -60,6 +60,7 @@ const DEFAULT_COLOR = '#000';
 function NameInput( { value, onChange, label }: NameInputProps ) {
 	return (
 		<NameInputControl
+			size="compact"
 			label={ label }
 			hideLabelFromVision
 			value={ value }
diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx
index db66b911d4dc1..1392247036c2c 100644
--- a/packages/components/src/panel/stories/index.story.tsx
+++ b/packages/components/src/panel/stories/index.story.tsx
@@ -74,12 +74,12 @@ _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
 			<PanelRow>
-				<InputControl label="First name" />
-				<InputControl label="Last name" />
+				<InputControl label="First name" __next40pxDefaultSize />
+				<InputControl label="Last name" __next40pxDefaultSize />
 			</PanelRow>
 			<PanelRow>
 				<div style={ { flex: 1 } }>
-					<InputControl label="Email" />
+					<InputControl label="Email" __next40pxDefaultSize />
 				</div>
 			</PanelRow>
 		</PanelBody>
diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx
index f91ba4631d320..e113103897dbd 100644
--- a/packages/components/src/tree-grid/stories/index.story.tsx
+++ b/packages/components/src/tree-grid/stories/index.story.tsx
@@ -111,6 +111,7 @@ const Rows = ( {
 										label="Description"
 										hideLabelFromVision
 										placeholder="Description"
+										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }
@@ -121,6 +122,7 @@ const Rows = ( {
 										label="Notes"
 										hideLabelFromVision
 										placeholder="Notes"
+										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }