Igalia / phpreport

Web tool for project time tracking and project management.
http://igalia.github.io/phpreport/
GNU General Public License v3.0
30 stars 12 forks source link

Create Select component that supports masks #716

Closed negreirosleo closed 1 year ago

negreirosleo commented 1 year ago

Description

This PR creates a Select component that support's the use of masks.

Now there are 2 selects, the Masked Select and the regular Select, to use it it is just like a regular controlled select input, you need to pass a name label value onChange options placeholder.

Example:

      <Select
        onChange={(value) => handleChange('projectId', value)}
        value={task.projectId}
        name="projectId"
        label="Select project"
        placeholder="Select project"
        options={projects.map((project) => ({
          label: project.description,
          value: project.id.toString()
        }))}
        required
      />

The options must be an an array of strings or an array of an option hash:

export type Option = {
  value: string
  label: string
}

export type Options = Array<string> | Array<Option>

It follows the w3 guidelines for accessible comboboxes: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/. thanks @dmtrek14 :rocket: (also I added some tests for it under the keyboard navigation section, if I missed anything please let me know)

Demo

Screencast from 2023-10-30 16-00-48.webm