Skip to content

Update project member styles in GFM

Dan MH requested to merge danmh-project-member-md-styles into master

What does this MR do and why?

Update project member styles to:

  1. exceed the minimum contrast for WCAG AA
  2. current user highlight visible on internal notes

This follows on from conversation in Slack. Thank you @nadia_sotnikova for your contributions 🙇 🤝 .

Notes about current user

  • The current user is sometimes highlighted in the UI.
  • The current user is not highlighted everywhere. This MR only changes the styles and doesn't look to highlight the current user consistently.
  • The value of the highlighting the current user was questioned in a design review. Removing or evolving this concept is outside the scope of this MR.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

For the purpose of these screenshoots @root is the highlighted as the current user

Before After Description
2issue issuetitleanddescription Issue title and description
2MR mr MR title and description
2worki workitem Work item description
2comment commentandthread Issue comment and thread
Screenshot_2022-09-20_at_10.52.36 127.0.0.1_3000_flightjs_Flight_-_issues_32_work_item_id_484 Internal note and thread
Screenshot_2022-09-20_at_10.53.03 127.0.0.1_3000_flightjs_Flight_-issues_32_work_item_id_484__1 Selected comment
2editpreview commentpreview Editor preview
127.0.0.1_3000_dashboard_todos_action_id__author_id__project_id__state_done_type_ todos Todo
127.0.0.1_3000_rails_letter_opener___1_ 127.0.0.1_3000_rails_letter_opener_ Todo email
  • Issue/MR Comment
  • Issue/MR Thread
  • Issue/MR Internal note
  • Issue/MR Internal note thread
  • Work item description
  • Issue description
  • MR description
  • Todos
  • Email
  • Comment preview
  • Description preview

Are there other places this affects that I've missed?

How to set up and validate locally

Pre work

  1. Find your current username by clicking on your profile picture at the top right of the UI. On GDK the default user is @root.

Issue tests

  1. In any project create a new issue
  2. Test issue the title by including usernames. For example: This is my MR title @root @brain.hirthe
  3. Test the issue description by including usernames. For example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

@root @h5bp/commit451/gnuwget-21 @brain.hirthe 

It is a long established fact that @root a reader will be distracted by the readable content of a page when looking at its layout. @h5bp/commit451/gnuwget-21 The point of using Lorem Ipsum is @brain.hirthe that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

- @root @brain.hirthe 
- @h5bp/commit451 

> Here is a quote @root 

> Another @brain.hirthe quote

### Titles can @marquis_wisozk too

Text text
  1. Add a comment to the issue that includes usernames. For example This is my comment @root @brain.hirthe
  2. Add an internal note to the issue that includes username. For example This is my internal note @root @brain.hirthe
  3. Copy the link to the comment using the ellipsis (...) menu. Go to this link to see the selected comment.
  4. Write a comment to the issue but don't submit it. Use the Preview tab to see a preview of the comment.

Work item tests

  1. Add a task using the Tasks widget below the issue description.
  2. Add usernames to the task title. For example This is my task title @root @brain.hirthe.
  3. Add usernames to the task description. For example This is my task description @root @brain.hirthe.

MR tests

  1. Same tests as an issue, but start by creating an MR.

Todo tests

  1. http://127.0.0.1:3000/dashboard/todos testing the issue and MR styles should have created some todos to test.

Email tests

  1. http://127.0.0.1:3000/rails/letter_opener/ to see emails generated by GitLab.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Dan MH

Merge request reports