Refactor labels documentation

- Add new images to match the new UI
- Document the new prioritize feature

1 files changed, 56 insertions, 26 deletions

diff --git a/doc/user/project/labels.md b/doc/user/project/labels.md
index 93a14e7b8d7..4258185b7d0 100644
--- a/doc/user/project/labels.md
+++ b/doc/user/project/labels.md
@@ -15,11 +15,10 @@ that works.
 A permission level of `Developer` or higher is required in order to manage
 labels.
 
-Head over a single project and navigate to the label page by clicking on
-**Labels** in the left sidebar.
+Head over a single project and navigate to **Issues > Labels**.
 
-The first time you visit the **Labels** page you'll notice that there are no
-labels created yet.
+The first time you visit this page, you'll notice that there are no labels
+created yet.
 
 ![Generate new labels](img/labels_generate.png)
 
@@ -44,6 +43,48 @@ When you are ready press the **Create label** button to create the new label.
 
 ![New label](img/labels_new_label.png)
 
+## Prioritize labels
+
+>**Notes:**
+ - This feature was introduced in GitLab 8.9.
+ - Priority sorting is based on the highest priority label only. This might
+   change in the future, follow the discussion in
+   https://gitlab.com/gitlab-org/gitlab-ce/issues/18554.
+
+Prioritized labels are like any other label, but sorted by priority. This allows
+you to sort issues and merge requests by priority.
+
+To prioritize labels, navigate to your project's **Issues > Labels** and click
+on the star icon next to them to put them in the priority list. Click on the
+star icon again to remove them from the list.
+
+From there, you can drag them around to set the desired priority. Priority is
+set from high to low with an ascending order. Labels with no priority, count as
+having their priority set to null.
+
+![Prioritize labels](img/labels_prioritize.png)
+
+Now that you have labels prioritized, you can use the 'Priority' filter in the
+issues or merge requests tracker. Those with the highest priority label, will
+appear on top.
+
+![Filter labels by priority](img/labels_filter_by_priority.png)
+
+## Subscribe to labels
+
+If you don’t want to miss issues or merge requests that are important to you,
+simply subscribe to a label. You’ll get notified whenever the label gets added
+to an issue or merge request, making sure you don’t miss a thing.
+
+Go to your project's **Issues > Labels** area, find the label(s) you want to
+subscribe to and click on the eye icon. Click again to unsubscribe.
+
+![Subscribe to labels](img/labels_subscribe.png)
+
+If you work on a large or popular project, try subscribing only to the labels
+that are relevant to you. You’ll notice it’ll be much easier to focus on what’s
+important.
+
 ## Create a new label right from the issue tracker
 
 >**Note:**
@@ -54,8 +95,8 @@ label, only to realize it doesn't exist. Instead of going to the **Labels**
 page and being distracted from your original purpose, you can create new
 labels on the fly.
 
-Just hit **New Label** from the dropdown list, provide a name, pick a color
-and hit **Create**.
+Select **Create new** from the labels dropdown list, provide a name, pick a
+color and hit **Create**.
 
 ![Create new label on the fly](img/labels_new_label_on_the_fly_create.png)
 ![New label on the fly](img/labels_new_label_on_the_fly.png)
@@ -64,26 +105,25 @@ and hit **Create**.
 
 There are generally two ways to assign a label to an issue or merge request.
 
----
-
 You can assign a label when you first create or edit an issue or merge request.
 
 ![Assign label in new issue](img/labels_assign_label_in_new_issue.png)
 
 ---
 
-The second way is by using the right sidebar. Expand it and hit **Edit**. Start
-typing the name of the label you are looking for to narrow down the list and
-select it. Once done, click outside the sidebar area for the changes to take
-effect.
+The second way is by using the right sidebar when inside an issue or merge
+request. Expand it and hit **Edit** in the labels area. Start typing the name
+of the label you are looking for to narrow down the list, and select it. You
+can add more than one labels at once. When done, click outside the sidebar area
+for the changes to take effect.
 
 ![Assign label in sidebar](img/labels_assign_label_sidebar.png)
 ![Save labels in sidebar](img/labels_assign_label_sidebar_saved.png)
 
 ---
 
-To remove labels, follow the same procedure like when adding them and hit the
-little **x** mark next to each one.
+To remove labels, expand the left sidebar and unmark them from the labels list.
+Simple as that.
 
 ##  Use labels to filter issues
 
@@ -100,18 +140,8 @@ label description like shown below.
 ---
 
 And if you added a description to your label, you can see it by hovering your
-mouse over the label in the issue tracker.
+mouse over the label in the issue tracker or wherever else the label is
+rendered.
 
 ![Label tooltips](img/labels_description_tooltip.png)
 
-## Subscribe to labels
-
-If you don’t want to miss issues or merge requests that are important to you,
-simply subscribe to a label. You’ll get notified whenever the label gets added
-to an issue or merge request, making sure you don’t miss a thing.
-
-![Subscribe to labels](img/labels_subscribe.png)
-
-If you work on a large or popular project, try subscribing only to the labels
-that are relevant to you. You’ll notice it’ll be much easier to focus on what’s
-important.