docs: add new variable doc and deprecate old one (#8636)

* docs: add new variable doc and deprecate old one

* docs: add a mention to the new variable at the deprecation note

* docs: move description to one line to fix table format

packages/form-layout/src/vaadin-form-item.d.ts

@@ -89,7 +89,7 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
  * ---|---|---
  * `--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`
  * `--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `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.
  */

packages/form-layout/src/vaadin-form-item.js

@@ -94,7 +94,7 @@ registerStyles('vaadin-form-item', formItemStyles, { moduleId: 'vaadin-form-item
  * ---|---|---
  * `--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`
  * `--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`
- * `--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `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.
  *

packages/form-layout/src/vaadin-form-layout.d.ts

@@ -98,6 +98,7 @@ export * from './vaadin-form-layout-mixin.js';
  * Custom CSS property | Description | Default
  * ---|---|---
  * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
+ * `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
  */
 declare class FormLayout extends FormLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 

packages/form-layout/src/vaadin-form-layout.js

@@ -101,6 +101,7 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
  * Custom CSS property | Description | Default
  * ---|---|---
  * `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
+ * `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | 1em`
  *
  * @customElement
  * @extends HTMLElement