[Component] Buttons

[natalia-fitzgerald]

Buttons

Tracking the design and development lifecycle of the button component.

Related links:

• https://cfpb.github.io/design-system/components/buttons
• https://cfpb.github.io/design-system/development/variables#buttons
• https://cfpb.github.io/design-stories/?path=/docs/components-button--docs

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] Primary
• [X] Secondary
• [X] Disabled
• [X] Destructive
• [X] Printed

Sizes

• [X] Super
• [X] Full-width

Groups

• [X] Group

Buttons with icons

• [X] Static icon (may be covered by the pagination component)
• [X] Animated icon (confirm use case for SBL)

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]

@meissadia Here's a checklist of Design System button components that have/have not been brought into the component library:

• Can we simplify the naming to reflect this list?
• Let's discuss the remaining components that have not yet been brought in

Types

• [X] Primary
• [X] Secondary
• [X] Disabled
• [X] Destructive (Design System calls this a destructive button. Can we rename the label for it (not the reference in the code) to reflect the DS name?)
• [ ] ~Destructive link (see note below)~
• [ ] Printed

Sizes

• [X] Super
• [X] Full-width

Groups

• [x] Group

Buttons with icons

• [x] Static icon (may be covered by the pagination component - thoughts?)
• [x] Animated icon (confirm use case for SBL or determine whether we should bring it in)

Button as link and button as destructive link may be more appropriate in the links section. In the button section the link is shown in a DS section called "Destructive actions" and includes both the button and the link. The button is the action and the link is the destructive action. If we decide we want to include it in the Buttons section we should show it paired with the blue button and label it as "Destructive action." The destructive link on it's own appears in the Links section of the Design System.

[meissadia]

Other points of emphasis

• H2 for Types/Groups/Sizes
• Apply sentence case to all labels (in stories)
• Match DS language directly (labels, etc)

[meissadia]

@natalia-fitzgerald Re: Destructive link/button

They are different HTML elements but use the same CSS classes to style them.

Based on the elemental difference I'd say that they would be separate components.

I've gone ahead an implemented the Destructive action variant as a button.