Skip to content

Commit 128837a

Browse files
jounijouni
authored
refactor!: field components baseline alignment base styles (#10320)
1 parent e70745d commit 128837a

File tree

48 files changed

+484
-105
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+484
-105
lines changed

‎dev/baseline.html‎

Lines changed: 354 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,354 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Field Baseline Alignment</title>
8+
<script type="module" src="./common.js"></script>
9+
10+
<script type="module">
11+
import '@vaadin/button';
12+
import '@vaadin/checkbox';
13+
import '@vaadin/checkbox-group';
14+
import '@vaadin/custom-field';
15+
import '@vaadin/date-time-picker';
16+
import '@vaadin/icon';
17+
import '@vaadin/icons';
18+
import '@vaadin/number-field';
19+
import '@vaadin/select';
20+
import '@vaadin/radio-group';
21+
import '@vaadin/text-area';
22+
import '@vaadin/text-field';
23+
24+
const select = document.querySelectorAll('vaadin-select').forEach((select) => {
25+
select.items = [
26+
{ label: 'A', value: 'a' },
27+
{ label: 'B', value: 'b' },
28+
{ label: 'C', value: 'c' },
29+
];
30+
});
31+
32+
document.querySelector('#flex').addEventListener('change', (e) => {
33+
document.documentElement.classList.toggle('use-flex', e.target.checked);
34+
});
35+
</script>
36+
<style>
37+
.use-flex section {
38+
display: flex;
39+
align-items: baseline;
40+
gap: 0.3em;
41+
42+
> * {
43+
flex: none;
44+
}
45+
46+
> span:first-child {
47+
position: relative;
48+
z-index: 1;
49+
50+
&::before {
51+
content: '';
52+
position: absolute;
53+
width: 200vw;
54+
height: 1px;
55+
background: rgba(255, 0, 0, 0.612);
56+
top: calc(1em + 1px);
57+
}
58+
}
59+
}
60+
</style>
61+
</head>
62+
63+
<body>
64+
<vaadin-checkbox id="flex" label="Use flex layout & show baseline"></vaadin-checkbox>
65+
<h2 class="heading">Plain</h2>
66+
<section>
67+
<span>Inline text</span>
68+
<vaadin-button>
69+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
70+
Button
71+
</vaadin-button>
72+
<vaadin-checkbox checked></vaadin-checkbox>
73+
<vaadin-text-field placeholder="Text Field">
74+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
75+
</vaadin-text-field>
76+
<vaadin-text-area placeholder="Text Area"></vaadin-text-area>
77+
<vaadin-date-time-picker date-placeholder="Date-Time" time-placeholder="Picker"></vaadin-date-time-picker>
78+
<vaadin-select placeholder="Select"></vaadin-select>
79+
<vaadin-checkbox-group theme="horizontal">
80+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
81+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
82+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
83+
</vaadin-checkbox-group>
84+
<vaadin-checkbox-group>
85+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
86+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
87+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
88+
</vaadin-checkbox-group>
89+
<vaadin-radio-group>
90+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
91+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
92+
<vaadin-radio-button value="c" label="C"></vaadin-radio-button>
93+
</vaadin-radio-group>
94+
<vaadin-custom-field>
95+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
96+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
97+
</vaadin-custom-field>
98+
</section>
99+
100+
<h2 class="heading">Labels</h2>
101+
<section>
102+
<span>Inline text</span>
103+
<vaadin-button>
104+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
105+
Button
106+
</vaadin-button>
107+
<vaadin-checkbox checked label="Label"></vaadin-checkbox>
108+
<vaadin-text-field placeholder="Text Field" label="Label that wraps on multiple lines">
109+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
110+
</vaadin-text-field>
111+
<vaadin-text-area placeholder="Text Area" label="Label"></vaadin-text-area>
112+
<vaadin-date-time-picker
113+
date-placeholder="Date-Time"
114+
time-placeholder="Picker"
115+
label="Label"
116+
></vaadin-date-time-picker>
117+
<vaadin-select placeholder="Select" label="Label"></vaadin-select>
118+
<vaadin-checkbox-group theme="horizontal" label="Label">
119+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
120+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
121+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
122+
</vaadin-checkbox-group>
123+
<vaadin-checkbox-group label="Label">
124+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
125+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
126+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
127+
</vaadin-checkbox-group>
128+
<vaadin-radio-group label="Label">
129+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
130+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
131+
<vaadin-radio-button value="c" label="C"></vaadin-radio-button>
132+
</vaadin-radio-group>
133+
<vaadin-custom-field label="Label that is long but doesn't wrap">
134+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
135+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
136+
</vaadin-custom-field>
137+
</section>
138+
139+
<h2 class="heading">Helper Texts</h2>
140+
<section>
141+
<span>Inline text</span>
142+
<vaadin-button>
143+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
144+
Button
145+
</vaadin-button>
146+
<vaadin-checkbox checked label="Label" helper-text="Description text"></vaadin-checkbox>
147+
<vaadin-text-field
148+
placeholder="Text Field"
149+
label="Label that wraps on multiple lines"
150+
helper-text="Description text"
151+
>
152+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
153+
</vaadin-text-field>
154+
<vaadin-text-area placeholder="Text Area" label="Label" helper-text="Description text"></vaadin-text-area>
155+
<vaadin-date-time-picker
156+
date-placeholder="Date-Time"
157+
time-placeholder="Picker"
158+
label="Label"
159+
helper-text="Description text"
160+
></vaadin-date-time-picker>
161+
<vaadin-select placeholder="Select" label="Label" helper-text="Description text"></vaadin-select>
162+
<vaadin-checkbox-group theme="horizontal" label="Label" helper-text="Description text">
163+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
164+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
165+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
166+
</vaadin-checkbox-group>
167+
<vaadin-checkbox-group label="Label" helper-text="Description text">
168+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
169+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
170+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
171+
</vaadin-checkbox-group>
172+
<vaadin-radio-group label="Label" helper-text="Description text">
173+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
174+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
175+
<vaadin-radio-button value="c" label="C"></vaadin-radio-button>
176+
</vaadin-radio-group>
177+
<vaadin-custom-field label="Label that is long but doesn't wrap" helper-text="Description text">
178+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
179+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
180+
</vaadin-custom-field>
181+
</section>
182+
183+
<h2 class="heading">Helper Above Field</h2>
184+
<section>
185+
<span>Inline text</span>
186+
<vaadin-button>
187+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
188+
Button
189+
</vaadin-button>
190+
<vaadin-checkbox checked label="Label" helper-text="Description text" theme="helper-above-field">
191+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
192+
</vaadin-checkbox>
193+
<vaadin-text-field
194+
placeholder="Text Field"
195+
label="Label that wraps on multiple lines"
196+
helper-text="Description text"
197+
theme="helper-above-field"
198+
></vaadin-text-field>
199+
<vaadin-text-area
200+
placeholder="Text Area"
201+
label="Label"
202+
helper-text="Description text"
203+
theme="helper-above-field"
204+
></vaadin-text-area>
205+
<vaadin-date-time-picker
206+
date-placeholder="Date-Time"
207+
time-placeholder="Picker"
208+
label="Label"
209+
helper-text="Description text"
210+
theme="helper-above-field"
211+
></vaadin-date-time-picker>
212+
<vaadin-select
213+
placeholder="Select"
214+
label="Label"
215+
helper-text="Description text"
216+
theme="helper-above-field"
217+
></vaadin-select>
218+
<vaadin-checkbox-group theme="horizontal helper-above-field" label="Label" helper-text="Description text">
219+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
220+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
221+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
222+
</vaadin-checkbox-group>
223+
<vaadin-checkbox-group label="Label" helper-text="Description text" theme="helper-above-field">
224+
<vaadin-checkbox value="a" label="A" checked></vaadin-checkbox>
225+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
226+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
227+
</vaadin-checkbox-group>
228+
<vaadin-radio-group label="Label" helper-text="Description text" theme="helper-above-field">
229+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
230+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
231+
<vaadin-radio-button value="c" label="C"></vaadin-radio-button>
232+
</vaadin-radio-group>
233+
<vaadin-custom-field
234+
label="Label that is long but doesn't wrap"
235+
helper-text="Description text"
236+
theme="helper-above-field"
237+
>
238+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
239+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
240+
</vaadin-custom-field>
241+
</section>
242+
243+
<h2 class="heading">Error Messages</h2>
244+
<section>
245+
<span>Inline text</span>
246+
<vaadin-button>
247+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
248+
Button
249+
</vaadin-button>
250+
<vaadin-checkbox
251+
checked
252+
label="Label"
253+
helper-text="Description text"
254+
invalid
255+
error-message="Something is wrong"
256+
></vaadin-checkbox>
257+
<vaadin-text-field
258+
placeholder="Text Field"
259+
label="Label that wraps on multiple lines"
260+
helper-text="Description text"
261+
invalid
262+
error-message="Something is wrong"
263+
>
264+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
265+
</vaadin-text-field>
266+
<vaadin-text-area
267+
placeholder="Text Area"
268+
label="Label"
269+
helper-text="Description text"
270+
invalid
271+
error-message="Something is wrong"
272+
></vaadin-text-area>
273+
<vaadin-date-time-picker
274+
date-placeholder="Date-Time"
275+
time-placeholder="Picker"
276+
label="Label"
277+
helper-text="Description text"
278+
invalid
279+
error-message="Something is wrong"
280+
></vaadin-date-time-picker>
281+
<vaadin-select
282+
placeholder="Select"
283+
label="Label"
284+
helper-text="Description text"
285+
invalid
286+
error-message="Something is wrong"
287+
></vaadin-select>
288+
<vaadin-checkbox-group label="Label" helper-text="Description text" invalid error-message="Something is wrong">
289+
<vaadin-checkbox value="a" label="A"></vaadin-checkbox>
290+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
291+
<vaadin-checkbox value="c" label="C"></vaadin-checkbox>
292+
</vaadin-checkbox-group>
293+
<vaadin-radio-group label="Label" helper-text="Description text" invalid error-message="Something is wrong">
294+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
295+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
296+
<vaadin-radio-button value="c" label="C"></vaadin-radio-button>
297+
</vaadin-radio-group>
298+
<vaadin-custom-field
299+
label="Label that is long but doesn't wrap"
300+
helper-text="Description text"
301+
invalid
302+
error-message="Something is wrong"
303+
>
304+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
305+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
306+
</vaadin-custom-field>
307+
</section>
308+
309+
<h2 class="heading">Mixed</h2>
310+
<section>
311+
<span>Inline text</span>
312+
<vaadin-button>
313+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
314+
Button
315+
</vaadin-button>
316+
<vaadin-checkbox
317+
checked
318+
label="Label"
319+
helper-text="Description text"
320+
invalid
321+
error-message="Something is wrong"
322+
></vaadin-checkbox>
323+
<vaadin-text-field placeholder="Text Field" label="Label that wraps on multiple lines">
324+
<vaadin-icon icon="vaadin:file" slot="prefix"></vaadin-icon>
325+
</vaadin-text-field>
326+
<vaadin-text-area placeholder="Text Area" helper-text="Description text"></vaadin-text-area>
327+
<vaadin-date-time-picker
328+
date-placeholder="Date-Time"
329+
time-placeholder="Picker"
330+
invalid
331+
error-message="Something is wrong"
332+
></vaadin-date-time-picker>
333+
<vaadin-select placeholder="Select" label="Label" invalid error-message="Something is wrong"></vaadin-select>
334+
<vaadin-checkbox-group label="Label" theme="horizontal">
335+
<vaadin-checkbox value="a" label="A"></vaadin-checkbox>
336+
<vaadin-checkbox value="b" label="B"></vaadin-checkbox>
337+
</vaadin-checkbox-group>
338+
<vaadin-radio-group label="Label" invalid error-message="Something is wrong">
339+
<vaadin-radio-button value="a" label="A"></vaadin-radio-button>
340+
<vaadin-radio-button value="b" label="B"></vaadin-radio-button>
341+
</vaadin-radio-group>
342+
<vaadin-custom-field
343+
label="Label that is long but doesn't wrap"
344+
helper-text="Description text"
345+
invalid
346+
error-message="Something is wrong"
347+
theme="helper-above-field"
348+
>
349+
<vaadin-text-field placeholder="Custom"></vaadin-text-field>
350+
<vaadin-number-field placeholder="Field"></vaadin-number-field>
351+
</vaadin-custom-field>
352+
</section>
353+
</body>
354+
</html>

‎packages/aura/src/size.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
--vaadin-gap-m: var(--vaadin-padding-m);
4040
--vaadin-gap-l: var(--vaadin-padding-l);
4141
--vaadin-gap-xl: var(--vaadin-padding-xl);
42+
43+
--vaadin-field-baseline-input-height: calc(
44+
1lh + round(var(--vaadin-padding-s) / 1.4, 1px) * 2 + var(--vaadin-input-field-border-width, 1px) * 2
45+
);
4246
}
4347

