NumberControl: Add custom spin buttons

packages/components/CHANGELOG.md

@@ -22,6 +22,7 @@
 -   `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
 

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 { 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 { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+
+const noop = () => {};
 
 function UnforwardedNumberControl(
 	{
@@ -36,6 +41,9 @@ function UnforwardedNumberControl(
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
+		size = 'default',
+		suffix,
+		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
 	ref: ForwardedRef< any >
@@ -178,14 +186,27 @@ 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 }
 			inputMode="numeric"
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
+			hideHTMLArrows={ size === '__unstable-large' || hideHTMLArrows }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
@@ -200,6 +221,37 @@ function UnforwardedNumberControl(
 				const baseState = numberControlStateReducer( state, action );
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
+			size={ size }
+			suffix={
+				size === '__unstable-large' && ! hideHTMLArrows ? (
+					<>
+						{ suffix }
+						<Spacer marginBottom={ 0 } marginRight={ 2 }>
+							<HStack spacing={ 1 }>
+								<SpinButton
+									icon={ plusIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Increment' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinHandler( 'up' ) }
+								/>
+								<SpinButton
+									icon={ resetIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Decrement' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinHandler( 'down' ) }
+								/>
+							</HStack>
+						</Spacer>
+					</>
+				) : (
+					suffix
+				)
+			}
+			onChange={ onChange }
 		/>
 	);
 }

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 };
+	}
+`;

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(),
+				} );
+			}
+		);
+	} );
 } );