Skip to content

Commit 0475a0d

Browse files
jounijouni
authored
experiment: add text-area base styles and visual tests (#9219)
1 parent 325f85e commit 0475a0d

37 files changed

+345
-11
lines changed

‎dev/text-area.html‎

Lines changed: 97 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -8,14 +8,106 @@
88
<script type="module" src="./common.js"></script>
99

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

1618
<body>
17-
<vaadin-text-area label="Feedback" required>
18-
<vaadin-tooltip slot="tooltip" text="Help us improve"></vaadin-tooltip>
19-
</vaadin-text-area>
19+
<section>
20+
<h2>Plain</h2>
21+
<vaadin-text-area value="Value"></vaadin-text-area>
22+
<vaadin-text-area placeholder="Placeholder"></vaadin-text-area>
23+
</section>
24+
25+
<section>
26+
<h2>Min &amp; Max Rows</h2>
27+
<vaadin-text-area value="Value" min-rows="1" clear-button-visible>
28+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
29+
</vaadin-text-area>
30+
31+
<vaadin-text-area
32+
value="I’m not sure what I should write here, but I know it should be something long because this is a multi-line text area."
33+
max-rows="3"
34+
clear-button-visible
35+
>
36+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
37+
</vaadin-text-area>
38+
</section>
39+
40+
<section>
41+
<h2>Bells & Whistles</h2>
42+
<vaadin-text-area
43+
label="Label"
44+
helper-text="Description for this field."
45+
value="Value"
46+
clear-button-visible
47+
error-message="You need to write something in this field."
48+
required
49+
>
50+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
51+
</vaadin-text-area>
52+
</section>
53+
54+
<section>
55+
<h2>States</h2>
56+
<vaadin-text-area
57+
label="Read-only"
58+
helper-text="Description for this field."
59+
value="Value"
60+
clear-button-visible
61+
error-message="You need to write something in this field."
62+
required
63+
readonly
64+
>
65+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
66+
</vaadin-text-area>
67+
68+
<vaadin-text-area
69+
label="Disabled"
70+
helper-text="Description for this field."
71+
value="Value"
72+
clear-button-visible
73+
error-message="You need to write something in this field."
74+
required
75+
disabled
76+
>
77+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
78+
</vaadin-text-area>
79+
</section>
80+
81+
<section>
82+
<h2>Helper Above Field</h2>
83+
<vaadin-text-area
84+
theme="helper-above-field"
85+
label="Label"
86+
helper-text="Description for this field."
87+
value="Value"
88+
clear-button-visible
89+
error-message="You need to write something in this field."
90+
required
91+
>
92+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
93+
</vaadin-text-area>
94+
</section>
95+
96+
<section>
97+
<h2>Content &amp; Layout Variations</h2>
98+
<p>Resize the field to test how content flows.</p>
99+
<vaadin-text-area
100+
label="A very long label for this field"
101+
helper-text="If the label wasn't enough to tell what you should input here, then this long description should be."
102+
value="I’m not sure what I should write here, but I know it should be something long because this is a multi-line text area."
103+
placeholder="Perhaps this gives you an idea what to write?"
104+
clear-button-visible
105+
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."
106+
required
107+
style="resize: both; overflow: hidden; padding: 1px; width: 50%"
108+
>
109+
<vaadin-icon icon="vaadin:envelope-o" slot="prefix"></vaadin-icon>
110+
</vaadin-text-area>
111+
</section>
20112
</body>
21113
</html>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,13 @@ export const field = css`
2525
display: none !important;
2626
}
2727
28+
/* The label, helper text and the error message should neither grow nor shrink. */
29+
[part='label'],
30+
[part='helper-text'],
31+
[part='error-message'] {
32+
flex: none;
33+
}
34+
2835
:host(:not([has-label])) [part='label'],
2936
:host(:not([has-helper])) [part='helper-text'],
3037
:host(:not([has-error-message])) [part='error-message'] {
@@ -51,6 +58,10 @@ export const field = css`
5158
display: none;
5259
}
5360
61+
[part='input-field'] {
62+
flex: auto;
63+
}
64+
5465
:host([readonly]) [part='input-field'] {
5566
cursor: default;
5667
}

