Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Nov 6, 2024

Conversation

sashuk
Copy link
Contributor

@sashuk sashuk commented Nov 4, 2024

MP-345

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

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

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

  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.

@sashuk sashuk self-assigned this Nov 4, 2024
Copy link

changeset-bot bot commented Nov 4, 2024

🦋 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 sashuk added the no-jira label Nov 4, 2024
@sashuk sashuk force-pushed the FX-NULL-do-not-pass-min-and-max branch from bc71caa to 617d238 Compare November 5, 2024 12:57
@sashuk
Copy link
Contributor Author

sashuk commented Nov 5, 2024

@toptal-bot run package:alpha-release

@toptal-devbot
Copy link
Collaborator

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/picasso@53.0.4-alpha-FX-NULL-do-not-pass-min-and-max-3ab759916.8+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 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 sashuk changed the title [FX-NULL] Restore previous number input behaviour [FX-NULL] Restore number input behaviour and look Nov 5, 2024
@sashuk sashuk marked this pull request as ready for review November 6, 2024 15:21
@sashuk sashuk requested a review from a team as a code owner November 6, 2024 15:21
@sashuk
Copy link
Contributor Author

sashuk commented Nov 6, 2024

@toptal-anvil ping reviewers

Copy link
Contributor

@eduardoportilho eduardoportilho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@sashuk sashuk merged commit 1cafabe into master Nov 6, 2024
35 of 36 checks passed
@sashuk sashuk deleted the FX-NULL-do-not-pass-min-and-max branch November 6, 2024 16:50
@toptal-build toptal-build mentioned this pull request Nov 6, 2024
1 task
@sashuk sashuk removed the no-jira label Nov 7, 2024
@sashuk sashuk changed the title [FX-NULL] Restore number input behaviour and look [MP-345] Restore number input behaviour and look Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants