From c6a4f9fc5b98024d4af872b0009b90c36bc2e595 Mon Sep 17 00:00:00 2001
From: Grzegorz Bizon <grzesiek.bizon@gmail.com>
Date: Mon, 21 Nov 2016 11:27:28 +0100
Subject: Update some docs to reflect MWPS name change

---
 doc/development/code_review.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'doc/development')

diff --git a/doc/development/code_review.md b/doc/development/code_review.md
index c5c23b5c0b8..4bf0e7197e9 100644
--- a/doc/development/code_review.md
+++ b/doc/development/code_review.md
@@ -70,8 +70,8 @@ experience, refactors the existing code). Then:
 - After a round of line notes, it can be helpful to post a summary note such as
   "LGTM :thumbsup:", or "Just a couple things to address."
 - Avoid accepting a merge request before the build succeeds. Of course, "Merge
-  When Build Succeeds" (MWBS) is fine.
-- If you set the MR to "Merge When Build Succeeds", you should take over
+  When Pipeline Succeeds" (MWPS) is fine.
+- If you set the MR to "Merge When Pipeline Succeeds", you should take over
   subsequent revisions for anything that would be spotted after that.
 
 ## Credits
-- 
cgit v1.2.1


From 39378d0e976d9552e96b300cb7f43874424d13b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Coutable?= <remy@rymai.me>
Date: Wed, 23 Nov 2016 12:58:16 +0100
Subject: Document that we always use `do...end` for `before` in RSpec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[ci skip]

Signed-off-by: Rémy Coutable <remy@rymai.me>
---
 doc/development/testing.md | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'doc/development')

diff --git a/doc/development/testing.md b/doc/development/testing.md
index 6106e47daa0..dbea6b9c9aa 100644
--- a/doc/development/testing.md
+++ b/doc/development/testing.md
@@ -63,6 +63,8 @@ the command line via `bundle exec teaspoon`, or via a web browser at
 - Use `.method` to describe class methods and `#method` to describe instance
   methods.
 - Use `context` to test branching logic.
+- Use multi-line `do...end` blocks for `before` and `after`, even when it would
+  fit on a single line.
 - Don't `describe` symbols (see [Gotchas](gotchas.md#dont-describe-symbols)).
 - Don't assert against the absolute value of a sequence-generated attribute (see [Gotchas](gotchas.md#dont-assert-against-the-absolute-value-of-a-sequence-generated-attribute)).
 - Don't supply the `:each` argument to hooks since it's the default.
-- 
cgit v1.2.1


From 2ec4d167b68005ece13ed789c03f9816d90e8239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Coutable?= <remy@rymai.me>
Date: Tue, 15 Nov 2016 18:28:14 +0100
Subject: Refactor issuable description and metadata form sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rémy Coutable <remy@rymai.me>
---
 doc/development/limit_ee_conflicts.md | 111 +++++++++++++++++++++++++---------
 1 file changed, 82 insertions(+), 29 deletions(-)

(limited to 'doc/development')

diff --git a/doc/development/limit_ee_conflicts.md b/doc/development/limit_ee_conflicts.md
index b7e6387838e..568dedf1669 100644
--- a/doc/development/limit_ee_conflicts.md
+++ b/doc/development/limit_ee_conflicts.md
@@ -143,109 +143,162 @@ to resolve when you add the indentation to the equation.
 For instance this kind of thing:
 
 ```haml
+.form-group.detail-page-description
+  = form.label :description, 'Description', class: 'control-label'
+  .col-sm-10
+    = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
+      = render 'projects/zen', f: form, attr: :description,
+                               classes: 'note-textarea',
+                               placeholder: "Write a comment or drag your files here...",
+                               supports_slash_commands: !issuable.persisted?
+      = render 'projects/notes/hints', supports_slash_commands: !issuable.persisted?
+      .clearfix
+      .error-alert
+- if issuable.is_a?(Issue)
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = form.label :confidential do
+          = form.check_box :confidential
+          This issue is confidential and should only be visible to team members with at least Reporter access.
 - if can?(current_user, :"admin_#{issuable.to_ability_name}", issuable.project)
   - has_due_date = issuable.has_attribute?(:due_date)
   %hr
   .row
     %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
       .form-group.issue-assignee
-        = f.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+        = form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
         .col-sm-10{ class: ("col-lg-8" if has_due_date) }
           .issuable-form-select-holder
             - if issuable.assignee_id
-              = f.hidden_field :assignee_id
+              = form.hidden_field :assignee_id
             = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
               placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
       .form-group.issue-milestone
-        = f.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
+        = form.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
         .col-sm-10{ class: ("col-lg-8" if has_due_date) }
           .issuable-form-select-holder
             = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
       .form-group
         - has_labels = @labels && @labels.any?
-        = f.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
-        = f.hidden_field :label_ids, multiple: true, value: ''
+        = form.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
+        = form.hidden_field :label_ids, multiple: true, value: ''
         .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
           .issuable-form-select-holder
-            = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false, show_menu_above: 'true' }, dropdown_title: "Select label"
-
+            = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label"
       - if issuable.respond_to?(:weight)
+        - weight_options = Issue.weight_options
+        - weight_options.delete(Issue::WEIGHT_ALL)
+        - weight_options.delete(Issue::WEIGHT_ANY)
         .form-group
-          = f.label :label_ids, class: "control-label #{"col-lg-4" if has_due_date}" do
+          = form.label :label_ids, class: "control-label #{"col-lg-4" if has_due_date}" do
             Weight
           .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-            = f.select :weight, issues_weight_options(issuable.weight, edit: true), { include_blank: true },
-              { class: 'select2 js-select2', data: { placeholder: "Select weight" }}
-
+            .issuable-form-select-holder
+              - if issuable.weight
+                = form.hidden_field :weight
+              = dropdown_tag(issuable.weight || "Weight", options: { title: "Select weight", toggle_class: 'js-weight-select js-issuable-form-weight', dropdown_class: "dropdown-menu-selectable dropdown-menu-weight",
+                placeholder: "Search weight", data: { field_name: "#{issuable.class.model_name.param_key}[weight]" , default_label: "Weight" } }) do
+                %ul
+                  - weight_options.each do |weight|
+                    %li
+                      %a{href: "#", data: { id: weight, none: weight === Issue::WEIGHT_NONE }, class: ("is-active" if issuable.weight == weight)}
+                        = weight
     - if has_due_date
       .col-lg-6
         .form-group
-          = f.label :due_date, "Due date", class: "control-label"
+          = form.label :due_date, "Due date", class: "control-label"
           .col-sm-10
             .issuable-form-select-holder
-              = f.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
+              = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
 ```
 
 could be simplified by using partials:
 
 ```haml
-= render 'metadata_form', issuable: issuable
+= render 'shared/issuable/form/description', issuable: issuable, form: form
+
+- if issuable.respond_to?(:confidential)
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      .checkbox
+        = form.label :confidential do
+          = form.check_box :confidential
+          This issue is confidential and should only be visible to team members with at least Reporter access.
+
+= render 'shared/issuable/form/metadata', issuable: issuable, form: form
 ```
 
