Skip to content

Commit ddd102c

Browse files
web-padawanweb-padawan
authored
experiment: add text-field base styles and visual tests (#9178)
1 parent 4e0b1a3 commit ddd102c

Some content is hidden

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

42 files changed

+529
-19
lines changed

‎dev/text-field.html‎

Lines changed: 83 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,98 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Text field</title>
7+
<title>Text Field</title>
88
<script type="module" src="./common.js"></script>
99

1010
<script type="module">
1111
import '@vaadin/text-field';
12-
import '@vaadin/tooltip';
12+
import '@vaadin/icon';
13+
import '@vaadin/icons';
14+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1315
</script>
1416
</head>
1517

1618
<body>
17-
<vaadin-text-field label="User name" required>
18-
<vaadin-tooltip slot="tooltip" text="Other users will see this"></vaadin-tooltip>
19-
</vaadin-text-field>
19+
<section>
20+
<h2>Plain</h2>
21+
<vaadin-text-field value="Value"></vaadin-text-field>
22+
<vaadin-text-field placeholder="Placeholder"></vaadin-text-field>
23+
</section>
24+
25+
<section>
26+
<h2>Bells & Whistles</h2>
27+
<vaadin-text-field
28+
label="Label"
29+
helper-text="Description for this field."
30+
value="Value"
31+
clear-button-visible
32+
error-message="You need to write something in this field."
33+
required
34+
>
35+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
36+
</vaadin-text-field>
37+
</section>
38+
39+
<section>
40+
<h2>States</h2>
41+
<vaadin-text-field
42+
label="Read-only"
43+
helper-text="Description for this field."
44+
value="Value"
45+
clear-button-visible
46+
error-message="You need to write something in this field."
47+
required
48+
readonly
49+
>
50+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
51+
</vaadin-text-field>
52+
53+
<vaadin-text-field
54+
label="Disabled"
55+
helper-text="Description for this field."
56+
value="Value"
57+
clear-button-visible
58+
error-message="You need to write something in this field."
59+
required
60+
disabled
61+
>
62+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
63+
</vaadin-text-field>
64+
</section>
65+
66+
<section>
67+
<h2>Helper Above Field</h2>
68+
<vaadin-text-field
69+
theme="helper-above-field"
70+
label="Label"
71+
helper-text="Description for this field."
72+
value="Value"
73+
clear-button-visible
74+
error-message="You need to write something in this field."
75+
required
76+
>
77+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
78+
</vaadin-text-field>
79+
</section>
80+
81+
<section>
82+
<h2>Content &amp; Layout Variations</h2>
83+
<p>Resize the field to test how content flows.</p>
84+
<vaadin-text-field
85+
label="A very long label for this field"
86+
helper-text="If the label wasn't enough to tell what you should input here, then this long description should be."
87+
value="I’m not sure what I should write here"
88+
placeholder="Perhaps this gives you an idea what to write?"
89+
clear-button-visible
90+
error-message="In case you didn't write anything in this required field, this error message is here to let you know that you really should write something in this field."
91+
required
92+
style="resize: horizontal; overflow: hidden; padding: 1px"
93+
>
94+
<vaadin-icon icon="vaadin:envelope-o" slot="prefix"></vaadin-icon>
95+
</vaadin-text-field>
96+
</section>
2097
</body>
2198
</html>

‎packages/field-base/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"files": [
2323
"index.d.ts",
2424
"index.js",
25-
"src"
25+
"src",
26+
"!src/styles/*-base-styles.d.ts",
27+
"!src/styles/*-base-styles.js"
2628
],
2729
"keywords": [
2830
"Vaadin",

‎packages/field-base/src/styles/clear-button-styles.d.ts‎ renamed to ‎packages/field-base/src/styles/button-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 clearButton: CSSResult;
8+
export const button: CSSResult;

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
9+
export const button = css`
10+
[part$='button'] {
11+
color: var(--_vaadin-color);
12+
touch-action: manipulation;
13+
-webkit-tap-highlight-color: transparent;
14+
-webkit-user-select: none;
15+
user-select: none;
16+
}
17+
18+
/* Icon */
19+
[part$='button']::before {
20+
background: currentColor;
21+
content: '';
22+
display: block;
23+
height: var(--vaadin-icon-size, 1lh);
24+
width: var(--vaadin-icon-size, 1lh);
25+
}
26+
27+
:host(:is(:not([clear-button-visible][has-value]), [disabled], [readonly])) [part='clear-button'] {
28+
display: none;
29+
}
30+
31+
[part='clear-button']::before {
32+
mask-image: var(--_vaadin-icon-cross);
33+
}
34+
35+
:host(:is([readonly], [disabled])) [part$='button'] {
36+
color: var(--_vaadin-color-subtle);
37+
cursor: not-allowed;
38+
}
39+
40+
@media (forced-colors: active) {
41+
[part$='button']::before {
42+
background: CanvasText;
43+
}
44+
45+
:host([disabled]) [part$='button'] {
46+
color: GrayText;
47+
}
48+
49+
:host([disabled]) [part$='button']::before {
50+
background: GrayText;
51+
}
52+
}
53+
`;

‎packages/field-base/src/styles/field-shared-styles.d.ts‎ renamed to ‎packages/field-base/src/styles/button-core-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 fieldShared: CSSResult;
8+
export const button: CSSResult;

‎packages/field-base/src/styles/clear-button-styles.js‎ renamed to ‎packages/field-base/src/styles/button-core-styles.js‎

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

8-
export const clearButton = css`
8+
export const button = css`
99
[part='clear-button'] {
1010
display: none;
1111
cursor: default;

‎packages/field-base/src/styles/input-field-container-styles.d.ts‎ renamed to ‎packages/field-base/src/styles/container-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 inputFieldContainer: CSSResult;
8+
export const container: CSSResult;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
9+
export const container = css`
10+
[class$='container'] {
11+
display: flex;
12+
flex-direction: column;
13+
gap: var(--vaadin-input-field-container-gap, var(--_vaadin-gap-container-block));
14+
min-width: 100%;
15+
max-width: 100%;
16+
width: var(--vaadin-field-default-width, 12em);
17+
}
18+
`;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const container: CSSResult;

‎packages/field-base/src/styles/input-field-container-styles.js‎ renamed to ‎packages/field-base/src/styles/container-core-styles.js‎

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

8-
export const inputFieldContainer = css`
8+
export const container = css`
99
[class$='container'] {
1010
display: flex;
1111
flex-direction: column;

0 commit comments

Comments
 (0)