feat: allow hiding the floating label

Close #89

Author: javier-godoy

src/main/java/com/flowingcode/vaadin/addons/chipfield/ChipField.java

@@ -2,7 +2,7 @@
  * #%L
  * ChipField Addon
  * %%
- * Copyright (C) 2018 - 2022 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -275,6 +275,26 @@ public void setLabel(String label) {
     getElement().setProperty("label", label);
   }
 
+  /**
+   * Sets whether the label is displayed as a static placeholder that is hidden when the input has a
+   * value, instead of floating above the input. When the label does not float, no space is reserved
+   * for it above the input.
+   *
+   * @param noLabelFloat {@code true} to prevent the label from floating, {@code false} otherwise.
+   */
+  public void setNoLabelFloat(boolean noLabelFloat) {
+    getElement().setProperty("noLabelFloat", noLabelFloat);
+  }
+
+  /**
+   * Returns whether the label is prevented from floating above the input.
+   *
+   * @return {@code true} if the label does not float, {@code false} otherwise.
+   */
+  public boolean isNoLabelFloat() {
+    return getElement().getProperty("noLabelFloat", false);
+  }
+
   public String[] getChipsAsStrings() {
     return super.getValue().stream().map(itemLabelGenerator).toArray(String[]::new);
   }

src/main/resources/META-INF/frontend/paper-chip-input-autocomplete.js

@@ -84,6 +84,15 @@ class PaperChipInputAutocomplete extends ThemableMixin(PolymerElement) {
                 value: ''
             },
 
+            /**
+            * If true, the label is displayed as a static placeholder that is hidden
+            * when the input has a value, instead of floating above the input.
+            */
+            noLabelFloat: {
+                type: Boolean,
+                value: false
+            },
+
             /**
             * If true, the paper-chip-input-autocomplete is focused.
             */
@@ -274,6 +283,7 @@ class PaperChipInputAutocomplete extends ThemableMixin(PolymerElement) {
                         disabled$="[[disabled]]"
                         readonly$="[[readonly]]"
                         label="[[label]]"
+                        no-label-float$="[[noLabelFloat]]"
                         on-keyup="_findItems"
                         value="{{_inputValue}}"
                         autofocus="{{autofocus}}"

src/test/java/com/flowingcode/vaadin/addons/chipfield/ChipfieldDemoView.java

@@ -2,7 +2,7 @@
  * #%L
  * ChipField Addon
  * %%
- * Copyright (C) 2018 - 2022 Flowing Code
+ * Copyright (C) 2018 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,5 +40,6 @@ public ChipfieldDemoView() {
     addDemo(BinderDemo.class);
     addDemo(ReadonlyDemo.class);
     addDemo(StyledDemo.class);
+    addDemo(NoLabelFloatDemo.class);
   }
 }

src/test/java/com/flowingcode/vaadin/addons/chipfield/NoLabelFloatDemo.java

@@ -0,0 +1,59 @@
+/*-
+ * #%L
+ * ChipField Addon
+ * %%
+ * Copyright (C) 2018 - 2026 Flowing Code
+ * %%
+ * 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.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.chipfield;
+
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.vaadin.flow.component.formlayout.FormLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@Route(value = "chipfield/no-label-float", layout = ChipfieldDemoView.class)
+@PageTitle("No Label Float")
+@DemoSource
+@SuppressWarnings("serial")
+public class NoLabelFloatDemo extends VerticalLayout {
+
+  public NoLabelFloatDemo() {
+    // by default, space is reserved above the input for the floating label,
+    // which misaligns the field from the label of the enclosing form item
+    ChipField<String> floating = newChipField();
+
+    // when the label does not float, no space is reserved for it above the input
+    ChipField<String> notFloating = newChipField();
+    notFloating.setNoLabelFloat(true);
+
+    FormLayout formLayout = new FormLayout();
+    formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1));
+    formLayout.setWidth("500px");
+    formLayout.addFormItem(floating, "Floating label");
+    formLayout.addFormItem(notFloating, "No label float");
+
+    add(formLayout);
+  }
+
+  private static ChipField<String> newChipField() {
+    ChipField<String> chf = new ChipField<>("", "Mercury", "Venus", "Earth", "Mars", "Jupiter");
+    chf.addSelectedItem("Earth");
+    chf.setClosable(true);
+    chf.setWidthFull();
+    return chf;
+  }
+}