Migrates health status dropdown, align sidebar buttons with Pajamas
What does this MR do?
This MR migrates the health status dropdown within the issue sidebar. Because the dropdown was not using the recent GlButton, the styling of the dropdown when migrating just the dropdown was incorrect. It was not possible to only migrate the dropdown without also migrating the button. However, migrating the button to a Pajamas button also meant the alignment was off for all other Edit buttons in the sidebars. After discussing with @jeldergl, we landed on the following design: https://www.figma.com/proto/M73BcOBI0V6PEZfxvI5sMM/Sketchy-Sketch?node-id=699%3A103&viewport=469%2C515%2C1&scaling=min-zoom&hotspot-hints=0
This MR updates the sidebars to match this design in order to follow Pajamas and utilize gitlab ui for both the status button and dropdown.
Screenshots
| Health status dropdown before | Health status dropdown after |
|---|---|
 |
 |
| Edit button before | Edit button after |
|---|---|
 |
 |
| type | expanded before | expanded after | alignment |
|---|---|---|---|
| Issue |  |
 |
 |
| MR |  |
 |
 |
| Epic |  |
 |
 |
| Project - Bulk edit issue |  |
 |
 |
| Group - Bulk edit issue |  |
 |
 |
| Project - Bulk edit MR |  |
 |
 |
| Group - Bulk edit MR |  |
 |
 |
| Group - Bulk edit Epic |  |
 |
 |
| Milestone |  |
 |
 |
| Board |  |
 |
 |
| type | collapsed before | collapsed after | note |
|---|---|---|---|
| Issue |  |
 |
Border radius of gutter toggle has been fixed but is not reflected in screenshots |
| MR |  |
 |
Border radius of gutter toggle has been fixed but is not reflected in screenshots |
| Epic |  |
 |
Border radius of gutter toggle has been fixed but is not reflected in screenshots |
| Project - Bulk edit issue | NA | NA | |
| Group - Bulk edit issue | NA | NA | |
| Project - Bulk edit MR | NA | NA | |
| Group - Bulk edit MR | NA | NA | |
| Milestone |  |
 |
Border radius of gutter toggle has been fixed but is not reflected in screenshots |
| Board | NA | NA |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #241806 #233598 (closed)