Skip to content

Commit 38ae362

Browse files
brandyscarneybrandyscarney
authored
fix(textarea): update label alignment for inputs and textareas (#18042)
- aligns label and textarea to baseline - updates floating and stacked labels in items to align closer to the md spec fixes #16187
1 parent 72be80c commit 38ae362

File tree

10 files changed

+110
-15
lines changed

10 files changed

+110
-15
lines changed

‎core/src/components/input/test/spec/e2e.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
test('input: spec', async () => {
4+
const page = await newE2EPage({
5+
url: '/src/components/input/test/spec?ionic:_testing=true'
6+
});
7+
8+
const compares = [];
9+
10+
compares.push(await page.compareScreenshot());
11+
12+
for (const compare of compares) {
13+
expect(compare).toMatchScreenshot();
14+
}
15+
});

‎core/src/components/input/test/spec/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Input - Spec</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
9+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
10+
<script src="../../../../../scripts/testing/scripts.js"></script>
11+
<script src="../../../../../dist/ionic.js"></script>
12+
</head>
13+
14+
<body>
15+
<ion-app>
16+
<ion-content class="ion-padding">
17+
<ion-item>
18+
<ion-label position="floating">Standard</ion-label>
19+
<ion-input></ion-input>
20+
</ion-item>
21+
<ion-item>
22+
<ion-label position="floating">Standard</ion-label>
23+
<ion-input value="value"></ion-input>
24+
</ion-item>
25+
<ion-item>
26+
<ion-label position="stacked">Stacked</ion-label>
27+
<ion-input></ion-input>
28+
</ion-item>
29+
<ion-item>
30+
<ion-label position="stacked">Stacked</ion-label>
31+
<ion-input value="value"></ion-input>
32+
</ion-item>
33+
<ion-item>
34+
<ion-label position="floating">Floating</ion-label>
35+
<ion-textarea></ion-textarea>
36+
</ion-item>
37+
<ion-item>
38+
<ion-label position="floating">Floating</ion-label>
39+
<ion-textarea value="value"></ion-textarea>
40+
</ion-item>
41+
<ion-item>
42+
<ion-label position="stacked">Stacked</ion-label>
43+
<ion-textarea></ion-textarea>
44+
</ion-item>
45+
<ion-item>
46+
<ion-label position="stacked">Stacked</ion-label>
47+
<ion-textarea value="value"></ion-textarea>
48+
</ion-item>
49+
50+
</ion-content>
51+
52+
<style>
53+
ion-item {
54+
--background: #f5f5f5;
55+
}
56+
57+
</style>
58+
</ion-app>
59+
</body>
60+
61+
</html>

‎core/src/components/item/item.md.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@
245245

246246
:host(.item-label-floating),
247247
:host(.item-label-stacked) {
248-
--min-height: 65px;
248+
--min-height: 55px;
249249
}
250250

251251
// TODO: refactor, ion-item and ion-textarea have the same CSS

‎core/src/components/label/label.ios.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@
3333
color: $label-ios-text-color-focused;
3434
}
3535

36+
:host-context(.item-has-focus).label-floating,
37+
:host-context(.item-has-placeholder).label-floating,
38+
:host-context(.item-has-value).label-floating {
39+
@include transform(translate3d(0, 0, 0), scale(.8));
40+
}
41+
3642

3743
// iOS Typography
3844
// --------------------------------------------------

‎core/src/components/label/label.md.scss

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,30 @@
1313
// --------------------------------------------------
1414

1515
:host(.label-stacked) {
16-
font-size: 12.8px;
16+
@include transform-origin(start, top);
17+
@include transform(translate3d(0, 50%, 0), scale(.75));
1718
}
1819

1920
:host(.label-floating) {
20-
@include transform(translate3d(0, 27px, 0));
21+
@include transform(translate3d(0, 96%, 0));
2122
@include transform-origin(start, top);
2223

23-
transition: transform 150ms ease-in-out;
24+
transition: transform 150ms cubic-bezier(.4,0,.2,1);
2425
}
2526

2627
:host(.label-stacked),
2728
:host(.label-floating) {
28-
@include margin(null, null, 0, 0);
29+
@include margin(0, 0, 0, 0);
30+
}
31+
32+
:host-context(.item-select).label-floating {
33+
@include transform(translate3d(0, 130%, 0));
34+
}
35+
36+
:host-context(.item-has-focus).label-floating,
37+
:host-context(.item-has-placeholder).label-floating,
38+
:host-context(.item-has-value).label-floating {
39+
@include transform(translate3d(0, 50%, 0), scale(.75));
2940
}
3041

3142

‎core/src/components/label/label.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@
4646
pointer-events: none;
4747
}
4848

49+
:host-context(.item-textarea) {
50+
align-self: baseline;
51+
}
52+
4953

5054
// Fixed Inputs
5155
// --------------------------------------------------
@@ -71,12 +75,6 @@
7175
max-width: 100%;
7276
}
7377

74-
:host-context(.item-has-focus).label-floating,
75-
:host-context(.item-has-placeholder).label-floating,
76-
:host-context(.item-has-value).label-floating {
77-
@include transform(translate3d(0, 0, 0), scale(.8));
78-
}
79-
8078
:host(.label-no-animate.label-floating) {
8179
transition: none;
8280
}

‎core/src/components/textarea/test/basic/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<title>Input - Textarea</title>
6+
<title>Textarea - Basic</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
88
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
99
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@@ -16,7 +16,7 @@
1616

1717
<ion-header>
1818
<ion-toolbar>
19-
<ion-title>Input - Textarea</ion-title>
19+
<ion-title>Textarea - Basic</ion-title>
2020
</ion-toolbar>
2121
</ion-header>
2222

‎core/src/components/textarea/textarea.md.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
--padding-bottom: #{$textarea-md-padding-bottom};
1111
--padding-start: #{$textarea-md-padding-start};
1212

13+
@include margin(8px, 0, 0, 0);
14+
1315
font-size: $textarea-md-font-size;
1416
}
1517

‎core/src/components/textarea/textarea.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@ $textarea-md-padding-bottom: $item-md-padding-bottom !default;
2020
$textarea-md-padding-start: ($item-md-padding-start / 2) !default;
2121

2222
/// @prop - Placeholder text color of the textarea
23-
$textarea-md-placeholder-color: $placeholder-text-color !default;
23+
$textarea-md-placeholder-color: $placeholder-text-color !default;

‎core/src/components/textarea/textarea.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858

5959
:host-context(ion-item) {
6060
position: static;
61+
62+
align-self: baseline;
6163
}
6264

6365
:host-context(ion-item:not(.item-label)) {
@@ -69,10 +71,10 @@
6971
// --------------------------------------------------
7072

7173
.native-textarea {
72-
@include text-inherit();
7374
@include border-radius(var(--border-radius));
7475
@include margin(0);
7576
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
77+
@include text-inherit();
7678

7779
display: block;
7880

0 commit comments

Comments
 (0)