refactor!: remove deprecated form item CSS properties (#10148)

sissbruecker · web-flow · commit af483b5acfb9 · 2025-09-10T13:55:26.000+02:00
* refactor!: remove deprecated form item CSS properties

* cleanup JSDoc
diff --git a/packages/form-layout/src/styles/vaadin-form-item-base-styles.js b/packages/form-layout/src/styles/vaadin-form-item-base-styles.js
@@ -16,7 +16,7 @@ export const formItemStyles = css`
     display: inline-flex;
     flex-flow: var(--_form-item-labels-above, column) nowrap;
     justify-self: stretch;
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
+    margin: calc(0.5 * var(--vaadin-form-layout-row-spacing, 1em)) 0;
   }
 
   :host([label-position='top']) {
@@ -34,16 +34,13 @@ export const formItemStyles = css`
     font-size: var(--vaadin-form-item-label-font-size, inherit);
     font-weight: var(--vaadin-form-item-label-font-weight, 500);
     line-height: var(--vaadin-form-item-label-line-height, inherit);
-    width: var(
-      --_form-item-labels-aside,
-      var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
-    );
+    width: var(--_form-item-labels-aside, var(--vaadin-form-layout-label-width, 8em));
     word-break: break-word;
   }
 
   #spacing {
     flex: 0 0 auto;
-    width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
+    width: var(--vaadin-form-layout-label-spacing, 1em);
   }
 
   #content {
