Redesign the color picker for labels and color widget
What does this MR do and why?
This MR is part of FE: Work Items - visualize records using colors (#394864 - closed) and delivers the redesigning of color picker component for Color
widget on work item Epic
and Label
widget on issues and epics.
Link to the UX design: https://www.figma.com/file/494ivARv2dGm6h4DOIhfbB/Work-Items-%E2%80%93-Detail-Page?type=design&node-id=5528%3A210429&mode=design&t=5CLnseIdKj7PhYTO-1
Following things are covered as part of the redesigning:
- Color palette can be customised from the parent component
- Spacing changes as per the new UX
- Clicking on any palette will update the color (Not for
Label
widget) - Show error message if invalid hex code is provided as shown in UX (Not for
Label
widget)
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
Prerequisites:
- Enable the OKRs feature as mentioned in the OKRs docs (e.g.
::Feature.enabled?(:okrs_mvc, Project.find(<PROJECT_ID>))
and the namespace must have Ultimate plan). - Enable Epic work items FF -
Feature.enable(:namespace_level_work_items)
- Enable the FF to view the Edit pattern -
Feature.enable(:work_item_mvc_2)
Steps to verify:
For work item epic Color
widget:
- Login with any user
- Go to any Group > Epic
- Change the URL from
/epics
to/work_items
e.g. http://127.0.0.1:3000/groups/gitlab-org/-/epics > http://127.0.0.1:3000/groups/gitlab-org/-/work_items - Create an new Epic work item
- Go to the Epic work item detail page
- Interact with the
Color
widget
In addition to above flow, it also affects the Issues Label widget
For Issues Label
widget:
- Create an Issue from Group > Project > Issues
- Open the Issue
- Edit the Label widget on the right sidebar
- Click on Create project label
- Verify if the color selection for label is working well
For Epic Label
widget:
- Login with any user
- Go to any Group > Epics
- Create an Epic
- Go to Epic detail page
- Edit the
Label
widget on the right sidebar - Click on Create group label
- Verify if the color selection for label is working well
Related to #394864 (closed)