Open natalia-fitzgerald opened 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: https://cfpb.github.io/design-system/components/selects
@shindigira For this component we should update the CFPB Design System (React) component to reflect the "Types" shown in the CFPB Design System.
Design review:
@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
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.
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:
[X] The component already exist in the CFPB Design System
[ ] The component does not exist in the CFPB Design System but does exist on cf.gov
[ ] 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)
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