diff --git a/packages/form-layout/src/vaadin-form-item-mixin.js b/packages/form-layout/src/vaadin-form-item-mixin.js
@@ -49,29 +49,6 @@ export const FormItemMixin = (superClass) =>
     /** @protected */
     ready() {
       super.ready();
-
-      const computedStyle = getComputedStyle(this);
-      const spacing = computedStyle.getPropertyValue('--vaadin-form-item-row-spacing');
-      const labelWidth = computedStyle.getPropertyValue('--vaadin-form-item-label-width');
-      const labelSpacing = computedStyle.getPropertyValue('--vaadin-form-item-label-spacing');
-
-      if (spacing !== '' && parseInt(spacing) !== 0) {
-        issueWarning(
-          '`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
-        );
-      }
-
-      if (labelWidth !== '' && parseInt(labelWidth) !== 0) {
-        issueWarning(
-          '`--vaadin-form-item-label-width` is deprecated since 24.7. Use `--vaadin-form-layout-label-width` on <vaadin-form-layout> instead.',
-        );
-      }
-
-      if (labelSpacing !== '' && parseInt(labelSpacing) !== 0) {
-        issueWarning(
-          '`--vaadin-form-item-label-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-label-spacing` on <vaadin-form-layout> instead.',
-        );
-      }
     }
 
     /**
diff --git a/packages/form-layout/src/vaadin-form-item.d.ts b/packages/form-layout/src/vaadin-form-item.d.ts
@@ -80,17 +80,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * ---|---
  * label | The label slot container
  *
- * ### Custom CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-item>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--vaadin-form-item-label-width` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`
- * `--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class FormItem extends FormItemMixin(ThemableMixin(HTMLElement)) {}
diff --git a/packages/form-layout/src/vaadin-form-item.js b/packages/form-layout/src/vaadin-form-item.js
@@ -85,17 +85,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * ---|---
  * label | The label slot container
  *
- * ### Custom CSS Properties Reference
- *
- * The following custom CSS properties are available on the `<vaadin-form-item>`
- * element:
- *
- * Custom CSS property | Description | Default
- * ---|---|---
- * `--vaadin-form-item-label-width` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`
- * `--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement
diff --git a/packages/form-layout/test/form-layout.test.js b/packages/form-layout/test/form-layout.test.js
@@ -122,89 +122,6 @@ describe('form layout', () => {
     });
   });
 
-  describe('deprecated CSS properties', () => {
-    let layout, item;
-
-    beforeEach(() => {
-      sinon.stub(console, 'warn');
-
-      layout = fixtureSync(`
-        <vaadin-form-layout style="font-size: 16px;">
-          <input />
-          <vaadin-form-item></vaadin-form-item>
-          <input />
-        </vaadin-form-layout>
-      `);
-      layout.responsiveSteps = [{ columns: 3 }];
-      item = layout.querySelector('vaadin-form-item');
-    });
-
-    afterEach(() => {
-      console.warn.restore();
-    });
-
-    it('should not have deprecated --vaadin-form-item-label-width by default', () => {
-      expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-label-width')).to.be.empty;
-    });
-
-    it('should not have deprecated --vaadin-form-item-label-spacing by default', () => {
-      expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-label-spacing')).to.be.empty;
-    });
-
-    it('should not have deprecated --vaadin-form-item-row-spacing by default', () => {
-      expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-row-spacing')).to.be.empty;
-    });
-
-    it('should warn once when adding form items with deprecated --vaadin-form-item-label-width', () => {
-      for (let i = 0; i < 2; i++) {
-        const item = document.createElement('vaadin-form-item');
-        item.style.setProperty('--vaadin-form-item-label-width', '100px');
-        layout.appendChild(item);
-      }
-
-      expect(console.warn).to.be.calledOnce;
-      expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-label-width` is deprecated');
-    });
-
-    it('should warn once when adding form items with deprecated --vaadin-form-item-label-spacing', () => {
-      for (let i = 0; i < 2; i++) {
-        const item = document.createElement('vaadin-form-item');
-        item.style.setProperty('--vaadin-form-item-label-spacing', '8px');
-        layout.appendChild(item);
-      }
-
-      expect(console.warn).to.be.calledOnce;
-      expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-label-spacing` is deprecated');
-    });
-
-    it('should warn when adding form items with deprecated --vaadin-form-item-row-spacing', () => {
-      for (let i = 0; i < 2; i++) {
-        const item = document.createElement('vaadin-form-item');
-        item.style.setProperty('--vaadin-form-item-row-spacing', '8px');
-        layout.appendChild(item);
-      }
-
-      expect(console.warn).to.be.calledOnce;
-      expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-row-spacing` is deprecated');
-    });
-
-    it('should apply deprecated --vaadin-form-item-label-spacing when set', () => {
-      item.style.setProperty('--vaadin-form-item-label-spacing', '8px');
-      expect(getComputedStyle(item.$.spacing).width).to.equal('8px');
-    });
-
-    it('should apply deprecated --vaadin-form-item-label-width when set', () => {
-      item.style.setProperty('--vaadin-form-item-label-width', '100px');
-      expect(getComputedStyle(item.$.label).width).to.equal('100px');
-    });
-
-    it('should apply deprecated --vaadin-form-item-row-spacing when set', () => {
-      item.style.setProperty('--vaadin-form-item-row-spacing', '8px');
-      expect(getComputedStyle(item).marginTop).to.equal('4px');
-      expect(getComputedStyle(item).marginBottom).to.equal('4px');
-    });
-  });
-
   describe('colspan', () => {
     let layout;
 
diff --git a/packages/form-layout/test/visual/lumo/form-layout.test.js b/packages/form-layout/test/visual/lumo/form-layout.test.js
@@ -141,12 +141,9 @@ describe('form-layout', () => {
           <style>
             vaadin-form-layout {
               --vaadin-form-layout-column-spacing: 4em;
-            }
-
-            vaadin-form-item {
-              --vaadin-form-item-label-width: 6em;
-              --vaadin-form-item-label-spacing: 1em;
-              --vaadin-form-item-row-spacing: 1.25em;
+              --vaadin-form-layout-label-width: 6em;
+              --vaadin-form-layout-label-spacing: 1em;
+              --vaadin-form-layout-row-spacing: 1.25em;
             }
           </style>
           <vaadin-form-layout id="tests">
