Add css class to selected items in CheckboxGroup and RadiobuttonGroup (#10394)

Adds v-select-option-selected class to the selected
group items in CheckboxGroup and RadiobuttonGroup
Fixes #3387

5 files changed, 54 insertions, 7 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java b/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
index b1132a487c..93975d2926 100644
--- a/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
+++ b/client/src/main/java/com/vaadin/client/ui/VCheckBoxGroup.java
@@ -50,6 +50,7 @@ public class VCheckBoxGroup extends FocusableFlowPanelComposite
 
     public static final String CLASSNAME = "v-select-optiongroup";
     public static final String CLASSNAME_OPTION = "v-select-option";
+    public static final String CLASSNAME_OPTION_SELECTED = "v-select-option-selected";
 
     private final Map<VCheckBox, JsonObject> optionsToItems;
 
@@ -135,6 +136,7 @@ public class VCheckBoxGroup extends FocusableFlowPanelComposite
         widget.setValue(
                 item.getBoolean(ListingJsonConstants.JSONKEY_ITEM_SELECTED));
         setOptionEnabled(widget, item);
+        widget.setStyleName(CLASSNAME_OPTION_SELECTED, widget.getValue());
 
         if (requireInitialization) {
             widget.addStyleName(CLASSNAME_OPTION);
diff --git a/client/src/main/java/com/vaadin/client/ui/VRadioButtonGroup.java b/client/src/main/java/com/vaadin/client/ui/VRadioButtonGroup.java
index 89f8eb16e3..3a010c2380 100644
--- a/client/src/main/java/com/vaadin/client/ui/VRadioButtonGroup.java
+++ b/client/src/main/java/com/vaadin/client/ui/VRadioButtonGroup.java
@@ -40,7 +40,6 @@ import com.vaadin.client.widgets.FocusableFlowPanelComposite;
 import com.vaadin.shared.Registration;
 import com.vaadin.shared.data.DataCommunicatorConstants;
 import com.vaadin.shared.ui.ListingJsonConstants;
-
 import elemental.json.JsonObject;
 
 /**
@@ -54,6 +53,7 @@ public class VRadioButtonGroup extends FocusableFlowPanelComposite
 
     public static final String CLASSNAME = "v-select-optiongroup";
     public static final String CLASSNAME_OPTION = "v-select-option";
+    public static final String CLASSNAME_OPTION_SELECTED = "v-select-option-selected";
 
     private final Map<RadioButton, JsonObject> optionsToItems;
     private final Map<String, RadioButton> keyToOptions;
@@ -150,8 +150,6 @@ public class VRadioButtonGroup extends FocusableFlowPanelComposite
         }
 
         button.setHTML(itemHtml);
-        button.setValue(
-                item.getBoolean(ListingJsonConstants.JSONKEY_ITEM_SELECTED));
         boolean optionEnabled = !item
                 .getBoolean(ListingJsonConstants.JSONKEY_ITEM_DISABLED);
         boolean enabled = optionEnabled && !isReadonly() && isEnabled();
@@ -159,6 +157,7 @@ public class VRadioButtonGroup extends FocusableFlowPanelComposite
         // #9258 apply the v-disabled class when disabled for UX
         button.setStyleName(StyleConstants.DISABLED,
                 !isEnabled() || !optionEnabled);
+        updateItemSelection(button, item.getBoolean(ListingJsonConstants.JSONKEY_ITEM_SELECTED));
 
         String key = item.getString(DataCommunicatorConstants.KEY);
 
@@ -259,13 +258,19 @@ public class VRadioButtonGroup extends FocusableFlowPanelComposite
     }
 
     public void selectItemKey(String selectedItemKey) {
+        // At most one item could be selected so reset all radio buttons
+        // before applying current selection
+        keyToOptions.values().forEach(button -> updateItemSelection(button, false));
         if (selectedItemKey != null) {
             RadioButton radioButton = keyToOptions.get(selectedItemKey);
             if (radioButton != null) { // Items might not be loaded yet
-                radioButton.setValue(true);
+                updateItemSelection(radioButton, true);
             }
-        } else {
-            keyToOptions.values().forEach(button -> button.setValue(false));
         }
     }
+
+    protected void updateItemSelection(RadioButton radioButton, boolean value) {
+        radioButton.setValue(value);
+        radioButton.setStyleName(CLASSNAME_OPTION_SELECTED, value);
+    }
 }
diff --git a/documentation/components/components-optiongroups.asciidoc b/documentation/components/components-optiongroups.asciidoc
index dbb8647234..bc2e261cf3 100644
--- a/documentation/components/components-optiongroups.asciidoc
+++ b/documentation/components/components-optiongroups.asciidoc
@@ -87,7 +87,8 @@ Each check box will have the [literal]#++v-checkbox++# style, borrowed from the
 [classname]#CheckBox# component, and each radio button the
 [literal]#++v-radiobutton++# style. Both the radio buttons and check boxes will
 also have the [literal]#++v-select-option++# style that allows styling
-regardless of the option type. Disabled items have additionally the
+regardless of the option type and additionally [literal]#++v-select-option-selected++#
+when the item is selected. Disabled items have additionally the
 [literal]#++v-disabled++# style.
 
 
diff --git a/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupTest.java b/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupTest.java
index 66589956b9..98b09a6e60 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupTest.java
@@ -375,6 +375,18 @@ public class CheckBoxGroupTest extends MultiBrowserTest {
         verifyCheckboxDisabledClassNames(className, true);
     }
 
+    @Test // #3387
+    public void shouldApplySelectedClassToSelectedItems() {
+        openTestURL("theme=valo");
+        selectMenuPath("Component", "Selection", "Toggle Item 5");
+
+        String className = getSelect().getOptionElements().get(5).getAttribute("className");
+        assertTrue("No v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+
+        selectMenuPath("Component", "Selection", "Toggle Item 5");
+        className = getSelect().getOptionElements().get(5).getAttribute("className");
+        assertFalse("Extra v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+    }
     // needed to make tooltips work in IE tests
     @Override
     protected boolean requireWindowFocusForIE() {
diff --git a/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupTest.java b/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupTest.java
index 96fc66fd1d..a8fa91c51c 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupTest.java
@@ -16,6 +16,7 @@
 package com.vaadin.tests.components.radiobuttongroup;
 
 import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertFalse;
 import static org.junit.Assert.assertTrue;
 
 import java.util.List;
@@ -195,6 +196,32 @@ public class RadioButtonGroupTest extends MultiBrowserTest {
         verifyRadioButtonDisabledClassNames(className, true);
     }
 
+    @Test // #3387
+    public void shouldApplySelectedClassToSelectedItems() {
+        openTestURL("theme=valo");
+        selectMenuPath("Component", "Selection", "Toggle Item 5");
+
+        String className = getSelect().findElements(By.tagName("span")).get(5).getAttribute("className");
+        assertTrue("No v-select-option-selected class, was " + className, className.contains("v-select-option-selected")
+        );
+
+        getSelect().selectByText("Item 5");
+        className = getSelect().findElements(By.tagName("span")).get(5).getAttribute("className");
+        assertTrue("No v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+
+        getSelect().selectByText("Item 10");
+        List<WebElement> options = getSelect().findElements(By.tagName("span"));
+        className = options.get(5).getAttribute("className");
+        assertFalse("Extra v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+        className = options.get(10).getAttribute("className");
+        assertTrue("No v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+
+        selectMenuPath("Component", "Selection", "Toggle Item 10");
+        className = getSelect().findElements(By.tagName("span")).get(10).getAttribute("className");
+        assertFalse("Extra v-select-option-selected class, was " + className, className.contains("v-select-option-selected"));
+    }
+
+
     @Test
     public void itemIconGenerator() {
         selectMenuPath("Component", "Item Icon Generator",