From 8425d17399077642d055621fe74d54866322dd09 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <nsschneider1@gmail.com>
Date: Fri, 5 Jan 2024 14:39:04 -0300
Subject: [PATCH] Use native step buttons

---
 .../product-editor/changelog/add-step-buttons |  2 +-
 .../src/blocks/generic/number/README.md       |  8 ---
 .../src/blocks/generic/number/block.json      |  4 --
 .../src/blocks/generic/number/edit.tsx        |  2 -
 .../src/blocks/generic/number/types.ts        |  1 -
 .../number-control/number-control.tsx         | 54 ++-----------------
 .../src/hooks/use-number-input-props.ts       | 21 +-------
 7 files changed, 5 insertions(+), 87 deletions(-)

diff --git a/packages/js/product-editor/changelog/add-step-buttons b/packages/js/product-editor/changelog/add-step-buttons
index d4af83d01c5..f9146af4014 100644
--- a/packages/js/product-editor/changelog/add-step-buttons
+++ b/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
diff --git a/packages/js/product-editor/src/blocks/generic/number/README.md b/packages/js/product-editor/src/blocks/generic/number/README.md
index 7a32335dc16..8b01ac83442 100644
--- a/packages/js/product-editor/src/blocks/generic/number/README.md
+++ b/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:
diff --git a/packages/js/product-editor/src/blocks/generic/number/block.json b/packages/js/product-editor/src/blocks/generic/number/block.json
index ba6b5d698e4..c8fdbc69878 100644
--- a/packages/js/product-editor/src/blocks/generic/number/block.json
+++ b/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": {
diff --git a/packages/js/product-editor/src/blocks/generic/number/edit.tsx b/packages/js/product-editor/src/blocks/generic/number/edit.tsx
index 91d4e469ad1..891b38c5d5a 100644
--- a/packages/js/product-editor/src/blocks/generic/number/edit.tsx
+++ b/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>
 	);
diff --git a/packages/js/product-editor/src/blocks/generic/number/types.ts b/packages/js/product-editor/src/blocks/generic/number/types.ts
index 81f5e239fed..7872fded7c5 100644
--- a/packages/js/product-editor/src/blocks/generic/number/types.ts
+++ b/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;
 }
diff --git a/packages/js/product-editor/src/components/number-control/number-control.tsx b/packages/js/product-editor/src/components/number-control/number-control.tsx
index e2bb15bb4dd..3e696fa3fc4 100644
--- a/packages/js/product-editor/src/components/number-control/number-control.tsx
+++ b/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 }
-						{ 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 }
-								/>
-							</>
-						) }
-					</>
-				}
+				suffix={ suffix }
 				placeholder={ placeholder }
 				onBlur={ onBlur }
+				type="number"
 			/>
 		</BaseControl>
 	);
diff --git a/packages/js/product-editor/src/hooks/use-number-input-props.ts b/packages/js/product-editor/src/hooks/use-number-input-props.ts
index a0397f0ee42..8dfbccfbe9c 100644
--- a/packages/js/product-editor/src/hooks/use-number-input-props.ts
+++ b/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 = ( {
-	value,
-	onChange,
-	onFocus,
-	onKeyUp,
-}: Props ) => {
+export const useNumberInputProps = ( { value, onChange, onFocus }: 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 );