Allow setting custom styles to DateField calendar date cells (#10305)

Fixes #10304

4 files changed, 101 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/datefield/DateFieldElementUI.java b/uitest/src/main/java/com/vaadin/tests/components/datefield/DateFieldElementUI.java
index 4a578de91f..ecca4a22cb 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/datefield/DateFieldElementUI.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/datefield/DateFieldElementUI.java
@@ -6,6 +6,7 @@ import java.util.Locale;
 import com.vaadin.annotations.Widgetset;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.tests.components.AbstractReindeerTestUIWithLog;
+import com.vaadin.ui.Button;
 import com.vaadin.ui.DateField;
 import com.vaadin.ui.InlineDateField;
 
@@ -18,6 +19,11 @@ public class DateFieldElementUI extends AbstractReindeerTestUIWithLog {
 
     @Override
     protected void setup(VaadinRequest request) {
+        getPage().getStyles()
+                .add(".v-inline-datefield .teststyle { background: yellow; }");
+        getPage().getStyles()
+                .add(".v-datefield-popup .teststyle { background: yellow; }");
+
         log.setNumberLogRows(false);
         DateField df = new DateField();
         df.addValueChangeListener(event -> log(
@@ -42,6 +48,13 @@ public class DateFieldElementUI extends AbstractReindeerTestUIWithLog {
         usDatefield.addValueChangeListener(
                 event -> log("US date field value set to " + event.getValue()));
         addComponent(usDatefield);
+
+        addComponent(new Button("Add date styles", e -> {
+            inlineDateField.setDateStyle(LocalDate.now(), "teststyle");
+            finnishDatefield.setDateStyle(LocalDate.of(2017, 12, 1),
+                    "teststyle");
+            usDatefield.setDateStyle(LocalDate.of(2017, 12, 1), "teststyle");
+        }));
     }
 
     @Override
diff --git a/uitest/src/main/java/com/vaadin/tests/components/datefield/DateTimeFieldElementUI.java b/uitest/src/main/java/com/vaadin/tests/components/datefield/DateTimeFieldElementUI.java
index f7f8e44736..1a16e94019 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/datefield/DateTimeFieldElementUI.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/datefield/DateTimeFieldElementUI.java
@@ -1,11 +1,13 @@
 package com.vaadin.tests.components.datefield;
 
+import java.time.LocalDate;
 import java.time.LocalDateTime;
 import java.util.Locale;
 
 import com.vaadin.annotations.Widgetset;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.tests.components.AbstractReindeerTestUIWithLog;
+import com.vaadin.ui.Button;
 import com.vaadin.ui.DateTimeField;
 import com.vaadin.ui.InlineDateTimeField;
 
@@ -18,6 +20,11 @@ public class DateTimeFieldElementUI extends AbstractReindeerTestUIWithLog {
 
     @Override
     protected void setup(VaadinRequest request) {
+        getPage().getStyles()
+                .add(".v-inline-datefield .teststyle { background: yellow; }");
+        getPage().getStyles()
+                .add(".v-datefield-popup .teststyle { background: yellow; }");
+
         log.setNumberLogRows(false);
         DateTimeField df = new DateTimeField();
         df.addValueChangeListener(event -> log(
@@ -42,6 +49,14 @@ public class DateTimeFieldElementUI extends AbstractReindeerTestUIWithLog {
         usDateTimeField.addValueChangeListener(
                 event -> log("US date field value set to " + event.getValue()));
         addComponent(usDateTimeField);
+
+        addComponent(new Button("Add date styles", e -> {
+            inlineDateTimeField.setDateStyle(LocalDate.now(), "teststyle");
+            finnishDateTimeField.setDateStyle(LocalDate.of(2017, 12, 1),
+                    "teststyle");
+            usDateTimeField.setDateStyle(LocalDate.of(2017, 12, 1),
+                    "teststyle");
+        }));
     }
 
     @Override
diff --git a/uitest/src/test/java/com/vaadin/tests/components/datefield/DateFieldElementTest.java b/uitest/src/test/java/com/vaadin/tests/components/datefield/DateFieldElementTest.java
index c56af7dafc..4d784e788d 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/datefield/DateFieldElementTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/datefield/DateFieldElementTest.java
@@ -4,11 +4,15 @@ import static org.hamcrest.MatcherAssert.assertThat;
 import static org.hamcrest.core.Is.is;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertNull;
+import static org.junit.Assert.assertTrue;
 
 import java.time.LocalDate;
 
 import org.junit.Test;
+import org.openqa.selenium.WebElement;
 
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
 import com.vaadin.testbench.elements.DateFieldElement;
 import com.vaadin.testbench.elements.InlineDateFieldElement;
 import com.vaadin.tests.tb3.SingleBrowserTest;
@@ -52,6 +56,38 @@ public class DateFieldElementTest extends SingleBrowserTest {
                 DateFieldElementUI.ANOTHER_TEST_DATE_TIME);
     }
 
+    @Test
+    public void testDateStyles() {
+        openTestURL();
+        assertTrue(findElements(By.className("teststyle")).isEmpty());
+
+        $(ButtonElement.class).first().click();
+
+        WebElement styledDateCell = $(InlineDateFieldElement.class).first()
+                .findElement(By.className("teststyle"));
+        assertEquals(String.valueOf(LocalDate.now().getDayOfMonth()),
+                styledDateCell.getText());
+
+        DateFieldElement fi = $(DateFieldElement.class).id("fi");
+        fi.openPopup();
+        waitForElementPresent(By.className("v-datefield-popup"));
+        WebElement popup = findElement(
+                com.vaadin.testbench.By.className("v-datefield-popup"));
+        styledDateCell = popup.findElement(By.className("teststyle"));
+        assertEquals("1", styledDateCell.getText());
+
+        styledDateCell.click(); // close popup
+        waitForElementNotPresent(By.className("v-datefield-popup"));
+
+        DateFieldElement us = $(DateFieldElement.class).id("us");
+        us.openPopup();
+        waitForElementPresent(By.className("v-datefield-popup"));
+        popup = findElement(
+                com.vaadin.testbench.By.className("v-datefield-popup"));
+        styledDateCell = popup.findElement(By.className("teststyle"));
+        assertEquals("1", styledDateCell.getText());
+    }
+
     private void assertServerValue(String id, LocalDate testDateTime) {
         assertEquals(id + " value set to " + testDateTime, getLogRow(0));
 
diff --git a/uitest/src/test/java/com/vaadin/tests/components/datefield/DateTimeFieldElementTest.java b/uitest/src/test/java/com/vaadin/tests/components/datefield/DateTimeFieldElementTest.java
index 5719a9d97f..14fc0f60f8 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/datefield/DateTimeFieldElementTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/datefield/DateTimeFieldElementTest.java
@@ -4,11 +4,15 @@ import static org.hamcrest.MatcherAssert.assertThat;
 import static org.hamcrest.core.Is.is;
 import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertNull;
+import static org.junit.Assert.assertTrue;
 
 import java.time.LocalDateTime;
 
 import org.junit.Test;
+import org.openqa.selenium.WebElement;
 
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
 import com.vaadin.testbench.elements.DateTimeFieldElement;
 import com.vaadin.testbench.elements.InlineDateTimeFieldElement;
 import com.vaadin.tests.tb3.SingleBrowserTest;
@@ -55,6 +59,39 @@ public class DateTimeFieldElementTest extends SingleBrowserTest {
                 DateTimeFieldElementUI.ANOTHER_TEST_DATE_TIME);
     }
 
+    @Test
+    public void testDateStyles() {
+        openTestURL();
+        assertTrue(findElements(By.className("teststyle")).isEmpty());
+
+        // add styles
+        $(ButtonElement.class).first().click();
+
+        WebElement styledDateCell = $(InlineDateTimeFieldElement.class).first()
+                .findElement(By.className("teststyle"));
+        assertEquals(String.valueOf(LocalDateTime.now().getDayOfMonth()),
+                styledDateCell.getText());
+
+        DateTimeFieldElement fi = $(DateTimeFieldElement.class).id("fi");
+        fi.openPopup();
+        waitForElementPresent(By.className("v-datefield-popup"));
+        WebElement popup = findElement(
+                com.vaadin.testbench.By.className("v-datefield-popup"));
+        styledDateCell = popup.findElement(By.className("teststyle"));
+        assertEquals("1", styledDateCell.getText());
+
+        styledDateCell.click(); // close popup
+        waitForElementNotPresent(By.className("v-datefield-popup"));
+
+        DateTimeFieldElement us = $(DateTimeFieldElement.class).id("us");
+        us.openPopup();
+        waitForElementPresent(By.className("v-datefield-popup"));
+        popup = findElement(
+                com.vaadin.testbench.By.className("v-datefield-popup"));
+        styledDateCell = popup.findElement(By.className("teststyle"));
+        assertEquals("1", styledDateCell.getText());
+    }
+
     private void assertServerValue(String id, LocalDateTime testDateTime) {
         assertEquals(id + " value set to " + testDateTime, getLogRow(0));