search

codecov / engineering-team

This is a general repo to use with GH Projects
1 stars 1 forks source link

Table Component: guidelines updates #1017

Open Adal3n3 opened 9 months ago

Adal3n3 commented 9 months ago

Table Guidelines

Column header

  1. All columns must have a corresponding column header.
  2. The sorting icon on the header will always appear on the right.
  3. If the column is sortable, the sorting icon will appear in grey color.
  4. The absence of a sorting icon indicates that the column is not sortable.
  5. A darken sorting icon indicates that it's active, similar to the default sort column.
  6. If the column header text is aligned to the right, all the table cells in this column should also be aligned to the right.
  7. If you have a repeated icon, you can consider displaying the icon on the header.

Table cell

  1. If the cell value is a number, we should use the “Lato” typeface.
  2. If the cell value is a code, we should use the “Mono” typeface.
  3. All cell values should not be in bold text, except for “Configure Repo >”
  4. Text can be aligned to the left or right. There is no use-case for center alignment yet.
  5. Links can be present with or without icon.

(Below screenshots might not be up to date, please see the figma file for the latest design) Screenshot 2024-03-22 at 1 03 42 PM

Screenshot 2024-03-22 at 1 06 17 PM

Figma: link

### Sub-tasks
- [ ] https://github.com/codecov/engineering-team/issues/1556
- [ ] https://github.com/codecov/engineering-team/issues/1555
- [ ] https://github.com/codecov/engineering-team/issues/1557
- [ ] https://github.com/codecov/engineering-team/issues/1558
- [ ] https://github.com/codecov/engineering-team/issues/1559
- [ ] https://github.com/codecov/engineering-team/issues/1560
Adal3n3 commented 8 months ago

Reviewed on 2/8. The sorting icon on the col header has been updated.

Adal3n3 commented 6 months ago

Breakdown the tasks of this issue into individual sub-tasks.