Skip to content

Update h1 to use gl-font-size-h-display to normalize font-size

Sascha Eggenberger requested to merge 361641-update-h1 into master

What does this MR do and why?

This is a follow-up of !88534 (merged)
This MR updates h1.page-title's to use .gl-font-size-h-display to normalize font-size's across the product.

The only exceptions are the following pages where other fixes were needed to either change the page title from an <h2> to an <h1> (left overs from !88534 (merged)) or which had unnecessary overrides to the page title.

Titles actually being changed in size are «New issue» and «New MR» pages, see screenshots below.

Changes h2's to h1's:

  • app/views/projects/merge_requests/_mr_title.html.haml
  • app/views/projects/runners/edit.html.haml
  • app/views/shared/runners/_runner_details.html.haml
  • app/assets/javascripts/feature_flags/components/feature_flags.vue

Changed CSS to streamline h1's:

  • app/assets/stylesheets/framework/typography.scss // removed font-size & font-weight as .gl-font-size-h-display will take over
  • app/assets/stylesheets/framework/page_title.scss // removed font-size & font-weight as .gl-font-size-h-display will take over

Note

In the future we'll try to use fluid typography for titles (h1-h6) defined in GitLab UI, see draft at !88536 (closed)

Screenshots or screen recordings

Some examples:

Before After
New issuenew_issue_before New issuenew_issue_after
New MRnew_mr_before New MRnew_mr_after
Feature flags**feature_flags_before** Feature flagsfeature_flags_after
New feature flagsnew_feature_flag_before New feature flagsnew_feature_flag_after
New Envnew_env_before New envnew_env_after
New labelnew_label_before New labelnew_label_after
Pipelinepipeline_before Pipelinepipeline_after
New test casenew_test_case_before New test casenew_test_case_after

How to set up and validate locally

Verify on the following pages (e.g. in GDK):

  • New issue: /gitlab-org/gitlab-shell/-/issues/new
  • New MR: /gitlab-org/gitlab-shell/-/merge_requests/new
  • New Label: /gitlab-org/gitlab-shell/-/labels/new
  • Schedule a new pipeline: /gitlab-org/gitlab-shell/-/pipeline_schedules/new
  • New environment: /gitlab-org/gitlab-shell/-/environments/new
  • New feature flag: /gitlab-org/gitlab-shell/-/feature_flags/new
  • New test case: /gitlab-org/gitlab-shell/-/quality/test_cases/new
  • Feature flags: /gitlab-org/gitlab-shell/-/feature_flags

Related to #361641 (closed)

Edited by Sascha Eggenberger

Merge request reports