Page MenuHomePhabricator

Create Text area component - Additional States
Closed, ResolvedPublic


IMPORTANT! Before picking this up for the sprint, arrange a task breakdown, as the work here can be parallelized


List of the states that the component should display, mapping the specs in Figma:

Props: The following props should be implemented to support these additional states

  • ReadOnly: Puts input in read-only state. Default: False
  • Loading
  • Error


  • All states should be displayed in Storybook on the "All" page.
  • Additional controls for "disabled", "loading" and "read only" should be added.
  • This is development happening in Wikit, not the Mismatch Finder anymore.
  • Loading state: The loading state of the component needs to be implemented in this first iteration due to product needs (displaying that the user input is being processed). 1) The assumption is that the loading state can be developed as a prop (like error or disabled). 2) The inline loading bar is a small, separate component (most likely a mixin. Please find this element's design tokens in the following draft PR: #458).
  • Read only state: The text area presents a "read only" state. This state can be used to present a prefilled text area, and it's also triggered while the component is loading. The only visual change that the component experiences while on "read only" is a background color change (see tokens: #456). While on read only, the entered value or placeholder of the text area can be selected and copied, but they cannot be modified. The read only text area should respond to hover and focus (in both cases, this implies a visual change of the input border).

Event Timeline

Lydia_Pintscher set the point value for this task to 13.
Lydia_Pintscher added a subscriber: Sarai-WMDE.
karapayneWMDE removed the point value for this task.EditedAug 31 2021, 2:16 PM

originally task as a whole was estimated at 13 SP, but was broken down into smaller bits more aligned with mismatch development path. So, the SP were removed.

To-Do :

  1. Break this task down into -two- appropriate number of subtasks ;D
  2. Update parent task to relate to the appropriate subtask
Sarai-WMDE claimed this task.

All looking good! 🎉 Resolving