From aa1371c84a5642c8b01603764291b746ff85f79d Mon Sep 17 00:00:00 2001 From: Marco Collovati Date: Thu, 28 Dec 2017 10:54:17 +0100 Subject: [PATCH] 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 --- .../com/vaadin/client/ui/VCheckBoxGroup.java | 2 ++ .../vaadin/client/ui/VRadioButtonGroup.java | 17 +++++++----- .../components-optiongroups.asciidoc | 3 ++- .../checkboxgroup/CheckBoxGroupTest.java | 12 +++++++++ .../RadioButtonGroupTest.java | 27 +++++++++++++++++++ 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 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 optionsToItems; private final Map 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 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", -- 2.39.5