hackforla / hackforla/tdm-calculator

Design: update design system, style guide and page designs with "date" column guidelines and examples

Open
#2,869 0 comments 0 reactions 0 assignees View on GitHub
deck: staging deck: stakeholder presentation level: medium p-feature: Manage Submissions p-feature: My Projects p-feature: My Projects-Deleted Tab p-feature: Submissions and process 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 update the design system and style guide (with rules and examples) for how we name table headers for date columns in tables so that future tables can be created using consistent rules and several pages will get updates to their designs in the User/Admin facing screens.

### Details
We have performed an audit of all date column names (below) and found inconsistent names and determined the changes needed (see parentheses).
Audit

- My Projects, Deleted Projects
- Created On
- Last Saved
- Date Deleted (should be changed to "Deleted")
- Submitted
- My Projects
- Created On
- Last Saved
- Submitted
- Admin Saved (visible to admins only)
- Manage Submissions
- Assigned
- Invoice Paid
- C of O
- Submissions
- Date Submitted (should be changed to Submitted)
- Status Updated
- Assigned Date (should be changed to Assigned)
- Invoice Paid Date (should be changed to Invoice Paid)
- CofO Date (should be changed to C of O)
- Feedback - This table is being removed

Once the changes have been made to the user/admin screens then the dev issue can get made.

### 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
-

#### Dev Site
-

#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 2869](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3691501d13a_2_20#slide=id.g3691501d13a_2_20)
- Release Deck
- [2026-02-03 Release deck, Issue 2869, slide 1](https://docs.google.com/presentation/d/1LhaI8Ip8uiK7wdEpRf6tpu-ENb_W5-p3aLsB-RvDetQ/edit?slide=id.g3c2f9071e0d_2_10#slide=id.g3c2f9071e0d_2_10)
- [2026-02-03 Release deck, Issue 2869, slide 2](https://docs.google.com/presentation/d/1LhaI8Ip8uiK7wdEpRf6tpu-ENb_W5-p3aLsB-RvDetQ/edit?slide=id.g3c2f9071e0d_0_0#slide=id.g3c2f9071e0d_0_0)

Contributor guide

Open the contributing guide

Research direction

Start with the date-column audit in the issue, then review the linked Figma Design System and Style Guide Presentation before creating the issue-specific Figma page. Done means approved designs for the User/Admin screens, documented date-header rules and examples, updated shared design resources where applicable, and a development handoff issue referencing the final designs.

Written by the indexing model from the issue text.

Assessment

Domain
design, documentation
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.