Page MenuHomePhabricator

Create extended number input component
Closed, ResolvedPublic8 Estimated Story Points

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. with the Quantity input component).

ACs

  • The style of the extended 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 extended number input component will be included in its own Storybook page, under the section "Wikibase components":

  • 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:

  • An investigation was conducted in order to figure out if using "type=number" with our current input would provide us with a flexible-enough component for future use in Wikidata, e.g. with the Quantity input (T273795)
  • The extended number input component should be able to perform validation that is identical to the validation performed at the backend in WB

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Please also keep in mind a few of the decisions that led to OOUI's NumberInputWidget and current Design Style Guide component status, specifically the override of proprietary vendor UI extensions (mainly buttons) and instead adding buttons for increasing/decreasing input value by definable steps, while at the same time provide a minimum size for better click and touch usability.
A shortcoming of current implementation, that got surfaced with design peers, but not yet resolved, is position of buttons on different sides, add an unnecessarily effort to go in both directions quickly.

@Sarai-WMDE I'd like to expand on this in the Design Style Guide. When is a number input variant with no buttons advantageous to a buttoned one? We should capture this.

Hey, @Volker_E. The simple type=number input seems more convenient whenever users have to perform a single value input instead of modifying a default. We also considered this could be a core input type, on top of which the increment/decrement variant could be created.

There are two use cases for number inputs in the Simple Query Builder:

  • limiting the number of results (in this case, it would make a lot of sense to use the number input documented in the DSG)
  • with the Quantity input component (we considered that an input with increment/decrement would not make sense in this case)

Nonetheless, after conducting further investigation, it looks like we won't be creating this simple number input for now. Which means that a textInput with extended validation will be used to create the Quantity input, and also the more simple results limit feature (which I would advocate to replace for the DSG numberInput some time in the future).

Sarai-WMDE renamed this task from Create number input component to Create extended number input component.Feb 17 2021, 10:35 AM
Sarai-WMDE updated the task description. (Show Details)
amy_rc claimed this task.
amy_rc moved this task from Test (Verification) to Done on the Wikidata Query Builder board.