Page MenuHomePhabricator

Create basic NumberInput component
Open, LowPublic

Description

As a DS designer and developer, I want to be able to use a number input component, because number validation is required in the Simple Query Builder (e.g. to validate the input to the results limit feature).

ACs

  • The style of the number input's states should entirely match that of the text input component's (see specs)
  • The number input component should be documented in Storybook according to the specifications (see below)

States

Same as the input family:

  • Default state
  • Hover
  • Active/Focus
  • Disabled
  • Validation: error
  • Validation: warning

Storybook:

The simple NumberInput component will be included in its own Storybook page, under the section "Input":

  • Basic (controllable story displaying a single number input: Controls should allow users to modify the label and placeholder texts)
  • All (story displaying all number input states for visual regression testing purposes)

Notes:

  • The assumption is that this input variant could be created by simply adding type=number to our existing inputs
  • I believe we can call this component NumberInput: it's the basic core on top of which we could build the increment/decrement buttons in the future (allowing them via prop – too complex? – or implementing a separate variant that we'll name accordingly)