@vaadin/form-layout 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/form-layout",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,17 +34,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/custom-field": "23.1.0-alpha1",
+    "@vaadin/custom-field": "23.1.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-alpha1",
-    "sinon": "^9.2.1"
+    "@vaadin/text-field": "23.1.0-alpha4",
+    "sinon": "^13.0.2"
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/vaadin-form-item.js

@@ -177,10 +177,6 @@ class FormItem extends ThemableMixin(PolymerElement) {
      * @private
      */
     this.__fieldNode = null;
-
-    // Ensure every instance has unique ID
-    const uniqueId = (FormItem._uniqueLabelId = 1 + FormItem._uniqueLabelId || 0);
-    this.__labelId = `label-${this.localName}-${uniqueId}`;
   }
 
   /**
@@ -244,7 +240,6 @@ class FormItem extends ThemableMixin(PolymerElement) {
    */
   __onLabelSlotChange() {
     if (this.__labelNode) {
-      this.__labelNode.id = '';
       this.__labelNode = null;
 
       if (this.__fieldNode) {
@@ -255,7 +250,16 @@ class FormItem extends ThemableMixin(PolymerElement) {
     const newLabelNode = this.$.labelSlot.assignedElements()[0];
     if (newLabelNode) {
       this.__labelNode = newLabelNode;
-      this.__labelNode.id = this.__labelId;
+
+      if (this.__labelNode.id) {
+        // The new label node already has an id. Let's use it.
+        this.__labelId = this.__labelNode.id;
+      } else {
+        // The new label node doesn't have an id yet. Generate a unique one.
+        const uniqueId = (FormItem._uniqueLabelId = 1 + FormItem._uniqueLabelId || 0);
+        this.__labelId = `label-${this.localName}-${uniqueId}`;
+        this.__labelNode.id = this.__labelId;
+      }
 
       if (this.__fieldNode) {
         this.__linkLabelToField(this.__fieldNode);
@@ -286,7 +290,7 @@ class FormItem extends ThemableMixin(PolymerElement) {
     if (fieldNodes.length > 1) {
       console.warn(
         `WARNING: Since Vaadin 23, placing multiple fields directly to a <vaadin-form-item> is deprecated.
-Please wrap fields with a <vaadin-custom-field> instead.`
+Please wrap fields with a <vaadin-custom-field> instead.`,
       );
     }
 

package/src/vaadin-form-layout.js

@@ -217,10 +217,10 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
           return [
             { minWidth: 0, columns: 1, labelsPosition: 'top' },
             { minWidth: '20em', columns: 1 },
-            { minWidth: '40em', columns: 2 }
+            { minWidth: '40em', columns: 2 },
           ];
         },
-        observer: '_responsiveStepsChanged'
+        observer: '_responsiveStepsChanged',
       },
 
       /**
@@ -228,7 +228,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
        * @private
        */
       _columnCount: {
-        type: Number
+        type: Number,
       },
 
       /**
@@ -236,8 +236,8 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
        * @private
        */
       _labelsOnTop: {
-        type: Boolean
-      }
+        type: Boolean,
+      },
     };
   }
 
@@ -314,7 +314,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
   _getObservableNodes(nodeList) {
     const ignore = ['template', 'style', 'dom-repeat', 'dom-if'];
     return Array.from(nodeList).filter(
-      (node) => node.nodeType === Node.ELEMENT_NODE && ignore.indexOf(node.localName.toLowerCase()) === -1
+      (node) => node.nodeType === Node.ELEMENT_NODE && ignore.indexOf(node.localName.toLowerCase()) === -1,
     );
   }
 
@@ -376,7 +376,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
 
         if (step.labelsPosition !== undefined && ['aside', 'top'].indexOf(step.labelsPosition) === -1) {
           throw new Error(
-            `Invalid 'labelsPosition' value of ${step.labelsPosition}, 'aside' or 'top' string is required.`
+            `Invalid 'labelsPosition' value of ${step.labelsPosition}, 'aside' or 'top' string is required.`,
           );
         }
       });
@@ -389,7 +389,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
         this.responsiveSteps = [
           { minWidth: 0, columns: 1, labelsPosition: 'top' },
           { minWidth: '20em', columns: 1 },
-          { minWidth: '40em', columns: 2 }
+          { minWidth: '40em', columns: 2 },
         ];
       }
     }
@@ -443,7 +443,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
    */
   updateStyles(properties = {}) {
     console.warn(
-      `WARNING: Since Vaadin 23, updateStyles() is deprecated. Use the native element.style.setProperty API to set custom CSS property values.`
+      `WARNING: Since Vaadin 23, updateStyles() is deprecated. Use the native element.style.setProperty API to set custom CSS property values.`,
     );
 
     Object.entries(properties).forEach(([key, value]) => {
@@ -471,8 +471,8 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     const columnSpacing = style.getPropertyValue('--vaadin-form-layout-column-spacing');
 
     const direction = style.direction;
-    const marginStartProp = 'margin-' + (direction === 'ltr' ? 'left' : 'right');
-    const marginEndProp = 'margin-' + (direction === 'ltr' ? 'right' : 'left');
+    const marginStartProp = `margin-${direction === 'ltr' ? 'left' : 'right'}`;
+    const marginEndProp = `margin-${direction === 'ltr' ? 'right' : 'left'}`;
 
     const containerWidth = this.offsetWidth;
 
@@ -520,7 +520,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
           const colspanRatio = (this._columnCount - col - colspan) / this._columnCount;
           child.style.setProperty(
             marginEndProp,
-            `calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`
+            `calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`,
           );
         } else {
           child.style.removeProperty(marginEndProp);

package/theme/lumo/vaadin-form-item-styles.js

@@ -42,5 +42,5 @@ registerStyles(
       color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
     }
   `,
-  { moduleId: 'lumo-form-item' }
+  { moduleId: 'lumo-form-item' },
 );

package/theme/lumo/vaadin-form-layout-styles.js

@@ -8,5 +8,5 @@ registerStyles(
       --vaadin-form-layout-column-spacing: var(--lumo-space-l);
     }
   `,
-  { moduleId: 'lumo-form-layout' }
+  { moduleId: 'lumo-form-layout' },
 );

package/theme/material/vaadin-form-item-styles.js

@@ -24,5 +24,5 @@ registerStyles(
       color: var(--material-error-text-color);
     }
   `,
-  { moduleId: 'material-form-item' }
+  { moduleId: 'material-form-item' },
 );