Page MenuHomePhabricator

[WtC] (Re)implement QuantityInput component
Open, Needs TriagePublic


User stories

As a Query Builder user, I want to be able to input quantity values after selecting a property with quantity data type while creating a query.


  • Description: The QuantityInput component is a combination of an ExtendedNumberInput (to be implemented, see T340475) and a Lookup component. It allows users inputting a value in the first input, and specify the unit for the quantity they are trying to specify.
  • Previous implementations: A previous implementation of QuantityInput exists in the now deprecated WiKit design system (link to demo). 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 QuantityInput component is implemented following the design specifications:

  • The QuantityInput component is built as a combination of the new ExtendedNumberInput (T340475) and Codex's Lookup 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 DST is planning the creation of a layout component (or utility) that allows the quick combination of components. This could be useful to compose this element. More information to be shared soon.

Event Timeline

Sarai-WMDE renamed this task from (Re)implement QuantityInput component to [WtC] (Re)implement QuantityInput component.Jul 24 2023, 2:18 PM