hackforla / hackforla/tdm-calculator

Design: Update Design System to include details about Tables

Open
#2,840 0 comments 0 reactions 0 assignees View on GitHub
deck: staging not for stakeholder feature: style guide level: medium priority: MUST HAVE role: ui/ux design size: 1pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
We need to include tables in our design system in Figma, so that we can have a single source of truth for new tables and to evaluate existing table designs for consistency

### Details
Table section should have details about
- heading color
- sorting
- searching
- filtering and then indicated to see overlay section

### Action Items
- [ ] Assign yourself to this issue.
- [ ] Move the issue from Prioritized Backlog to In Progress.
- [ ] In Figma, move a blank page to the Design section.
- [ ] Change the Figma page's title to have the format "#Issue Number | Title | Assignee Name".
- [ ] Copy contents from the Figma Template page to this issue's Figma page.
- [ ] Include a link to this issue's Figma page in the Figma section below.
- [ ] Use the Figma page to design solutions for this issue.
- Once this issue is ready to be reviewed:
- [ ] Add a comment tagging the team design lead that [explains the design](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations).
- [ ] Move it to the Visual Review column.
- [ ] Add the "ready for Design lead-[team]" label specific to your team.
- [ ] Once you have received feedback from the team lead, implement feedback as necessary.
- [ ] Use [presentation structure](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations) to review proposed designs with the design director. Implement feedback as necessary.
- [ ] Use [presentation structure](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations) to review proposed designs with the product, development, and research teams. Implement feedback as necessary.
- [ ] Create a new slide (or edit one if it already exists) in staging and add images and appropriate text
- [ ] Receive design approval from stakeholders. Implement feedback as necessary.
- [ ] Add any annotations to the Figma design that would help the developer with implementation.
- [ ] Create a Ready for Dev section around the final designs on the Figma page.
- [ ] Update the [Figma Design System](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4041-12655&t=54f7L4Eubz7ppygs-1) with changes resulting from the issue's final design, if applicable.
- [ ] Update the [Style Guide Presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/), if applicable.
- [ ] Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
- [ ] Create a [development handoff issue](https://github.com/hackforla/tdm-calculator/issues/new?template=development-handoff-issue.md) that references the comment.
- [ ] Move the Figma page to the Development section of the Figma file.
- [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
- [ ] Include the development handoff issue number in the GitHub section below.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.

### Resources

#### GitHub
-

#### Figma
- [Figma: Design System](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=3337-11981&p=f&t=hSCiNAuAbgvLtRsF-0)

#### Dev Site
-

#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, ISSUE NUMBER]
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked Figma Design System and the issue's requested table details: heading color, sorting, searching, filtering, and the overlay section. Follow the listed Figma, review, stakeholder approval, annotation, and development-handoff steps. Done means an approved table design is documented in Figma, with relevant design-system and style-guide updates and a development handoff issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma
Domain
design
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.