Read-only styles shouldn't override borderless background styles. (#11692)

* Read-only styles shouldn't override borderless background styles.

- Fixed for ComboBox and DateField styles, other tested components
already do it right.

Fixes #11671

* Merge branch 'master' into issue11671

themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss

@@ -259,6 +259,12 @@
         display: none;
       }
     }
+
+    &.borderless {
+      [class*="input"] {
+        @include valo-textfield-borderless-style;
+      }
+    }
   }
 }
 

themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss

@@ -237,6 +237,12 @@
         display: none;
       }
     }
+
+    &.borderless {
+      [class*="textfield"] {
+        @include valo-textfield-borderless-style;
+      }
+    }
   }
 }
 

uitest/src/main/java/com/vaadin/tests/components/uitest/BackgroundColorThemeTestUI.java

@@ -0,0 +1,19 @@
+package com.vaadin.tests.components.uitest;
+
+public class BackgroundColorThemeTestUI extends ThemeTestUI {
+    @Override
+    protected boolean showAdditionalControlFields() {
+        return true;
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11671;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return super.getTestDescription()
+                + "<br>Read-only styles shouldn't override the transparent background of borderless components.";
+    }
+}

uitest/src/main/java/com/vaadin/tests/components/uitest/TestSampler.java

@@ -3,6 +3,7 @@ package com.vaadin.tests.components.uitest;
 import java.util.ArrayList;
 import java.util.List;
 
+import com.vaadin.data.HasValue.ValueChangeListener;
 import com.vaadin.tests.components.uitest.components.AccordionsCssTest;
 import com.vaadin.tests.components.uitest.components.ButtonsCssTest;
 import com.vaadin.tests.components.uitest.components.DatesCssTest;
@@ -36,6 +37,7 @@ public class TestSampler extends TabSheet {
     public static final String ICON_URL = "../runo/icons/16/help.png";
 
     private List<Component> components = new ArrayList<>();
+    private List<ValueChangeListener<Boolean>> readOnlyChangeListeners = new ArrayList<ValueChangeListener<Boolean>>();
 
     private ComponentContainer currentTab;
 
@@ -198,4 +200,13 @@ public class TestSampler extends TabSheet {
             c.addStyleName(newStyleName);
         }
     }
+
+    public List<ValueChangeListener<Boolean>> getReadOnlyChangeListeners() {
+        return readOnlyChangeListeners;
+    }
+
+    public void addReadOnlyChangeListener(
+            ValueChangeListener<Boolean> listener) {
+        readOnlyChangeListeners.add(listener);
+    }
 }

uitest/src/main/java/com/vaadin/tests/components/uitest/ThemeTestUI.java

@@ -1,15 +1,25 @@
 package com.vaadin.tests.components.uitest;
 
+import java.util.Arrays;
+
+import com.vaadin.data.HasValue.ValueChangeListener;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.tests.components.AbstractReindeerTestUI;
+import com.vaadin.tests.util.TestUtils;
+import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.v7.ui.TextField;
 
