Skip to content

Commit 13025bf

Browse files
jounijouni
committed
refactor!: field baseline alignment
1 parent acf4f65 commit 13025bf

File tree

13 files changed

+165
-79
lines changed

13 files changed

+165
-79
lines changed

‎dev/baseline.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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/text-field';
12+
import '@vaadin/text-area';
13+
import '@vaadin/checkbox';
14+
import '@vaadin/radio-group';
15+
import '@vaadin/checkbox-group';
16+
import '@vaadin/select';
17+
import '@vaadin/custom-field';
18+
import '@vaadin/number-field';
19+
20+
const select = document.querySelector('vaadin-select');
21+
select.items = [
22+
{ label: 'Show all', value: 'all' },
23+
{ component: 'hr' },
24+
{ label: 'XS (out of stock)', value: 'xs', disabled: true },
25+
{ label: 'S', value: 's' },
26+
{ label: 'M', value: 'm' },
27+
{ label: 'L', value: 'l' },
28+
{ label: 'XL', value: 'xl' },
29+
];
30+
</script>
31+
</head>
32+
33+
<body>
34+
<span>Inline text</span>
35+
<vaadin-checkbox></vaadin-checkbox>
36+
<vaadin-text-field required error-message="Write something"></vaadin-text-field>
37+
<vaadin-checkbox label="Checkbox" helper-text="Description text" required error-message="Check this"></vaadin-checkbox>
38+
<vaadin-text-field label="Label that should wrap on multiple lines" required error-message="Write something"></vaadin-text-field>
39+
<vaadin-text-field label="Label" helper-text="Description that wraps on multiple lines" required error-message="Write something"></vaadin-text-field>
40+
<vaadin-text-area required error-message="Write something"></vaadin-text-area>
41+
<vaadin-text-area label="Label" helper-text="Description that wraps on multiple lines" theme="helper-above-field" required error-message="Write something"></vaadin-text-area>
42+
<vaadin-select label="Label" required error-message="Select an item"></vaadin-select>
43+
<vaadin-checkbox-group label="Checkbox Group" helper-text="Description text">
44+
<vaadin-checkbox label="Option"></vaadin-checkbox>
45+
<vaadin-checkbox label="Option"></vaadin-checkbox>
46+
<vaadin-checkbox label="Option"></vaadin-checkbox>
47+
</vaadin-checkbox-group>
48+
<vaadin-radio-group label="Radio Group" helper-text="Description text" theme="helper-above-field">
49+
<vaadin-radio-button label="Option"></vaadin-radio-button>
50+
<vaadin-radio-button label="Option"></vaadin-radio-button>
51+
<vaadin-radio-button label="Option"></vaadin-radio-button>
52+
</vaadin-radio-group>
53+
<vaadin-custom-field label="Label" required error-message="This field is required"
54+
helper-text="Description text">
55+
<vaadin-text-field allowed-char-pattern="[0-9]" pattern="[0-9]*" maxlength="4" style="width: 5rem"
56+
required></vaadin-text-field>
57+
<vaadin-number-field required></vaadin-number-field>
58+
</vaadin-custom-field>
59+
</body>
60+
</html>

‎packages/aura/src/size.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
--vaadin-gap-m: var(--vaadin-padding-m);
3737
--vaadin-gap-l: var(--vaadin-padding-l);
3838
--vaadin-gap-xl: var(--vaadin-padding-xl);
39+
40+
--vaadin-field-baseline-input-height: calc(
41+
1lh + round(var(--vaadin-padding-s) / 1.4, 1px) * 2 + var(--vaadin-input-field-border-width, 1px) * 2
42+
);
3943
}
4044

