Update h1 to use gl-font-size-h-display to normalize font-size
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
// removedfont-size
&font-weight
as.gl-font-size-h-display
will take over -
app/assets/stylesheets/framework/page_title.scss
// removedfont-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 issue | New issue |
New MR | New MR |
Feature flags**** | Feature flags |
New feature flags | New feature flags |
New Env | New env |
New label | New label |
Pipeline | Pipeline |
New test case | New test case |
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