From 617d238c6a1b3248b242e1f42b109959e689af35 Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Mon, 4 Nov 2024 13:23:07 +0000
Subject: [PATCH] Keep legacy values

---
 .../src/NumberInput/NumberInput.tsx           |  9 ++++--
 .../NumberInput/__snapshots__/test.tsx.snap   |  4 +--
 .../base/NumberInput/src/NumberInput/test.tsx |  4 +--
 .../src/NumberInput/test copy.tsx             | 32 +++++++++++++++++++
 4 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 packages/picasso-forms/src/NumberInput/test copy.tsx

diff --git a/packages/base/NumberInput/src/NumberInput/NumberInput.tsx b/packages/base/NumberInput/src/NumberInput/NumberInput.tsx
index 6e7a1aab03..082c263bf0 100644
--- a/packages/base/NumberInput/src/NumberInput/NumberInput.tsx
+++ b/packages/base/NumberInput/src/NumberInput/NumberInput.tsx
@@ -97,8 +97,13 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
         inputProps={{
           ...rest,
           step,
-          min,
-          max,
+          /*
+          Set "max" and "min" to Infinity and -Infinity to
+          - keep same width calculation for the input as before to avoid breaking visuals ("max" and "min" were always set to Infinity before)
+          - prevent browser from doing a step validation on submit (see the https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch for details)
+          */
+          min: -Infinity,
+          max: Infinity,
           // TODO: [FX-6102] Add test for wheel event
           onWheel: enableChangeOnMouseWheel
             ? undefined
diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
index 90460e0f69..79a6f6570d 100644
--- a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
+++ b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -10,8 +10,8 @@ exports[`NumberInput renders 1`] = `
     <input
       aria-invalid="false"
       class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 [&::-webkit-outer-spin-button]:appearance [&::-webkit-outer-spin-button]:m [&::-webkit-inner-spin-button]:appearance [&::-webkit-inner-spin-button]:m [-moz"
-      max="100"
-      min="-100"
+      max="Infinity"
+      min="-Infinity"
       step="5"
       type="number"
       value="10"
diff --git a/packages/base/NumberInput/src/NumberInput/test.tsx b/packages/base/NumberInput/src/NumberInput/test.tsx
index b24715da0e..356d34020c 100644
--- a/packages/base/NumberInput/src/NumberInput/test.tsx
+++ b/packages/base/NumberInput/src/NumberInput/test.tsx
@@ -42,7 +42,7 @@ describe('NumberInput', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  it('increase value', async () => {
+  it('increases value by step', async () => {
     const { getByDisplayValue, queryAllByRole } = renderNumberInput()
 
     const input = getByDisplayValue('10') as HTMLInputElement
@@ -55,7 +55,7 @@ describe('NumberInput', () => {
     expect(input.value).toBe('15')
   })
 
-  it('decrease value', () => {
+  it('decreases value by step', () => {
     const { getByDisplayValue, queryAllByRole } = renderNumberInput()
 
     const input = getByDisplayValue('10') as HTMLInputElement
diff --git a/packages/picasso-forms/src/NumberInput/test copy.tsx b/packages/picasso-forms/src/NumberInput/test copy.tsx
new file mode 100644
index 0000000000..a10474a832
--- /dev/null
+++ b/packages/picasso-forms/src/NumberInput/test copy.tsx	
@@ -0,0 +1,32 @@
+// import { Input } from '@toptal/picasso-input'
+// import { act, render, fireEvent } from '@toptal/picasso-test-utils'
+// import { noop } from '@toptal/picasso-utils'
+// import React from 'react'
+
+// import { FormCompound as Form } from '../FormCompound'
+// import FieldWrapper from './FieldWrapper'
+
+// const renderFieldWrapper = () =>
+//   render(
+//     <Form onSubmit={noop}>
+//       <FieldWrapper name='name' required>
+//         {(inputProps: any) => <Input {...inputProps} />}
+//       </FieldWrapper>
+
+//       <Form.SubmitButton data-testid='submit'>Submit</Form.SubmitButton>
+//     </Form>
+//   )
+
+// describe('FieldWrapper', () => {
+//   describe('when there is a field error', () => {
+//     it('passes status to its children', () => {
+//       const { getByTestId, getByText } = renderFieldWrapper()
+
+//       act(() => {
+//         fireEvent.click(getByTestId('submit'))
+//       })
+
+//       expect(getByText('Please complete this field.')).toBeVisible()
+//     })
+//   })
+// })