Add default styles for <code> and <pre> HTML elements
What does this MR do and why?
The <code> and <pre> HTML elements have default styles applied from Bootstrap. These styles are inconsistent with GitLab implementations so GitLab UI consumers are overriding with very similar styles:
- GitLab: https://gitlab.com/gitlab-org/gitlab/-/blob/1e99a32c3a526b91fa59cb509abde7f78fb7ed54/app/assets/stylesheets/bootstrap_migration_reset.scss#L61-69
- design.gitlab.com: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/46ddbf25b48b911332a7ba9b8531d3fa29cff39a/assets/stylesheets/framework/_typography.scss#L57-68
This MR proposes shifting-left on <code> and <pre> styles to be applied in GitLab UI, remove Bootstrap styles, and eventually remove styles from consumers so that they are visually consistent.
Note: gitlab-org/gitlab-ui!5002 (merged) adds basic typography stories to validate changes to <code> and <pre> elements in https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/scss-typography--default
Screenshots
| Before | After |
|---|---|
 |
 |
 |
 |
References
- Integration branch gitlab-org/gitlab!191101 (closed)
How to set up and validate locally
- View typography story in Storybook
- Validate
<code>and<pre>visual rendering
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.