IMPORTANT! Before picking this up for the sprint, arrange a task breakdown, as the work here can be parallelized
States
List of the states that the component should display, mapping the specs in Figma:
- ReadOnly (TBD as part of T290078)
- Loading (TBD as part of T290078)
- Error (TBD as part of T290076)
- Warning (TBD as part of T290076)
Props: The following props should be implemented to support these additional states
- ReadOnly: Puts input in read-only state. Default: False
- Loading
- Error
Notes:
- 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.
- Pulled originally from https://phabricator.wikimedia.org/T287568
- 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).