‎packages/input-container/src/vaadin-input-container-base-styles.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export const inputContainerStyles = css`
1111
:host {
1212
display: flex;
1313
align-items: center;
14-
flex: 0 1 auto;
1514
--_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
1615
border-radius:
1716
/* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
@@ -47,8 +46,10 @@ export const inputContainerStyles = css`
4746
}
4847
4948
/* Reset the native input styles */
50-
::slotted(input) {
49+
::slotted(:is(input, textarea)) {
5150
appearance: none;
51+
align-self: stretch;
52+
box-sizing: border-box;
5253
flex: auto;
5354
white-space: nowrap;
5455
overflow: hidden;
@@ -61,6 +62,7 @@ export const inputContainerStyles = css`
6162
border-radius: 0;
6263
min-width: 0;
6364
font: inherit;
65+
font-size: 1em;
6466
color: inherit;
6567
background: transparent;
6668
cursor: inherit;
@@ -70,18 +72,18 @@ export const inputContainerStyles = css`
7072
flex: none;
7173
}
7274
73-
slot {
75+
slot[name$='fix'] {
7476
cursor: auto;
7577
}
7678
7779
::slotted(:is(input, textarea))::placeholder {
78-
/* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
80+
/* Use ::slotted(:is(input, textarea):placeholder-shown) to style the placeholder */
7981
/* because ::slotted(...)::placeholder does not work in Safari. */
8082
font: inherit;
8183
color: inherit;
8284
}
8385
84-
::slotted(input:placeholder-shown) {
86+
::slotted(:is(input, textarea):placeholder-shown) {
8587
color: var(--vaadin-input-field-placeholder-color, var(--_vaadin-color));
8688
}
8789

‎packages/text-area/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/*-base-styles.d.ts",
25+
"!src/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/text-area/src/vaadin-text-area-styles.d.ts‎ renamed to ‎packages/text-area/src/vaadin-text-area-base-styles.d.ts‎

File renamed without changes.

‎packages/text-area/src/vaadin-text-area-base-styles.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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 { css } from 'lit';
7+
8+
export const textAreaStyles = css`
9+
@layer base {
10+
[part='input-field'] {
11+
overflow: auto;
12+
scroll-padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
13+
}
14+
15+
::slotted(textarea) {
16+
resize: none;
17+
white-space: pre-wrap;
18+
}
19+
20+
[part='input-field'] ::slotted(:not(textarea)),
21+
[part='clear-button'] {
22+
align-self: flex-start;
23+
position: sticky;
24+
top: 0;
25+
}
26+
27+
/* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
28+
:host([disabled]) ::slotted(textarea) {
29+
user-select: none;
30+
}
31+
}
32+
`;

‎packages/text-area/src/vaadin-text-area-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 textAreaStyles: CSSResult;

‎packages/text-area/src/vaadin-text-area-styles.js‎ renamed to ‎packages/text-area/src/vaadin-text-area-core-styles.js‎

File renamed without changes.

‎packages/text-area/src/vaadin-text-area.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1212
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
1313
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
1414
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
15+
import { textAreaStyles } from './vaadin-text-area-core-styles.js';
1516
import { TextAreaMixin } from './vaadin-text-area-mixin.js';
16-
import { textAreaStyles } from './vaadin-text-area-styles.js';
1717

1818
/**
1919
* `<vaadin-text-area>` is a web component for multi-line text input.

‎packages/text-area/test/visual/base/screenshots/text-area/baseline/ltr-clear-button.png‎

1.19 KB
Loading

0 commit comments

Comments
 (0)