4145
@media (pointer: coarse) {

‎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/custom-field/src/styles/vaadin-custom-field-base-styles.js‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,8 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { css } from 'lit';
7-
import { container } from '@vaadin/field-base/src/styles/container-base-styles.js';
87
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
98

10-
const customField = css`
11-
.vaadin-custom-field-container {
12-
width: 100%;
13-
}
9+
const customField = css``;
1410

15-
.inputs-wrapper {
16-
flex: none;
17-
}
18-
`;
19-
20-
export const customFieldStyles = [field, container, customField];
11+
export const customFieldStyles = [field, customField];

‎packages/field-base/src/styles/checkable-base-styles.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { css, unsafeCSS } from 'lit';
1010
export const checkable = (part, propName = part) => css`
1111
:host {
1212
align-items: center;
13-
display: inline-grid;
1413
gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
1514
grid-template-columns: auto 1fr;
1615
/*
@@ -30,10 +29,6 @@ export const checkable = (part, propName = part) => css`
3029
column-gap: 0;
3130
}
3231
33-
.vaadin-${unsafeCSS(propName)}-container {
34-
display: contents;
35-
}
36-
3732
[part='${unsafeCSS(part)}'],
3833
::slotted(input),
3934
[part='label'],
@@ -55,17 +50,20 @@ export const checkable = (part, propName = part) => css`
5550
grid-column: 1;
5651
}
5752
53+
[part='label'],
5854
[part='helper-text'],
5955
[part='error-message'] {
6056
grid-column: 2;
57+
width: auto;
58+
min-width: auto;
6159
}
6260
6361
/* Baseline vertical alignment */
6462
:host::before {
65-
content: '\\2003';
66-
grid-column: 1;
6763
grid-row: 1;
68-
width: 0;
64+
margin: 0;
65+
padding: 0;
66+
border: 0;
6967
}
7068
7169
/* visually hidden */

‎packages/field-base/src/styles/container-base-styles.d.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/field-base/src/styles/container-base-styles.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎packages/field-base/src/styles/field-base-styles.js‎

Lines changed: 85 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,42 @@ import { css } from 'lit';
88

99
export const field = css`
1010
:host {
11-
display: inline-flex;
11+
--_helper-below-field: initial;
12+
--_helper-above-field: ;
13+
--_no-label: initial;
14+
--_has-label: ;
15+
--_no-helper: initial;
16+
--_has-helper: ;
17+
--_no-error: initial;
18+
--_has-error: ;
19+
display: inline-grid;
20+
grid-template-columns: 100%;
21+
grid-template-rows:
22+
var(--_helper-below-field, var(--_has-label, auto) 0 1fr var(--_has-helper, auto) var(--_has-error, auto))
23+
var(--_helper-above-field, var(--_has-label, auto) var(--_has-helper, auto) 0 1fr var(--_has-error, auto));
24+
gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
1225
outline: none;
1326
cursor: default;
1427
-webkit-tap-highlight-color: transparent;
1528
}
1629
17-
:host([hidden]) {
18-
display: none !important;
30+
:host([has-label]) {
31+
--_has-label: initial;
32+
--_no-label: ;
1933
}
2034
21-
/* The label, helper text and the error message should neither grow nor shrink. */
22-
[part='label'],
23-
[part='helper-text'],
24-
[part='error-message'] {
25-
flex: none;
35+
:host([has-helper]) {
36+
--_has-helper: initial;
37+
--_no-helper: ;
38+
}
39+
40+
:host([has-error-message]) {
41+
--_has-error: initial;
42+
--_no-error: ;
43+
}
44+
45+
:host([hidden]) {
46+
display: none !important;
2647
}
2748
2849
:host(:not([has-label])) [part='label'],
@@ -31,14 +52,45 @@ export const field = css`
3152
display: none;
3253
}
3354
55+
/* Baseline alignment guide */
56+
:host::before {
57+
content: '\\2003';
58+
grid-column: 1;
59+
grid-row: var(--_helper-below-field, var(--_no-label, 1 / 2) var(--_has-label, 1 / 3))
60+
var(--_helper-above-field, 1 / 3);
61+
align-self: end;
62+
font-size: var(--vaadin-input-field-value-font-size, inherit);
63+
line-height: var(--vaadin-input-field-value-line-height, inherit);
64+
padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
65+
border: var(--vaadin-input-field-border-width, 1px) solid transparent;
66+
pointer-events: none;
67+
--_label-gap: var(--_helper-below-field, 0px)
68+
var(--_helper-above-field, var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs)));
69+
margin-bottom: calc(
70+
var(
71+
--vaadin-field-baseline-input-height,
72+
(1lh + var(--vaadin-padding-xs) * 2 + var(--vaadin-input-field-border-width, 1px) * 2)
73+
) *
74+
-1 - var(--_label-gap)
75+
);
76+
}
77+
78+
[class$='container'] {
79+
display: contents;
80+
}
81+
82+
[part] {
83+
grid-column: 1;
84+
}
85+
3486
[part='label'] {
3587
font-size: var(--vaadin-input-field-label-font-size, inherit);
3688
line-height: var(--vaadin-input-field-label-line-height, inherit);
3789
font-weight: var(--vaadin-input-field-label-font-weight, 500);
3890
color: var(--vaadin-input-field-label-color, var(--vaadin-text-color));
39-
order: var(--vaadin-input-field-helper-order);
4091
word-break: break-word;
4192
position: relative;
93+
grid-row: 1;
4294
}
4395
4496
::slotted(label) {
@@ -74,8 +126,28 @@ export const field = css`
74126
display: none;
75127
}
76128
129+
[part='label'],
130+
[part='helper-text'],
131+
[part='error-message'] {
132+
width: min-content;
133+
min-width: 100%;
134+
}
135+
136+
[part='input-field'],
137+
[part='group-field'],
138+
[part='input-fields'] {
139+
grid-row: var(--_helper-below-field, var(--_no-label, 1 / 3) var(--_has-label, 2 / 4))
140+
var(
141+
--_helper-above-field,
142+
var(--_no-label, var(--_no-helper, 1 / 3) var(--_has-helper, 2 / 4))
143+
var(--_has-label, var(--_no-helper, 2 / 4) var(--_has-helper, 3 / 5))
144+
);
145+
}
146+
77147
[part='input-field'] {
78-
flex: auto;
148+
width: var(--vaadin-field-default-width, 12em);
149+
max-width: 100%;
150+
min-width: 100%;
79151
}
80152
81153
:host([readonly]) [part='input-field'] {
@@ -91,7 +163,7 @@ export const field = css`
91163
line-height: var(--vaadin-input-field-helper-line-height, inherit);
92164
font-weight: var(--vaadin-input-field-helper-font-weight, 400);
93165
color: var(--vaadin-input-field-helper-color, var(--vaadin-text-color-secondary));
94-
order: var(--vaadin-input-field-helper-order);
166+
grid-row: var(--_helper-below-field, auto) var(--_helper-above-field, var(--_no-label, 1) var(--_has-label, 2));
95167
}
96168
97169
[part='error-message'] {
@@ -114,7 +186,8 @@ export const field = css`
114186
}
115187
116188
:host([theme~='helper-above-field']) {
117-
--vaadin-input-field-helper-order: -1;
189+
--_helper-above-field: initial;
190+
--_helper-below-field: ;
118191
}
119192
120193
@media (forced-colors: active) {

‎packages/field-base/src/styles/group-base-styles.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
*/
66
import type { CSSResult } from 'lit';
77

8-
export const group: (name?: string) => CSSResult;
8+
export const group: CSSResult;

‎packages/field-base/src/styles/group-base-styles.js‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,12 @@
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import '@vaadin/component-base/src/styles/style-props.js';
7-
import { css, unsafeCSS } from 'lit';
7+
import { css } from 'lit';
88

9-
export const group = (name = 'checkbox') => css`
10-
:host {
11-
width: fit-content;
12-
gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-xs));
13-
}
14-
15-
.vaadin-group-field-container {
16-
display: contents;
17-
}
18-
19-
:host,
9+
export const group = css`
2010
[part='group-field'] {
2111
display: flex;
2212
flex-direction: column;
23-
}
24-
25-
[part='group-field'] {
2613
gap: var(--vaadin-gap-xs) var(--vaadin-gap-xl);
2714
}
2815

0 commit comments

Comments
 (0)