Add initial implementation of VaadinFormLayout (#2068)

Closes #1932

flow-components-parent/flow-code-generator-api/src/main/java/com/vaadin/generator/BehaviorRegistry.java

@@ -39,7 +39,8 @@ public final class BehaviorRegistry {
 
     static {
         put(HasClickListeners.class, "Polymer.PaperButtonBehavior",
-                "Polymer.GestureEventListeners", "vaadin-button");
+                "Polymer.GestureEventListeners", "vaadin-button",
+                "vaadin-form-item");
         put(HasText.class, "vaadin-button", "paper-button");
         put(Focusable.class, "paper-button", "Vaadin.FormElementMixin",
                 "Vaadin.ControlStateMixin");

flow-components-parent/flow-components-demo/src/main/frontend/bower.json

@@ -31,7 +31,8 @@
     "vaadin-text-field": "~1.1.0-alpha2",
     "vaadin-button": "~1.0.0",
     "vaadin-checkbox": "~1.0.0-alpha1",
-    "vaadin-combo-box": "~2.0.0-beta2"
+    "vaadin-combo-box": "~2.0.0-beta2",
+    "vaadin-form-layout": "~1.0.0"
   },
   "resolutions": {
     "iron-flex-layout": "1 - 2",

flow-components-parent/flow-components-demo/src/main/java/com/vaadin/flow/demo/views/VaadinFormLayoutView.java

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2000-2017 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.flow.demo.views;
+
+import com.vaadin.flow.demo.ComponentDemo;
+import com.vaadin.flow.html.Div;
+import com.vaadin.flow.html.H3;
+import com.vaadin.ui.VaadinFormLayout;
+import com.vaadin.ui.VaadinFormLayout.ResponsiveStep;
+import com.vaadin.ui.VaadinFormLayout.VaadinFormItem;
+import com.vaadin.ui.VaadinTextField;
+
+/**
+ * Demo view for {@link VaadinFormLayout}.
+ * 
+ * @author Vaadin Ltd
+ */
+@ComponentDemo(name = "Vaadin Form Layout", href = "vaadin-form-layout")
+public class VaadinFormLayoutView extends DemoView {
+
+    @Override
+    void initView() {
+        // @formatter:off
+        // begin-source-example
+        // source-example-heading: A form layout with custom responsive layouting
+        VaadinFormLayout nameLayout = new VaadinFormLayout();
+
+        VaadinTextField titleField = new VaadinTextField()
+                .setLabel("Title")
+                .setPlaceholder("Sir");
+        VaadinTextField firstNameField = new VaadinTextField()
+                .setLabel("First name")
+                .setPlaceholder("John");
+        VaadinTextField lastNameField = new VaadinTextField()
+                .setLabel("Last name")
+                .setPlaceholder("Doe");
+
+        nameLayout.add(titleField, firstNameField, lastNameField);
+
+        nameLayout.setResponsiveSteps(
+                new ResponsiveStep("0", 1),
+                new ResponsiveStep("20em", 2),
+                new ResponsiveStep("22em", 3));
+        // end-source-example
+        // @formatter:on
+
+        // begin-source-example
+        // source-example-heading: A form layout with fields wrapped in form items
+        VaadinFormLayout layoutWithFormItems = new VaadinFormLayout();
+
+        VaadinFormItem firstItem = new VaadinFormItem(
+                new VaadinTextField().setPlaceholder("John"));
+        VaadinFormItem secondItem = new VaadinFormItem(
+                new VaadinTextField().setPlaceholder("Doe"));
+
+        Div firstItemLabelComponent = new Div();
+        firstItemLabelComponent.setText("First name");
+
+        Div secondItemLabelComponent = new Div();
+        secondItemLabelComponent.setText("Last name");
+
+        firstItem.addToLabel(firstItemLabelComponent);
+        secondItem.addToLabel(secondItemLabelComponent);
+
+        layoutWithFormItems.add(firstItem, secondItem);
+        // end-source-example
+
+        add(new H3("A form layout with custom responsive layouting"),
+                nameLayout);
+        add(new H3("A form layout with fields wrapped in form items"),
+                layoutWithFormItems);
+    }
+}

flow-components-parent/flow-components-demo/src/test/java/com/vaadin/flow/demo/views/VaadinFormLayoutIT.java

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2000-2017 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.flow.demo.views;
+
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.Dimension;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.flow.demo.AbstractChromeTest;
+import com.vaadin.testbench.By;
+
+/**
+ * Integration tests for the {@link VaadinFormLayoutView}.
+ */
+public class VaadinFormLayoutIT extends AbstractChromeTest {
+
+    private WebElement layout;
+
+    @Before
+    public void init() {
+        open();
+        waitForElementPresent(By.tagName("main-layout"));
+        layout = findElement(By.tagName("main-layout"));
+        Assert.assertTrue(isElementPresent(By.tagName("vaadin-form-layout")));
+    }
+
+    @Test
+    public void custom_responsive_layouting() {
+        WebElement firstLayout = layout
+                .findElement(By.tagName("vaadin-form-layout"));
+        List<WebElement> textFields = firstLayout
+                .findElements(By.tagName("vaadin-text-field"));
+        Assert.assertEquals(3, textFields.size());
+
+        getDriver().manage().window().setSize(new Dimension(1000, 1000));
+
+        // 3 columns, all should be horizontally aligned (tolerance of 2 pixels
+        // given)
+        Assert.assertTrue("All 3 columns should be horizontally aligned",
+                Math.abs(textFields.get(2).getLocation().getY()
+                - textFields.get(1).getLocation().getY()) < 2);
+        Assert.assertTrue(Math.abs(textFields.get(1).getLocation().getY()
+                - textFields.get(0).getLocation().getY()) < 2);
+
+        getDriver().manage().window().setSize(new Dimension(450, 620));
+
+        // window resized, should be in 2 column mode, last textfield below
+        // other two
+        Assert.assertTrue(
+                "Layout should be in 2 column mode, last field should be below the first two",
+                textFields.get(2).getLocation().getY() > textFields
+                .get(1).getLocation().getY());
+        Assert.assertTrue(textFields.get(2).getLocation().getY() > textFields
+                .get(0).getLocation().getY());
+
+        getDriver().manage().window().setSize(new Dimension(400, 620));
+
+        // resized to 1 column mode, fields should be arranged below one another
+        Assert.assertTrue(
+                "Layout should be in 1 column mode, all fields should be below one another",
+                textFields.get(2).getLocation().getY() > textFields
+                .get(1).getLocation().getY());
+        Assert.assertTrue(textFields.get(1).getLocation().getY() > textFields
+                .get(0).getLocation().getY());
+    }
+
+    @Override
+    protected String getTestPath() {
+        return "/vaadin-form-layout";
+    }
+}