4448
@media (pointer: coarse) {

‎packages/button/src/styles/vaadin-button-base-styles.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export const buttonStyles = css`
1919
user-select: none;
2020
cursor: var(--vaadin-clickable-cursor);
2121
box-sizing: border-box;
22-
vertical-align: middle;
2322
flex-shrink: 0;
2423
height: var(--vaadin-button-height, auto);
2524
margin: var(--vaadin-button-margin, 0);

‎packages/checkbox-group/src/styles/vaadin-checkbox-group-base-styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
77
import { group } from '@vaadin/field-base/src/styles/group-base-styles.js';
88

9-
export const checkboxGroupStyles = [field, group('checkbox')];
9+
export const checkboxGroupStyles = [field, group];

‎packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-helper-above-field.png‎

-10 Bytes
Loading

‎packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/ltr-horizontal.png‎

46 Bytes
Loading

‎packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-helper-above-field.png‎

-10 Bytes
Loading

‎packages/checkbox-group/test/visual/base/screenshots/checkbox-group/baseline/rtl-horizontal.png‎

48 Bytes
Loading

‎packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-error-message.png‎

-21 Bytes
Loading

‎packages/checkbox/test/visual/base/screenshots/checkbox/baseline/ltr-helper-text.png‎

-15 Bytes
Loading

0 commit comments

Comments
 (0)