Design: Create Style Guide Presentation (Buttons/Pagination)

[marlenamellody]

Overview

We need to create a Google deck of all the style guide pages on Figma and add a link to the wiki

Action Items

• [x] Finalize this section for design system
• [x] Update style guide presentation
• [x] Update Button Styles and Use Cases - refer to comment

Resources/Instructions

Style Guide Presentation Figma

[marlenamellody]

Updates on the buttons in the design system and style guide presentation:

Original design system:

• doesn't include tertiary style (green stroke - present on page 5)
• focus/hover buttons have a red stroke. buttons with a red stroke do not exist on the current website, but they do exist in the original design system (within some modals).

Updated design system:

• includes tertiary style (The use of the tertiary button - example: “print summary” (when it has a green outline), is for when there are two positive buttons on the same page, the outlined version is less important option.)
• removed buttons with red stroke to reflect current website
• added "warning" button style. This style is present on the modal that warns the user that they are leaving the page.

blockers

• Because a default/ disabled state of the tertiary style isn't present on the site, should it be included in the design system?
• The text size for buttons in the style guide is 16px, but on the website it is 20px.

[marlenamellody]

Updated buttons:

Button style with icons removed based on feedback.

[NilakshiS]

Added a slide for difference between Hover and Default state buttons, waiting on stakeholder feedback

[NilakshiS]

Add the Hover and Default state buttons to the slide explaining the difference or add an asterisk to the "Hover" on previous slide to indicate that there is more explanation

[NilakshiS]

Updated slides on style guide to have more explanation

[NilakshiS]

Approved by the stakeholders on 10/15/2024.

[NilakshiS]

Creating a design for "CANCEL" button and trying to find a button style that fits "CLEAR ALL FILTERS" button, we realized that the current button styles in the design system do not work well with what we have on the website:

• Secondary button styles are not used anywhere on the website, except for the incorrect usage on "EDIT FAQS" button.
• "CANCEL" buttons should use secondary button style, but the gray background might make them look disabled.
• "CLEAR ALL FILTERS" should use tertiary style, but it does not look visually appealing without a primary button next to it.
• Accent button styles are not used anywhere on the website.

We suggest alternate "secondary" and "tertiary" button styles and refined type descriptions to better align with our use case.

[marlenamellody]

Warning button type will have white text instead of black text for increased accessibility. Approved by the stakeholders on 10/29/2024.