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

2 files changed, 13 insertions, 6 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);
+    }
 }