fix: prevent negative numbers in input fields (#870)

Author: krisxcrash

docs/component-adapter/component-inventory.md

@@ -624,6 +624,8 @@ type PaginationItemsPerPage = 5 | 10 | 50
 | **name**                    | `string`                                                                                                                                                                                                                                                              | No       | -                                                                      |
 | **type**                    | `"number" \| "submit" \| "reset" \| "button" \| "checkbox" \| "radio" \| "search" \| "color" \| "date" \| "datetime-local" \| "email" \| "file" \| "hidden" \| "image" \| "month" \| "password" \| "range" \| "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

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>
+  )
+}

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 = [
       {

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>
   )

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'> {
   /**

src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx

@@ -114,6 +114,7 @@ export const EditContractorPaymentPresentation = ({
               <Flex flexDirection="column" gap={16}>
                 <Heading as="h3">{t('hoursSection')}</Heading>
                 <NumberInputField
+                  min={0}
                   name="hours"
                   isRequired
                   label={t('hoursLabel')}
@@ -125,17 +126,29 @@ export const EditContractorPaymentPresentation = ({
             {wageType === 'Fixed' && (
               <Flex flexDirection="column" gap={16}>
                 <Heading as="h3">{t('fixedPaySection')}</Heading>
-                <NumberInputField name="wage" isRequired label={t('wageLabel')} format="currency" />
+                <NumberInputField
+                  min={0}
+                  name="wage"
+                  isRequired
+                  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}>
                 {wageType === 'Hourly' && (
-                  <NumberInputField name="bonus" label={t('bonusLabel')} format="currency" />
+                  <NumberInputField
+                    min={0}
+                    name="bonus"
+                    label={t('bonusLabel')}
+                    format="currency"
+                  />
                 )}
                 <NumberInputField
+                  min={0}
                   name="reimbursement"
                   label={t('reimbursementLabel')}
                   format="currency"

src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx

@@ -411,6 +411,7 @@ export const PayrollEditEmployeePresentation = ({
                           <TextInputField
                             key={compensationName}
                             type="number"
+                            min={0}
                             adornmentEnd={t('hoursUnit')}
                             isRequired
                             label={getCompensationLabel(compensationName)}
@@ -449,6 +450,7 @@ export const PayrollEditEmployeePresentation = ({
                   <TextInputField
                     key={fixedCompensation.name}
                     type="number"
+                    min={0}
                     adornmentStart="$"
                     isRequired
                     label={getFixedCompensationLabel(fixedCompensation.name)}
@@ -464,6 +466,7 @@ export const PayrollEditEmployeePresentation = ({
               <Grid gridTemplateColumns={{ base: '1fr', small: [320, 320] }} gap={20}>
                 <TextInputField
                   type="number"
+                  min={0}
                   adornmentStart="$"
                   isRequired
                   label={getFixedCompensationLabel(reimbursement.name)}

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}