Design: Create Style Guide Presentation (Radio Buttons/Checkboxes)

[NilakshiS]

Dependency

#1850

Overview

The style guide currently does not mention any styling for radio buttons and check boxes. Add these to the Figma Design system and style guide presentation.

Details

The style guide does not explicitly address the styling for radio buttons, though the Example Modal Dialog on the "Dialog Boxes and Modals" page does implicitly show an example from the app.

However the example uses the "Navy Blue - Primary (#002E6D)" color for the radio buttons while the website uses the default browser styling for them. The default styling is used in several other UI elements such as checkboxes and dropdowns.

So we need to decide if we should change the styling of these elements to keep it consistent with the colors of the design system or keep it browser default since it's the style users would already be familiar with.

Action Items

• Determine the styling for radio button, checkboxes and other similar UI elements:
  • Research examples where it has been changed or kept the same.
  • Decide on a style and create prototypes.
• Add a section for these styles in the design system
• Review with Product/ Dev/ Research and iterate if needed based on feedback.
• If the style is different than dev, open issues for dev to update the design.
• Update the style guide to add the new design.
• Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

• Google Slides Style Guide Presentation
• Link to style guide in Figma
• Presentation format

[NilakshiS]

09/25/2024
Iteration 1:

• Design on left is suggested design/ design based on other sections on Figma
• Design on right is current design on dev when viewing on a Chrome Browser on windows.

Link to iteration 1 Figma

Image for Iteration 1

Feedback received:

• The "primary blue" used in dropdowns and checkboxes could make the page appear too busy with the same color section headers on page 4 of calculator.

Details

• Checkboxes and radio buttons should have similar appearances because they appear together on filters in my projects page.

Details

[NilakshiS]

09/27/2024
Iteration 2:

• Changed the checkboxes and radio buttons back to dev styles
• Changed the dropdown color to dev style but kept the increased padding

Link to iteration 2 Figma

Image for Iteration 2

Waiting on stakeholder feedback

[NilakshiS]

Current slide is approved by stakeholders, but we might need to add a multi-select dropdown from the filters to this list based on whatever's finalized