Skip to content

Commit af483b5

Browse files
sissbrueckersissbruecker
authored
refactor!: remove deprecated form item CSS properties (#10148)
* refactor!: remove deprecated form item CSS properties * cleanup JSDoc
1 parent 367be61 commit af483b5

File tree

6 files changed

+6
-140
lines changed

6 files changed

+6
-140
lines changed

‎packages/form-layout/src/styles/vaadin-form-item-base-styles.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const formItemStyles = css`
1616
display: inline-flex;
1717
flex-flow: var(--_form-item-labels-above, column) nowrap;
1818
justify-self: stretch;
19-
margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
19+
margin: calc(0.5 * var(--vaadin-form-layout-row-spacing, 1em)) 0;
2020
}
2121
2222
:host([label-position='top']) {
@@ -34,16 +34,13 @@ export const formItemStyles = css`
3434
font-size: var(--vaadin-form-item-label-font-size, inherit);
3535
font-weight: var(--vaadin-form-item-label-font-weight, 500);
3636
line-height: var(--vaadin-form-item-label-line-height, inherit);
37-
width: var(
38-
--_form-item-labels-aside,
39-
var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
40-
);
37+
width: var(--_form-item-labels-aside, var(--vaadin-form-layout-label-width, 8em));
4138
word-break: break-word;
4239
}
4340
4441
#spacing {
4542
flex: 0 0 auto;
46-
width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
43+
width: var(--vaadin-form-layout-label-spacing, 1em);
4744
}
4845
4946
#content {

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

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,6 @@ export const FormItemMixin = (superClass) =>
4949
/** @protected */
5050
ready() {
5151
super.ready();
52-
53-
const computedStyle = getComputedStyle(this);
54-
const spacing = computedStyle.getPropertyValue('--vaadin-form-item-row-spacing');
55-
const labelWidth = computedStyle.getPropertyValue('--vaadin-form-item-label-width');
56-
const labelSpacing = computedStyle.getPropertyValue('--vaadin-form-item-label-spacing');
57-
58-
if (spacing !== '' && parseInt(spacing) !== 0) {
59-
issueWarning(
60-
'`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
61-
);
62-
}
63-
64-
if (labelWidth !== '' && parseInt(labelWidth) !== 0) {
65-
issueWarning(
66-
'`--vaadin-form-item-label-width` is deprecated since 24.7. Use `--vaadin-form-layout-label-width` on <vaadin-form-layout> instead.',
67-
);
68-
}
69-
70-
if (labelSpacing !== '' && parseInt(labelSpacing) !== 0) {
71-
issueWarning(
72-
'`--vaadin-form-item-label-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-label-spacing` on <vaadin-form-layout> instead.',
73-
);
74-
}
7552
}
7653

7754
/**

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,17 +80,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
8080
* ---|---
8181
* label | The label slot container
8282
*
83-
* ### Custom CSS Properties Reference
84-
*
85-
* The following custom CSS properties are available on the `<vaadin-form-item>`
86-
* element:
87-
*
88-
* Custom CSS property | Description | Default
89-
* ---|---|---
90-
* `--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`
91-
* `--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`
92-
* `--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`
93-
*
9483
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
9584
*/
9685
declare class FormItem extends FormItemMixin(ThemableMixin(HTMLElement)) {}

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
8585
* ---|---
8686
* label | The label slot container
8787
*
88-
* ### Custom CSS Properties Reference
89-
*
90-
* The following custom CSS properties are available on the `<vaadin-form-item>`
91-
* element:
92-
*
93-
* Custom CSS property | Description | Default
94-
* ---|---|---
95-
* `--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`
96-
* `--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`
97-
* `--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`
98-
*
9988
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
10089
*
10190
* @customElement

‎packages/form-layout/test/form-layout.test.js‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -122,89 +122,6 @@ describe('form layout', () => {
122122
});
123123
});
124124

