Update issuable state badge styles for Issues, MRs, and Epics

Summary

Updates state badge style for Issues, MRs, and Epics.

Screenshots

State Badges

	Desktop	Mobile
Issue (Open)
Issue (Closed)
Merge Request (Open)
Merge Request (Merged)
Merge Request (Closed)
Merge Request (w/ ff updated_mr_header, see !86019 (merged))
Epic (Open)
Epic (Closed)
Test Case (Open)
Test Case (Archived)

Related Issues

#330569

changed milestone to %15.0

added Actionable InsightProduct change Category:Portfolio Management Next Up OKR-FY24Q2 SUSFY22 Q2 - Incomplete Technical Writing UI text UX UX scorecard-rec devopsplan epics frontend groupproduct planning issues learnability sectiondev severity1 workflowin dev + 1 deleted label

assigned to @kushalpandya

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.

marked this merge request as draft

Suggested Reviewers (beta)

This is an experimental ML-based code reviewer recommendation system created by ~"group::applied ml".

The individuals below may be good candidates to participate in the review based on various factors.

After you review all recommendations, please assign reviewers manually, as this is not done automatically.

You can use slash commands in comments to quickly assign /assign_reviewer @user1.

Reviewers
@kushalpandya, @jcaigitlab, @iamphill, @rymai, @rspeicher

If you do not believe these recommendations are useful or if you do not want to use any of the suggestions, 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

	3 Warnings
	This MR changes code in ee/, but its Changelog commit is missing the EE: true trailer. Consider adding it to your Changelog commits.
	Please add a merge request type to this merge request.
	This merge request changed undocumented Vue components in vue_shared/. Please consider creating Stories for these components: app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue

If needed, you can retry the danger-review job that generated this comment.

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
backend	John Mason (@john-mason) (UTC-4, 9.5 hours behind @kushalpandya)	Kerri Miller (@kerrizor) (UTC-7, 12.5 hours behind @kushalpandya)
frontend	Dave Pisek (@dpisek) (UTC+10, 4.5 hours ahead of @kushalpandya)	Andrew Fontaine (@afontaine) (UTC-4, 9.5 hours behind @kushalpandya)
test Quality for spec/features/*	Désirée Chevalier (@dchevalier2) (UTC-4, 9.5 hours behind @kushalpandya)	Maintainer review is optional for test Quality for spec/features/*
UX	Mike Nichols (@mnichols1) (UTC-4, 9.5 hours behind @kushalpandya)	No maintainer available

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.

Generated by Danger

added 1 commit

• 448de75d - Update issuable state badge style

Compare with previous version

Allure report

allure-report-publisher generated test report!

review-qa-blocking: test report for f99d6df2

expand test summary

+-------------------------------------------------------------------+
|                          suites summary                           |
+----------------------+--------+--------+---------+-------+--------+
|                      | passed | failed | skipped | flaky | result |
+----------------------+--------+--------+---------+-------+--------+
| Version sanity check | 0      | 0      | 1       | 0     | ➖     |
| Verify               | 12     | 0      | 1       | 12    | ❗     |
| Create               | 24     | 0      | 2       | 22    | ❗     |
| Plan                 | 41     | 0      | 1       | 41    | ❗     |
| Manage               | 31     | 0      | 2       | 29    | ❗     |
| Configure            | 0      | 0      | 1       | 0     | ➖     |
| Protect              | 2      | 0      | 0       | 2     | ❗     |
| Package              | 0      | 0      | 1       | 0     | ➖     |
+----------------------+--------+--------+---------+-------+--------+
| Total                | 110    | 0      | 9       | 106   | ❗     |
+----------------------+--------+--------+---------+-------+--------+

added 213 commits

• 448de75d...398c32e3 - 212 commits from branch master
• d2aff4e9 - Update issuable state badge style

Compare with previous version

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 12b71e76 and f99d6df2

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.46 MB	3.45 MB	-1.07 KB	-0.0 %
mainChunk	1.93 MB	1.93 MB	-	0.0 %

Significant Reduction: 2

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.on_demand_scans.edit	2.06 MB	1.87 MB	-198.77 KB	-9.4 %
pages.projects.on_demand_scans.new	2.06 MB	1.87 MB	-198.77 KB	-9.4 %

---

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• 10fd4543 - Update issuable state badge style

Compare with previous version

added 1 commit

• f3ac7226 - Update issuable state badge style

Compare with previous version

added 1 commit

• e2add842 - Update issuable state badge style

Compare with previous version

added 1 commit

• ad57f0d1 - Update issuable state badge style

Compare with previous version

added 184 commits

• ad57f0d1...dc824ba9 - 183 commits from branch master
• 80c5fe31 - Update issuable state badge style

Compare with previous version

added 1 commit

• d3733f41 - Update issuable state badge style

Compare with previous version

added 1 commit

• 044b58fe - Update issuable state badge style

Compare with previous version

added 1 commit

• 94de1730 - Update issuable state badge style

Compare with previous version

added 1 commit

• fba3c089 - Update issuable state badge style

Compare with previous version

resolved all threads

added 256 commits

• fba3c089...04626c39 - 255 commits from branch master
• 8e637b49 - Update issuable state badge style

Compare with previous version

marked this merge request as ready

changed the description

@cngo Can you do an initial review of this MR please? Note that this MR still needs UX review and approval and hence not ready for maintainer review, but since we're close to feature freeze for %15.0, I wanted to have the code review started.

requested review from @cngo

mentioned in merge request !86019 (merged)

added 1 commit

• 476da2f1 - Update issuable state badge style

Compare with previous version

changed the description

added 1 commit

• 90a1ea0f - Update issuable state badge style

Compare with previous version

requested review from @uhlexsis

Hi @kushalpandya

I took a quick look at this MR and noticed a few bugs on MRs:

• Things get a little off on smaller screens (these should wrap like they currently do on staging)

Staging	This MR

• The badge isn't vertically aligned with the rest of the text on mobile/xs:

/cc @iamphill for awareness

approved this merge request

@uhlexsis, 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:

• rspec minimal jobs
• jest minimal jobs
• merging a merge request.

added 333 commits

• 90a1ea0f...e9caf579 - 332 commits from branch master
• 82395a25 - Update issuable state badge style

Compare with previous version

requested review from @annabeldunstone

changed the description

added 1 commit

• 7b1ddfe2 - Update issuable state badge style

Compare with previous version

approved this merge request

removed review request for @cngo

@ntepluhina Can you review this MR please? Note that we don't want to merge until we have Annabel's approval too, but I don't expect any significant FE changes in the MR so we can have the review done and then merge as soon as all approvals are in.

requested review from @ntepluhina

added 103 commits

• 7b1ddfe2...7ec138f1 - 102 commits from branch master
• d58d9f65 - Update issuable state badge style

Compare with previous version

approved this merge request

removed review request for @ntepluhina

added 43 commits

• d58d9f65...3a80e2f7 - 42 commits from branch master
• f99d6df2 - Update issuable state badge style

Compare with previous version

approved this merge request

removed review request for @annabeldunstone

requested review from @ntepluhina

resolved all threads

enabled an automatic merge when the pipeline for 759cde48 succeeds

merged

mentioned in commit 460b516f

added workflowstaging-canary label and removed workflowin dev label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

mentioned in merge request !87639 (merged)

added releasedcandidate label

mentioned in merge request kubitus-project/kubitus-installer!1040 (merged)

added featureenhancement typefeature labels

added releasedpublished label and removed releasedcandidate label