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.
Merge request reports
Activity
changed milestone to %15.5
added Beautifying our UI UI polish bugux severity4 + 1 deleted label
assigned to @danmh
added typebug label
added devopsplan sectiondev labels
Suggested Reviewers (beta)
The individuals below may be good candidates to participate in the review based on various factors.
You can use slash commands in comments to quickly assign
/assign_reviewer @user1
.Suggested Reviewers @rspeicher
,@marin
,@axil
,@rymai
,@DouweM
If you do not believe these suggestions are useful, please apply the label Bad Suggested Reviewer. You can also provide feedback for this feature on this issue:
https://gitlab.com/gitlab-org/gitlab/-/issues/357923
.Automatically generated by Suggested Reviewers Bot - an experimental ML-based recommendation engine created by ~"group::applied ml".
- Resolved by Peter Hegman
- A deleted user
added frontend label
1 Warning You've made some app changes, but didn't add any tests.
That's OK as long as you're refactoring existing code,
but please consider adding any of the maintenancepipelines, maintenanceworkflow, documentation, QA labels.Reviewer roulette
Changes that require review have been detected!
Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:
Category Reviewer Maintainer frontend Eduardo Sanz-Garcia ( @eduardosanz
) (UTC+2, 1 hour ahead of@danmh
)Peter Hegman ( @peterhegman
) (UTC-7, 8 hours behind@danmh
)UX Matej Latin ( @matejlatin
) (UTC+2, 1 hour ahead of@danmh
)Maintainer review is optional for UX To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Dangeradded UX label
Please wait for Reviewer Roulette to suggest a designer for UX review, and then assign them as Reviewer. This helps evenly distribute reviews across UX.
This message was generated automatically. You're welcome to improve it.
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 5704641f and 40ca6a7d
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 3.54 MB 3.54 MB - 0.0 % mainChunk 1.92 MB 1.92 MB - 0.0 %
Please look at the full report for more details
Read more about how this report works.
Generated by
DangerAllure report
allure-report-publisher
generated test report!e2e-review-qa:
test report for 40ca6a7dexpand test summary
+-----------------------------------------------------------------------------------------+ | suites summary | +------------------------------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +------------------------------------+--------+--------+---------+-------+-------+--------+ | Manage | 52 | 0 | 8 | 10 | 60 | ❗ | | Verify | 12 | 0 | 1 | 3 | 13 | ❗ | | Plan | 53 | 0 | 4 | 0 | 57 | ✅ | | Create | 30 | 0 | 1 | 2 | 31 | ❗ | | Feature flag handler sanity checks | 9 | 0 | 0 | 0 | 9 | ✅ | | Configure | 0 | 0 | 1 | 0 | 1 | ➖ | | Protect | 2 | 0 | 0 | 0 | 2 | ✅ | | Secure | 2 | 0 | 0 | 0 | 2 | ✅ | | Version sanity check | 0 | 0 | 1 | 0 | 1 | ➖ | | Package | 0 | 0 | 1 | 0 | 1 | ➖ | +------------------------------------+--------+--------+---------+-------+-------+--------+ | Total | 160 | 0 | 17 | 15 | 177 | ❗ | +------------------------------------+--------+--------+---------+-------+-------+--------+
marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed
requested review from @andyvolpe
- Resolved by Jeremy Elder
Hey @andyvolpe could you please review the UX.
I hope you like spot the difference
.
- Resolved by Peter Hegman
Hey @lmeckley could you please review the frontend . I'm not 100% confident of the approach so all feedback and ideas appreciated
requested review from @jeldergl
removed review request for @andyvolpe
@jeldergl
, thanks for approving this merge request.This is the first time the merge request is approved. To ensure full test coverage, a new pipeline has been started.
For more info, please refer to the following links:
mentioned in issue danmh/danmh#10 (closed)
mentioned in issue #374580 (closed)
added 583 commits
-
c2563acb...9a81ebd6 - 581 commits from branch
master
- a178e20e - Update project member styles in GFM
- 40ca6a7d - Remove important css rule
-
c2563acb...9a81ebd6 - 581 commits from branch
requested review from @peterhegman and removed review request for @lmeckley
enabled an automatic merge when the pipeline for 0590c526 succeeds
mentioned in commit 8cf83665
added workflowstaging-canary label
added workflowcanary label and removed workflowstaging-canary label
added workflowstaging label and removed workflowcanary label
added workflowproduction label and removed workflowstaging label
added workflowpost-deploy-db-staging label and removed workflowproduction label
added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label
added releasedcandidate label
mentioned in merge request kubitus-project/kubitus-installer!1521 (merged)
added releasedpublished label and removed releasedcandidate label