Add step prop to NumberControl (#42928)

* Add step prop to NumberControl

* Add step to block attributes as well

* Add documentation

packages/js/product-editor/changelog/add-number-step-control

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add step prop to NumberControl

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

@@ -71,6 +71,14 @@ The minimum numeric value that can be entered in the field.
 
 The maximum numeric value that can be entered in the field.
 
+### step
+
+- **Type:** `Number`
+- **Required:** `No`
+- **Default:** `1`
+
+The amount that is incremented or decremented when using the up/down arrows.
+
 ## Usage
 
 Here's a snippet that adds a field similar to the previous screenshot:

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

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

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

@@ -31,6 +31,7 @@ export function Edit( {
 		required,
 		tooltip,
 		disabled,
+		step,
 	} = attributes;
 	const [ value, setValue ] = useProductEntityProp( property, {
 		postType,
@@ -93,6 +94,7 @@ export function Edit( {
 				required={ required }
 				tooltip={ tooltip }
 				disabled={ disabled }
+				step={ step }
 			/>
 		</div>
 	);

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

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

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

@@ -28,6 +28,7 @@ export type NumberProps = {
 	required?: boolean;
 	tooltip?: string;
 	disabled?: boolean;
+	step?: number;
 };
 
 export const NumberControl: React.FC< NumberProps > = ( {
@@ -42,6 +43,7 @@ export const NumberControl: React.FC< NumberProps > = ( {
 	tooltip,
 	placeholder,
 	disabled,
+	step,
 }: NumberProps ) => {
 	const inputProps = useNumberInputProps( {
 		value: value || '',
@@ -67,6 +69,7 @@ export const NumberControl: React.FC< NumberProps > = ( {
 		>
 			<InputControl
 				{ ...inputProps }
+				step={ step }
 				disabled={ disabled }
 				id={ id }
 				suffix={ suffix }