cfpb / design-system-react

A React/Storybook implementation of CFPB's Design System
https://cfpb.github.io/design-system-react/
MIT License
6 stars 4 forks source link

[Component] Select (CFPB DS "Dropdowns and multiselects") #185

Open natalia-fitzgerald opened 1 year ago

natalia-fitzgerald commented 1 year ago

Select

Tracking the design and development lifecycle of the select component.

Related links:

Effort level: Large

(Levels: Small, Medium, Large, Extra Large)

Definition of ready

Checklist

Definition of ready questionnaire:

Identify the use case:

Identify the current state:

Indicate which types we will include in the React component library.

Types

Definition of done

Component is fully functional

Accessibility checks have been completed

For existing components:

For new components:

Final sign off

natalia-fitzgerald commented 1 year ago

Here's the updated content for the "Dropdown and multiselect" component

List of content changes:

Here's the updated DS documentation page: screencapture-cfpb-github-io-design-system-components-selects-2023-10-02-15_05_39 https://cfpb.github.io/design-system/components/selects

natalia-fitzgerald commented 1 year ago

@shindigira For this component we should update the CFPB Design System (React) component to reflect the "Types" shown in the CFPB Design System.

Include

Names for reference (in DSR)

Remove

Open questions:

Design review:

shindigira commented 1 year ago

@shindigira For this component we should update the CFPB Design System (React) component to reflect the "Types" shown in the CFPB Design System.

Include

  • Single select
  • Multiselect

    • Checkbox

    • Tags

    • This component needs to be updated in the CFPB DS and then brought into CFPB Design System (React)

    • Option to position Tags above or below the Select

Names for reference (in DSR)

  • Multi-select with checkboxes, without clear all button (rename as "Multiselect (tags below)"
  • Create another version with the Tags above and without the clear all button (name "Multiselect (tags above)")

Remove

Design review:

  • [ ] Add flipped caret to close Multiselect
  • [ ] Fix gray box that caret sits in
  • [ ] Checkbox should be vertically and horizontally centered in the box (DSR checkbox component is verified and reflects the correct implementation)

All changes implemented.

Open questions:

  • Shouldn't the "Disabled" dropdown be a state that can be turned off and on rather than a component type?
  • What is the use case for "With default value"?

It can be disabled/enabled via a prop. "With default value" is just to show the dev the functionality of starting the component with a pre-selected option in the list of options.