-and then the `_metadata_form.html.haml` could be as follows:
+and then the `app/views/shared/issuable/form/_metadata.html.haml` could be as follows:
 
 ```haml
+- issuable = local_assigns.fetch(:issuable)
+
 - return unless can?(current_user, :"admin_#{issuable.to_ability_name}", issuable.project)
 
 - has_due_date = issuable.has_attribute?(:due_date)
+- has_labels = @labels && @labels.any?
+- form = local_assigns.fetch(:form)
+
 %hr
 .row
   %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
     .form-group.issue-assignee
-      = f.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+      = form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
       .col-sm-10{ class: ("col-lg-8" if has_due_date) }
         .issuable-form-select-holder
           - if issuable.assignee_id
-            = f.hidden_field :assignee_id
+            = form.hidden_field :assignee_id
           = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
-            placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
+            placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: issuable.project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
     .form-group.issue-milestone
-      = f.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
+      = form.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
       .col-sm-10{ class: ("col-lg-8" if has_due_date) }
         .issuable-form-select-holder
           = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
     .form-group
       - has_labels = @labels && @labels.any?
-      = f.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
-      = f.hidden_field :label_ids, multiple: true, value: ''
+      = form.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
+      = form.hidden_field :label_ids, multiple: true, value: ''
       .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
         .issuable-form-select-holder
-          = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false, show_menu_above: 'true' }, dropdown_title: "Select label"
+          = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label"
 
-    = render 'weight_form', issuable: issuable, has_due_date: has_due_date
+    = render "shared/issuable/form/weight", issuable: issuable, form: form
 
   - if has_due_date
     .col-lg-6
       .form-group
-        = f.label :due_date, "Due date", class: "control-label"
+        = form.label :due_date, "Due date", class: "control-label"
         .col-sm-10
           .issuable-form-select-holder
-            = f.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
+            = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
 ```
 
-and then the `_weight_form.html.haml` could be as follows:
+and then the `app/views/shared/issuable/form/_weight.html.haml` could be as follows:
 
 ```haml
+- issuable = local_assigns.fetch(:issuable)
+
 - return unless issuable.respond_to?(:weight)
 
 - has_due_date = issuable.has_attribute?(:due_date)
+- form = local_assigns.fetch(:form)
 
 .form-group
-  = f.label :label_ids, class: "control-label #{"col-lg-4" if has_due_date}" do
+  = form.label :label_ids, class: "control-label #{"col-lg-4" if has_due_date}" do
     Weight
   .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-    = f.select :weight, issues_weight_options(issuable.weight, edit: true), { include_blank: true },
-      { class: 'select2 js-select2', data: { placeholder: "Select weight" }}
+    .issuable-form-select-holder
+      - if issuable.weight
+        = form.hidden_field :weight
+
+      = weight_dropdown_tag(issuable, toggle_class: 'js-issuable-form-weight') do
+        %ul
+          - Issue.weight_options.each do |weight|
+            %li
+              %a{ href: '#', data: { id: weight, none: weight === Issue::WEIGHT_NONE }, class: ("is-active" if issuable.weight == weight) }
+                = weight
 ```
 
 Note:
-- 
cgit v1.2.1


From a1f53e92caa8a95889c3fee683f8d0b2590228ac Mon Sep 17 00:00:00 2001
From: awhildy <allison@gitlab.com>
Date: Fri, 25 Nov 2016 20:19:29 -0800
Subject: [ci skip] UX Guide: add guidance for max height for dropdowns

Fix spelling
---
 doc/development/ux_guide/components.md | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'doc/development')

diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index 764c3355714..57e5d03d608 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -91,7 +91,9 @@ TODO: Will update this section when the new filters UI is implemented.
 
 ![Dropdown states](img/components-dropdown.png)
 
+### Max size
 
+The max height for dropdowns should target **10-15 items**. If the height of the dropdown is too large, the list becomes very hard to parse and it is easy to visually lose track of the item you are looking for. Usability also suffers as more mouse movement is required, and you have a larger area in which you hijack the scroll away from the page level. While it may initially seem counterintuitive to not show as many items as you can, it is actually quicker and easier to process the information when it is cropped at a reasonable height.
 
 ---
 
-- 
cgit v1.2.1


From 5a5e03b5aa01c837ae4e1fcc02f7f9def960e98b Mon Sep 17 00:00:00 2001
From: awhildy <allison@gitlab.com>
Date: Mon, 21 Nov 2016 13:30:55 -0800
Subject: [ci skip] UX Guide: Anchor hover guidance include color change

Primary and secondary links should be dark blue on hover

Update anchor image to dark blue for secondary

Clean up markdown

Fix anchorlinks image
---
 doc/development/ux_guide/components.md              |  18 +++++-------------
 .../ux_guide/img/components-anchorlinks.png         | Bin 19948 -> 30089 bytes
 2 files changed, 5 insertions(+), 13 deletions(-)

(limited to 'doc/development')

diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index 57e5d03d608..8e51edd23ef 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -43,7 +43,7 @@ Primary links are blue in their rest state. Secondary links (such as the time st
 
 #### Hover
 
-An underline should always be added on hover. A gray link becomes blue on hover.
+On hover, an underline should be added and the color should change. Both the primary and secondary link should become the darker blue color on hover.
 
 #### Focus
 
@@ -72,9 +72,7 @@ Secondary buttons are for alternative commands. They should be conveyed by a bu
 ### Icon and text treatment
 Text should be in sentence case, where only the first word is capitalized. "Create issue" is correct, not "Create Issue". Buttons should only contain an icon or a text, not both.
 
->>>
-TODO: Rationalize this. Ensure that we still believe this.
->>>
+> TODO: Rationalize this. Ensure that we still believe this.
 
 ### Colors
 Follow the color guidance on the [basics](basics.md#color) page. The default color treatment is the white/grey button.
@@ -85,9 +83,7 @@ Follow the color guidance on the [basics](basics.md#color) page. The default col
 
 Dropdowns are used to allow users to choose one (or many) options from a list of options. If this list of options is more 20, there should generally be a way to search through and filter the options (see the complex filter dropdowns below.)
 
->>>
-TODO: Will update this section when the new filters UI is implemented.
->>>
+> TODO: Will update this section when the new filters UI is implemented.
 
 ![Dropdown states](img/components-dropdown.png)
 
@@ -166,9 +162,7 @@ Cover blocks are generally used to create a heading element for a page, such as
 
 ## Panels
 
->>>
-TODO: Catalog how we are currently using panels and rationalize how they relate to alerts
->>>
+> TODO: Catalog how we are currently using panels and rationalize how they relate to alerts
 
 ![Panels](img/components-panels.png)
 
@@ -176,9 +170,7 @@ TODO: Catalog how we are currently using panels and rationalize how they relate
 
 ## Alerts
 
->>>
-TODO: Catalog how we are currently using alerts
->>>
+> TODO: Catalog how we are currently using alerts
 
 ![Alerts](img/components-alerts.png)
 
diff --git a/doc/development/ux_guide/img/components-anchorlinks.png b/doc/development/ux_guide/img/components-anchorlinks.png
index 7dd6a8a3876..4a9c730566c 100644
Binary files a/doc/development/ux_guide/img/components-anchorlinks.png and b/doc/development/ux_guide/img/components-anchorlinks.png differ
-- 
cgit v1.2.1


From 297c8683982c4ee83fc6b866f121b6aa18f5488a Mon Sep 17 00:00:00 2001
From: Achilleas Pipinellis <axilleas@axilleas.me>
Date: Mon, 28 Nov 2016 18:27:29 +0100
Subject: Add guidelines in doc linking with HAML

[ci skip]
---
 doc/development/doc_styleguide.md | 71 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

(limited to 'doc/development')

diff --git a/doc/development/doc_styleguide.md b/doc/development/doc_styleguide.md
index b137e6ae82e..fc948a7a116 100644
--- a/doc/development/doc_styleguide.md
+++ b/doc/development/doc_styleguide.md
@@ -113,6 +113,77 @@ merge request.
   add an alternative text: `[identifier]: https://example.com "Alternative text"`
   that appears when hovering your mouse on a link
 
+### Linking to inline docs
+
+Sometimes it's needed to link to the built-in documentation that GitLab provides
+under `/help`. This is normally done in files inside the `app/views/` directory
+with the help of the `help_page_path` helper method.
+
+In its simplest form, the HAML code to generate a link to the `/help` page is:
+
+```haml
+= link_to 'Help page', help_page_path('user/permissions')
+```
+
+The `help_page_path` contains the path to the document you want to link to with
+the following conventions:
+
+- it is relative to the `doc/` directory in the GitLab repository
+- the `.md` extension must be omitted
+- it must not end with a slash (`/`)
+
+Below are some special cases where should be used depending on the context.
+You can combine one or more of the following:
+
+1. **Linking to an anchor link.** Use `anchor` as part of the `help_page_path`
+   method:
+
+    ```haml
+    = link_to 'Help page', help_page_path('user/permissions', anchor: 'anchor-link')
+    ```
+
+1. **Opening links in a new tab.** This should be the default behavior:
+
+    ```haml
+    = link_to 'Help page', help_page_path('user/permissions'), target: '_blank'
+    ```
+
+1. **Linking to a circle icon.** Usually used in settings where a long
+   description cannot be used, like near checkboxes. You can basically use
+   any font awesome icon, but prefer the `question-circle`:
+
+    ```haml
+    = link_to icon('question-circle'), help_page_path('user/permissions')
+    ```
+
+1. **Using a button link.** Useful in places where text would be out of context
+   with the rest of the page layout:
+
+    ```haml
+    = link_to 'Help page', help_page_path('user/permissions'),  class: 'btn btn-info'
+    ```
+
+1. **Underlining a link.**
+
+    ```haml
+    = link_to 'Help page', help_page_path('user/permissions'), class: 'underlined-link'
+    ```
+
+1. **Using links inline of some text.**
+
+    ```haml
+    Description to #{link_to 'Help page', help_page_path('user/permissions')}.
+    ```
+
+1. **Adding a period at the end of the sentence.** Useful when you don't want
+   the period to be part of the link:
+
+    ```haml
+    = succeed '.' do
+      Learn more in the
+      = link_to 'Help page', help_page_path('user/permissions')
+    ```
+
 ## Images
 
 - Place images in a separate directory named `img/` in the same directory where
-- 
cgit v1.2.1


From 5e05f9c5c2cfaf14cc0337c23ff54f86c5d5f5a8 Mon Sep 17 00:00:00 2001
From: Nick Thomas <nick@gitlab.com>
Date: Fri, 4 Nov 2016 11:43:02 +0000
Subject: Add StackProf to the Gemfile, along with a utility to get a profile
 for a spec

---
 doc/development/performance.md | 110 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)

(limited to 'doc/development')

diff --git a/doc/development/performance.md b/doc/development/performance.md
index 8337c2d9cb3..5c43ae7b79a 100644
--- a/doc/development/performance.md
+++ b/doc/development/performance.md
@@ -101,6 +101,116 @@ In short:
 5. If you must write a benchmark use the benchmark-ips Gem instead of Ruby's
    `Benchmark` module.
 
+## Profiling
+
+By collecting snapshots of process state at regular intervals, profiling allows
+you to see where time is spent in a process. The [StackProf](https://github.com/tmm1/stackprof)
+gem is included in GitLab's development environment, allowing you to investigate
+the behaviour of suspect code in detail.
+
+It's important to note that profiling an application *alters its performance*,
+and will generally be done *in an unrepresentative environment*. In particular,
+a method is not necessarily troublesome just because it is executed many times,
+or takes a long time to execute. Profiles are tools you can use to better
+understand what is happening in an application - using that information wisely
+is up to you!
+
+Keeping that in mind, to create a profile, identify (or create) a spec that
+exercises the troublesome code path, then run it using the `bin/rspec-stackprof`
+helper, e.g.:
+
+```
+$ LIMIT=10 bin/rspec-stackprof spec/policies/project_policy_spec.rb
+8/8 |====== 100 ======>| Time: 00:00:18
+
+Finished in 18.19 seconds (files took 4.8 seconds to load)
+8 examples, 0 failures
+
+==================================
+ Mode: wall(1000)
+ Samples: 17033 (5.59% miss rate)
+ GC: 1901 (11.16%)
+==================================
+    TOTAL    (pct)     SAMPLES    (pct)     FRAME
+     6000  (35.2%)        2566  (15.1%)     Sprockets::Cache::FileStore#get
+     2018  (11.8%)         888   (5.2%)     ActiveRecord::ConnectionAdapters::PostgreSQLAdapter#exec_no_cache
+     1338   (7.9%)         640   (3.8%)     ActiveRecord::ConnectionAdapters::PostgreSQL::DatabaseStatements#execute
+     3125  (18.3%)         394   (2.3%)     Sprockets::Cache::FileStore#safe_open
+      913   (5.4%)         301   (1.8%)     ActiveRecord::ConnectionAdapters::PostgreSQLAdapter#exec_cache
+      288   (1.7%)         288   (1.7%)     ActiveRecord::Attribute#initialize
+      246   (1.4%)         246   (1.4%)     Sprockets::Cache::FileStore#safe_stat
+      295   (1.7%)         193   (1.1%)     block (2 levels) in class_attribute
+      187   (1.1%)         187   (1.1%)     block (4 levels) in class_attribute
+```
+
+You can limit the specs that are run by passing any arguments `rspec` would
+normally take.
+
+The output is sorted by the `Samples` column by default. This is the number of
+samples taken where the method is the one currently being executed. The `Total`
+column shows the number of samples taken where the method, or any of the methods
+it calls, were being executed.
+
+To create a graphical view of the call stack:
+
+```shell
+$ stackprof tmp/project_policy_spec.rb.dump --graphviz > project_policy_spec.dot
+$ dot -Tsvg project_policy_spec.dot > project_policy_spec.svg
+```
+
+To load the profile in [kcachegrind](https://kcachegrind.github.io/):
+
+```
+$ stackprof tmp/project_policy_spec.dump --callgrind > project_policy_spec.callgrind
+$ kcachegrind project_policy_spec.callgrind # Linux
+$ qcachegrind project_policy_spec.callgrind # Mac
+```
+
+It may be useful to zoom in on a specific method, e.g.:
+
+```
+$ stackprof tmp/project_policy_spec.rb.dump --method warm_asset_cache
+TestEnv#warm_asset_cache (/Users/lupine/dev/gitlab.com/gitlab-org/gitlab-development-kit/gitlab/spec/support/test_env.rb:164)
+  samples:     0 self (0.0%)  /   6288 total (36.9%)
+  callers:
+    6288  (  100.0%)  block (2 levels) in <top (required)>
+  callees (6288 total):
+    6288  (  100.0%)  Capybara::RackTest::Driver#visit
+  code:
+                                  |   164  |   def warm_asset_cache
+                                  |   165  |     return if warm_asset_cache?
+                                  |   166  |     return unless defined?(Capybara)
+                                  |   167  |
+ 6288   (36.9%)                   |   168  |     Capybara.current_session.driver.visit '/'
+                                  |   169  |   end
+$ stackprof tmp/project_policy_spec.rb.dump --method BasePolicy#abilities
+BasePolicy#abilities (/Users/lupine/dev/gitlab.com/gitlab-org/gitlab-development-kit/gitlab/app/policies/base_policy.rb:79)
+  samples:     0 self (0.0%)  /     50 total (0.3%)
+  callers:
+      25  (   50.0%)  BasePolicy.abilities
+      25  (   50.0%)  BasePolicy#collect_rules
+  callees (50 total):
+      25  (   50.0%)  ProjectPolicy#rules
+      25  (   50.0%)  BasePolicy#collect_rules
+  code:
+                                  |    79  |   def abilities
+                                  |    80  |     return RuleSet.empty if @user && @user.blocked?
+                                  |    81  |     return anonymous_abilities if @user.nil?
+   50    (0.3%)                   |    82  |     collect_rules { rules }
+                                  |    83  |   end
+```
+
+Since the profile includes the work done by the test suite as well as the
+application code, these profiles can be used to investigate slow tests as well.
+However, for smaller runs (like this example), this means that the cost of
+setting up the test suite will tend to dominate.
+
+It's also possible to modify the application code in-place to output profiles
+whenever a particular code path is triggered without going through the test
+suite first. See the
+[StackProf documentation](https://github.com/tmm1/stackprof/blob/master/README.md)
+for details.
+
 ## Importance of Changes
 
 When working on performance improvements, it's important to always ask yourself
-- 
cgit v1.2.1


From 5b052605b7eb7281f88040962e530ac80bbe3774 Mon Sep 17 00:00:00 2001
From: Grzegorz Bizon <grzesiek.bizon@gmail.com>
Date: Wed, 30 Nov 2016 10:13:47 +0100
Subject: Extend code review docs with chapter about the right balance

---
 doc/development/code_review.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'doc/development')

diff --git a/doc/development/code_review.md b/doc/development/code_review.md
index c5c23b5c0b8..709cefcb5c6 100644
--- a/doc/development/code_review.md
+++ b/doc/development/code_review.md
@@ -70,10 +70,36 @@ experience, refactors the existing code). Then:
 - After a round of line notes, it can be helpful to post a summary note such as
   "LGTM :thumbsup:", or "Just a couple things to address."
 - Avoid accepting a merge request before the build succeeds. Of course, "Merge
-  When Build Succeeds" (MWBS) is fine.
+  When Pipeline Succeeds" is fine.
 - If you set the MR to "Merge When Build Succeeds", you should take over
   subsequent revisions for anything that would be spotted after that.
 
+## The right balance
+
+One of the most difficult things during the code review is finding the right
+balance in how deep the reviewer can interfere with the code created by a
+reviewee.
+
+- Learning how to find the right balance takes time, that is why we have
+  minibosses that become merge request endbosses after some time spent on
+  reviewing merge requests.
+- Finding bugs and improving code style is important, but thinking about good
+  design is important as well. Building abstractions and good design is what
+  makes it possible to hide complexity and is a leverage for the future work.
+- Asking reviewee to change the design sometimes means the complete rewrite of
+  the contributed code. It is usually a good idea to ask other merge request
+  endboss before doing it, but have the courage to do it when you believe it is
+  important.
+- There is a difference in doing things right and doing things right now.
+  Ideally, we should do the former, but in the real world we need the latter as
+  well. The good example is a security fix which should be released as soon as
+  possible. Asking reviewee to do the major refactoring in the merge request
+  that is an urgent fix should be avoided.
+- Doing things well today is usually better than doing something perfectly
+  tomorrow. Shipping a kludge today is usually worse than doing something well
+  tomorrow. When you are not able to find the right balance, ask other people
+  about their opinion.
+
 ## Credits
 
 Largely based on the [thoughtbot code review guide].
-- 
cgit v1.2.1


From 94ae12f6979db948687464e39f76a39fa5f43bae Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Mon, 21 Nov 2016 13:41:15 -0600
Subject: remove id collision caveat from documentation

---
 doc/development/gotchas.md | 48 ----------------------------------------------
 1 file changed, 48 deletions(-)

(limited to 'doc/development')

diff --git a/doc/development/gotchas.md b/doc/development/gotchas.md
index 7bfc9cb361f..0f78e8238af 100644
--- a/doc/development/gotchas.md
+++ b/doc/development/gotchas.md
@@ -141,51 +141,3 @@ in an initializer._
 ### Further reading
 
 - Stack Overflow: [Why you should not write inline JavaScript](http://programmers.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting)
-
-## ID-based CSS selectors need to be a bit more specific
-
-Normally, because HTML `id` attributes need to be unique to the page, it's
-perfectly fine to write some JavaScript like the following:
-
-```javascript
-$('#js-my-selector').hide();
-```
-
-However, there's a feature of GitLab's Markdown processing that [automatically
-adds anchors to header elements][ToC Processing], with the `id` attribute being
-automatically generated based on the content of the header.
-
-Unfortunately, this feature makes it possible for user-generated content to
-create a header element with the same `id` attribute we're using in our
-selector, potentially breaking the JavaScript behavior. A user could break the
-above example with the following Markdown:
-
-```markdown
-## JS My Selector
-```
-
-Which gets converted to the following HTML:
-
-```html
-<h2>
-  <a id="js-my-selector" class="anchor" href="#js-my-selector" aria-hidden="true"></a>
-  JS My Selector
-</h2>
-```
-
-[ToC Processing]: https://gitlab.com/gitlab-org/gitlab-ce/blob/8-4-stable/lib/banzai/filter/table_of_contents_filter.rb#L31-37
-
-### Solution
-
-The current recommended fix for this is to make our selectors slightly more
-specific:
-
-```javascript
-$('div#js-my-selector').hide();
-```
-
-### Further reading
-
-- Issue: [Merge request ToC anchor conflicts with tabs](https://gitlab.com/gitlab-org/gitlab-ce/issues/3908)
-- Merge Request: [Make tab target selectors less naive](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2023)
-- Merge Request: [Make cross-project reference's clipboard target less naive](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/2024)
-- 
cgit v1.2.1


From 85c4aa4a6725407a90f8b313488584f193e1b55a Mon Sep 17 00:00:00 2001
From: Grzegorz Bizon <grzesiek.bizon@gmail.com>
Date: Thu, 1 Dec 2016 09:34:15 +0100
Subject: Copy-edit text about right balance in code reviews

[ci skip]
---
 doc/development/code_review.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'doc/development')

diff --git a/doc/development/code_review.md b/doc/development/code_review.md
index 709cefcb5c6..52ee633c43a 100644
--- a/doc/development/code_review.md
+++ b/doc/development/code_review.md
@@ -76,25 +76,25 @@ experience, refactors the existing code). Then:
 
 ## The right balance
 
-One of the most difficult things during the code review is finding the right
+One of the most difficult things during code review is finding the right
 balance in how deep the reviewer can interfere with the code created by a
 reviewee.
 
-- Learning how to find the right balance takes time, that is why we have
+- Learning how to find the right balance takes time; that is why we have
   minibosses that become merge request endbosses after some time spent on
   reviewing merge requests.
 - Finding bugs and improving code style is important, but thinking about good
   design is important as well. Building abstractions and good design is what
-  makes it possible to hide complexity and is a leverage for the future work.
-- Asking reviewee to change the design sometimes means the complete rewrite of
-  the contributed code. It is usually a good idea to ask other merge request
-  endboss before doing it, but have the courage to do it when you believe it is
-  important.
+  makes it possible to hide complexity and makes future changes easier.
+- Asking the reviewee to change the design sometimes means the complete rewrite
+  of the contributed code. It's usually a good idea to ask another merge
+  request endboss before doing it, but have the courage to do it when you
+  believe it is important.
 - There is a difference in doing things right and doing things right now.
   Ideally, we should do the former, but in the real world we need the latter as
-  well. The good example is a security fix which should be released as soon as
-  possible. Asking reviewee to do the major refactoring in the merge request
-  that is an urgent fix should be avoided.
+  well. A good example is a security fix which should be released as soon as
+  possible. Asking the reviewee to do the major refactoring in the merge
+  request that is an urgent fix should be avoided.
 - Doing things well today is usually better than doing something perfectly
   tomorrow. Shipping a kludge today is usually worse than doing something well
   tomorrow. When you are not able to find the right balance, ask other people
-- 
cgit v1.2.1


From ebef1a8441b451e2718860538c6e6261ea616bf8 Mon Sep 17 00:00:00 2001
From: Grzegorz Bizon <grzesiek.bizon@gmail.com>
Date: Fri, 2 Dec 2016 08:55:53 +0100
Subject: Remove change to MWBS in code review guideline

[ci skip]
---
 doc/development/code_review.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'doc/development')

diff --git a/doc/development/code_review.md b/doc/development/code_review.md
index 52ee633c43a..e1fb8102b67 100644
--- a/doc/development/code_review.md
+++ b/doc/development/code_review.md
@@ -70,7 +70,7 @@ experience, refactors the existing code). Then:
 - After a round of line notes, it can be helpful to post a summary note such as
   "LGTM :thumbsup:", or "Just a couple things to address."
 - Avoid accepting a merge request before the build succeeds. Of course, "Merge
-  When Pipeline Succeeds" is fine.
+  When Build Succeeds" (MWBS) is fine.
 - If you set the MR to "Merge When Build Succeeds", you should take over
   subsequent revisions for anything that would be spotted after that.
 
-- 
cgit v1.2.1


From 877c225c4a5c3a794a5ff1af058bc7581e299bac Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 5 Dec 2016 11:10:35 +0000
Subject: Document button secondary states. Update icons and color section

Describe hover, focus and active states for primary and secondary
buttons.

Organized the icons section in a table. Replaced images for icons
so they are all the same size.

Organized the color section in a table. Replaced the images with
new ones so the table would have a more manageable size. Updated
the values for some colors to show the $color-light shade.

Remove commented sections

Remove `db/schema.rb`

Add db/schema.rb from origin/master

Fix typos
---
 doc/development/ux_guide/basics.md                 |  50 +++++++--------------
 doc/development/ux_guide/components.md             |  21 ++++++++-
 .../ux_guide/img/button-close--active.png          | Bin 0 -> 1385 bytes
 .../ux_guide/img/button-close--hover.png           | Bin 0 -> 1015 bytes
 .../ux_guide/img/button-close--resting.png         | Bin 0 -> 1271 bytes
 .../ux_guide/img/button-danger--active.png         | Bin 0 -> 1450 bytes
 .../ux_guide/img/button-danger--hover.png          | Bin 0 -> 1095 bytes
 .../ux_guide/img/button-danger--resting.png        | Bin 0 -> 1376 bytes
 .../ux_guide/img/button-info--active.png           | Bin 0 -> 1442 bytes
 .../ux_guide/img/button-info--hover.png            | Bin 0 -> 1079 bytes
 .../ux_guide/img/button-info--resting.png          | Bin 0 -> 1296 bytes
 .../ux_guide/img/button-spam--active.png           | Bin 0 -> 1435 bytes
 .../ux_guide/img/button-spam--hover.png            | Bin 0 -> 1108 bytes
 .../ux_guide/img/button-spam--resting.png          | Bin 0 -> 1377 bytes
 .../ux_guide/img/button-success--active.png        | Bin 0 -> 1510 bytes
 .../ux_guide/img/button-success--hover.png         | Bin 0 -> 1151 bytes
 .../ux_guide/img/button-success--resting.png       | Bin 0 -> 1447 bytes
 .../img/button-success-secondary--active.png       | Bin 0 -> 1466 bytes
 .../img/button-success-secondary--hover.png        | Bin 0 -> 1091 bytes
 .../img/button-success-secondary--resting.png      | Bin 0 -> 1394 bytes
 .../ux_guide/img/button-warning--active.png        | Bin 0 -> 1388 bytes
 .../ux_guide/img/button-warning--hover.png         | Bin 0 -> 1040 bytes
 .../ux_guide/img/button-warning--resting.png       | Bin 0 -> 1296 bytes
 doc/development/ux_guide/img/color-blue.png        | Bin 2725 -> 3555 bytes
 doc/development/ux_guide/img/color-green.png       | Bin 3008 -> 3852 bytes
 doc/development/ux_guide/img/color-grey.png        | Bin 2384 -> 3523 bytes
 doc/development/ux_guide/img/color-orange.png      | Bin 3470 -> 4480 bytes
 doc/development/ux_guide/img/color-red.png         | Bin 2628 -> 3550 bytes
 doc/development/ux_guide/img/icon-add.png          | Bin 155 -> 317 bytes
 doc/development/ux_guide/img/icon-close.png        | Bin 225 -> 501 bytes
 doc/development/ux_guide/img/icon-edit.png         | Bin 231 -> 546 bytes
 doc/development/ux_guide/img/icon-notification.png | Bin 259 -> 543 bytes
 doc/development/ux_guide/img/icon-rss.png          | Bin 307 -> 834 bytes
 doc/development/ux_guide/img/icon-subscribe.png    | Bin 348 -> 760 bytes
 doc/development/ux_guide/img/icon-trash.png        | Bin 380 -> 398 bytes
 35 files changed, 36 insertions(+), 35 deletions(-)
 create mode 100644 doc/development/ux_guide/img/button-close--active.png
 create mode 100644 doc/development/ux_guide/img/button-close--hover.png
 create mode 100644 doc/development/ux_guide/img/button-close--resting.png
 create mode 100644 doc/development/ux_guide/img/button-danger--active.png
 create mode 100644 doc/development/ux_guide/img/button-danger--hover.png
 create mode 100644 doc/development/ux_guide/img/button-danger--resting.png
 create mode 100644 doc/development/ux_guide/img/button-info--active.png
 create mode 100644 doc/development/ux_guide/img/button-info--hover.png
 create mode 100644 doc/development/ux_guide/img/button-info--resting.png
 create mode 100644 doc/development/ux_guide/img/button-spam--active.png
 create mode 100644 doc/development/ux_guide/img/button-spam--hover.png
 create mode 100644 doc/development/ux_guide/img/button-spam--resting.png
 create mode 100644 doc/development/ux_guide/img/button-success--active.png
 create mode 100644 doc/development/ux_guide/img/button-success--hover.png
 create mode 100644 doc/development/ux_guide/img/button-success--resting.png
 create mode 100644 doc/development/ux_guide/img/button-success-secondary--active.png
 create mode 100644 doc/development/ux_guide/img/button-success-secondary--hover.png
 create mode 100644 doc/development/ux_guide/img/button-success-secondary--resting.png
 create mode 100644 doc/development/ux_guide/img/button-warning--active.png
 create mode 100644 doc/development/ux_guide/img/button-warning--hover.png
 create mode 100644 doc/development/ux_guide/img/button-warning--resting.png

(limited to 'doc/development')

diff --git a/doc/development/ux_guide/basics.md b/doc/development/ux_guide/basics.md
index 62ac56a6bce..a29cfa096b2 100644
--- a/doc/development/ux_guide/basics.md
+++ b/doc/development/ux_guide/basics.md
@@ -35,26 +35,15 @@ This is the typeface used for code blocks. GitLab uses the OS default font.
 ## Icons
 GitLab uses Font Awesome icons throughout our interface.
 
-![Trash icon](img/icon-trash.png)
-The trash icon is used for destructive actions that deletes information.
-
-![Edit icon](img/icon-edit.png)
-The pencil icon is used for editing content such as comments.
-
-![Notification icon](img/icon-notification.png)
-The bell icon is for notifications, such as Todos.
-
-![Subscribe icon](img/icon-subscribe.png)
-The eye icon is for subscribing to updates. For example, you can subscribe to a label and get updated on issues with that label.
-
-![RSS icon](img/icon-rss.png)
-The standard RSS icon is used for linking to RSS/atom feeds.
-
-![Close icon](img/icon-close.png)
-An 'x' is used for closing UI elements such as dropdowns.
-
-![Add icon](img/icon-add.png)
-A plus is used when creating new objects, such as issues, projects, etc.
+| | |
+| :-----------: | :---- |
+| ![Trash icon](img/icon-trash.png) | The trash icon is used for destructive actions that deletes information. |
+| ![Edit icon](img/icon-edit.png) | The pencil icon is used for editing content such as comments.|
+| ![Notification icon](img/icon-notification.png) | The bell icon is for notifications, such as Todos. |
+| ![Subscribe icon](img/icon-subscribe.png) | The eye icon is for subscribing to updates. For example, you can subscribe to a label and get updated on issues with that label. |
+| ![RSS icon](img/icon-rss.png) | The standard RSS icon is used for linking to RSS/atom feeds. |
+| ![Close icon](img/icon-close.png) | An 'x' is used for closing UI elements such as dropdowns. |
+| ![Add icon](img/icon-add.png) | A plus is used when creating new objects, such as issues, projects, etc. |
 
 > TODO: update this section, add more general guidance to icon usage and personality, etc.
 
@@ -62,20 +51,13 @@ A plus is used when creating new objects, such as issues, projects, etc.
 
 ## Color
 
-![Blue](img/color-blue.png)
-Blue is used to highlight primary active elements (such as current tab), as well as other organization and managing commands.
-
-![Green](img/color-green.png)
-Green is for actions that create new objects.
-
-![Orange](img/color-orange.png)
-Orange is used for warnings
-
-![Red](img/color-red.png)
-Red is reserved for delete and other destructive commands
-
-![Grey](img/color-grey.png)
-Grey, and white (depending on context) is used for netral, secondary elements
+| | |
+| :------: | :------- |
+| ![Blue](img/color-blue.png) | Blue is used to highlight primary active elements (such as the current tab), as well as other organizational and managing commands.|
+| ![Green](img/color-green.png) | Green is for actions that create new objects. |
+| ![Orange](img/color-orange.png) | Orange is used for warnings |
+| ![Red](img/color-red.png) | Red is reserved for delete and other destructive commands |
+| ![Grey](img/color-grey.png) | Grey is used for neutral secondary elements. Depending on context, white is sometimes used instead. |
 
 > TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage.
 
diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index 8e51edd23ef..28383ad7dfc 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -75,10 +75,29 @@ Text should be in sentence case, where only the first word is capitalized. "Crea
 > TODO: Rationalize this. Ensure that we still believe this.
 
 ### Colors
-Follow the color guidance on the [basics](basics.md#color) page. The default color treatment is the white/grey button.
+The default color treatment is the white/grey button. Follow the guidance on the [basics](basics.md#color) page to add meaningful color to a button.
+
+### Secondary states
+
+Primary buttons darken the color of their background and border for hover, focus and active states. An inner shadow is added to the active state to denote the button being pressed.
+
+| Values | Info | Success | Warning | Danger |
+| :------ | :------: | :------: | :------: | :------: |
+| Background: `$color-light` <br> Border: `$border-color-light` | ![](img/button-info--resting.png) | ![](img/button-success--resting.png) | ![](img/button-warning--resting.png) | ![](img/button-danger--resting.png) |
+| Background: `$color-normal` <br> Border: `$border-color-normal` | ![](img/button-info--hover.png) | ![](img/button-success--hover.png) | ![](img/button-warning--hover.png) | ![](img/button-danger--hover.png) |
+| Background: `$color-dark` <br> Border: `$border-color-dark` | ![](img/button-info--active.png) | ![](img/button-success--active.png) | ![](img/button-warning--active.png) | ![](img/button-danger--active.png) |
+
+Since secondary buttons only have a border on their resting state, their hover and focus states add a background color, which gets darkened on active.
+
+| Values | Success Secondary | Close | Spam |
+| :------ | :------: | :------: | :------: |
+| Font: `$border-color-light` <br> Border: `$border-color-light` | ![](img/button-success-secondary--resting.png) | ![](img/button-close--resting.png) | ![](img/button-spam--resting.png) |
+| Background: `$color-light` <br> Border: `$border-color-light` | ![](img/button-success-secondary--hover.png) | ![](img/button-close--hover.png) | ![](img/button-spam--hover.png) |
+| Background: `$color-normal` <br> Border: `$border-color-normal` | ![](img/button-success-secondary--active.png) | ![](img/button-close--active.png) | ![](img/button-spam--active.png) |
 
 ---
 
+
 ## Dropdowns
 
 Dropdowns are used to allow users to choose one (or many) options from a list of options. If this list of options is more 20, there should generally be a way to search through and filter the options (see the complex filter dropdowns below.)
diff --git a/doc/development/ux_guide/img/button-close--active.png b/doc/development/ux_guide/img/button-close--active.png
new file mode 100644
index 00000000000..824bfc8f31b
Binary files /dev/null and b/doc/development/ux_guide/img/button-close--active.png differ
diff --git a/doc/development/ux_guide/img/button-close--hover.png b/doc/development/ux_guide/img/button-close--hover.png
new file mode 100644
index 00000000000..0291e121894
Binary files /dev/null and b/doc/development/ux_guide/img/button-close--hover.png differ
diff --git a/doc/development/ux_guide/img/button-close--resting.png b/doc/development/ux_guide/img/button-close--resting.png
new file mode 100644
index 00000000000..986d7174ce7
Binary files /dev/null and b/doc/development/ux_guide/img/button-close--resting.png differ
diff --git a/doc/development/ux_guide/img/button-danger--active.png b/doc/development/ux_guide/img/button-danger--active.png
new file mode 100644
index 00000000000..d3c64424b26
Binary files /dev/null and b/doc/development/ux_guide/img/button-danger--active.png differ
diff --git a/doc/development/ux_guide/img/button-danger--hover.png b/doc/development/ux_guide/img/button-danger--hover.png
new file mode 100644
index 00000000000..8506e093306
Binary files /dev/null and b/doc/development/ux_guide/img/button-danger--hover.png differ
diff --git a/doc/development/ux_guide/img/button-danger--resting.png b/doc/development/ux_guide/img/button-danger--resting.png
new file mode 100644
index 00000000000..69ad6bb796b
Binary files /dev/null and b/doc/development/ux_guide/img/button-danger--resting.png differ
diff --git a/doc/development/ux_guide/img/button-info--active.png b/doc/development/ux_guide/img/button-info--active.png
new file mode 100644
index 00000000000..23be20b225c
Binary files /dev/null and b/doc/development/ux_guide/img/button-info--active.png differ
diff --git a/doc/development/ux_guide/img/button-info--hover.png b/doc/development/ux_guide/img/button-info--hover.png
new file mode 100644
index 00000000000..4cb4e38558c
Binary files /dev/null and b/doc/development/ux_guide/img/button-info--hover.png differ
diff --git a/doc/development/ux_guide/img/button-info--resting.png b/doc/development/ux_guide/img/button-info--resting.png
new file mode 100644
index 00000000000..5883340aa83
Binary files /dev/null and b/doc/development/ux_guide/img/button-info--resting.png differ
diff --git a/doc/development/ux_guide/img/button-spam--active.png b/doc/development/ux_guide/img/button-spam--active.png
new file mode 100644
index 00000000000..55b44898684
Binary files /dev/null and b/doc/development/ux_guide/img/button-spam--active.png differ
diff --git a/doc/development/ux_guide/img/button-spam--hover.png b/doc/development/ux_guide/img/button-spam--hover.png
new file mode 100644
index 00000000000..3dc8ed34c54
Binary files /dev/null and b/doc/development/ux_guide/img/button-spam--hover.png differ
diff --git a/doc/development/ux_guide/img/button-spam--resting.png b/doc/development/ux_guide/img/button-spam--resting.png
new file mode 100644
index 00000000000..b6bf10a5b64
Binary files /dev/null and b/doc/development/ux_guide/img/button-spam--resting.png differ
diff --git a/doc/development/ux_guide/img/button-success--active.png b/doc/development/ux_guide/img/button-success--active.png
new file mode 100644
index 00000000000..895a52831cb
Binary files /dev/null and b/doc/development/ux_guide/img/button-success--active.png differ
diff --git a/doc/development/ux_guide/img/button-success--hover.png b/doc/development/ux_guide/img/button-success--hover.png
new file mode 100644
index 00000000000..e4c74bd9778
Binary files /dev/null and b/doc/development/ux_guide/img/button-success--hover.png differ
diff --git a/doc/development/ux_guide/img/button-success--resting.png b/doc/development/ux_guide/img/button-success--resting.png
new file mode 100644
index 00000000000..2fa971b5347
Binary files /dev/null and b/doc/development/ux_guide/img/button-success--resting.png differ
diff --git a/doc/development/ux_guide/img/button-success-secondary--active.png b/doc/development/ux_guide/img/button-success-secondary--active.png
new file mode 100644
index 00000000000..e7383b36946
Binary files /dev/null and b/doc/development/ux_guide/img/button-success-secondary--active.png differ
diff --git a/doc/development/ux_guide/img/button-success-secondary--hover.png b/doc/development/ux_guide/img/button-success-secondary--hover.png
new file mode 100644
index 00000000000..4af2a68cf1b
Binary files /dev/null and b/doc/development/ux_guide/img/button-success-secondary--hover.png differ
diff --git a/doc/development/ux_guide/img/button-success-secondary--resting.png b/doc/development/ux_guide/img/button-success-secondary--resting.png
new file mode 100644
index 00000000000..a5a4ec512c8
Binary files /dev/null and b/doc/development/ux_guide/img/button-success-secondary--resting.png differ
diff --git a/doc/development/ux_guide/img/button-warning--active.png b/doc/development/ux_guide/img/button-warning--active.png
new file mode 100644
index 00000000000..5877d46c94d
Binary files /dev/null and b/doc/development/ux_guide/img/button-warning--active.png differ
diff --git a/doc/development/ux_guide/img/button-warning--hover.png b/doc/development/ux_guide/img/button-warning--hover.png
new file mode 100644
index 00000000000..308e1adc8a3
Binary files /dev/null and b/doc/development/ux_guide/img/button-warning--hover.png differ
diff --git a/doc/development/ux_guide/img/button-warning--resting.png b/doc/development/ux_guide/img/button-warning--resting.png
new file mode 100644
index 00000000000..28e5e601520
Binary files /dev/null and b/doc/development/ux_guide/img/button-warning--resting.png differ
diff --git a/doc/development/ux_guide/img/color-blue.png b/doc/development/ux_guide/img/color-blue.png
index 2ca360173eb..844e926f1f5 100644
Binary files a/doc/development/ux_guide/img/color-blue.png and b/doc/development/ux_guide/img/color-blue.png differ
diff --git a/doc/development/ux_guide/img/color-green.png b/doc/development/ux_guide/img/color-green.png
index 489db8f4343..5c4c23c7067 100644
Binary files a/doc/development/ux_guide/img/color-green.png and b/doc/development/ux_guide/img/color-green.png differ
diff --git a/doc/development/ux_guide/img/color-grey.png b/doc/development/ux_guide/img/color-grey.png
index 58c474d5ce9..5247649a0ce 100644
Binary files a/doc/development/ux_guide/img/color-grey.png and b/doc/development/ux_guide/img/color-grey.png differ
diff --git a/doc/development/ux_guide/img/color-orange.png b/doc/development/ux_guide/img/color-orange.png
index 4c4b772d438..1103c715225 100644
Binary files a/doc/development/ux_guide/img/color-orange.png and b/doc/development/ux_guide/img/color-orange.png differ
diff --git a/doc/development/ux_guide/img/color-red.png b/doc/development/ux_guide/img/color-red.png
index 3440ad48f05..77ecbbc0a20 100644
Binary files a/doc/development/ux_guide/img/color-red.png and b/doc/development/ux_guide/img/color-red.png differ
diff --git a/doc/development/ux_guide/img/icon-add.png b/doc/development/ux_guide/img/icon-add.png
index 0d4c1a7692a..bcad5e84591 100644
Binary files a/doc/development/ux_guide/img/icon-add.png and b/doc/development/ux_guide/img/icon-add.png differ
diff --git a/doc/development/ux_guide/img/icon-close.png b/doc/development/ux_guide/img/icon-close.png
index 88d2b3b0c6d..dfe1495f5fa 100644
Binary files a/doc/development/ux_guide/img/icon-close.png and b/doc/development/ux_guide/img/icon-close.png differ
diff --git a/doc/development/ux_guide/img/icon-edit.png b/doc/development/ux_guide/img/icon-edit.png
index f73be7a10fb..50f6f841868 100644
Binary files a/doc/development/ux_guide/img/icon-edit.png and b/doc/development/ux_guide/img/icon-edit.png differ
diff --git a/doc/development/ux_guide/img/icon-notification.png b/doc/development/ux_guide/img/icon-notification.png
index 4758632edd7..6ddfaa44f66 100644
Binary files a/doc/development/ux_guide/img/icon-notification.png and b/doc/development/ux_guide/img/icon-notification.png differ
diff --git a/doc/development/ux_guide/img/icon-rss.png b/doc/development/ux_guide/img/icon-rss.png
index c7ac9fb1349..b766488b32d 100644
Binary files a/doc/development/ux_guide/img/icon-rss.png and b/doc/development/ux_guide/img/icon-rss.png differ
diff --git a/doc/development/ux_guide/img/icon-subscribe.png b/doc/development/ux_guide/img/icon-subscribe.png
index 5cb277bfd5d..650168296c6 100644
Binary files a/doc/development/ux_guide/img/icon-subscribe.png and b/doc/development/ux_guide/img/icon-subscribe.png differ
diff --git a/doc/development/ux_guide/img/icon-trash.png b/doc/development/ux_guide/img/icon-trash.png
index 357289a6fff..b02178ca992 100644
Binary files a/doc/development/ux_guide/img/icon-trash.png and b/doc/development/ux_guide/img/icon-trash.png differ
-- 
cgit v1.2.1


From 30f050491694e27232ddab679785ddac2dd46514 Mon Sep 17 00:00:00 2001
From: awhildy <allison@gitlab.com>
Date: Sun, 27 Nov 2016 21:25:45 -0800
Subject: Create animation page and clean up index

Add guidance on timings and easing

[ci skip]

Detail when not to use easing

Add dropdown and hover examples

Add quick update animation
---
 doc/development/ux_guide/animation.md              |  42 +++++++++++++++++++++
 doc/development/ux_guide/basics.md                 |  15 --------
 doc/development/ux_guide/copy.md                   |   4 +-
 .../ux_guide/img/animation-dropdown.gif            | Bin 0 -> 22483 bytes
 doc/development/ux_guide/img/animation-hover.gif   | Bin 0 -> 247388 bytes
 .../ux_guide/img/animation-quickupdate.gif         | Bin 0 -> 6441 bytes
 doc/development/ux_guide/index.md                  |  17 ++++++---
 7 files changed, 56 insertions(+), 22 deletions(-)
 create mode 100644 doc/development/ux_guide/animation.md
 create mode 100644 doc/development/ux_guide/img/animation-dropdown.gif
 create mode 100644 doc/development/ux_guide/img/animation-hover.gif
 create mode 100644 doc/development/ux_guide/img/animation-quickupdate.gif

(limited to 'doc/development')

diff --git a/doc/development/ux_guide/animation.md b/doc/development/ux_guide/animation.md
new file mode 100644
index 00000000000..daeb15460c2
--- /dev/null
+++ b/doc/development/ux_guide/animation.md
@@ -0,0 +1,42 @@
+# Animation
+
+Motion is a tool to help convey important relationships, changes or transitions between elements. It should be used sparingly and intentionally, highlighting the right elements at the right moment.
+
+## Timings
+
+The longer distance an object travel, the timing should be longer for the animation. However, when in doubt, we should avoid large, full screen animations.
+
+Subtle animations, or objects leaving the screen should take **100-200 milliseconds**. Objects entering the screen, or motion we want to use to direct user attention can take between **200-400 milliseconds**. We should avoid animations of longer than 400 milliseconds as they will make the experience appear sluggish. If a specific animation feels like it will need more than 400 milliseconds, revisit the animation to see if there is a simpler, easier, shorter animation to implement.
+
+## Easing
+
+Easing specifies the rate of change of a parameter over time (see [easings.net](http://easings.net/)). Adding an easing curve will make the motion feel more natural. Being consistent with the easing curves will make the whole experience feel more cohesive and connected.
+
+* When an object is entering the screen, or transforming the scale, position, or shape, use the **easeOutQuint** curve (`cubic-bezier(0.23, 1, 0.32, 1)`)
+* When an object is leaving the screen, or transforming the opacity or color, no easing curve is needed. It shouldn't _slow down_ as it is exiting the screen, as that draws attention on the leaving object, where we don't want it. Adding easing to opacity and color transitions will make the motion appear less smooth. Therefore, for these cases, motion should just be **linear**.
+
+## Types of animations
+
+### Hover
+
+Interactive elements (links, buttons, etc.) should have a hover state. A subtle animation for this transition adds a polished feel. We should target a `200ms linear` transition for a color hover effect.
+
+View the [interactive example](http://codepen.io/awhildy/full/GNyEvM/) here.
+
+![Hover animation](img/animation-hover.gif)
+
+### Dropdowns
+
+The dropdown menu should feel like it is appearing from the triggering element. Combining a position shift `400ms cubic-bezier(0.23, 1, 0.32, 1)` with a opacity animation `200ms linear` on the second half of the motion achieves this affect.
+
+View the [interactive example](http://codepen.io/awhildy/full/jVLJpb/) here.
+
+![Dropdown animation](img/animation-dropdown.gif)
+
+### Quick update
+
+When information is updating in place, a quick, subtle animation is needed. The previous content should cut out, and the new content should have a quick, `200ms linear` fade in.
+
+![Quick update animation](img/animation-quickupdate.gif)
+
+> TODO: Add guidance for other kinds of animation 
\ No newline at end of file
diff --git a/doc/development/ux_guide/basics.md b/doc/development/ux_guide/basics.md
index a29cfa096b2..76b739386a5 100644
--- a/doc/development/ux_guide/basics.md
+++ b/doc/development/ux_guide/basics.md
@@ -5,8 +5,6 @@
 * [Typography](#typography)
 * [Icons](#icons)
 * [Color](#color)
-* [Motion](#motion)
-* [Voice and tone](#voice-and-tone)
 
 ---
 
@@ -61,16 +59,3 @@ GitLab uses Font Awesome icons throughout our interface.
 
 > TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage.
 
----
-
-## Motion
-
-Motion is a tool to help convey important relationships, changes or transitions between elements. It should be used sparingly and intentionally, highlighting the right elements at the right moment.
-
-> TODO: Determine a more concrete perspective on motion, create consistent easing/timing curves to follow.
-
----
-
-## Voice and tone
-
-The copy for GitLab is clear and direct. We strike a clear balance between professional and friendly. We can empathesize with users (such as celebrating completing all Todos), and remain respectful of the importance of the work. We are that trusted, friendly coworker that is helpful and understanding.
diff --git a/doc/development/ux_guide/copy.md b/doc/development/ux_guide/copy.md
index b557fb47120..8896d450f14 100644
--- a/doc/development/ux_guide/copy.md
+++ b/doc/development/ux_guide/copy.md
@@ -1,6 +1,8 @@
 # Copy
 
-The copy and messaging is a core part of the experience of GitLab and the conversation with our users. Follow the below conventions throughout GitLab.
+The copy for GitLab is clear and direct. We strike a clear balance between professional and friendly. We can empathesize with users (such as celebrating completing all Todos), and remain respectful of the importance of the work. We are that trusted, friendly coworker that is helpful and understanding.
+
+The copy and messaging is a core part of the experience of GitLab and the conversation with our users. Follow the below conventions throughout GitLab. 
 
 >**Note:**
 We are currently inconsistent with this guidance. Images below are created to illustrate the point. As this guidance is refined, we will ensure that our experiences align.
diff --git a/doc/development/ux_guide/img/animation-dropdown.gif b/doc/development/ux_guide/img/animation-dropdown.gif
new file mode 100644
index 00000000000..c9b31d26165
Binary files /dev/null and b/doc/development/ux_guide/img/animation-dropdown.gif differ
diff --git a/doc/development/ux_guide/img/animation-hover.gif b/doc/development/ux_guide/img/animation-hover.gif
new file mode 100644
index 00000000000..37ad9c76828
Binary files /dev/null and b/doc/development/ux_guide/img/animation-hover.gif differ
diff --git a/doc/development/ux_guide/img/animation-quickupdate.gif b/doc/development/ux_guide/img/animation-quickupdate.gif
new file mode 100644
index 00000000000..8db70bc3d24
Binary files /dev/null and b/doc/development/ux_guide/img/animation-quickupdate.gif differ
diff --git a/doc/development/ux_guide/index.md b/doc/development/ux_guide/index.md
index 8aed11ebac3..8a849f239dc 100644
--- a/doc/development/ux_guide/index.md
+++ b/doc/development/ux_guide/index.md
@@ -12,7 +12,17 @@ These guiding principles set a solid foundation for our design system, and shoul
 ---
 
 ### [Basics](basics.md)
-The basic ingredients of our experience establish our personality and feel. This section includes details about typography, color, and motion.
+The basic ingredients of our experience establish our personality and feel. This section includes details about typography, iconography, and color.
+
+---
+
+### [Animation](animation.md)
+Guidance on the timing, curving and motion for GitLab.
+
+---
+
+### [Copy](copy.md)
+Conventions on text and messaging within labels, buttons, and other components.
 
 ---
 
@@ -26,11 +36,6 @@ The GitLab experience is broken apart into several surfaces. Each of these surfa
 
 ---
 
-### [Copy](copy.md)
-Conventions on text and messaging within labels, buttons, and other components.
-
----
-
 ### [Features](features.md)
 The previous building blocks are combined into complete features in the GitLab UX. Examples include our navigation, filters, search results, and empty states.
 
-- 
cgit v1.2.1