From 38ae3620a22c77805b7dea61530b4bb5a83a4ede Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 16 Apr 2019 14:57:32 -0400 Subject: [PATCH] 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 --- core/src/components/input/test/spec/e2e.ts | 15 +++++ .../src/components/input/test/spec/index.html | 61 +++++++++++++++++++ core/src/components/item/item.md.scss | 2 +- core/src/components/label/label.ios.scss | 6 ++ core/src/components/label/label.md.scss | 19 ++++-- core/src/components/label/label.scss | 10 ++- .../components/textarea/test/basic/index.html | 4 +- core/src/components/textarea/textarea.md.scss | 2 + .../components/textarea/textarea.md.vars.scss | 2 +- core/src/components/textarea/textarea.scss | 4 +- 10 files changed, 110 insertions(+), 15 deletions(-) create mode 100644 core/src/components/input/test/spec/e2e.ts create mode 100644 core/src/components/input/test/spec/index.html 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;