From 441d9dfc954748fffb6cdd395c18fbf82ece8e1e Mon Sep 17 00:00:00 2001
From: Kristine White <kristine.white@gusto.com>
Date: Tue, 16 Dec 2025 09:59:30 -0800
Subject: [PATCH] fix: prevent negative numbers in input fields

---
 docs/component-adapter/component-inventory.md |  2 ++
 .../TextInputField/TextInputField.stories.tsx | 30 +++++++++++++++++++
 .../Common/UI/TextInput/TextInput.test.tsx    |  8 +++++
 .../Common/UI/TextInput/TextInput.tsx         |  4 +++
 .../Common/UI/TextInput/TextInputTypes.ts     |  2 +-
 .../EditContractorPaymentPresentation.tsx     | 12 ++++++--
 .../PayrollEditEmployeePresentation.tsx       |  3 ++
 .../PayrollEditEmployee/TimeOffField.tsx      |  1 +
 8 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/docs/component-adapter/component-inventory.md b/docs/component-adapter/component-inventory.md
index 6736aa037..de10ab7ba 100644
--- a/docs/component-adapter/component-inventory.md
+++ b/docs/component-adapter/component-inventory.md
@@ -616,6 +616,8 @@ The props for this component are defined in [BaseListProps](#baselistprops).
 | **name**                    | `string`                                                                                                                                                                                                                                                              | No       | -                                                                      |
 | **type**                    | `"number" \| "submit" \| "reset" \| "button" \| "checkbox" \| "color" \| "date" \| "datetime-local" \| "email" \| "file" \| "hidden" \| "image" \| "month" \| "password" \| "radio" \| "range" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week" \| string` | No       | -                                                                      |
 | **placeholder**             | `string`                                                                                                                                                                                                                                                              | No       | -                                                                      |
+| **min**                     | `string \| number`                                                                                                                                                                                                                                                    | No       | -                                                                      |
+| **max**                     | `string \| number`                                                                                                                                                                                                                                                    | No       | -                                                                      |
 | **aria-describedby**        | `string`                                                                                                                                                                                                                                                              | No       | Identifies the element (or elements) that describes the object.        |
 
 ## TextProps
diff --git a/src/components/Common/Fields/TextInputField/TextInputField.stories.tsx b/src/components/Common/Fields/TextInputField/TextInputField.stories.tsx
index 59271b5e8..77253a64b 100644
--- a/src/components/Common/Fields/TextInputField/TextInputField.stories.tsx
+++ b/src/components/Common/Fields/TextInputField/TextInputField.stories.tsx
@@ -55,3 +55,33 @@ export const WithDefaultValues: Story = () => {
     </FormWrapper>
   )
 }
+
+export const NumberInputWithMinMax: Story = () => {
+  return (
+    <FormWrapper>
+      <TextInputField
+        label="Age"
+        name="age"
+        type="number"
+        min={0}
+        max={120}
+        description="Enter a value between 0 and 120"
+      />
+      <TextInputField
+        label="Hours Worked"
+        name="hoursWorked"
+        type="number"
+        min={0}
+        description="Cannot be negative"
+      />
+      <TextInputField
+        label="Score"
+        name="score"
+        type="number"
+        min={0}
+        max={100}
+        description="Enter a score from 0 to 100"
+      />
+    </FormWrapper>
+  )
+}
diff --git a/src/components/Common/UI/TextInput/TextInput.test.tsx b/src/components/Common/UI/TextInput/TextInput.test.tsx
index ac1eeebda..482733b81 100644
--- a/src/components/Common/UI/TextInput/TextInput.test.tsx
+++ b/src/components/Common/UI/TextInput/TextInput.test.tsx
@@ -44,6 +44,14 @@ describe('TextInput', () => {
     expect(screen.getByText('This field is required')).toBeInTheDocument()
   })
 
