Add outside-range styles for DateField. (#14711)

Change-Id: I0f85fb72605c5500b0a835ddf715d60bc9c7a524

3 files changed, 35 insertions, 9 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 48977d4d20..71b50b5a77 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -337,7 +337,10 @@
     @include valo-datefield-calendarpanel-day-focused-style;
   }
 
-
+  .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range,
+  .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range:hover {
+    @include valo-datefield-calendarpanel-outside-range-style;
+  }
 
   .#{$primary-stylename}-weekdays {
     height: round($v-unit-size * 0.7);
@@ -349,13 +352,12 @@
     }
   }
 
-
   .#{$primary-stylename}-header {
     white-space: nowrap;
   }
 
-  td[class$="year"],
-  td[class$="month"] {
+  td[class*="year"],
+  td[class*="month"] {
     button {
       @include appearance(none);
       border: none;
@@ -381,10 +383,16 @@
         }
       }
 
-      &:hover {
-        @include opacity(1);
-        &:before {
-          color: $v-focus-color;
+      &:hover:before {
+        color: $v-focus-color;
+      }
+
+      &.outside-range {
+        cursor: default;
+        @include opacity(.3);
+
+        &:hover:before {
+          color: mix($v-background-color, valo-font-color($v-background-color));
         }
       }
     }
@@ -500,6 +508,15 @@
   background: transparent;
 }
 
+/**
+ * Outputs the styles for an individual day element, which are outside available range.
+ *
+ * @group datefield
+ */
+@mixin valo-datefield-calendarpanel-outside-range-style {
+  color: mix(valo-font-color($v-background-color), $v-background-color);
+  cursor: not-allowed;
+}
 
 /**
  * Outputs the styles for todays day element in a calendar panel.
diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
index 5dca5ab9af..5a752cd985 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
@@ -190,6 +190,7 @@ public class DateFields extends VerticalLayout implements View {
 
         date = new InlineDateField("Date picker");
         setDate(date);
+        setDateRange(date);
         row.addComponent(date);
 
         date = new InlineDateField("Date picker with week numbers");
@@ -211,6 +212,14 @@ public class DateFields extends VerticalLayout implements View {
         row.addComponent(form);
     }
 
+    private void setDateRange(DateField date) {
+        date.setRangeStart(getDefaultDate());
+
+        Date endDate = getDefaultDate();
+        endDate.setMonth(endDate.getMonth() + 1);
+        date.setRangeEnd(endDate);
+    }
+
     private void setDate(DateField date) {
         date.setValue(getDefaultDate());
     }
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUITest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUITest.java
index 20c74bff5e..d4ddf2dcf9 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUITest.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUITest.java
@@ -64,7 +64,7 @@ public class ValoThemeUITest extends MultiBrowserTest {
         // Note that this can look broken in IE9 because of some browser
         // rendering issue... The problem seems to be in the customized
         // horizontal layout in the test app
-        compareScreen("datefields-with-disabled");
+        compareScreen("datefields-with-range");
     }
 
     @Test