Select: Add Select component to Atlas

[Gustavo22Soaresh]

Background

OSM.org does not have a standardized Select component, which results in inconsistent implementations with different behaviors, styles, and levels of accessibility. This compromises usability and makes it difficult to maintain coherent interfaces. A unified Select component is essential to build accessible, reusable, and consistent interfaces throughout the OSM ecosystem.

Description

Aqui está a tradução literal para o inglês do trecho que você forneceu:

The Select component allows the user to choose an option from a dropdown list. It should work with Label, Field, and HelperText. It must support keyboard navigation, screen reader accessibility, and variations such as disabled, error, and pre-selected item.

The component should also handle both short and long lists, and its behavior needs to be predictable across all browsers.

User stories

• As a user, I want to choose an option from a list in a clear, simple, and accessible way.
• As a designer, I need the Select component to have a consistent appearance and behavior with other fields in the system.
• As a developer, I want to reuse the Select with different data sets and states in a flexible way.

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

• Radix UI: Link
• Shadcn: Link]

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
  A component spec sheet has not been created yet, but an early exploration file is available in Figma.

• 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

• [List all parts of the MVP scope for this component]

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

• Support for search (Combobox/Autocomplete)
• Support for multiple selection
• Support for optgroup
• Addition of icons or descriptions in the options
• Support for loading and empty state
• Localization of internal texts (placeholder, no results)