Update project member styles in GFM
What does this MR do and why?
Update project member styles to:
- exceed the minimum contrast for WCAG AA
- current user highlight visible on internal notes
This follows on from conversation in Slack. Thank you @nadia_sotnikova for your contributions
current user
Notes about - 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 |
---|---|---|
![]() |
![]() |
Issue title and description |
![]() |
![]() |
MR title and description |
![]() |
![]() |
Work item description |
![]() |
![]() |
Issue comment and thread |
![]() |
![]() |
Internal note and thread |
![]() |
![]() |
Selected comment |
![]() |
![]() |
Editor preview |
![]() |
![]() |
Todo |
![]() |
![]() |
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
- Comment preview
- Description preview
Are there other places this affects that I've missed?
How to set up and validate locally
Pre work
- 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
- In any project create a new issue
- Test issue the title by including usernames. For example:
This is my MR title @root @brain.hirthe
- 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
- Add a comment to the issue that includes usernames. For example
This is my comment @root @brain.hirthe
- Add an internal note to the issue that includes username. For example
This is my internal note @root @brain.hirthe
- Copy the link to the comment using the ellipsis (...) menu. Go to this link to see the selected comment.
- 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
- Add a task using the Tasks widget below the issue description.
- Add usernames to the task title. For example
This is my task title @root @brain.hirthe
. - Add usernames to the task description. For example
This is my task description @root @brain.hirthe
.
MR tests
- Same tests as an issue, but start by creating an MR.
Todo tests
- http://127.0.0.1:3000/dashboard/todos testing the issue and MR styles should have created some todos to test.
Email tests
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Dan MH