Merge branch 'master' into chart.html.haml-refactorchart.html.haml-refactor

* master: (484 commits)
  migrate admin:users:* to static bundle
  correct for missing break statement in dispatcher.js
  alias create and update actions to new and edit
  migrate projects:merge_requests:edit to static bundle
  migrate projects:merge_requests:creations:diffs to static bundle
  migrate projects:merge_requests:creations:new to static bundle
  migrate projects:issues:new and projects:issues:edit to static bundle
  migrate projects:branches:index to static bundle
  migrate projects:branches:new to static bundle
  migrate projects:compare:show to static bundle
  migrate projects:environments:metrics to static bundle
  migrate projects:milestones:* and groups:milestones:* to static bundle
  migrate explore:groups:index to static bundle
  migrate explore:projects:* to static bundle
  migrate dashboard:projects:* to static bundle
  migrate admin:jobs:index to static bundle
  migrate dashboard:todos:index to static bundle
  migrate groups:merge_requests to static bundle
  migrate groups:issues to static bundle
  migrate dashboard:merge_requests to static bundle
  ...

1 files changed, 61 insertions, 0 deletions

diff --git a/doc/development/fe_guide/components.md b/doc/development/fe_guide/components.md
new file mode 100644
index 00000000000..66a8abe42f7
--- /dev/null
+++ b/doc/development/fe_guide/components.md
@@ -0,0 +1,61 @@
+# Components
+
+## Contents
+* [Dropdowns](#dropdowns)
+* [Modals](#modals)
+
+## Dropdowns
+
+See also the [corresponding UX guide](../ux_guide/components.md#dropdowns).
+
+### How to style a bootstrap dropdown
+1. Use the HTML structure provided by the [docs][bootstrap-dropdowns]
+1. Add a specific class to the top level `.dropdown` element
+
+
+    ```Haml
+    .dropdown.my-dropdown
+      %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false }
+        %span.dropdown-toggle-text
+          Toggle Dropdown
+        = icon('chevron-down')
+
+      %ul.dropdown-menu
+        %li
+          %a
+            item!
+    ```
+
+    Or use the helpers
+    ```Haml
+    .dropdown.my-dropdown
+      = dropdown_toggle('Toogle!', { toggle: 'dropdown' })
+      = dropdown_content
+        %li
+          %a
+            item!
+    ```
+
+[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
+
+## Modals
+
+See also the [corresponding UX guide](../ux_guide/components.md#modals).
+
+We have a reusable Vue component for modals: [vue_shared/components/gl-modal.vue](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/components/gl-modal.vue)
+
+Here is an example of how to use it:
+
+```html
+  <gl-modal
+    id="dogs-out-modal"
+    :header-title-text="s__('ModalExample|Let the dogs out?')"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('ModalExample|Let them out')"
+    @submit="letOut(theDogs)"
+  >
+    {{ s__('ModalExample|You’re about to let the dogs out.') }}
+  </gl-modal>
+```
+
+![example modal](img/gl-modal.png)