Checkbox allow customizing of input and label classNames. (#11372)

* add client side integration for custom styles for checkbox.label and checkbox.input

* add server side integration for checkbox element styling

* add server side tests

* add client side test

2 files changed, 81 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElement.java b/uitest/src/main/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElement.java
new file mode 100644
index 0000000000..248f214d1b
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElement.java
@@ -0,0 +1,33 @@
+package com.vaadin.tests.components.checkbox;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUIWithLog;
+import com.vaadin.ui.CheckBox;
+
+public class CheckboxLabelInputElement extends AbstractTestUIWithLog {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        final CheckBox cb = new CheckBox("Test custom style names for inner elements", true);
+        cb.getInputElement().addStyleName("my-input-class");
+        cb.getLabelElement().addStyleName("my-label-class");
+
+        addComponent(cb);
+
+        addButton("add-style", e -> {
+            cb.getInputElement().addStyleName("later-applied-input-class");
+            cb.getLabelElement().addStyleName("later-applied-label-class");
+        });
+
+        addButton("remove-style", e -> {
+            cb.getInputElement().removeStyleName("my-input-class");
+            cb.getLabelElement().removeStyleName("my-label-class");
+        });
+
+        addButton("remove-style-2", e -> {
+            cb.getInputElement().removeStyleName("later-applied-input-class");
+            cb.getLabelElement().removeStyleName("later-applied-label-class");
+        });
+    }
+
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElementTest.java b/uitest/src/test/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElementTest.java
new file mode 100644
index 0000000000..16ac7ee1fc
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/checkbox/CheckboxLabelInputElementTest.java
@@ -0,0 +1,48 @@
+package com.vaadin.tests.components.checkbox;
+
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.CheckBoxElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+
+public class CheckboxLabelInputElementTest extends MultiBrowserTest {
+
+    @Test
+    public void contextClickCheckboxAndText() {
+        openTestURL();
+        CheckBoxElement checkBoxElement = $(CheckBoxElement.class).first();
+        WebElement labelElem = checkBoxElement.findElement(By.tagName("label"));
+        WebElement inputElem = checkBoxElement.findElement(By.tagName("input"));
+
+        assertEquals("my-label-class", labelElem.getAttribute("class"));
+        assertEquals("my-input-class", inputElem.getAttribute("class"));
+        assertTrue("The Checkbox Widget should not contain the classes that are " +
+                "defined as style names for the input or label.",
+                !checkBoxElement.getAttribute("class").contains("my-label-class") &&
+                !checkBoxElement.getAttribute("class").contains("my-input-class"));
+
+        $(ButtonElement.class).caption("add-style").first().click();
+
+        assertEquals("my-label-class later-applied-label-class", labelElem.getAttribute("class"));
+        assertEquals("my-input-class later-applied-input-class", inputElem.getAttribute("class"));
+        assertTrue("The Checkbox Widget should not contain the classes that are " +
+                "defined as style names for the input or label.",
+                !checkBoxElement.getAttribute("class").contains("later-applied-label-class") &&
+                !checkBoxElement.getAttribute("class").contains("later-applied-input-class"));
+
+        $(ButtonElement.class).caption("remove-style").first().click();
+
+        assertEquals("later-applied-label-class", labelElem.getAttribute("class"));
+        assertEquals("later-applied-input-class", inputElem.getAttribute("class"));
+
+        $(ButtonElement.class).caption("remove-style-2").first().click();
+
+        assertTrue(labelElem.getAttribute("class").isEmpty());
+        assertTrue(inputElem.getAttribute("class").isEmpty());
+    }
+}