+@SuppressWarnings("deprecation")
 public class ThemeTestUI extends AbstractReindeerTestUI {
 
     private TextField customStyle;
     private Button setStyleName;
+    private CheckBox readOnly;
+    private ComboBox<String> bgColor;
     private TestSampler sampler;
     private String customStyleName = null;
 
@@ -23,12 +33,31 @@ public class ThemeTestUI extends AbstractReindeerTestUI {
 
         selectors.addComponent(customStyle);
         selectors.addComponent(setStyleName);
+        if (showAdditionalControlFields()) {
+            selectors.addComponent(readOnly);
+            selectors.setComponentAlignment(readOnly, Alignment.MIDDLE_LEFT);
+            selectors.addComponent(bgColor);
+        }
 
         addComponent(selectors);
 
         sampler = new TestSampler();
+        if (showAdditionalControlFields()) {
+            for (ValueChangeListener<Boolean> listener : sampler
+                    .getReadOnlyChangeListeners()) {
+                readOnly.addValueChangeListener(listener);
+            }
+        }
         addComponent(sampler);
 
+        if (showAdditionalControlFields()) {
+            TestUtils.injectCSS(getLayout().getUI(),
+                    "body .v-app .yellow {background-color: yellow;}");
+        }
+    }
+
+    protected boolean showAdditionalControlFields() {
+        return false;
     }
 
     private void createCustomStyleStringField() {
@@ -37,6 +66,22 @@ public class ThemeTestUI extends AbstractReindeerTestUI {
         setStyleName = new Button("Set stylename",
                 event -> onCustomStyleNameChanged(customStyle.getValue()));
         setStyleName.setId("setcuststyle");
+
+        if (showAdditionalControlFields()) {
+            readOnly = new CheckBox("Set read-only");
+            bgColor = new ComboBox<>(null, Arrays.asList(
+                    "Default sampler background", "Yellow sampler background"));
+            bgColor.setValue("Default sampler background");
+            bgColor.setEmptySelectionAllowed(false);
+            bgColor.setWidth("270px");
+            bgColor.addValueChangeListener(event -> {
+                if ("Yellow sampler background".equals(bgColor.getValue())) {
+                    addStyleName("yellow");
+                } else {
+                    removeStyleName("yellow");
+                }
+            });
+        }
     }
 
     private void onCustomStyleNameChanged(String newStyleName) {

uitest/src/main/java/com/vaadin/tests/components/uitest/components/ButtonsCssTest.java

@@ -13,6 +13,7 @@ import com.vaadin.v7.ui.themes.ChameleonTheme;
 import com.vaadin.v7.ui.themes.Reindeer;
 import com.vaadin.v7.ui.themes.Runo;
 
+@SuppressWarnings("deprecation")
 public class ButtonsCssTest extends GridLayout {
 
     private TestSampler parent;
@@ -48,14 +49,14 @@ public class ButtonsCssTest extends GridLayout {
         b.setId("button" + debugIdCounter++);
         addComponent(b);
 
-        CheckBox cb = new CheckBox("Checkbox");
-        cb.setId("button" + debugIdCounter++);
-        addComponent(cb);
+        CheckBox cb1 = new CheckBox("Checkbox");
+        cb1.setId("button" + debugIdCounter++);
+        addComponent(cb1);
 
-        cb = new CheckBox("Checkbox with icon");
-        cb.setIcon(new ThemeResource(TestSampler.ICON_URL));
-        cb.setId("button" + debugIdCounter++);
-        addComponent(cb);
+        CheckBox cb2 = new CheckBox("Checkbox with icon");
+        cb2.setIcon(new ThemeResource(TestSampler.ICON_URL));
+        cb2.setId("button" + debugIdCounter++);
+        addComponent(cb2);
 
         Link l = new Link("A link", new ExternalResource(""));
         l.setId("button" + debugIdCounter++);
@@ -76,6 +77,10 @@ public class ButtonsCssTest extends GridLayout {
                 TestSampler.ICON_URL);
         createButtonWith("Down", ChameleonTheme.BUTTON_DOWN, null);
 
+        parent.addReadOnlyChangeListener(event -> {
+            cb1.setReadOnly(!cb1.isReadOnly());
+            cb2.setReadOnly(!cb2.isReadOnly());
+        });
     }
 
     private void createButtonWith(String caption, String primaryStyleName,

uitest/src/main/java/com/vaadin/tests/components/uitest/components/DatesCssTest.java

@@ -1,17 +1,20 @@
 package com.vaadin.tests.components.uitest.components;
 
 import java.time.LocalDate;
+import java.util.Iterator;
 
 import com.vaadin.shared.ui.datefield.DateResolution;
 import com.vaadin.tests.components.TestDateField;
 import com.vaadin.tests.components.uitest.TestSampler;
 import com.vaadin.ui.AbstractDateField;
+import com.vaadin.ui.AbstractField;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.DateField;
 import com.vaadin.ui.GridLayout;
 import com.vaadin.ui.InlineDateField;
 import com.vaadin.v7.ui.themes.ChameleonTheme;
 
+@SuppressWarnings("deprecation")
 public class DatesCssTest extends GridLayout {
 
     private TestSampler parent;
@@ -45,6 +48,16 @@ public class DatesCssTest extends GridLayout {
                 "130px");
         createDateFieldWith("Big 130px", ChameleonTheme.DATEFIELD_BIG, "130px");
 
+        parent.addReadOnlyChangeListener(event -> {
+            Iterator<Component> iterator = iterator();
+            while (iterator.hasNext()) {
+                Component c = iterator.next();
+                if (c instanceof AbstractField) {
+                    AbstractField<?> af = (AbstractField<?>) c;
+                    af.setReadOnly(!af.isReadOnly());
+                }
+            }
+        });
     }
 
     private void createDateFieldWith(String caption, String primaryStyleName,

uitest/src/main/java/com/vaadin/tests/components/uitest/components/FormsCssTest.java

@@ -9,6 +9,7 @@ import com.vaadin.v7.data.fieldgroup.BeanFieldGroup;
 import com.vaadin.v7.data.fieldgroup.FieldGroup;
 import com.vaadin.v7.data.util.BeanItem;
 
+@SuppressWarnings("deprecation")
 public class FormsCssTest extends HorizontalLayout {
 
     private TestSampler parent;
@@ -37,6 +38,10 @@ public class FormsCssTest extends HorizontalLayout {
         login.setHeight("150px");
         addComponent(login);
 
+        parent.addReadOnlyChangeListener(event -> {
+            fg.setReadOnly(!fg.isReadOnly());
+            // it's not possible to set LoginForm read-only
+        });
     }
 
     @Override

uitest/src/main/java/com/vaadin/tests/components/uitest/components/SelectsCssTest.java

@@ -1,5 +1,7 @@
 package com.vaadin.tests.components.uitest.components;
 
+import java.util.Iterator;
+
 import com.vaadin.tests.components.uitest.TestSampler;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.GridLayout;
@@ -12,6 +14,7 @@ import com.vaadin.v7.ui.Select;
 import com.vaadin.v7.ui.TwinColSelect;
 import com.vaadin.v7.ui.themes.ChameleonTheme;
 
+@SuppressWarnings("deprecation")
 public class SelectsCssTest extends GridLayout {
 
     private TestSampler parent;
@@ -80,6 +83,17 @@ public class SelectsCssTest extends GridLayout {
                 "100px");
         createComboBoxWith("SelectButton",
                 ChameleonTheme.COMBOBOX_SELECT_BUTTON, "100px");
+
+        parent.addReadOnlyChangeListener(event -> {
+            Iterator<Component> iterator = iterator();
+            while (iterator.hasNext()) {
+                Component c = iterator.next();
+                if (c instanceof AbstractSelect) {
+                    AbstractSelect as = (AbstractSelect) c;
+                    as.setReadOnly(!as.isReadOnly());
+                }
+            }
+        });
     }
 
     private void createComboBoxWith(String caption, String primaryStyleName,

uitest/src/main/java/com/vaadin/tests/components/uitest/components/SlidersCssTest.java

@@ -9,13 +9,18 @@ public class SlidersCssTest {
     private int debugIdCounter = 0;
 
     public SlidersCssTest(TestSampler parent) {
-        Slider slide = new Slider();
-        slide.setId("slider" + debugIdCounter++);
-        parent.addComponent(slide);
+        Slider slide1 = new Slider();
+        slide1.setId("slider" + debugIdCounter++);
+        parent.addComponent(slide1);
 
-        slide = new Slider();
-        slide.setOrientation(SliderOrientation.VERTICAL);
-        slide.setId("slider" + debugIdCounter++);
-        parent.addComponent(slide);
+        Slider slide2 = new Slider();
+        slide2.setOrientation(SliderOrientation.VERTICAL);
+        slide2.setId("slider" + debugIdCounter++);
+        parent.addComponent(slide2);
+
+        parent.addReadOnlyChangeListener(event -> {
+            slide1.setReadOnly(!slide1.isReadOnly());
+            slide2.setReadOnly(!slide2.isReadOnly());
+        });
     }
 }

uitest/src/main/java/com/vaadin/tests/components/uitest/components/TablesCssTest.java

@@ -1,16 +1,19 @@
 package com.vaadin.tests.components.uitest.components;
 
 import java.util.HashSet;
+import java.util.Iterator;
 
 import com.vaadin.event.Action;
 import com.vaadin.server.ThemeResource;
 import com.vaadin.tests.components.uitest.TestSampler;
 import com.vaadin.tests.util.TestUtils;
+import com.vaadin.ui.Component;
 import com.vaadin.ui.GridLayout;
 import com.vaadin.v7.ui.Table;
 import com.vaadin.v7.ui.themes.ChameleonTheme;
 import com.vaadin.v7.ui.themes.Reindeer;
 
+@SuppressWarnings("deprecation")
 public class TablesCssTest extends GridLayout {
 
     private TestSampler parent;
@@ -37,6 +40,16 @@ public class TablesCssTest extends GridLayout {
         createTableWith("Striped", ChameleonTheme.TABLE_STRIPED);
         createTableWith("Strong", Reindeer.TABLE_STRONG);
 
+        parent.addReadOnlyChangeListener(event -> {
+            Iterator<Component> iterator = iterator();
+            while (iterator.hasNext()) {
+                Component c = iterator.next();
+                if (c instanceof Table) {
+                    Table t = (Table) c;
+                    t.setReadOnly(!t.isReadOnly());
+                }
+            }
+        });
     }
 
     private void createTableWith(String caption, String primaryStyleName) {

uitest/src/main/java/com/vaadin/tests/components/uitest/components/TextFieldsCssTest.java

@@ -1,6 +1,9 @@
 package com.vaadin.tests.components.uitest.components;
 
+import java.util.Iterator;
+
 import com.vaadin.tests.components.uitest.TestSampler;
+import com.vaadin.ui.AbstractField;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.GridLayout;
 import com.vaadin.ui.PasswordField;
@@ -10,6 +13,7 @@ import com.vaadin.v7.ui.TextArea;
 import com.vaadin.v7.ui.themes.ChameleonTheme;
 import com.vaadin.v7.ui.themes.Reindeer;
 
+@SuppressWarnings("deprecation")
 public class TextFieldsCssTest extends GridLayout {
 
     private TestSampler parent;
@@ -41,6 +45,16 @@ public class TextFieldsCssTest extends GridLayout {
         rta.setId("textfield" + debugIdCounter++);
         addComponent(rta, 0, 1, 6, 1);
 
+        parent.addReadOnlyChangeListener(event -> {
+            Iterator<Component> iterator = iterator();
+            while (iterator.hasNext()) {
+                Component c = iterator.next();
+                if (c instanceof AbstractField) {
+                    AbstractField<?> af = (AbstractField<?>) c;
+                    af.setReadOnly(!af.isReadOnly());
+                }
+            }
+        });
     }
 
     private void createTextFieldWith(String caption, String primaryStyleName,

uitest/src/main/java/com/vaadin/tests/components/uitest/components/TreeCssTest.java

@@ -6,6 +6,7 @@ import com.vaadin.v7.data.Item;
 import com.vaadin.v7.data.util.HierarchicalContainer;
 import com.vaadin.v7.ui.Tree;
 
+@SuppressWarnings("deprecation")
 public class TreeCssTest {
     private int debugIdCounter = 0;
 
@@ -45,6 +46,9 @@ public class TreeCssTest {
         }
 
         parent.addComponent(tree);
+
+        parent.addReadOnlyChangeListener(
+                event -> tree.setReadOnly(!tree.isReadOnly()));
     }
 
     private HierarchicalContainer createHierarchicalContainer() {

uitest/src/main/java/com/vaadin/tests/components/uitest/components/TreeTableCssTest.java

@@ -5,6 +5,7 @@ import com.vaadin.v7.data.Item;
 import com.vaadin.v7.data.util.HierarchicalContainer;
 import com.vaadin.v7.ui.TreeTable;
 
+@SuppressWarnings("deprecation")
 public class TreeTableCssTest {
     private int debugIdCounter = 0;
 
@@ -12,6 +13,7 @@ public class TreeTableCssTest {
         TreeTable treeTable = new TreeTable();
         treeTable.setId("treetable" + debugIdCounter++);
         treeTable.setWidth("100%");
+        treeTable.setSelectable(true);
         parent.addComponent(treeTable);
 
         HierarchicalContainer hc = createHierarchicalContainer();
@@ -21,6 +23,9 @@ public class TreeTableCssTest {
         for (Object itemId : treeTable.getItemIds()) {
             treeTable.setCollapsed(itemId, false);
         }
+
+        parent.addReadOnlyChangeListener(
+                event -> treeTable.setReadOnly(!treeTable.isReadOnly()));
     }
 
     private HierarchicalContainer createHierarchicalContainer() {