TextArea: Add TextArea component to Atlas

[Gustavo22Soaresh]

Background

The OSM.org website currently lacks a standard TextArea component. Each project styles this type of input independently, leading to visual inconsistencies, accessibility issues, and maintenance challenges. A standardized component is needed to ensure consistency and to facilitate long text input in forms.

Description

The TextArea component allows users to input multiple lines of text.
It should support error, disabled, and required states. The component must be accessible, responsive, adaptable to different sizes, and integrate with Label, Field, and validation messages.

User stories

• Como pessoa usuária, quero inserir um texto longo com conforto e clareza, para completar formulários de forma eficiente.
• Como designer, quero um TextArea visualmente consistente com os demais campos para manter a harmonia da interface.
• Como desenvolvedor, quero um componente reutilizável e acessível para facilitar a manutenção e integração com validações.

History

[Describe or link to prior discussions, research, or tickets related to this component.]

Known use cases

[List examples of where this component has been used or will be used in the future. If applicable, mention past projects where similar solutions were implemented.]

Existing implementations

[List existing implementations (if any) within your system or external libraries.]

External libraries

• [Library Name]: [Link to component]
• [Library Name]: [Link to component]

Component task owners

• Designer: @Gustavo22Soaresh
• Developer: [Add the main developer's name]

Open questions

[List any unresolved questions about the component's functionality, implementation, or adoption. Consider how it integrates into your system.]

Design spec

Componet’s page

• Component spec sheet: [Add link when available]

Anatomy
[List the structure and properties of the component.]

Style
[Describe the visual design, including colors, typography, spacing, etc.]

Interaction
[Describe how users interact with the component, including hover states, animations, and transitions.]

Documentation

• Componet’s guidelines

Acceptance criteria

Minimum viable product (MVP)

[Define the MVP scope, including the essential features and behaviors the component must support.]

MVP scope

• Multiline text field with label
• Error and disabled states
• Optional placeholder
• Integration with Field and Label components
• Consistent styling with TextInput
• Responsive design

Design

• Create a Figma spec sheet and link it here.
• Update the component in the Figma library (to be done by a design system team member).

Code

• Implement the component in [Framework/Codebase Name].

Future work

• Multiline text field with label
• Error and disabled states
• Optional placeholder
• Integration with Field and Label components
• Consistent styling with TextInput
• Responsive design