TWE Design System Components: Icon Buttons

[mklmrgn]

Overview

We need to create Icon Buttons for the TWE design system for the future website development & handoff.

Details

These are distinct from common buttons (already completed) and used as atoms throughout Material Design 3

Action Items

• Research styling for Google's M3
• Research Googles M3 guidelines to see what style, state and/or configuration variants are needed
• Create Style variations
• Create State Variants (see resource 1.01 and M3 guidelines 1.03)
• Create Configuration Variants (see resource 1.02 and M3 guidelines 1.03)
• Create dark mode versions, as even light mode components use the dark mode versions (i.e. Snackbars)
• Weekly (or more often if needed) communicate changes in issues comments (below) and with design team
• Get sign-off from Design Lead
• Get sign-off from Product Manager
• Update Figma page: Design System - WIP (resource 1.04)
  • Add all the details that canvas asks for (see resources 1.04.01 for example of what/where you are updating)
  • If there is a link with a strike-through on 1.04.02, please go to the link, and remove that content from the NEED TEMPLATE/REVISION section.
• Update Figma page: Microsite Ready for Dev
• Close Issue
• Update epic by checking box TWE Design System: Create Generic Design Components and Mockups #397
• leave a comment on Develop Design System Microsite based on Material for MKDocs #455 with the following text

  Issue #[REPLACE WITH YOUR ISSUE NUMBER] has been released by design
  

Resources/Instructions

• 1.01 State Variants

  • Default, Hover, Pressed, Disabled

• 1.02 Configuration Variants (N/A)

• 1.03 Material Design relevant URLs:

  • https://m3.material.io/components/icon-buttons/overview

• 1.04 Figma File: [Internships Figma, Design System - WIP](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2-45&t=UnquUaQhvcuGgsKH-0

  • 1.04.01 Example Figma page: Design System - WIP, Profile Card

    Details

    

  • 1.04.02 Internship Figma File, Design System, Pagination -We're going to replace this

• Google Doc: HfLA Design System Guide for Designers (v2)

[mklmrgn]

Created all light mode and dark mode icon buttons

Still Needed: Complete Specs on WIP page and Create Microsite Page

[mklmrgn]

Completed WIP page

Completed Microsite for this component

Component is complete

[ExperimentsInHonesty]

@joshfishman Here is a finished issue for the design of the Icon Buttons