Skip to content

Draft: Remove Pajamas-incompatible table header styles

Miguel Rincon requested to merge 346921-tables-headers-should-have-no-background-out-of-the-box into master

What does this MR do and why?

This change removes table styles that are not compliant with Pajamas and that currently must be overridden by most of our new tables.

It also removes two classes that override these incorrect styles in favor of using the original correct styles.

See more: https://design.gitlab.com/components/table#examples

Risks

⚠ ⚠ Almost all GitLab tables are potentially impacted by this change ... I expect this is a change in the right direction! however, we should be careful that no unexpected breaking changes are possible.

Two factors reduce regressions risks:

  1. The classes changed do not impact layout, only the color palette
    • Also, the color is removed, so there is little risk of wrong contrast.
  2. HAML table headers, are easily searchable %th, so tables affected can be checked.
    • I could not find any cases where the text color is changed, so there's little risk of causing "invisible" text

Why this change?

#345385 (closed) prompted me to take a look at which classes are required to create Pajamas compliant tables, and I found that we have conflicting styles. #346921 (closed) is an effort to remove some of them, but it is by no means extended to all styles.

Possible follow-ups

  • .thead-white was used at some point to override these styles.
  • Some DEFAULT_TH_CLASSES could be removed after this change (gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1!).
  • .ci-variable-table styles for thead and th can be removed.

Screenshots or screen recordings

Repository page

Example URL: http://gdk.test:3000/h5bp/html5-boilerplate

before after
Screen_Shot_2021-12-08_at_7.33.23_PM image

Markdown table (in an issue)

Example URL: http://gdk.test:3000/h5bp/html5-boilerplate/-/issues/33 (please add a markdown table)

before after
image image

Abuse reports

http://gdk.test:3000/admin/abuse_reports

before after
image image
before Screen_Shot_2021-12-01_at_4.39.40_PM

Admin > Applications

http://gdk.test:3000/admin/applications

before after
image image

CI/CD Settings > Variables

http://gdk.test:3000/h5bp/html5-boilerplate/-/settings/ci_cd

Note: No obvious difference, as the styles are overridden by .ci-variable-table.

before after
image image

... More examples to come.

How to set up and validate locally

  1. Visit one of the many tables in our UI, as in the examples provided above

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #346921 (closed)

Edited by Miguel Rincon

Merge request reports