Adding animation for all dropdown

16 files changed, 124 insertions, 26 deletions

diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index dd95b6530f6..a8fc5b41fb4 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -170,8 +170,9 @@ class DueDateSelectors {
       const $datePicker = $(this);
       const calendar = new Pikaday({
         field: $datePicker.get(0),
-        theme: 'gitlab-theme',
+        theme: 'gitlab-theme animate-picker',
         format: 'yyyy-mm-dd',
+        container: $datePicker.parent().get(0),
         onSelect(dateText) {
           $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
         }
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index de184ab2675..687c2bb6110 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -39,8 +39,9 @@
       if ($issuableDueDate.length) {
         calendar = new Pikaday({
           field: $issuableDueDate.get(0),
-          theme: 'gitlab-theme',
+          theme: 'gitlab-theme animate-picker',
           format: 'yyyy-mm-dd',
+          container: $issuableDueDate.parent().get(0),
           onSelect: function(dateText) {
             $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index 129d2dc5f0a..e034729bd39 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -18,9 +18,10 @@
 
       const calendar = new Pikaday({
         field: $input.get(0),
-        theme: 'gitlab-theme',
+        theme: 'gitlab-theme animate-picker',
         format: 'yyyy-mm-dd',
         minDate: new Date(),
+        container: $input.parent().get(0),
         onSelect(dateText) {
           $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index b87e712c763..30d785464ac 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -14,14 +14,32 @@
   }
 }
 
+@mixin set-visible {
+  transform: translateY(0);
+  visibility: visible;
+  opacity: 1;
+  transition-duration: 100ms, 150ms, 25ms;
+  transition-delay: 35ms, 50ms, 25ms;
+}
+
+@mixin set-invisible {
+  transform: translateY(-10px);
+  visibility: hidden;
+  opacity: 0;
+  transition-property: opacity, transform, visibility;
+  transition-duration: 70ms, 250ms, 250ms;
+  transition-timing-function: linear, $dropdown-animation-timing;
+  transition-delay: 25ms, 50ms, 0ms;
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
     display: block;
+    @include set-visible;
 
     @media (max-width: $screen-xs-max) {
       width: 100%;
-      min-width: 240px;
     }
   }
 
@@ -161,8 +179,9 @@
 
 .dropdown-menu,
 .dropdown-menu-nav {
-  display: none;
+  display: block;
   position: absolute;
+  width: 100%;
   top: 100%;
   left: 0;
   z-index: 9;
@@ -176,6 +195,12 @@
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
+  overflow: hidden;
+  @include set-invisible;
+
+  @media (max-width: $screen-sm-min) {
+    width: 100%;
+  }
 
   &.is-loading {
     .dropdown-content {
@@ -252,6 +277,23 @@
   }
 }
 
+.filtered-search-box-input-container .dropdown-menu,
+.filtered-search-box-input-container .dropdown-menu-nav,
+.comment-type-dropdown .dropdown-menu {
+  display: none;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.filtered-search-box-input-container {
+  .dropdown-menu,
+  .dropdown-menu-nav {
+    max-width: 280px;
+    width: auto;
+  }
+}
+
 .dropdown-menu-drop-up {
   top: auto;
   bottom: 100%;
@@ -326,6 +368,10 @@
 
 .dropdown-select {
   width: $dropdown-width;
+
+  @media (max-width: $screen-sm-min) {
+    width: 100%;
+  }
 }
 
 .dropdown-menu-align-right {
@@ -568,3 +614,24 @@
 .droplab-item-ignore {
   pointer-events: none;
 }
+
+.pika-single.animate-picker.is-bound,
+.pika-single.animate-picker.is-bound.is-hidden {
+  /*
+   * Having `!important` is not recommended but
+   * since `pikaday` sets positioning inline
+   * there's no way it can be gracefully overridden
+   * using config options.
+   */
+  position: absolute !important;
+  display: block;
+}
+
+.pika-single.animate-picker.is-bound {
+  @include set-visible;
+}
+
+.pika-single.animate-picker.is-bound.is-hidden {
+  @include set-invisible;
+  overflow: hidden;
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0077ea41d3b..6d9218310eb 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -329,6 +329,7 @@ header {
 
 .header-user {
   .dropdown-menu-nav {
+    width: auto;
     min-width: 140px;
     margin-top: -5px;
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3ef6ec3f912..ad592a45941 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -561,3 +561,8 @@ $filter-name-text-color: rgba(0, 0, 0, 0.55);
 $filter-value-text-color: rgba(0, 0, 0, 0.85);
 $filter-name-selected-color: #ebebeb;
 $filter-value-selected-color: #d7d7d7;
+
+/*
+Animation Functions
+*/
+$dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 543d2ece3df..b9818ffcf42 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -124,7 +124,13 @@ input[type="checkbox"]:hover {
 
     // Custom dropdown positioning
     .dropdown-menu {
-      top: 37px;
+      transition-property: opacity, transform;
+      transition-duration: 250ms, 250ms;
+      transition-delay: 0ms, 25ms;
+      transition-timing-function: $dropdown-animation-timing;
+      transform: translateY(0);
+      opacity: 0;
+      display: block;
       left: -5px;
       padding: 0;
 
@@ -156,6 +162,13 @@ input[type="checkbox"]:hover {
         color: $layout-link-gray;
       }
     }
+
+    .dropdown-menu {
+      transition-duration: 100ms, 75ms;
+      transition-delay: 75ms, 100ms;
+      transform: translateY(13px);
+      opacity: 1;
+    }
   }
 
   &.has-value {
diff --git a/app/views/shared/_personal_access_tokens_form.html.haml b/app/views/shared/_personal_access_tokens_form.html.haml
index e8062848fc3..b20055a564e 100644
--- a/app/views/shared/_personal_access_tokens_form.html.haml
+++ b/app/views/shared/_personal_access_tokens_form.html.haml
@@ -30,9 +30,10 @@
 
   new Pikaday({
     field: $dateField.get(0),
-    theme: 'gitlab-theme',
+    theme: 'gitlab-theme animate-picker',
     format: 'yyyy-mm-dd',
     minDate: new Date(),
+    container: $dateField.parent().get(0),
     onSelect: function(dateText) {
       $dateField.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
     }
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
index ed94773ef89..a74cdbe274b 100644
--- a/app/views/shared/milestones/_form_dates.html.haml
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -3,10 +3,10 @@
     = f.label :start_date, "Start Date", class: "control-label"
     .col-sm-10
       = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date"
-      %a.inline.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
+      %a.inline.pull-right.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
 .col-md-6
   .form-group
     = f.label :due_date, "Due Date", class: "control-label"
     .col-sm-10
       = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
-      %a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
+      %a.inline.pull-right.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
diff --git a/changelogs/unreleased/26208-animate-drodowns.yml b/changelogs/unreleased/26208-animate-drodowns.yml
new file mode 100644
index 00000000000..580f6c12f67
--- /dev/null
+++ b/changelogs/unreleased/26208-animate-drodowns.yml
@@ -0,0 +1,4 @@
+---
+title: Add animations to all the dropdowns
+merge_request: 8419
+author:
diff --git a/features/steps/project/commits/commits.rb b/features/steps/project/commits/commits.rb
index 97ffd4b4ea2..de737cdc823 100644
--- a/features/steps/project/commits/commits.rb
+++ b/features/steps/project/commits/commits.rb
@@ -178,11 +178,13 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   def select_using_dropdown(dropdown_type, selection, is_commit = false)
     dropdown = find(".js-compare-#{dropdown_type}-dropdown")
     dropdown.find(".compare-dropdown-toggle").click
+    dropdown.find('.dropdown-menu', visible: true)
     dropdown.fill_in("Filter by Git revision", with: selection)
     if is_commit
       dropdown.find('input[type="search"]').send_keys(:return)
     else
       find_link(selection, visible: true).click
     end
+    dropdown.find('.dropdown-menu', visible: false)
   end
 end
diff --git a/features/steps/project/source/browse_files.rb b/features/steps/project/source/browse_files.rb
index f5e8f7a7c32..b4741f06d1b 100644
--- a/features/steps/project/source/browse_files.rb
+++ b/features/steps/project/source/browse_files.rb
@@ -87,9 +87,9 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
 
   step 'I fill the new branch name' do
     first('button.js-target-branch', visible: true).click
-    first('.create-new-branch', visible: true).click
-    first('#new_branch_name', visible: true).set('new_branch_name')
-    first('.js-new-branch-btn', visible: true).click
+    find('.create-new-branch', visible: true).click
+    find('#new_branch_name', visible: true).set('new_branch_name')
+    find('.js-new-branch-btn', visible: true).click
   end
 
   step 'I fill the new file name with an illegal name' do
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index 362d167befa..55eca187f6c 100644
--- a/spec/features/issues_spec.rb
+++ b/spec/features/issues_spec.rb
@@ -414,7 +414,8 @@ describe 'Issues', feature: true do
     it 'will not send ajax request when no data is changed' do
       page.within '.labels' do
         click_link 'Edit'
-        first('.dropdown-menu-close').click
+
+        find('.dropdown-menu-close', match: :first).click
 
         expect(page).not_to have_selector('.block-loading')
       end
diff --git a/spec/features/merge_requests/create_new_mr_spec.rb b/spec/features/merge_requests/create_new_mr_spec.rb
index 3a4ec07b2b0..16b09933bda 100644
--- a/spec/features/merge_requests/create_new_mr_spec.rb
+++ b/spec/features/merge_requests/create_new_mr_spec.rb
@@ -20,13 +20,13 @@ feature 'Create New Merge Request', feature: true, js: true do
     expect(page).to have_content('Target branch')
 
     first('.js-source-branch').click
-    first('.dropdown-source-branch .dropdown-content a', text: 'v1.1.0').click
+    find('.dropdown-source-branch .dropdown-content a', match: :first).click
 
     expect(page).to have_content "b83d6e3"
   end
 
   it 'selects the target branch sha when a tag with the same name exists' do
-    visit namespace_project_merge_requests_path(project.namespace, project)    
+    visit namespace_project_merge_requests_path(project.namespace, project)
 
     click_link 'New merge request'
 
@@ -46,8 +46,8 @@ feature 'Create New Merge Request', feature: true, js: true do
     expect(page).to have_content('Source branch')
     expect(page).to have_content('Target branch')
 
-    first('.js-source-branch').click
-    first('.dropdown-source-branch .dropdown-content a', text: 'orphaned-branch').click
+    find('.js-source-branch', match: :first).click
+    find('.dropdown-source-branch .dropdown-content a', text: 'orphaned-branch', match: :first).click
 
     click_button "Compare branches"
     click_link "Changes"
diff --git a/spec/features/merge_requests/versions_spec.rb b/spec/features/merge_requests/versions_spec.rb
index 68a68f5d3f3..7a2da623c58 100644
--- a/spec/features/merge_requests/versions_spec.rb
+++ b/spec/features/merge_requests/versions_spec.rb
@@ -107,14 +107,13 @@ feature 'Merge Request versions', js: true, feature: true do
 
     it 'should have 0 chages between versions' do
       page.within '.mr-version-compare-dropdown' do
-        expect(page).to have_content 'version 1'
+        expect(find('.dropdown-toggle')).to have_content 'version 1'
       end
 
       page.within '.mr-version-dropdown' do
         find('.btn-default').click
-        find(:link, 'version 1').trigger('click')
+        click_link 'version 1'
       end
-
       expect(page).to have_content '0 changed files'
     end
   end
@@ -129,12 +128,12 @@ feature 'Merge Request versions', js: true, feature: true do
 
     it 'should set the compared versions to be the same' do
       page.within '.mr-version-compare-dropdown' do
-        expect(page).to have_content 'version 2'
+        expect(find('.dropdown-toggle')).to have_content 'version 2'
       end
 
       page.within '.mr-version-dropdown' do
         find('.btn-default').click
-        find(:link, 'version 1').trigger('click')
+        click_link 'version 1'
       end
 
       page.within '.mr-version-compare-dropdown' do
diff --git a/spec/features/projects/issuable_templates_spec.rb b/spec/features/projects/issuable_templates_spec.rb
index 62d0aedda48..6cdca0f114b 100644
--- a/spec/features/projects/issuable_templates_spec.rb
+++ b/spec/features/projects/issuable_templates_spec.rb
@@ -163,12 +163,14 @@ feature 'issuable templates', feature: true, js: true do
   end
 
   def select_template(name)
-    first('.js-issuable-selector').click
-    first('.js-issuable-selector-wrap .dropdown-content a', text: name).click
+    find('.js-issuable-selector').click
+
+    find('.js-issuable-selector-wrap .dropdown-content a', text: name, match: :first).click
   end
 
   def select_option(name)
-    first('.js-issuable-selector').click
-    first('.js-issuable-selector-wrap .dropdown-footer-list a', text: name).click
+    find('.js-issuable-selector').click
+
+    find('.js-issuable-selector-wrap .dropdown-footer-list a', text: name, match: :first).click
   end
 end