Page MenuHomePhabricator

[WtC] (Re)implement ExtendedNumberInput
Open, Needs TriagePublic


User stories

As a DS designer and developer, I want to be able to use a number input component to cover use cases like number validation in the Simple Query Builder (e.g. with the Quantity input component).


  • Previous implementations: A previous implementation of ExtendedNumberInput exists in the now deprecated WiKit design system (link to demo, link to original task). As part of the migration of the Query builder to Codex, we need to create a Vue 3 version of this component that's built using elements from the new library.

Design specifications

To be added

Link to Figma specifications

Acceptance criteria

The new ExtendedNumberInput component is implemented following the design specifications:

  • The ExtendedNumberInput component is built on top of the Codex TextInput component
  • The component's visual properties match the design guidelines (see design specs)
  • The component's interactive properties match the design guidelines (see design specs)
  • The component adjusts to different reading directions (LTR, RTL)
  • The component is fully usable via keyboard

Open questions and considerations

  • Storage: It is yet to be determined if this element should be stored in, and distributed from, a potential library of "LOD components" (see T338631).
  • The extended number input component should be able to perform validation that is identical to the validation performed by Wikibase (see T275113)