Change Details

**This task defines the minimum viable product (MVP) of the Textarea component.** --- ## Scope We need to add Textarea component in Codex. ### Known use cases | [[ https://www.figma.com/file/kA55PHoVPIy0MbfWdCCkdN/Text-Area---T284272?node-id=1102%3A4379&t=8i9MwSs5L05KxcvY-11 | 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 ]] **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 ]] ### Design spec //Link to the component spec sheet once it has been created.// | Component spec sheet | ### Anatomy The initial component will include: - //Add a list describing the anatomy of the MVP version, optionally include screenshots of designs or use cases// ### Style The initial component will present the following visual features: - //Add a list describing the styles included in the MVP version, optionally include screenshots of designs or use cases// ### Interaction The initial component will follow these interaction specifications: - //Add a list describing the interactive features and states covered by the MVP version, optionally include screenshots of designs or use cases// ### 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.// ## Considerations - //Optionally include any other information important to clarifying MVP scope, what's out of scope, other related tasks that should be created, etc.// ## Open questions - **Clearable**: do we want to add clear action as we use in [[ https://doc.wikimedia.org/codex/latest/components/demos/text-input.html#:~:text=an%20icon%20name-,clearable,-status | TextInput ]]? - Character counter placement: in the helper text area or within the text area content? (more info [[ https://phabricator.wikimedia.org/T284272#8598421 | here ]]) --- ## Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description. [] The initial Textarea component is implemented in Codex.

**This task defines the minimum viable product (MVP) of the Textarea component.** --- ## Scope We need to add Textarea component in Codex. ### Known use cases | [[ https://www.figma.com/file/kA55PHoVPIy0MbfWdCCkdN/Text-Area---T284272?node-id=1102%3A4379&t=8i9MwSs5L05KxcvY-11 | 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 ]] **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 ]] ### Design spec //Link to the component spec sheet once it has been created.// | Component spec sheet | ### Anatomy The initial component will include: - //Add a list describing the anatomy of the MVP version, optionally include screenshots of designs or use cases// ### Style The initial component will present the following visual features: - //Add a list describing the styles included in the MVP version, optionally include screenshots of designs or use cases// ### Interaction The initial component will follow these interaction specifications: - //Add a list describing the interactive features and states covered by the MVP version, optionally include screenshots of designs or use cases// ### 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.// ## Considerations - //Optionally include any other information important to clarifying MVP scope, what's out of scope, other related tasks that should be created, etc.// ## 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**: should we include it in the helper text section or within the text area content? (more info [[ https://phabricator.wikimedia.org/T284272#8598421 | here ]]) --- ## Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description. [] The initial Textarea component is implemented in Codex.

**This task defines the minimum viable product (MVP) of the Textarea component.** --- ## Scope We need to add Textarea component in Codex. ### Known use cases | [[ https://www.figma.com/file/kA55PHoVPIy0MbfWdCCkdN/Text-Area---T284272?node-id=1102%3A4379&t=8i9MwSs5L05KxcvY-11 | 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 ]] **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 ]] ### Design spec //Link to the component spec sheet once it has been created.// | Component spec sheet | ### Anatomy The initial component will include: - //Add a list describing the anatomy of the MVP version, optionally include screenshots of designs or use cases// ### Style The initial component will present the following visual features: - //Add a list describing the styles included in the MVP version, optionally include screenshots of designs or use cases// ### Interaction The initial component will follow these interaction specifications: - //Add a list describing the interactive features and states covered by the MVP version, optionally include screenshots of designs or use cases// ### 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.// ## Considerations - //Optionally include any other information important to clarifying MVP scope, what's out of scope, other related tasks that should be created, etc.// ## Open questions -[-] **Clearable**: do we want to add clear action action**: it will not be included as we ushave 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 placement:**: should we include it in the helper text areasection or within the text area content? (more info [[ https://phabricator.wikimedia.org/T284272#8598421 | here ]]) --- ## Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description. [] The initial Textarea component is implemented in Codex.