## Background
### Description
Multi-line text input that allows manual resizing
### User stories
- As a user, I need to enter a long text that exceeds one line (multiline).
### History
Known as MultilineTextInputWidget in OOUI. Should use native `<textarea>` component and follow its attributes as much as possible.
### Known use cases
| {F36899042} {F36899043} | [[ https://en.wikipedia.org/w/index.php?title=Audre_Lorde&action=edit | VE publish dialog ]] |
| {F36899046} {F36899052} | Text area use cases in [[ https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth---features?node-id=1258-144588&t=pE1jN0QEjLavVesx-11 | Growth ]] |
| [[ https://www.figma.com/file/kA55PHoVPIy0MbfWdCCkdN/Text-Area---T284272?node-id=1102%3A4379&t=8i9MwSs5L05KxcvY-11 | More use cases captured in this Figma inventory ]] |
### Existing components
**Wikimedia community:**
- WVUI: [[ https://github.com/wikimedia/wvui/blob/master/src/components/input/Input.vue | Multiline Text Input ]] exists
- WiKit: [[ https://github.com/wmde/wikit/blob/master/vue-components/src/components/TextArea.vue | TextArea ]]
- OOUI: [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#:~:text=Multiline%0AMultiline-,MultilineTextInputWidget,-(rows%3D15) | Textarea demo ]]
- ContentTranslation: [[ https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/master/app/src/lib/mediawiki.ui/components/MWInput/MWInput.vue | MWInput, also for textarea ]]
**External libraries:**
- Vuetify: [[ https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/components/VTextarea | VTextarea ]]
- Buefy: [[ https://github.com/buefy/buefy/blob/dev/src/components/input/Input.vue#L21 | Input, also for textarea ]]
- [[ https://www.google.com/search?q=textarea+design+system | Other design systems ]]
**Wikimedia Design Style Guide links:**
- [[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Text inputs and textarea ]]
- [[ https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/%E2%9D%96-OOUI-components?node-id=2549%3A38444&t=p3pDb1qq2nxDOplN-11 | Figma OOUI spec sheet ]]
---
## Codex implementation
### Component task owners
- Designer: //add the main designer's name//
- Developer: //add the main developer's name//
### Open questions
[-] **Clearable action**: it will not be included as we have in [[ https://doc.wikimedia.org/codex/latest/components/demos/text-input.html#:~:text=an%20icon%20name-,clearable,-status | TextInput ]] since it's not a common use case in text area and we would need extra padding. We will include it just if needed. ([[ https://phabricator.wikimedia.org/T284272#8598048 | More info ]])
[-] **Character counter**: helper text and character counter will be created as separated elements in the [[ https://phabricator.wikimedia.org/T309239 | Field component ]]. They won't be added in this Text area MVP task.
[-] **Text editing**: it won't be implemented in this MVP task.
### Design spec
| [[ https://www.figma.com/file/kA55PHoVPIy0MbfWdCCkdN/Text-Area---T284272?node-id=101%3A2115&t=3ZRfLi2xb8fviz46-11 | Component spec sheet ]] |
#### Anatomy
The initial component will include the following properties:
**Icons:**
- `Text-only` (no icon)
- `Start icon` (customizable icon)
- `End icon` (customizable icon)
**Size:**
- `Fixed-size` (min-size 64px)
- `Grabber` (customizable size)
- `Autosize` (height will grow with the length of the text)
#### Style
The initial component will present the following visual features:
- Textarea will use the same styles (colors, paddings, borders, text) as [[ https://doc.wikimedia.org/codex/latest/components/demos/text-input.html | TextInput component ]].
#### Interaction
The initial component will follow these interaction specifications:
- Default
- Hover
- Active-Focus
- Filled in
- Disabled
- Read-only
- Error
- Error focus (same focus style as in the Focus state)
- Error filled
#### Documentation
- Structure: //Describe where the component will live in the sidebar hierarchy, e.g. a new sidebar item or within a group.//
- Content: //Describe the content of the demo page. Aim to use a configurable demo for as many features as possible, then add standalone demos where needed.//
---
## Acceptance criteria
### Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
**MVP scope**
- [] `<textarea>` element with styles matching the Figma spec sheet
- [] Start and end icons
- [] Prop for enabling resizable textarea (i.e. adding the "grabber")
- [] Prop for enabling `autosize`
- [] All states documented in the spec sheet
- [] RTL behavior documented in the spec sheet
- [] All keyboard navigation documented in the spec sheet
**Design**
- [x] Design the Figma spec sheet and add a link to it in this task
- [x] Publish the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?type=design&node-id=10016-98086&t=UeC4sWcyi97HZHjC-11). //This step will be done by a DST member.//
**Code**
- [] Implement the component in Codex
### Future work
- Enabling character count when used with the Field component