NumberControl: Deprecate 36px default size

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Deprecations
 
 -   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
+-   `NumberControl`: Deprecate 36px default size ([#66730](https://github.com/WordPress/gutenberg/pull/66730)).
 
 ### Enhancements
 

packages/components/src/number-control/README.md

@@ -16,6 +16,7 @@ const Example = () => {
 
 	return (
 		<NumberControl
+			__next40pxDefaultSize
 			isShiftStepEnabled={ true }
 			onChange={ setValue }
 			shiftStep={ 10 }
@@ -146,4 +147,4 @@ Start opting into the larger default height that will become the default size in
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
+-   Default: `false`

packages/components/src/number-control/index.tsx

@@ -26,6 +26,7 @@ import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
 import { useCx } from '../utils';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -34,6 +35,7 @@ function UnforwardedNumberControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		__next40pxDefaultSize,
 		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
@@ -56,6 +58,12 @@ function UnforwardedNumberControl(
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'NumberControl',
+		size,
+		__next40pxDefaultSize,
+	} );
+
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
 			alternative: 'spinControls="none"',

packages/components/src/number-control/stories/index.story.tsx

@@ -61,4 +61,5 @@ const Template: StoryFn< typeof NumberControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
+	__next40pxDefaultSize: true,
 };

packages/components/src/number-control/test/index.tsx

@@ -29,9 +29,9 @@
 }
 
 describe( 'NumberControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <NumberControl /> );
+			render( <NumberControl __next40pxDefaultSize /> );
 			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
 		} );