Merge branch 'dropdown-docs' into 'master'

Add dropdowns documentation

See merge request gitlab-org/gitlab-ce!15396

2 files changed, 40 insertions, 0 deletions

diff --git a/doc/development/fe_guide/dropdowns.md b/doc/development/fe_guide/dropdowns.md
new file mode 100644
index 00000000000..e1660ac5caa
--- /dev/null
+++ b/doc/development/fe_guide/dropdowns.md
@@ -0,0 +1,38 @@
+# 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!
+    ```
+
+1. Include the mixin in CSS
+
+    ```SCSS
+    @include new-style-dropdown('.my-dropdown ');
+    ```
+
+[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md
index 8f956681693..73a03c07812 100644
--- a/doc/development/fe_guide/index.md
+++ b/doc/development/fe_guide/index.md
@@ -77,6 +77,8 @@ Vue resource specific practices and gotchas.
 ## [Icons](icons.md)
 How we use SVG for our Icons.
 
+## [Dropdowns](dropdowns.md)
+How we use dropdowns.
 ---
 
 ## Style Guides