Skip to content

Type scale > Implement type scale specs

Description

This issue is to make the type scale and heading specs available in gitlab-ui. Alongside this effort there will be additional work needed to integrate these values into the product. The changes here are backwards compatible, unless otherwise noted.

Proposal

I propose the following MRs in the following order:

  1. ✅ Add size scale and heading mixins
  2. ✅ Add heading scale classes
  3. ✅ Update avatar scale
  4. ✅ Update modal scale
  5. ✅ Update popover scale
  6. ✅ Update banner scale
  7. ✅ Update alert scale
  8. ✅ Update markdown scale
  9. Update drawer scale ⚠️
  10. Update card scale ⚠️
  11. 👀 Update usage docs
  12. Remove old stuff

✅ Add size scale and heading mixins

See changes to /scss/ in !3586 (diffs)

MR: feat(Typography): Add font-size variable map an... (!3673 - merged)

  • Update size variables to css map
  • Create function to turn a number into a font-size variable
  • Create mixin to apply heading styles based on font-size
  • Create mixins to match headings styles to h1–h6

✅ Add heading scale classes

Note: I forgot to do this in !3673 (merged) 🤦

MR: feat(Typography): Add heading scale classes (!3685 - merged)

  • Create mixins to match headings styles to h1–h6
  • Create mixins for contextual adjustments

✅ Update avatar scale

See changes to /src/components/base/avatar/avatar.scss in !3586 (diffs)

MR: feat(Avatar): Use font size scale (!3679 - merged)

  • Update sizes to use the css map
  • Remove unnecessary styles

✅ Update modal scale

See changes to src/components/base/modal/ in !3586 (diffs)

MR: feat(Modal): Use current styles and h2 for heading (!3681 - merged)

  • Update semantics to h2
  • Use -500 heading mixin
  • Remove unnecessary styles

✅ Update popover scale

See changes to src/components/base/popover/popover.scss in !3586 (diffs)

MR: feat(Popover): Use heading scale (!3695 - merged)

  • Use -200 heading mixin
  • Remove unnecessary styles

✅ Update banner scale

MR: feat(Banner): Update heading to use heading scale (!3698 - merged)

See changes to src/components/base/banner/banner.scss in !3586 (diffs)

This is the first change I expect to be met with strong opinions and to appear in #is-this-known

  • Use -500 heading mixin
  • Remove unnecessary styles

✅ Update alert scale

MR: feat(Alert): Use heading scale (!3706 - merged)

See changes to src/components/base/alert/alert.scss in !3586 (diffs)

I expect to be met with strong opinions and to appear in #is-this-known. This change will make alert suitable in less places, which is intentional and matches how the component should be used.

  • Use -500 heading mixin
  • Remove unnecessary styles

✅ Update markdown scale

MR: feat(GlMarkdown): Use heading scale (!3965 - merged)

See changes to src/components/base/markdown/markdown.scss in !3586 (diffs)

👀 At the same time we should update .md in GitLab for parity

  • Use heading mixins
  • Remove heading underline
  • Remove unnecessary styles

Update drawer scale ⚠️

See changes to src/components/base/drawer/ in !3586 (diffs)

This is our first breaking change and requires integration. Proposed order:

  1. Add styles to gitlab-ui
  2. Set styles and update semantics to h2 in product
  3. Set semantics at component level in gitlab-ui (as seen in !3586 (diffs))
  4. Integration branch to remove semantics from product

Update card scale ⚠️

This one is challenging as cards can be different semantics depending on usage.

Potential plan - set a card-heading mixin that implementors can apply? But open to suggestions for this one.

In !3586 (diffs) I set the size manually, but this felt icky. I'd love it if usage of those mixins was locked to the semantic element. That is, gl-heading-3 would object to being applied to a h4.

👀 Update usage docs

MR: feat(Headings): add heading scale documentation (gitlab-org/gitlab-services/design.gitlab.com!3567 - merged)

We should update the docs https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/scss-typescale--docs

Remove old stuff

Once migration is complete we should remove the old stuff. I suspect we'll create a new issue to track this.

Figma file

View design specs in Figma →

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Dan MH