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

[natalia-fitzgerald]

Select

Tracking the design and development lifecycle of the select component.

Related links:

• https://cfpb.github.io/design-system/components/dropdowns-and-multiselects
• https://cfpb.github.io/design-system/components/dropdowns-and-multiselects#dropdowns-1
• https://cfpb.github.io/design-system/components/dropdowns-and-multiselects#multiselects-1

Effort level: Large

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

Definition of ready

Checklist

• [X] The component has an identified use case (one of the 3 options below)
• [X] The current state of the component has been identified (one of the 3 options below)
• [X] The task is broken into steps

Definition of ready questionnaire:

Identify the use case:

• [X] Small business lending filing platform
• [ ] Metro 2 tool
• [ ] No identified project need but does exist in the CFPB Design System

Identify the current state:

• [X] The component already exist in the CFPB Design System

  • Build an exact React translation of the CFPB Design System component
  • Build the component in Figma (if it is not already included in the CFPB Design System template)

• [ ] The component does not exist in the CFPB Design System but does exist on cf.gov

  • Conduct a design audit of any component variations that exist on our website (if applicable)
  • Determine final design
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

• [ ] The component does not exist in the CFPB Design System or on cf.gov (but has an identified use case and is being tracked as part of the SBL or M2 work)

  • Design the component as a part of the SBL or Metro 2 project work
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

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

Types

• [X] Dropdown (Change name to "Single select")
• [X] Multiselect

Definition of done

Component is fully functional

• [ ] Visual regression testing has been conducted
• [ ] All interactive states are accounted for and incorporated
• [ ] The component is successfully integrated into the Small business lending filing platform (or prototype) or other CFPB web app

Accessibility checks have been completed

• [ ] Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• [ ] Component is screen reader friendly
• [ ] Component does not introduce new errors or warnings in WAVE

For existing components:

• [ ] React component visually and functionally matches the CFPB Design System component
• [ ] Visual regression testing has been conducted and component has passed all tests
• [ ] Manual visual review has been conducted and component has passed this review
• [ ] Storybook page includes all types and variations of the component that are included in the CFPB Design System

For new components:

• [ ] The CFPB Design System maintainers have been alerted that there is a new component that must be added to the system OR
• [ ] We have added the new components to the CFPB Design System
• [ ] Documentation has been written and is included in Storybook and/or the CFPB Design System

Final sign off

• [ ] The component has been reviewed and approved by UI, UX, and FEWD

[natalia-fitzgerald]

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

List of content changes:

• Change text under page heading to: "Selects allow users to make a single selection or multiple selections from a finite list of options. They are not always the best choice from a usability perspective; see the use cases section below for more details."
  • Source: https://cfpb.github.io/design-system/components/dropdowns-and-multiselects
• Change component from "Dropdown and multiselect" to "Selects"
• Change "Dropdown" to "Single select"
• "Multiselect" stays as is

Here's the updated DS documentation page: https://cfpb.github.io/design-system/components/selects

[natalia-fitzgerald]

@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

• Multi-select with default value and pills above
• Multi-select with checkboxes
• Multi-select with pills bottom-aligned
• Multi-select with checkboxes, without pills
• Multi-select with checkboxes, without clear all button
• As a controlled component

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"?

Design review:

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

[shindigira]

@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

• Multi-select with default value and pills above
• Multi-select with checkboxes
• Multi-select with pills bottom-aligned
• Multi-select with checkboxes, without pills
• Multi-select with checkboxes, without clear all button
• As a controlled component

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.