Use native step buttons

packages/js/product-editor/changelog/add-step-buttons

@@ -1,4 +1,4 @@
 Significance: minor
 Type: add
 
-Add showStepButtons attribute for Number block and component
+Add native step buttons for Number block and component

packages/js/product-editor/src/blocks/generic/number/README.md

@@ -79,14 +79,6 @@ The maximum numeric value that can be entered in the field.
 
 The amount that is incremented or decremented when using the up/down arrows.
 
-### showStepButtons
-
-- **Type:** `Boolean`
-- **Required:** `No`
-- **Default:** `false`
-
-Shows + and - buttons to increment/decrement the numeric value.
-
 ## Usage
 
 Here's a snippet that adds a field similar to the previous screenshot:

packages/js/product-editor/src/blocks/generic/number/block.json

@@ -40,10 +40,6 @@
 		"step": {
 			"type": "number",
 			"default": 1
-		},
-		"showStepButtons": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"supports": {

packages/js/product-editor/src/blocks/generic/number/edit.tsx

@@ -32,7 +32,6 @@ export function Edit( {
 		tooltip,
 		disabled,
 		step,
-		showStepButtons,
 	} = attributes;
 	const [ value, setValue ] = useProductEntityProp( property, {
 		postType,
@@ -96,7 +95,6 @@ export function Edit( {
 				tooltip={ tooltip }
 				disabled={ disabled }
 				step={ step }
-				showStepButtons={ showStepButtons }
 			/>
 		</div>
 	);

packages/js/product-editor/src/blocks/generic/number/types.ts

@@ -14,5 +14,4 @@ export interface NumberBlockAttributes extends BlockAttributes {
 	required?: boolean;
 	tooltip?: string;
 	step?: number;
-	showStepButtons: boolean;
 }

packages/js/product-editor/src/components/number-control/number-control.tsx

@@ -1,14 +1,11 @@
 /**
  * External dependencies
  */
-import { createElement, Fragment } from '@wordpress/element';
+import { createElement } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import classNames from 'classnames';
-import { plus, reset } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
-	Button,
 	// @ts-expect-error `__experimentalInputControl` does exist.
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
@@ -32,7 +29,6 @@ export type NumberProps = {
 	tooltip?: string;
 	disabled?: boolean;
 	step?: number;
-	showStepButtons?: boolean;
 };
 
 export const NumberControl: React.FC< NumberProps > = ( {
@@ -48,7 +44,6 @@ export const NumberControl: React.FC< NumberProps > = ( {
 	placeholder,
 	disabled,
 	step = 1,
-	showStepButtons = false,
 }: NumberProps ) => {
 	const inputProps = useNumberInputProps( {
 		value: value || '',
@@ -77,53 +72,10 @@ export const NumberControl: React.FC< NumberProps > = ( {
 				step={ step }
 				disabled={ disabled }
 				id={ id }
-				suffix={
+				suffix={ suffix }
-					<>
-						{ suffix }
-						{ showStepButtons && (
-							<>
-								<Button
-									icon={ plus }
-									onClick={ () =>
-										onChange(
-											String(
-												parseFloat( value || '0' ) +
-													step
-											)
-										)
-									}
-									isSmall
-									aria-hidden="true"
-									aria-label={ __(
-										'Increment',
-										'woocommerce'
-									) }
-									tabIndex={ -1 }
-								/>
-								<Button
-									icon={ reset }
-									onClick={ () =>
-										onChange(
-											String(
-												parseFloat( value || '0' ) -
-													step
-											)
-										)
-									}
-									isSmall
-									aria-hidden="true"
-									aria-label={ __(
-										'Decrement',
-										'woocommerce'
-									) }
-									tabIndex={ -1 }
-								/>
-							</>
-						) }
-					</>
-				}
 				placeholder={ placeholder }
 				onBlur={ onBlur }
+				type="number"
 			/>
 		</BaseControl>
 	);

packages/js/product-editor/src/hooks/use-number-input-props.ts

@@ -8,7 +8,6 @@ export type NumberInputProps = {
 	value: string;
 	onChange: ( value: string ) => void;
 	onFocus: ( event: React.FocusEvent< HTMLInputElement > ) => void;
-	onKeyUp: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 };
 
 type Props = {
@@ -18,12 +17,7 @@ type Props = {
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 };
 
-export const useNumberInputProps = ( {
+export const useNumberInputProps = ( { value, onChange, onFocus }: Props ) => {
-	value,
-	onChange,
-	onFocus,
-	onKeyUp,
-}: Props ) => {
 	const { formatNumber, parseNumber } = useProductHelper();
 
 	const numberInputProps: NumberInputProps = {
@@ -34,19 +28,6 @@ export const useNumberInputProps = ( {
 				onFocus( event );
 			}
 		},
-		onKeyUp( event: React.KeyboardEvent< HTMLInputElement > ) {
-			const amount = Number.parseFloat( value || '0' );
-			const step = Number( event.currentTarget.step || '1' );
-			if ( event.code === 'ArrowUp' ) {
-				onChange( String( amount + step ) );
-			}
-			if ( event.code === 'ArrowDown' ) {
-				onChange( String( amount - step ) );
-			}
-			if ( onKeyUp ) {
-				onKeyUp( event );
-			}
-		},
 		onChange( newValue: string ) {
 			const sanitizeValue = parseNumber( newValue );
 			onChange( sanitizeValue );