Frontend for showing × 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 independently of its shape.
The hover state for the circle should revert to the color in the label when a white background is used (such as with scoped labels) and the 'x' icon color should be the same color as either the label color or the text color when on a white background (if applicable).
Solution
Screen_Recording_2020-06-16_at_11.24.51_AM
See Figma UI Pajamas kit for more details on tokens
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.