diff --git a/core/src/components/input/test/spec/e2e.ts b/core/src/components/input/test/spec/e2e.ts
new file mode 100644
index 0000000000..821bbbf4fe
--- /dev/null
+++ b/core/src/components/input/test/spec/e2e.ts
@@ -0,0 +1,15 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('input: spec', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/input/test/spec?ionic:_testing=true'
+ });
+
+ const compares = [];
+
+ compares.push(await page.compareScreenshot());
+
+ for (const compare of compares) {
+ expect(compare).toMatchScreenshot();
+ }
+});
diff --git a/core/src/components/input/test/spec/index.html b/core/src/components/input/test/spec/index.html
new file mode 100644
index 0000000000..faea8416d8
--- /dev/null
+++ b/core/src/components/input/test/spec/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Input - Spec
+
+
+
+
+
+
+
+
+
+
+
+ Standard
+
+
+
+ Standard
+
+
+
+ Stacked
+
+
+
+ Stacked
+
+
+
+ Floating
+
+
+
+ Floating
+
+
+
+ Stacked
+
+
+
+ Stacked
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 0e37905a49..a89e222920 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -245,7 +245,7 @@
:host(.item-label-floating),
:host(.item-label-stacked) {
- --min-height: 65px;
+ --min-height: 55px;
}
// TODO: refactor, ion-item and ion-textarea have the same CSS
diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss
index b97a1cb68c..de5cbc5f83 100644
--- a/core/src/components/label/label.ios.scss
+++ b/core/src/components/label/label.ios.scss
@@ -33,6 +33,12 @@
color: $label-ios-text-color-focused;
}
+:host-context(.item-has-focus).label-floating,
+:host-context(.item-has-placeholder).label-floating,
+:host-context(.item-has-value).label-floating {
+ @include transform(translate3d(0, 0, 0), scale(.8));
+}
+
// iOS Typography
// --------------------------------------------------
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
index 5d62594753..098f373499 100644
--- a/core/src/components/label/label.md.scss
+++ b/core/src/components/label/label.md.scss
@@ -13,19 +13,30 @@
// --------------------------------------------------
:host(.label-stacked) {
- font-size: 12.8px;
+ @include transform-origin(start, top);
+ @include transform(translate3d(0, 50%, 0), scale(.75));
}
:host(.label-floating) {
- @include transform(translate3d(0, 27px, 0));
+ @include transform(translate3d(0, 96%, 0));
@include transform-origin(start, top);
- transition: transform 150ms ease-in-out;
+ transition: transform 150ms cubic-bezier(.4,0,.2,1);
}
:host(.label-stacked),
:host(.label-floating) {
- @include margin(null, null, 0, 0);
+ @include margin(0, 0, 0, 0);
+}
+
+:host-context(.item-select).label-floating {
+ @include transform(translate3d(0, 130%, 0));
+}
+
+:host-context(.item-has-focus).label-floating,
+:host-context(.item-has-placeholder).label-floating,
+:host-context(.item-has-value).label-floating {
+ @include transform(translate3d(0, 50%, 0), scale(.75));
}
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index ed5baf99c9..160ff547e3 100644
--- a/core/src/components/label/label.scss
+++ b/core/src/components/label/label.scss
@@ -46,6 +46,10 @@
pointer-events: none;
}
+:host-context(.item-textarea) {
+ align-self: baseline;
+}
+
// Fixed Inputs
// --------------------------------------------------
@@ -71,12 +75,6 @@
max-width: 100%;
}
-:host-context(.item-has-focus).label-floating,
-:host-context(.item-has-placeholder).label-floating,
-:host-context(.item-has-value).label-floating {
- @include transform(translate3d(0, 0, 0), scale(.8));
-}
-
:host(.label-no-animate.label-floating) {
transition: none;
}
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
index 3e69d417cf..a1547aeb45 100644
--- a/core/src/components/textarea/test/basic/index.html
+++ b/core/src/components/textarea/test/basic/index.html
@@ -3,7 +3,7 @@
- Input - Textarea
+ Textarea - Basic
@@ -16,7 +16,7 @@
- Input - Textarea
+ Textarea - Basic
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index f23bdf6831..d1d21e2802 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -10,6 +10,8 @@
--padding-bottom: #{$textarea-md-padding-bottom};
--padding-start: #{$textarea-md-padding-start};
+ @include margin(8px, 0, 0, 0);
+
font-size: $textarea-md-font-size;
}
diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss
index c90de15566..a20ffd6c66 100644
--- a/core/src/components/textarea/textarea.md.vars.scss
+++ b/core/src/components/textarea/textarea.md.vars.scss
@@ -20,4 +20,4 @@ $textarea-md-padding-bottom: $item-md-padding-bottom !default;
$textarea-md-padding-start: ($item-md-padding-start / 2) !default;
/// @prop - Placeholder text color of the textarea
-$textarea-md-placeholder-color: $placeholder-text-color !default;
+$textarea-md-placeholder-color: $placeholder-text-color !default;
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index d97d8854d7..58399fb53d 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -58,6 +58,8 @@
:host-context(ion-item) {
position: static;
+
+ align-self: baseline;
}
:host-context(ion-item:not(.item-label)) {
@@ -69,10 +71,10 @@
// --------------------------------------------------
.native-textarea {
- @include text-inherit();
@include border-radius(var(--border-radius));
@include margin(0);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+ @include text-inherit();
display: block;