From 7b790e09973fc65c85d016f49fe879655b411ec2 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Oct 2022 16:12:23 +1100
Subject: [PATCH 01/14] Rough pass at adding custom spin buttons to
 NumberControl

---
 .../components/src/number-control/index.tsx   | 64 ++++++++++++++++++-
 .../styles/number-control-styles.js           |  9 +++
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 322f4116202c62..25472b962a0996 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -2,23 +2,28 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, ChangeEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
+import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Input } from './styles/number-control-styles';
+import { Input, SpinButton } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../ui/context/wordpress-component';
 import type { NumberControlProps } from './types';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
+import { HStack } from '../h-stack';
+
+const noop = () => {};
 
 function UnforwardedNumberControl(
 	{
@@ -36,6 +41,8 @@ function UnforwardedNumberControl(
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
+		size = 'default',
+		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
 	ref: ForwardedRef< any >
@@ -185,7 +192,7 @@ function UnforwardedNumberControl(
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
+			hideHTMLArrows={ size === '__unstable-large' || hideHTMLArrows }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
@@ -200,6 +207,57 @@ function UnforwardedNumberControl(
 				const baseState = numberControlStateReducer( state, action );
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
+			size={ size }
+			suffix={
+				size === '__unstable-large' &&
+				! hideHTMLArrows && (
+					<InputControlSuffixWrapper>
+						<HStack spacing={ 2 }>
+							<SpinButton
+								icon={ plusIcon }
+								isSmall
+								aria-hidden="true"
+								onClick={ (
+									event: ChangeEvent< HTMLInputElement >
+								) => {
+									const currentValue = isValueEmpty(
+										valueProp
+									)
+										? baseValue
+										: valueProp;
+									const nextValue = constrainValue(
+										add( currentValue, baseStep )
+									);
+									onChange?.( String( nextValue ), {
+										event,
+									} );
+								} }
+							/>
+							<SpinButton
+								icon={ resetIcon }
+								isSmall
+								aria-hidden="true"
+								onClick={ (
+									event: ChangeEvent< HTMLInputElement >
+								) => {
+									const currentValue = isValueEmpty(
+										valueProp
+									)
+										? baseValue
+										: valueProp;
+									const nextValue = constrainValue(
+										subtract( currentValue, baseStep )
+									);
+									onChange?.( String( nextValue ), {
+										event,
+									} );
+								} }
+							/>
+						</HStack>
+					</InputControlSuffixWrapper>
+				)
+			}
+			onChange={ onChange }
 		/>
 	);
 }
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
index a27784497b018d..0dd78826d0127e 100644
--- a/packages/components/src/number-control/styles/number-control-styles.js
+++ b/packages/components/src/number-control/styles/number-control-styles.js
@@ -4,10 +4,13 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
 import InputControl from '../../input-control';
+import { COLORS } from '../../utils';
+import Button from '../../button';
 
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 	if ( ! hideHTMLArrows ) return ``;
@@ -28,3 +31,9 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
+
+export const SpinButton = styled( Button )`
+	&&& {
+		color: ${ COLORS.ui.theme };
+	}
+`;

From 016f253db5756f388b29506d48cfdf5739a3f1a4 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Oct 2022 16:42:47 +1100
Subject: [PATCH 02/14] Adjust spacing of step buttons to match design

---
 packages/components/src/number-control/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 25472b962a0996..769ddbc8802141 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -20,8 +20,8 @@ import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../ui/context/wordpress-component';
 import type { NumberControlProps } from './types';
-import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
 import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
 
 const noop = () => {};
 
@@ -211,8 +211,8 @@ function UnforwardedNumberControl(
 			suffix={
 				size === '__unstable-large' &&
 				! hideHTMLArrows && (
-					<InputControlSuffixWrapper>
-						<HStack spacing={ 2 }>
+					<Spacer marginBottom={ 0 } marginRight={ 2 }>
+						<HStack spacing={ 1 }>
 							<SpinButton
 								icon={ plusIcon }
 								isSmall
@@ -254,7 +254,7 @@ function UnforwardedNumberControl(
 								} }
 							/>
 						</HStack>
-					</InputControlSuffixWrapper>
+					</Spacer>
 				)
 			}
 			onChange={ onChange }

From 49385466a54356152d36d382968b33022e56dc95 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Oct 2022 16:47:56 +1100
Subject: [PATCH 03/14] Pass along suffix if provided

---
 .../components/src/number-control/index.tsx   | 97 ++++++++++---------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 769ddbc8802141..5f59ec30253c4a 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -42,6 +42,7 @@ function UnforwardedNumberControl(
 		type: typeProp = 'number',
 		value: valueProp,
 		size = 'default',
+		suffix,
 		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
@@ -209,52 +210,56 @@ function UnforwardedNumberControl(
 			} }
 			size={ size }
 			suffix={
-				size === '__unstable-large' &&
-				! hideHTMLArrows && (
-					<Spacer marginBottom={ 0 } marginRight={ 2 }>
-						<HStack spacing={ 1 }>
-							<SpinButton
-								icon={ plusIcon }
-								isSmall
-								aria-hidden="true"
-								onClick={ (
-									event: ChangeEvent< HTMLInputElement >
-								) => {
-									const currentValue = isValueEmpty(
-										valueProp
-									)
-										? baseValue
-										: valueProp;
-									const nextValue = constrainValue(
-										add( currentValue, baseStep )
-									);
-									onChange?.( String( nextValue ), {
-										event,
-									} );
-								} }
-							/>
-							<SpinButton
-								icon={ resetIcon }
-								isSmall
-								aria-hidden="true"
-								onClick={ (
-									event: ChangeEvent< HTMLInputElement >
-								) => {
-									const currentValue = isValueEmpty(
-										valueProp
-									)
-										? baseValue
-										: valueProp;
-									const nextValue = constrainValue(
-										subtract( currentValue, baseStep )
-									);
-									onChange?.( String( nextValue ), {
-										event,
-									} );
-								} }
-							/>
-						</HStack>
-					</Spacer>
+				size === '__unstable-large' && ! hideHTMLArrows ? (
+					<>
+						{ suffix }
+						<Spacer marginBottom={ 0 } marginRight={ 2 }>
+							<HStack spacing={ 1 }>
+								<SpinButton
+									icon={ plusIcon }
+									isSmall
+									aria-hidden="true"
+									onClick={ (
+										event: ChangeEvent< HTMLInputElement >
+									) => {
+										const currentValue = isValueEmpty(
+											valueProp
+										)
+											? baseValue
+											: valueProp;
+										const nextValue = constrainValue(
+											add( currentValue, baseStep )
+										);
+										onChange?.( String( nextValue ), {
+											event,
+										} );
+									} }
+								/>
+								<SpinButton
+									icon={ resetIcon }
+									isSmall
+									aria-hidden="true"
+									onClick={ (
+										event: ChangeEvent< HTMLInputElement >
+									) => {
+										const currentValue = isValueEmpty(
+											valueProp
+										)
+											? baseValue
+											: valueProp;
+										const nextValue = constrainValue(
+											subtract( currentValue, baseStep )
+										);
+										onChange?.( String( nextValue ), {
+											event,
+										} );
+									} }
+								/>
+							</HStack>
+						</Spacer>
+					</>
+				) : (
+					suffix
 				)
 			}
 			onChange={ onChange }

From 2cc595374b7af2a9c914e6ff9db6408ad3f92bbe Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Oct 2022 16:53:58 +1100
Subject: [PATCH 04/14] DRY up onClick handlers

---
 .../components/src/number-control/index.tsx   | 45 +++++++------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 5f59ec30253c4a..449526483cf6fc 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -186,6 +186,19 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
+	const buildSpinHandler =
+		( direction: 'up' | 'down' ) =>
+		( event: ChangeEvent< HTMLInputElement > ) => {
+			let nextValue = isValueEmpty( valueProp ) ? baseValue : valueProp;
+			if ( direction === 'up' ) {
+				nextValue = add( nextValue, baseStep );
+			} else if ( direction === 'down' ) {
+				nextValue = subtract( nextValue, baseStep );
+			}
+			nextValue = constrainValue( nextValue );
+			onChange( String( nextValue ), { event } );
+		};
+
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -219,41 +232,13 @@ function UnforwardedNumberControl(
 									icon={ plusIcon }
 									isSmall
 									aria-hidden="true"
-									onClick={ (
-										event: ChangeEvent< HTMLInputElement >
-									) => {
-										const currentValue = isValueEmpty(
-											valueProp
-										)
-											? baseValue
-											: valueProp;
-										const nextValue = constrainValue(
-											add( currentValue, baseStep )
-										);
-										onChange?.( String( nextValue ), {
-											event,
-										} );
-									} }
+									onClick={ buildSpinHandler( 'up' ) }
 								/>
 								<SpinButton
 									icon={ resetIcon }
 									isSmall
 									aria-hidden="true"
-									onClick={ (
-										event: ChangeEvent< HTMLInputElement >
-									) => {
-										const currentValue = isValueEmpty(
-											valueProp
-										)
-											? baseValue
-											: valueProp;
-										const nextValue = constrainValue(
-											subtract( currentValue, baseStep )
-										);
-										onChange?.( String( nextValue ), {
-											event,
-										} );
-									} }
+									onClick={ buildSpinHandler( 'down' ) }
 								/>
 							</HStack>
 						</Spacer>

From 80335a2d04f4c3dc40e5104afbbcddcee623beb9 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 27 Oct 2022 17:04:07 +1100
Subject: [PATCH 05/14] Remove spin buttons from tab order

---
 packages/components/src/number-control/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 449526483cf6fc..205163988b20a8 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -232,12 +232,14 @@ function UnforwardedNumberControl(
 									icon={ plusIcon }
 									isSmall
 									aria-hidden="true"
+									tabIndex={ -1 }
 									onClick={ buildSpinHandler( 'up' ) }
 								/>
 								<SpinButton
 									icon={ resetIcon }
 									isSmall
 									aria-hidden="true"
+									tabIndex={ -1 }
 									onClick={ buildSpinHandler( 'down' ) }
 								/>
 							</HStack>

From f15a65398017bd56109c10a27febe10b3d72efe5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 28 Oct 2022 16:27:15 +1100
Subject: [PATCH 06/14] Add unit tests

---
 .../components/src/number-control/index.tsx   |  4 +-
 .../src/number-control/test/index.js          | 51 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 205163988b20a8..bde915c9044f24 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef, ChangeEvent } from 'react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
 
 /**
@@ -232,6 +232,7 @@ function UnforwardedNumberControl(
 									icon={ plusIcon }
 									isSmall
 									aria-hidden="true"
+									aria-label={ __( 'Increment' ) }
 									tabIndex={ -1 }
 									onClick={ buildSpinHandler( 'up' ) }
 								/>
@@ -239,6 +240,7 @@ function UnforwardedNumberControl(
 									icon={ resetIcon }
 									isSmall
 									aria-hidden="true"
+									aria-label={ __( 'Decrement' ) }
 									tabIndex={ -1 }
 									onClick={ buildSpinHandler( 'down' ) }
 								/>
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index c2f4bcb869a2ed..ecc598786a6997 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -425,4 +426,54 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '4' );
 		} );
 	} );
+
+	describe( 'custom spin buttons', () => {
+		test.each( [
+			{},
+			{ size: 'small' },
+			{ size: '__unstable-large', hideHTMLArrows: true },
+		] )( 'should not appear when props = %o', ( props ) => {
+			render( <NumberControl { ...props } /> );
+			expect(
+				screen.queryByLabelText( 'Increment' )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByLabelText( 'Decrement' )
+			).not.toBeInTheDocument();
+		} );
+
+		test.each( [
+			[ 'up', '1', {} ],
+			[ 'up', '2', { value: '1' } ],
+			[ 'up', '12', { value: '10', step: '2' } ],
+			[ 'up', '10', { value: '10', max: '10' } ],
+			[ 'down', '-1', {} ],
+			[ 'down', '1', { value: '2' } ],
+			[ 'down', '10', { value: '12', step: '2' } ],
+			[ 'down', '10', { value: '10', min: '10' } ],
+		] )(
+			'should spin %s to %s when props = %o',
+			async ( direction, expectedValue, props ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<NumberControl
+						{ ...props }
+						size="__unstable-large"
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByLabelText(
+						direction === 'up' ? 'Increment' : 'Decrement'
+					)
+				);
+				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
+					event: expect.anything(),
+				} );
+			}
+		);
+	} );
 } );

From e5967b3971d5ef082285c5487c08d6c20b4592d8 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 28 Oct 2022 16:30:08 +1100
Subject: [PATCH 07/14] Update changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d699e53a7fd7ce..307b5f995e20f0 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 -   `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
 -   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
 -   `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
+-   `NumberControl`: Add custom spin buttons ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
 
 ### Bug Fix
 

From e63d7ed04fbfcb58131cdc7ca290df3c5af4c985 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 31 Oct 2022 16:20:51 +1100
Subject: [PATCH 08/14] Make reducer and spin buttons use same logic

---
 .../components/src/number-control/index.tsx   | 94 ++++++++++---------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index bde915c9044f24..0a27f042f44958 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ForwardedRef, ChangeEvent } from 'react';
+import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -64,6 +64,23 @@ function UnforwardedNumberControl(
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
 
+	const spinValue = (
+		value: string | number | undefined,
+		direction: 'up' | 'down',
+		event: KeyboardEvent | MouseEvent | undefined
+	) => {
+		event?.preventDefault();
+		const shift = event?.shiftKey && isShiftStepEnabled;
+		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		let nextValue = isValueEmpty( value ) ? baseValue : value;
+		if ( direction === 'up' ) {
+			nextValue = add( nextValue, delta );
+		} else if ( direction === 'down' ) {
+			nextValue = subtract( nextValue, delta );
+		}
+		return constrainValue( nextValue, shift ? delta : undefined );
+	};
+
 	/**
 	 * "Middleware" function that intercepts updates from InputControl.
 	 * This allows us to tap into actions to transform the (next) state for
@@ -86,33 +103,11 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				const enableShift =
-					( event as KeyboardEvent | undefined )?.shiftKey &&
-					isShiftStepEnabled;
-
-				const incrementalValue = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
-				let nextValue = isValueEmpty( currentValue )
-					? baseValue
-					: currentValue;
-
-				if ( event?.preventDefault ) {
-					event.preventDefault();
-				}
-
-				if ( type === inputControlActionTypes.PRESS_UP ) {
-					nextValue = add( nextValue, incrementalValue );
-				}
-
-				if ( type === inputControlActionTypes.PRESS_DOWN ) {
-					nextValue = subtract( nextValue, incrementalValue );
-				}
-
 				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
-				nextState.value = constrainValue(
-					nextValue,
-					enableShift ? incrementalValue : undefined
+				nextState.value = spinValue(
+					currentValue,
+					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+					event as KeyboardEvent | undefined
 				);
 			}
 
@@ -186,19 +181,6 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
-	const buildSpinHandler =
-		( direction: 'up' | 'down' ) =>
-		( event: ChangeEvent< HTMLInputElement > ) => {
-			let nextValue = isValueEmpty( valueProp ) ? baseValue : valueProp;
-			if ( direction === 'up' ) {
-				nextValue = add( nextValue, baseStep );
-			} else if ( direction === 'down' ) {
-				nextValue = subtract( nextValue, baseStep );
-			}
-			nextValue = constrainValue( nextValue );
-			onChange( String( nextValue ), { event } );
-		};
-
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -234,7 +216,21 @@ function UnforwardedNumberControl(
 									aria-hidden="true"
 									aria-label={ __( 'Increment' ) }
 									tabIndex={ -1 }
-									onClick={ buildSpinHandler( 'up' ) }
+									onClick={ (
+										event: MouseEvent< HTMLButtonElement >
+									) => {
+										onChange(
+											String(
+												spinValue(
+													valueProp,
+													'up',
+													event
+												)
+											),
+											// @ts-expect-error TODO: Make InputChangeCallback less opinionated about event type.
+											{ event }
+										);
+									} }
 								/>
 								<SpinButton
 									icon={ resetIcon }
@@ -242,7 +238,21 @@ function UnforwardedNumberControl(
 									aria-hidden="true"
 									aria-label={ __( 'Decrement' ) }
 									tabIndex={ -1 }
-									onClick={ buildSpinHandler( 'down' ) }
+									onClick={ (
+										event: MouseEvent< HTMLButtonElement >
+									) => {
+										onChange(
+											String(
+												spinValue(
+													valueProp,
+													'down',
+													event
+												)
+											),
+											// @ts-expect-error TODO: Make InputChangeCallback less opinionated about event type.
+											{ event }
+										);
+									} }
 								/>
 							</HStack>
 						</Spacer>

From d1e2a983bbd32c5c57faf9139c40763ce281db6f Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 31 Oct 2022 16:46:41 +1100
Subject: [PATCH 09/14] Make InputControl's onChange callback type less strict

Typing the event attribute as PointerEvent<T> | ChangeEvent<T> isn't
great as it means that future ways to input a value into InputControl,
NumberControl and UnitControl will result in BC breaking type changes.
Consumers of the component don't need to know the specifics of the event
beyond that it's a synthetic event and can use `is` to determine more if
necessary.
---
 packages/components/src/input-control/types.ts   | 10 ++++------
 packages/components/src/number-control/index.tsx |  2 --
 packages/components/src/unit-control/index.tsx   |  6 +-----
 packages/components/src/unit-control/types.ts    |  9 ++++-----
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index d179e9a7c26a6f..fb4ed8d4a77a64 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -4,9 +4,7 @@
 import type {
 	CSSProperties,
 	ReactNode,
-	ChangeEvent,
 	SyntheticEvent,
-	PointerEvent,
 	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
@@ -62,10 +60,10 @@ interface BaseProps {
 	size?: Size;
 }
 
-export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
-	P = {}
-> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+export type InputChangeCallback< P = {} > = (
+	nextValue: string | undefined,
+	extra: { event: SyntheticEvent } & P
+) => void;
 
 export interface InputFieldProps extends BaseProps {
 	/**
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 0a27f042f44958..136068b51a1cd3 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -227,7 +227,6 @@ function UnforwardedNumberControl(
 													event
 												)
 											),
-											// @ts-expect-error TODO: Make InputChangeCallback less opinionated about event type.
 											{ event }
 										);
 									} }
@@ -249,7 +248,6 @@ function UnforwardedNumberControl(
 													event
 												)
 											),
-											// @ts-expect-error TODO: Make InputChangeCallback less opinionated about event type.
 											{ event }
 										);
 									} }
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index c4baaf64568da6..bd33c3aa349750 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -6,8 +6,6 @@ import type {
 	KeyboardEvent,
 	ForwardedRef,
 	SyntheticEvent,
-	ChangeEvent,
-	PointerEvent,
 } from 'react';
 import classnames from 'classnames';
 
@@ -115,9 +113,7 @@ function UnforwardedUnitControl(
 	const handleOnQuantityChange = (
 		nextQuantityValue: number | string | undefined,
 		changeProps: {
-			event:
-				| ChangeEvent< HTMLInputElement >
-				| PointerEvent< HTMLInputElement >;
+			event: SyntheticEvent;
 		}
 	) => {
 		if (
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index edbd5ac8f4cd6b..621f5bdb8948e7 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { FocusEventHandler, SyntheticEvent } from 'react';
+import type { FocusEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -38,10 +38,9 @@ export type WPUnitControlUnit = {
 	step?: number;
 };
 
-export type UnitControlOnChangeCallback = InputChangeCallback<
-	SyntheticEvent< HTMLSelectElement | HTMLInputElement >,
-	{ data?: WPUnitControlUnit }
->;
+export type UnitControlOnChangeCallback = InputChangeCallback< {
+	data?: WPUnitControlUnit;
+} >;
 
 export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	/**

From c056f5c262fe00d2103efae00d2e2120c4504837 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Nov 2022 12:34:22 +1100
Subject: [PATCH 10/14] Fake event.target so that event.target.validity works

---
 .../components/src/number-control/index.tsx   | 56 +++++++++----------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 136068b51a1cd3..b1ce32ab041e50 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -7,9 +7,10 @@ import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { useRef, forwardRef } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -46,8 +47,11 @@ function UnforwardedNumberControl(
 		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	ref: ForwardedRef< any >
+	forwardedRef: ForwardedRef< any >
 ) {
+	const inputRef = useRef< HTMLInputElement >();
+	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
+
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
@@ -181,6 +185,18 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
+	const buildSpinButtonClickHandler =
+		( direction: 'up' | 'down' ) =>
+		( event: MouseEvent< HTMLButtonElement > ) =>
+			onChange( String( spinValue( valueProp, direction, event ) ), {
+				// Set event.target to the <input> so that consumers can use
+				// e.g. event.target.validity.
+				event: {
+					...event,
+					target: inputRef.current!,
+				},
+			} );
+
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -193,7 +209,7 @@ function UnforwardedNumberControl(
 			label={ label }
 			max={ max }
 			min={ min }
-			ref={ ref }
+			ref={ mergedRef }
 			required={ required }
 			step={ step }
 			type={ typeProp }
@@ -216,20 +232,9 @@ function UnforwardedNumberControl(
 									aria-hidden="true"
 									aria-label={ __( 'Increment' ) }
 									tabIndex={ -1 }
-									onClick={ (
-										event: MouseEvent< HTMLButtonElement >
-									) => {
-										onChange(
-											String(
-												spinValue(
-													valueProp,
-													'up',
-													event
-												)
-											),
-											{ event }
-										);
-									} }
+									onClick={ buildSpinButtonClickHandler(
+										'up'
+									) }
 								/>
 								<SpinButton
 									icon={ resetIcon }
@@ -237,20 +242,9 @@ function UnforwardedNumberControl(
 									aria-hidden="true"
 									aria-label={ __( 'Decrement' ) }
 									tabIndex={ -1 }
-									onClick={ (
-										event: MouseEvent< HTMLButtonElement >
-									) => {
-										onChange(
-											String(
-												spinValue(
-													valueProp,
-													'down',
-													event
-												)
-											),
-											{ event }
-										);
-									} }
+									onClick={ buildSpinButtonClickHandler(
+										'down'
+									) }
 								/>
 							</HStack>
 						</Spacer>

From 393218c056f04164868c0865af809b4d8f7c22eb Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Nov 2022 13:33:00 +1100
Subject: [PATCH 11/14] Replace hideHTMLArrows with spinControls prop

---
 .../src/angle-picker-control/index.js         |  2 +-
 .../src/color-picker/input-with-slider.tsx    |  2 +-
 .../components/src/date-time/time/index.tsx   |  8 +++---
 .../components/src/number-control/README.md   | 13 ++++++---
 .../components/src/number-control/index.tsx   |  8 +++---
 .../styles/number-control-styles.js           | 20 ++++++++++++--
 .../src/number-control/test/index.js          | 27 +++++++++----------
 .../components/src/number-control/types.ts    | 11 +++++---
 .../components/src/unit-control/index.tsx     |  2 +-
 packages/components/src/unit-control/types.ts |  2 +-
 10 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 151ad0edeab020..67b8bfb4cff9c4 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -63,7 +63,7 @@ export default function AnglePickerControl( {
 					size="__unstable-large"
 					step="1"
 					value={ value }
-					hideHTMLArrows
+					spinControls="none"
 					suffix={
 						<Spacer
 							as={ Text }
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index fee14754f59440..8e4e16030ccae3 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -45,7 +45,7 @@ export const InputWithSlider = ( {
 						{ abbreviation }
 					</Spacer>
 				}
-				hideHTMLArrows
+				spinControls="none"
 				size="__unstable-large"
 			/>
 			<RangeControl
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index f1ae842044a777..77295b38f21edb 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -180,7 +180,7 @@ export function TimePicker( {
 			min={ 1 }
 			max={ 31 }
 			required
-			hideHTMLArrows
+			spinControls="none"
 			isPressEnterToChange
 			isDragEnabled={ false }
 			isShiftStepEnabled={ false }
@@ -246,7 +246,7 @@ export function TimePicker( {
 							min={ is12Hour ? 1 : 0 }
 							max={ is12Hour ? 12 : 23 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -273,7 +273,7 @@ export function TimePicker( {
 							min={ 0 }
 							max={ 59 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -344,7 +344,7 @@ export function TimePicker( {
 						min={ 1 }
 						max={ 9999 }
 						required
-						hideHTMLArrows
+						spinControls="none"
 						isPressEnterToChange
 						isDragEnabled={ false }
 						isShiftStepEnabled={ false }
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 21fae9ff888a2b..1a78cd25bb457c 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -44,13 +44,18 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 -   Required: No
 -   Default: `10`
 
-### hideHTMLArrows
+### spinControls
 
-If true, the default `input` HTML arrows will be hidden.
+ The type of spin controls to display. These are butons that allow the user to
+ quickly increment and decrement the number.
+ 
+ - 'none' - Do not show spin controls.
+ - 'native' - Use browser's native HTML `input` controls.
+ - 'custom' - Use plus and minus icon buttons.
 
--   Type: `Boolean`
+-   Type: `String`
 -   Required: No
--   Default: `false`
+-   Default: `'native'`
 
 ### isDragEnabled
 
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index b1ce32ab041e50..c16a65e57b5347 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -31,7 +31,7 @@ function UnforwardedNumberControl(
 		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
-		hideHTMLArrows = false,
+		spinControls = 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -204,7 +204,7 @@ function UnforwardedNumberControl(
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ size === '__unstable-large' || hideHTMLArrows }
+			hideHTMLArrows={ spinControls !== 'native' }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
@@ -221,7 +221,7 @@ function UnforwardedNumberControl(
 			} }
 			size={ size }
 			suffix={
-				size === '__unstable-large' && ! hideHTMLArrows ? (
+				spinControls === 'custom' ? (
 					<>
 						{ suffix }
 						<Spacer marginBottom={ 0 } marginRight={ 2 }>
@@ -235,6 +235,7 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
+									size={ size }
 								/>
 								<SpinButton
 									icon={ resetIcon }
@@ -245,6 +246,7 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }
+									size={ size }
 								/>
 							</HStack>
 						</Spacer>
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
index 0dd78826d0127e..4f0bcb91bb8dda 100644
--- a/packages/components/src/number-control/styles/number-control-styles.js
+++ b/packages/components/src/number-control/styles/number-control-styles.js
@@ -11,9 +11,12 @@ import styled from '@emotion/styled';
 import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
+import { space } from '../../ui/utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) return ``;
+	if ( ! hideHTMLArrows ) {
+		return ``;
+	}
 
 	return css`
 		input[type='number']::-webkit-outer-spin-button,
@@ -32,8 +35,21 @@ export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
 
+const spinButtonSizeStyles = ( { size } ) => {
+	if ( size !== 'small' ) {
+		return ``;
+	}
+
+	return css`
+		width: ${ space( 5 ) };
+		min-width: ${ space( 5 ) };
+		height: ${ space( 5 ) };
+	`;
+};
+
 export const SpinButton = styled( Button )`
-	&&& {
+	&&&&& {
 		color: ${ COLORS.ui.theme };
+		${ spinButtonSizeStyles }
 	}
 `;
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index ecc598786a6997..b1a57232ef2754 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -428,19 +428,18 @@ describe( 'NumberControl', () => {
 	} );
 
 	describe( 'custom spin buttons', () => {
-		test.each( [
-			{},
-			{ size: 'small' },
-			{ size: '__unstable-large', hideHTMLArrows: true },
-		] )( 'should not appear when props = %o', ( props ) => {
-			render( <NumberControl { ...props } /> );
-			expect(
-				screen.queryByLabelText( 'Increment' )
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByLabelText( 'Decrement' )
-			).not.toBeInTheDocument();
-		} );
+		test.each( [ undefined, 'none', 'native' ] )(
+			'should not appear when spinControls = %s',
+			( spinControls ) => {
+				render( <NumberControl spinControls={ spinControls } /> );
+				expect(
+					screen.queryByLabelText( 'Increment' )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByLabelText( 'Decrement' )
+				).not.toBeInTheDocument();
+			}
+		);
 
 		test.each( [
 			[ 'up', '1', {} ],
@@ -461,7 +460,7 @@ describe( 'NumberControl', () => {
 				render(
 					<NumberControl
 						{ ...props }
-						size="__unstable-large"
+						spinControls="custom"
 						onChange={ onChange }
 					/>
 				);
diff --git a/packages/components/src/number-control/types.ts b/packages/components/src/number-control/types.ts
index 8b271538c1e196..cd39cd62a9e77e 100644
--- a/packages/components/src/number-control/types.ts
+++ b/packages/components/src/number-control/types.ts
@@ -8,11 +8,16 @@ export type NumberControlProps = Omit<
 	'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'
 > & {
 	/**
-	 * If true, the default `input` HTML arrows will be hidden.
+	 * The type of spin controls to display. These are butons that allow the
+	 * user to quickly increment and decrement the number.
 	 *
-	 * @default false
+	 * - 'none' - Do not show spin controls.
+	 * - 'native' - Use browser's native HTML `input` controls.
+	 * - 'custom' - Use plus and minus icon buttons.
+	 *
+	 * @default 'native'
 	 */
-	hideHTMLArrows?: boolean;
+	spinControls?: 'none' | 'native' | 'custom';
 	/**
 	 * If true, enables mouse drag gestures.
 	 *
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index bd33c3aa349750..5af79504e66b93 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -265,7 +265,7 @@ function UnforwardedUnitControl(
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }
-			hideHTMLArrows
+			spinControls="none"
 			isPressEnterToChange={ isPressEnterToChange }
 			label={ label }
 			onBlur={ handleOnBlur }
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index 621f5bdb8948e7..ecb9950d7167cc 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -66,7 +66,7 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 };
 
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
-	Omit< NumberControlProps, 'hideHTMLArrows' | 'suffix' | 'type' > & {
+	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *

From 6120b3bfca5f5182e73010d67441abc4b82f88e3 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Nov 2022 13:38:35 +1100
Subject: [PATCH 12/14] Update CHANGELOG.md

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8c3678cfdb2fbf..32e75aa71e5448 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -22,7 +22,6 @@
 -   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
 -   `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
 -   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
--   `NumberControl`: Add custom spin buttons ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
 
 ### Bug Fix
 
@@ -47,6 +46,10 @@
 -   `UnitControl`: Add tests ([#45260](https://github.com/WordPress/gutenberg/pull/45260)).
 -   `Disabled`: Refactor the component to rely on the HTML `inert` attribute.
 
+### Experimental
+
+-   `NumberControl`: Replace `hideHTMLArrows` prop with `spinControls` prop. Allow custom spin controls via `spinControls="custom"` ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
+
 ## 21.3.0 (2022-10-19)
 
 ### Bug Fix

From d1cc602cbf371e7e80891903214153934a867380 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Nov 2022 15:49:20 +1100
Subject: [PATCH 13/14] Use custom spin controls for Line Height

---
 .../block-editor/src/components/line-height-control/index.js     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 127668002c7ac1..670d6fac37e8df 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -99,6 +99,7 @@ const LineHeightControl = ( {
 				step={ STEP }
 				value={ value }
 				min={ 0 }
+				spinControls="custom"
 			/>
 		</div>
 	);

From 6e9be91956f58dc019cc1cfd48a075d209b3e1d0 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 2 Nov 2022 10:34:28 +1100
Subject: [PATCH 14/14] Deprecate hideHTMLArrows instead of removing it

---
 packages/components/src/number-control/index.tsx | 11 +++++++++++
 packages/components/src/number-control/types.ts  |  7 +++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index c16a65e57b5347..40cbf51bee2d3a 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -11,6 +11,7 @@ import { useRef, forwardRef } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ function UnforwardedNumberControl(
 		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
+		hideHTMLArrows = false,
 		spinControls = 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
@@ -49,6 +51,15 @@ function UnforwardedNumberControl(
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
+	if ( hideHTMLArrows ) {
+		deprecated( 'hideHTMLArrows', {
+			alternative: 'spinControls="none"',
+			since: '6.2',
+			version: '6.3',
+		} );
+		spinControls = 'none';
+	}
+
 	const inputRef = useRef< HTMLInputElement >();
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
 
diff --git a/packages/components/src/number-control/types.ts b/packages/components/src/number-control/types.ts
index cd39cd62a9e77e..a6cb68d81c3914 100644
--- a/packages/components/src/number-control/types.ts
+++ b/packages/components/src/number-control/types.ts
@@ -7,6 +7,13 @@ export type NumberControlProps = Omit<
 	InputControlProps,
 	'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'
 > & {
+	/**
+	 * If true, the default `input` HTML arrows will be hidden.
+	 *
+	 * @deprecated
+	 * @default false
+	 */
+	hideHTMLArrows?: boolean;
 	/**
 	 * The type of spin controls to display. These are butons that allow the
 	 * user to quickly increment and decrement the number.