Fixes unnecessary padding-top added to all responsive UIs (#14679)

When using Valo theme and Responsive extension, all responsive UIs get a padding-top even though it should be only added when a Valo Menu is present in the UI. Added a stylename which has to be added to any responsive UIs containing a Valo Menu.

Change-Id: Ib3e3c5341bef03c174accb01401b4a90c1deb29e

WebContent/VAADIN/themes/valo/components/_valo-menu.scss

@@ -152,7 +152,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
  * @group valo-menu
  */
 @mixin valo-menu-responsive {
-  .v-ui {
+  .v-ui.valo-menu-responsive {
     @include width-range($min: 801px, $max: 1100px) {
       .valo-menu-part {
         @include valo-menu-large-icons-style($valo-menu-background-color);

server/src/com/vaadin/ui/themes/ValoTheme.java

@@ -880,6 +880,31 @@ public class ValoTheme {
      * 
      **************************************************************************/
 
+    /**
+     * <p>
+     * When you use the Valo menu and wish to enable responsive features of the
+     * menu, you need to add this style name to the UI containing the menu.
+     * </p>
+     * 
+     * <p>
+     * You only need to add this style name to the UI containing a Valo menu, if
+     * you're using the Responsive extension with the UI.
+     * </p>
+     * 
+     * <h4>Example</h4>
+     * 
+     * <p>
+     * To enable responsivity in the Valo menu, the following example code
+     * should be executed in your UI containing the menu.
+     * </p>
+     * 
+     * <pre>
+     * Responsive.makeResponsive(this);
+     * addStyleName(ValoTheme.UI_WITH_MENU);
+     * </pre>
+     */
+    public static final String UI_WITH_MENU = "valo-menu-responsive";
+
     /**
      * <p>
      * Set the <em><b>primary</b></em> style name of a CssLayout to this, and

uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.ui;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.themes.ValoTheme;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+@Theme("valo")
+public class UnnecessaryPaddingInResponsiveUI extends UI {
+
+    @Override
+    protected void init(VaadinRequest request) {
+        Responsive.makeResponsive(this);
+
+        HorizontalLayout root = new HorizontalLayout();
+        root.setSpacing(true);
+
+        MenuLayout menu = new MenuLayout();
+
+        root.addComponent(menu);
+
+        setContent(root);
+
+        setWidth(799, Unit.PIXELS);
+        setId("UI");
+
+        // Uncomment this to enable responsive features in Valo Menu and
+        // introduce a padding-top to the UI. When this is commented the
+        // padding-top should be 0 and the related test should pass.
+
+        // addStyleName(ValoTheme.UI_WITH_MENU);
+    }
+
+    class MenuLayout extends VerticalLayout {
+        public MenuLayout() {
+            setSizeFull();
+            setPrimaryStyleName(ValoTheme.MENU_ROOT);
+
+            CssLayout titleLo = new CssLayout();
+            titleLo.addStyleName(ValoTheme.MENU_TITLE);
+            titleLo.addComponent(new Label("menu-title"));
+
+            addComponent(titleLo);
+
+            for (int i = 1; i <= 5; i++) {
+                Button button = new Button("Menu Item " + i);
+                button.setPrimaryStyleName(ValoTheme.MENU_ITEM);
+                addComponent(button);
+            }
+        }
+
+    }
+}

uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.ui;
+
+import static org.hamcrest.Matchers.equalTo;
+import static org.junit.Assert.assertThat;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.tests.tb3.SingleBrowserTest;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+public class UnnecessaryPaddingInResponsiveUITest extends SingleBrowserTest {
+
+    @Test
+    public void testUIShouldHaveNoPaddingTop() {
+        openTestURL();
+
+        WebElement ui = vaadinElementById("UI");
+
+        String paddingTop = ui.getCssValue("padding-top");
+
+        Integer paddingHeight = Integer.parseInt(paddingTop.substring(0,
+                paddingTop.length() - 2));
+
+        assertThat(paddingHeight, equalTo(0));
+
+    }
+}