125-
describe('deprecated CSS properties', () => {
126-
let layout, item;
127-
128-
beforeEach(() => {
129-
sinon.stub(console, 'warn');
130-
131-
layout = fixtureSync(`
132-
<vaadin-form-layout style="font-size: 16px;">
133-
<input />
134-
<vaadin-form-item></vaadin-form-item>
135-
<input />
136-
</vaadin-form-layout>
137-
`);
138-
layout.responsiveSteps = [{ columns: 3 }];
139-
item = layout.querySelector('vaadin-form-item');
140-
});
141-
142-
afterEach(() => {
143-
console.warn.restore();
144-
});
145-
146-
it('should not have deprecated --vaadin-form-item-label-width by default', () => {
147-
expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-label-width')).to.be.empty;
148-
});
149-
150-
it('should not have deprecated --vaadin-form-item-label-spacing by default', () => {
151-
expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-label-spacing')).to.be.empty;
152-
});
153-
154-
it('should not have deprecated --vaadin-form-item-row-spacing by default', () => {
155-
expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-row-spacing')).to.be.empty;
156-
});
157-
158-
it('should warn once when adding form items with deprecated --vaadin-form-item-label-width', () => {
159-
for (let i = 0; i < 2; i++) {
160-
const item = document.createElement('vaadin-form-item');
161-
item.style.setProperty('--vaadin-form-item-label-width', '100px');
162-
layout.appendChild(item);
163-
}
164-
165-
expect(console.warn).to.be.calledOnce;
166-
expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-label-width` is deprecated');
167-
});
168-
169-
it('should warn once when adding form items with deprecated --vaadin-form-item-label-spacing', () => {
170-
for (let i = 0; i < 2; i++) {
171-
const item = document.createElement('vaadin-form-item');
172-
item.style.setProperty('--vaadin-form-item-label-spacing', '8px');
173-
layout.appendChild(item);
174-
}
175-
176-
expect(console.warn).to.be.calledOnce;
177-
expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-label-spacing` is deprecated');
178-
});
179-
180-
it('should warn when adding form items with deprecated --vaadin-form-item-row-spacing', () => {
181-
for (let i = 0; i < 2; i++) {
182-
const item = document.createElement('vaadin-form-item');
183-
item.style.setProperty('--vaadin-form-item-row-spacing', '8px');
184-
layout.appendChild(item);
185-
}
186-
187-
expect(console.warn).to.be.calledOnce;
188-
expect(console.warn.args[0][0]).to.contain('`--vaadin-form-item-row-spacing` is deprecated');
189-
});
190-
191-
it('should apply deprecated --vaadin-form-item-label-spacing when set', () => {
192-
item.style.setProperty('--vaadin-form-item-label-spacing', '8px');
193-
expect(getComputedStyle(item.$.spacing).width).to.equal('8px');
194-
});
195-
196-
it('should apply deprecated --vaadin-form-item-label-width when set', () => {
197-
item.style.setProperty('--vaadin-form-item-label-width', '100px');
198-
expect(getComputedStyle(item.$.label).width).to.equal('100px');
199-
});
200-
201-
it('should apply deprecated --vaadin-form-item-row-spacing when set', () => {
202-
item.style.setProperty('--vaadin-form-item-row-spacing', '8px');
203-
expect(getComputedStyle(item).marginTop).to.equal('4px');
204-
expect(getComputedStyle(item).marginBottom).to.equal('4px');
205-
});
206-
});
207-
208125
describe('colspan', () => {
209126
let layout;
210127

‎packages/form-layout/test/visual/lumo/form-layout.test.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,12 +141,9 @@ describe('form-layout', () => {
141141
<style>
142142
vaadin-form-layout {
143143
--vaadin-form-layout-column-spacing: 4em;
144-
}
145-
146-
vaadin-form-item {
147-
--vaadin-form-item-label-width: 6em;
148-
--vaadin-form-item-label-spacing: 1em;
149-
--vaadin-form-item-row-spacing: 1.25em;
144+
--vaadin-form-layout-label-width: 6em;
145+
--vaadin-form-layout-label-spacing: 1em;
146+
--vaadin-form-layout-row-spacing: 1.25em;
150147
}
151148
</style>
152149
<vaadin-form-layout id="tests">

0 commit comments

Comments
 (0)