Skip to content

Project, Group information sections: Add style for text highlighted with `<mark>`

Santiago Gil requested to merge santigl/gitlab:sgil/project-info-md-class into master
  • Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA

What does this MR do and why?

!161091 (merged) added a style for the <mark> tag used in Markdown. But that style was not being applied to the description sections in projects and groups.

In order to reduce duplication, extract that style into into a new mixin, str-highlighted.

Include that mixin from {group, search}.scss, and modify {project, projects, groups}.scss so that text wrapped in <mark> tags in project descriptions is rendered consistently.

Addresses #476690 (closed).

Changelog: fixed

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After

Before-Projects.png

After-Projects2.png

Before-project.png

After-project2.png

Before-Groups.png

After-Groups.png

After these changes, long text continues to be truncated with Read more in the Project view.

After-read-more2.png

And the Search and Global Search highlights keep their style.

Search-after.png

After-GlobalSearch-projects.png

mark tags inside Markdown comments have the same style

After-comment.png

How to set up and validate locally

Setup

  1. Load an existing project
  2. Go to its Project settings (Settings > General on the left-hand menu).
  3. Add some text containing a <mark> tag in the Project description (optional) field. For example, "Here is some h<mark>ighlighted tex</mark>t".
  4. Hit Save changes

Check project view

  1. Go to project view.
  2. See Project information on the right.

Check projects list

  1. Load Your work > Projects view (e.g. http://gdk.local:3000/dashboard/projects).
  2. Check project description under the project's title.

frontend UX Paper Cuts

Addresses #476690 (closed).

Edited by Santiago Gil

Merge request reports

Loading