Component: Labels >Scoped labels
Problem
We don't have a way to visually distinguish scoped labels (soon to be introduced in https://gitlab.com/gitlab-org/gitlab-ee/issues/9175)
Solution
For the issue at hand, we're going to add unique styling for scoped labels. The labels behave like regular labels in every other way, except for the fact that they are mutually exclusive.
Example(s)
Usage
- For labels with a dark background color and white text, the right portion of the label will have the inverse colors. So if a label is green with white text, the right half will be white with green text and green border:
- For labels with a light background and dark gray text, the right portion of the label will have a white background and the same dark gray text:
Related patterns
Removing labels using the X
icon button- https://gitlab.com/gitlab-org/gitlab-ce/issues/19249
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Read our contribution guidelines, especially the For GitLabbers section. -
Create a Sketch file in your progress folder just for this pattern and make sure that: -
You have not created a duplicate of an existing pattern, symbol, layer style, or text style. -
You have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Typography uses text styles. When applicable, colors use shared styles.
-
-
Ask a UXer to review your Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. -
QA of your Sketch file by the reviewer. -
Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates. -
QA of pattern library by the reviewer. -
Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).
Edited by Annabel Dunstone Gray