[FX-6107] Pass min and max to number input form field

[sashuk]

FX-6107

Description

This pull request makes NumberInput form control respect min and max parameters (there were not passed at all before).

How to test

• Check out branch locally
• Test the following code in any story

import React from 'react'
import { FormActionsContainer } from '@toptal/picasso'
import { SPACING_4 } from '@toptal/picasso-utils'

import {
  FormNonCompound as Form,
  NumberInput,
  SubmitButton,
} from '@toptal/picasso-forms'

const initialValues = {}

const Example = () => {
  return (
    <Form
      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
    >
      <NumberInput
        required
        name='default-age'
        label="What's your age?"
        min='20'
        placeholder='Minimum value - 20'
      />
 
      <FormActionsContainer top={SPACING_4}>
        <SubmitButton>Submit</SubmitButton>
      </FormActionsContainer>
    </Form>
  )
}

export default Example

Screenshots

Kapture.2024-10-22.at.14.01.15.mp4

Development checks

• Add changeset according to guidelines (if needed)
• [N/A] Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• [N/A] Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• [N/A] Annotate all props in component with documentation
• [N/A] Create examples for component
• Ensure that deployed demo has expected results and good examples
• [N/A] Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1272641

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso-forms	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sashuk]

@toptal-anvil ping reviewers

[Q-Man]

Code LGTM. 👍

[sashuk]

@toptal-anvil ping reviewers