+  it('applies min and max attributes to number input', () => {
+    renderWithProviders(<TextInput {...defaultProps} type="number" min={0} max={100} />)
+
+    const input = screen.getByRole('spinbutton')
+    expect(input).toHaveAttribute('min', '0')
+    expect(input).toHaveAttribute('max', '100')
+  })
+
   describe('Accessibility', () => {
     const testCases = [
       {
diff --git a/src/components/Common/UI/TextInput/TextInput.tsx b/src/components/Common/UI/TextInput/TextInput.tsx
index 205aa5c9a..0e9b250ca 100644
--- a/src/components/Common/UI/TextInput/TextInput.tsx
+++ b/src/components/Common/UI/TextInput/TextInput.tsx
@@ -27,6 +27,8 @@ export function TextInput(rawProps: TextInputProps) {
     shouldVisuallyHideLabel,
     adornmentEnd,
     adornmentStart,
+    min,
+    max,
     'aria-describedby': ariaDescribedByFromProps,
     ...otherProps
   } = resolvedProps
@@ -69,6 +71,8 @@ export function TextInput(rawProps: TextInputProps) {
         isDisabled={isDisabled}
         adornmentStart={adornmentStart}
         adornmentEnd={adornmentEnd}
+        min={min}
+        max={max}
       />
     </FieldLayout>
   )
diff --git a/src/components/Common/UI/TextInput/TextInputTypes.ts b/src/components/Common/UI/TextInput/TextInputTypes.ts
index 0cf1e3843..4f1aa6b73 100644
--- a/src/components/Common/UI/TextInput/TextInputTypes.ts
+++ b/src/components/Common/UI/TextInput/TextInputTypes.ts
@@ -7,7 +7,7 @@ export interface TextInputProps
     SharedFieldLayoutProps,
     Pick<
       InputHTMLAttributes<HTMLInputElement>,
-      'name' | 'id' | 'placeholder' | 'className' | 'type'
+      'name' | 'id' | 'placeholder' | 'className' | 'type' | 'min' | 'max'
     >,
     Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby'> {
   /**
diff --git a/src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx b/src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx
index 436477eac..f8556b648 100644
--- a/src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx
+++ b/src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx
@@ -84,6 +84,7 @@ export const EditContractorPaymentPresentation = ({ onSave, onCancel }: EditPaym
               <NumberInputField
                 name="hours"
                 isRequired
+                min={0}
                 label={t('hoursLabel')}
                 adornmentEnd={t('hoursAdornment')}
               />
@@ -93,16 +94,23 @@ export const EditContractorPaymentPresentation = ({ onSave, onCancel }: EditPaym
           {wageType === 'Fixed' && (
             <Flex flexDirection="column" gap={16}>
               <Heading as="h3">{t('fixedPaySection')}</Heading>
-              <NumberInputField name="wage" isRequired label={t('wageLabel')} format="currency" />
+              <NumberInputField
+                name="wage"
+                isRequired
+                min={0}
+                label={t('wageLabel')}
+                format="currency"
+              />
             </Flex>
           )}
 
           <Flex flexDirection="column" gap={16}>
             <Heading as="h3">{t('additionalEarningsSection')}</Heading>
             <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>
-              <NumberInputField name="bonus" label={t('bonusLabel')} format="currency" />
+              <NumberInputField name="bonus" min={0} label={t('bonusLabel')} format="currency" />
               <NumberInputField
                 name="reimbursement"
+                min={0}
                 label={t('reimbursementLabel')}
                 format="currency"
               />
diff --git a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx
index 51906a80f..63dd51a5b 100644
--- a/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx
+++ b/src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx
@@ -407,6 +407,7 @@ export const PayrollEditEmployeePresentation = ({
                           <TextInputField
                             key={compensationName}
                             type="number"
+                            min={0}
                             adornmentEnd={t('hoursUnit')}
                             isRequired
                             label={getCompensationLabel(compensationName)}
@@ -445,6 +446,7 @@ export const PayrollEditEmployeePresentation = ({
                   <TextInputField
                     key={fixedCompensation.name}
                     type="number"
+                    min={0}
                     adornmentStart="$"
                     isRequired
                     label={getFixedCompensationLabel(fixedCompensation.name)}
@@ -460,6 +462,7 @@ export const PayrollEditEmployeePresentation = ({
               <Grid gridTemplateColumns={{ base: '1fr', small: [320, 320] }} gap={20}>
                 <TextInputField
                   type="number"
+                  min={0}
                   adornmentStart="$"
                   isRequired
                   label={getFixedCompensationLabel(reimbursement.name)}
diff --git a/src/components/Payroll/PayrollEditEmployee/TimeOffField.tsx b/src/components/Payroll/PayrollEditEmployee/TimeOffField.tsx
index ebf3412f2..b5e87f90c 100644
--- a/src/components/Payroll/PayrollEditEmployee/TimeOffField.tsx
+++ b/src/components/Payroll/PayrollEditEmployee/TimeOffField.tsx
@@ -66,6 +66,7 @@ export const TimeOffField = ({ timeOff, employee }: TimeOffFieldProps) => {
         key={timeOff.name}
         name={`timeOffCompensations.${timeOff.name}`}
         type="number"
+        min={0}
         adornmentEnd={t('hoursUnit')}
         isRequired
         label={timeOff.name}