Frontend for showing × on hover on label to remove the label in sidebar
We add a chip with an x icon (icn/close) that can be clicked to delete the label. The chip will change its style and show a background on hover and active states.
The shape of the chip will be a 16px x 16px circle. The icon inside should be 8px x 8px. The margin with the label name is 2px and the padding on the right side of the chip is 4px. Spec previous will be uploaded with all these measurements.
The target area of the chip will be a 16px x 16px square indepndently of its shape.
We currently underline the label's name when hovering. This underline should be removed when hovering over the chip.
| States | Sidebar |
|---|---|
 |
 |
The colors of the badge are based on the label name color:
| Resting | Hover | Active | |
|---|---|---|---|
| Icon | Color: same as text, Opacity: 100%
|
Color: same as text, Opacity: 100%
|
Color: same as label, Opacity: 100%
|
| Icon Background | Color: none, Opacity: 0%
|
Color: same as text, Opacity: 30%
|
Color: same as text, Opacity: 100%
|
In scope
- This should apply to issue, merge request, and epic pages.
- This should apply to the slide out board sidebar for project boards and group boards.