hackforla / hackforla/internship
Create Tabs in the style of Material Design
- Dominant language
- CSS
- Stars
- 20
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
~~### Dependency #693~~ (Badges complete)
### Overview
Tabs organize content across different screens and views.
### Action Items
- [x] Research tab styling for Google's M3
- [x] Create Building Blocks for Tabs
- [x] Create Primary and Secondary Tabs.
- [x] Create variants for different states (Active vs Inactive)
- [x] Create variants for different states (Enabled, Hover, Focused)
- [x] Create variants for different configurations (leading icon, trailing icon, both)
- [x] Communicate changes in issue's comments 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)
- [ ] Update Figma page: Microsite Ready for Dev
- [ ] Close Issue
- [ ] Update epic by checking box https://github.com/hackforla/internship/issues/397
- [ ] leave a comment on https://github.com/hackforla/internship/issues/455 with the following text
```
Issue #[REPLACE WITH YOUR ISSUE NUMBER] has been released by design
```
### Resources/Instructions
- [Google Doc](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit#heading=h.pq5p3t1w1lw2)
- [HfLA Figma File](https://www.figma.com/file/UvUJ0zT2EEIOoDQVdn6ApN/HfLA-Design-System-Template?t=QhvqYQr8sPVUXqCz-0)
- [Internships Figma File](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2-45&t=UnquUaQhvcuGgsKH-0)
- ~[Internship Figma File, Design System, Tabs](https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2790-13406&node-type=frame&t=50bfH3NclibVgqCf-0)~ -We're going to replace this
- [Material Design 3 Tabs Overview](https://m3.material.io/components/tabs/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, Tabs](https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2790-13406&node-type=frame&t=50bfH3NclibVgqCf-0)~ -We're going to replace this
- Google Doc: [HfLA Design System Guide for Designers (v2)](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit#heading=h.pq5p3t1w1lw2)
Contributor guide
Assessment
This issue has not been assessed yet.