[MP-345] Restore number input behaviour and look #4619

sashuk · 2024-11-04T16:07:18Z

Why is it important

Without this fix, portals can not be updated to latest Picasso due to visual and form submission flow changes.

After this fix, the Client Portal has all checks passing https://github.com/toptal/client-portal/pull/9995 ✅

Description

When NumberInput is used from corresponding form control, the form control passes min and max (after #4610) to NumberInput.

NumberInput passes min and max further to actual number HTML input which leads to

the width of control is determined by browser based on min and max values (https://stackoverflow.com/questions/33283901/input-number-max-attribute-resizes-field)
form validates the input field on submit (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch)

Behaviour introduced in this pull request

This pull request gets back to the original behaviour when https://github.com/toptal/picasso/tree/master/packages/base/NumberInput had empty (or invalid, which has the same effect) min and max attributes that was preventing browser from modifying the look and behaviour of the component.

How to test

Temploy
The https://github.com/toptal/client-portal/pull/9995 should
- have no visual changes linked to number input
- act and look the same way as staging, please check the pull request description for details
Use the snippet below to test
- form submission
- how arrows work regarding min and max values with different step

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 Example = () => {
  return (
    <Form
      autoComplete='off'
      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
      initialValues={{}}
    >
      <NumberInput
        required
        min={1}
        step={5}
        name='default-age'
        label="What's your age?"
        placeholder='e.g. 25'
      />
      <FormActionsContainer top={SPACING_4}>
        <SubmitButton>Submit</SubmitButton>
      </FormActionsContainer>
    </Form>
  )
}

export default Example

Screenshots

Before

Kapture.2024-11-05.at.14.48.25.mp4

After

Kapture.2024-11-05.at.14.47.08.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
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)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

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

You have no extra requests.
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

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

When to comment (neither ✅ nor ❌)

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

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

How to handle the comments?

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

changeset-bot · 2024-11-04T16:07:24Z

🦋 Changeset detected

Latest commit: 3ab7599

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

This PR includes changesets to release 4 packages

Name	Type
@toptal/picasso-number-input	Patch
@toptal/picasso-forms	Patch
@toptal/picasso-query-builder	Patch
@toptal/picasso	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 · 2024-11-05T13:47:01Z

@toptal-bot run package:alpha-release

toptal-devbot · 2024-11-05T13:55:07Z

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/base-tailwind@1.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.54+3ab759916
yarn add @toptal/[email protected]+3ab759916
yarn add @toptal/picasso-accordion@3.0.14-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-account-select@3.0.12-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-alert@3.0.26-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-amount@1.0.10-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-application-update-notification@2.0.26-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-autocomplete@5.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-avatar@6.1.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-avatar-upload@3.0.17-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-backdrop@1.0.9-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-badge@3.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-breadcrumbs@3.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-button@4.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-calendar@4.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-carousel@4.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-charts@59.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-checkbox@5.0.7-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-codemod@6.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.310+3ab759916
yarn add @toptal/picasso-collapse@3.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-container@3.1.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-date-picker@3.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-date-select@1.0.62-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-drawer@3.0.26-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-dropdown@4.2.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-dropzone@5.0.14-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-empty-state@2.0.9-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.105+3ab759916
yarn add @toptal/picasso-fade@1.0.8-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-file-input@4.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-form@6.1.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-forms@73.0.20-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.6+3ab759916
yarn add @toptal/picasso-grid@5.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-helpbox@5.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-icons@1.8.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-image@3.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-input@4.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-input-adornment@3.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-link@3.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-list@5.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-loader@3.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-logo@2.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-menu@3.0.11-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-modal@3.0.26-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-modal-context@1.0.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.369+3ab759916
yarn add @toptal/picasso-note@4.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-notification@4.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-number-input@4.0.16-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.8+3ab759916
yarn add @toptal/picasso-outlined-input@4.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-overview-block@4.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-page@5.1.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-pagination@4.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-paper@4.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-password-input@5.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-pictograms@5.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-popper@1.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-prompt-modal@2.0.26-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-provider@5.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.188+3ab759916
yarn add @toptal/picasso-query-builder@8.0.8-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.8+3ab759916
yarn add @toptal/picasso-quote@2.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-radio@5.0.7-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-rating@3.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-rich-text-editor@17.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-section@5.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-select@4.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-shared@15.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.267+3ab759916
yarn add @toptal/picasso-show-more@2.0.14-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-skeleton-loader@1.0.51-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-slide@1.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-slider@4.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-step@4.0.5-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-switch@4.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-table@3.0.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tabs@5.0.8-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tag@4.0.6-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tagselector@3.1.15-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tailwind@3.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.54+3ab759916
yarn add @toptal/picasso-tailwind-merge@2.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-test-utils@1.1.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.267+3ab759916
yarn add @toptal/picasso-timeline@5.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-timepicker@4.0.13-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tooltip@2.0.2-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-tree-view@3.0.27-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-typography@4.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-typography-overflow@4.0.3-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-user-badge@5.1.7-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916
yarn add @toptal/picasso-utils@3.0.1-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.14+3ab759916

sashuk · 2024-11-06T15:21:49Z

@toptal-anvil ping reviewers

eduardoportilho

LGTM 👍

sashuk self-assigned this Nov 4, 2024

sashuk added the no-jira label Nov 4, 2024

Keep legacy values

617d238

sashuk force-pushed the FX-NULL-do-not-pass-min-and-max branch from bc71caa to 617d238 Compare November 5, 2024 12:57

sashuk added 3 commits November 5, 2024 13:12

Fix

7e4c3e8

Fix

21e0158

Fix

3ab7599

sashuk changed the title ~~[FX-NULL] Do not pass min and max to input~~ [FX-NULL] Restore previous number input behaviour Nov 5, 2024

sashuk changed the title ~~[FX-NULL] Restore previous number input behaviour~~ [FX-NULL] Restore number input behaviour and look Nov 5, 2024

sashuk marked this pull request as ready for review November 6, 2024 15:21

sashuk requested a review from a team as a code owner November 6, 2024 15:21

tmatijev approved these changes Nov 6, 2024

View reviewed changes

eduardoportilho approved these changes Nov 6, 2024

View reviewed changes

sashuk merged commit 1cafabe into master Nov 6, 2024
35 of 36 checks passed

sashuk deleted the FX-NULL-do-not-pass-min-and-max branch November 6, 2024 16:50

toptal-build mentioned this pull request Nov 6, 2024

Version Packages #4620

Merged

1 task

sashuk removed the no-jira label Nov 7, 2024

sashuk changed the title ~~[FX-NULL] Restore number input behaviour and look~~ [MP-345] Restore number input behaviour and look Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MP-345] Restore number input behaviour and look #4619

[MP-345] Restore number input behaviour and look #4619

sashuk commented Nov 4, 2024 •

edited by jira bot

Loading

changeset-bot bot commented Nov 4, 2024 •

edited

Loading

sashuk commented Nov 5, 2024

toptal-devbot commented Nov 5, 2024

sashuk commented Nov 6, 2024

eduardoportilho left a comment

[MP-345] Restore number input behaviour and look #4619

[MP-345] Restore number input behaviour and look #4619

Conversation

sashuk commented Nov 4, 2024 • edited by jira bot Loading

Why is it important

Description

How to test

Screenshots

Development checks

When to approve? ✅

When to request changes? ❌

When to comment (neither ✅ nor ❌)

How to handle the comments?

changeset-bot bot commented Nov 4, 2024 • edited Loading

🦋 Changeset detected

sashuk commented Nov 5, 2024

toptal-devbot commented Nov 5, 2024

sashuk commented Nov 6, 2024

eduardoportilho left a comment

Choose a reason for hiding this comment

sashuk commented Nov 4, 2024 •

edited by jira bot

Loading

changeset-bot bot commented Nov 4, 2024 •

edited

Loading