Merge branch 'due-date-field-ux-improv' into 'master'

Improved the UX of issue & milestone date picker

## What does this MR do?

Improves the UX of the date picker on issue form & milestone form.

## What are the relevant issue numbers?

Closes #18198 

## Screenshots (if relevant)

### Issues

![Screen_Shot_2016-06-06_at_09.28.29](/uploads/d9c192dff0d8076adc3ed6f005ea3790/Screen_Shot_2016-06-06_at_09.28.29.png)

### Project milestones

![Screen_Shot_2016-06-06_at_09.28.18](/uploads/2d03d72791c5fc6badfadb975a85af2b/Screen_Shot_2016-06-06_at_09.28.18.png)

### Group milestones

![Screen_Shot_2016-06-06_at_09.28.05](/uploads/0f28532396a16e6fd48ddea784ca28e3/Screen_Shot_2016-06-06_at_09.28.05.png)

See merge request !4485

CHANGELOG

@@ -57,6 +57,7 @@ v 8.9.0 (unreleased)
   - External links now open in a new tab
   - Markdown editor now correctly resets the input value on edit cancellation !4175
   - Toggling a task list item in a issue/mr description does not creates a Todo for mentions
+  - Improved UX of date pickers on issue & milestone forms
 
 v 8.8.4 (unreleased)
   - Ensure branch cleanup regardless of whether the GitHub import process succeeds

app/assets/stylesheets/framework/jquery.scss

@@ -2,6 +2,7 @@
   font-family: $regular_font;
   font-size: $font-size-base;
 
+  &.ui-datepicker,
   &.ui-datepicker-inline {
     border: 1px solid #ddd;
     padding: 10px;
@@ -10,6 +11,25 @@
     .ui-datepicker-header {
       background: #fff;
       border-color: #ddd;
+
+      .ui-datepicker-prev,
+      .ui-datepicker-next {
+        top: 4px;
+      }
+
+      .ui-datepicker-prev {
+        left: 2px;
+      }
+
+      .ui-datepicker-next {
+        right: 2px;
+      }
+
+      .ui-state-hover {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+      }
     }
 
     .ui-datepicker-calendar td a {
@@ -36,21 +56,18 @@
   }
 
   .ui-state-highlight {
-    border: 1px solid #eee;
-    background: #eee;
+    border: 0;
+    background: transparent;
   }
 
-  .ui-state-active {
-    border: 1px solid $gl-primary;
-    background: $gl-primary;
-    color: #fff;
-  }
-
-  .ui-state-hover,
-  .ui-state-focus {
-    border: 1px solid $row-hover;
-    background: $row-hover;
-    color: #333;
+  .ui-datepicker-calendar {
+    .ui-state-active,
+    .ui-state-hover,
+    .ui-state-focus {
+      border: 1px solid $gl-primary;
+      background: $gl-primary;
+      color: #fff;
+    }
   }
 }
 

app/views/groups/milestones/new.html.haml

@@ -39,9 +39,8 @@
     .col-md-6
       .form-group
         = f.label :due_date, "Due Date", class: "control-label"
-        .col-sm-10= f.hidden_field :due_date
         .col-sm-10
-          .datepicker
+          = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
 
   .form-actions
     = f.submit 'Create Milestone', class: "btn-create btn"

app/views/projects/milestones/_form.html.haml

@@ -17,9 +17,8 @@
     .col-md-6
       .form-group
         = f.label :due_date, "Due Date", class: "control-label"
-        .col-sm-10= f.hidden_field :due_date
         .col-sm-10
-          .datepicker
+          = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
 
   .form-actions
     - if @milestone.new_record?

app/views/shared/issuable/_form.html.haml

@@ -88,9 +88,9 @@
       .col-lg-6
         .form-group
           = f.label :due_date, "Due date", class: "control-label"
-          = f.hidden_field :due_date, id: "issuable-due-date"
           .col-sm-10
-            .datepicker
+            .issuable-form-select-holder
+              = f.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
 
 - if issuable.can_move?(current_user)
   %hr

spec/features/issues_spec.rb

@@ -75,12 +75,13 @@ describe 'Issues', feature: true do
 
         fill_in 'issue_title', with: 'bug 345'
         fill_in 'issue_description', with: 'bug description'
+        find('#issuable-due-date').click
 
-        page.within '.datepicker' do
+        page.within '.ui-datepicker' do
           click_link date.day
         end
 
-        expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
+        expect(find('#issuable-due-date').value).to eq date.to_s
 
         click_button 'Submit issue'
 
@@ -100,18 +101,19 @@ describe 'Issues', feature: true do
       it 'should save with due date' do
         date = Date.today.at_beginning_of_month
 
-        expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
+        expect(find('#issuable-due-date').value).to eq date.to_s
 
         date = date.tomorrow
 
         fill_in 'issue_title', with: 'bug 345'
         fill_in 'issue_description', with: 'bug description'
+        find('#issuable-due-date').click
 
-        page.within '.datepicker' do
+        page.within '.ui-datepicker' do
           click_link date.day
         end
 
-        expect(find('#issuable-due-date', visible: false).value).to eq date.to_s
+        expect(find('#issuable-due-date').value).to eq date.to_s
 
         click_button 'Save changes'