From c8a3999da109b1719777f2acb791ab5388d371ea Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 17 Mar 2021 12:32:50 -0400 Subject: [PATCH] fix(label): properly float labels for non-input items (#23060) --- core/src/components/input/input.scss | 4 +- core/src/components/label/label.ios.scss | 7 +- core/src/components/label/label.md.scss | 5 + .../components/label/test/floating/index.html | 121 +++++++++ .../components/textarea/test/spec/index.html | 237 ++++++++++++++++++ core/src/components/textarea/textarea.scss | 15 ++ 6 files changed, 386 insertions(+), 3 deletions(-) create mode 100644 core/src/components/label/test/floating/index.html create mode 100644 core/src/components/textarea/test/spec/index.html diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index d0c1a28802..3b91839700 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -176,11 +176,11 @@ // When used with a floating item the placeholder should hide :host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) { - transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; } :host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) { + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); + opacity: 1; } diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss index 6d6ac30427..97eb478cf7 100644 --- a/core/src/components/label/label.ios.scss +++ b/core/src/components/label/label.ios.scss @@ -23,18 +23,23 @@ :host(.label-floating) { @include margin(null, null, 0, null); - @include transform(translate3d(0, 27px, 0)); + @include transform(translate3d(0, 29px, 0)); @include transform-origin(start, top); transition: transform 150ms ease-in-out; } +:host-context(.item-textarea).label-floating { + @include transform(translate3d(0, 28px, 0)); +} + :host-context(.item-has-focus).label-stacked, :host-context(.item-has-focus).label-floating { color: $label-ios-text-color-focused; } :host-context(.item-has-focus).label-floating, +:host-context(.item-has-placeholder:not(.item-input)).label-floating, :host-context(.item-has-value).label-floating { @include transform(translate3d(0, 0, 0), scale(.82)); } diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss index b63bf71424..46ff3e2384 100644 --- a/core/src/components/label/label.md.scss +++ b/core/src/components/label/label.md.scss @@ -33,12 +33,17 @@ transform 150ms $label-md-transition-timing-function; } +:host-context(.item-textarea).label-floating { + @include transform(translateY(185%)); +} + :host(.label-stacked), :host(.label-floating) { @include margin(0, 0, 0, 0); } :host-context(.item-has-focus).label-floating, +:host-context(.item-has-placeholder:not(.item-input)).label-floating, :host-context(.item-has-value).label-floating { @include transform(translateY(50%), scale(.75)); } diff --git a/core/src/components/label/test/floating/index.html b/core/src/components/label/test/floating/index.html new file mode 100644 index 0000000000..1ccbf2c89f --- /dev/null +++ b/core/src/components/label/test/floating/index.html @@ -0,0 +1,121 @@ + + + + + + Label - Floating + + + + + + + + + + + + + Label - Floating + + + + + + + Default + + + + Input + + + + + Textarea + + + + + Datetime + + + + + Select + + Option + + + + + + + Placeholders + + + + Input + + + + + Textarea + + + + + Datetime + + + + + Select + + Option + + + + + + + Values + + + + Input + + + + + Textarea + + + + + Datetime + + + + + Select + + Option + + + + + + + + + + diff --git a/core/src/components/textarea/test/spec/index.html b/core/src/components/textarea/test/spec/index.html new file mode 100644 index 0000000000..cbc3f5fcc2 --- /dev/null +++ b/core/src/components/textarea/test/spec/index.html @@ -0,0 +1,237 @@ + + + + + + Textarea - Spec + + + + + + + + + + + + Textarea - Spec + + + +

Floating Textareas

+ +
+
+

Inactive

+ + Label + + +
+ +
+

Focused

+ + Label + + +
+ +
+

Activated

+ + Label + + +
+ +
+

Hover

+ + Label + + +
+ +
+

Disabled

+ + Label + + +
+ +
+

Toggle Placeholder

+ + Label + + + Toggle + + +
+
+ +

Stacked textareas

+ +
+
+

Inactive

+ + Label + + +
+ +
+

Focused

+ + Label + + +
+ +
+

Activated

+ + Label + + +
+ +
+

Hover

+ + Label + + +
+ +
+

Disabled

+ + Label + + +
+ +
+

Toggle Placeholder

+ + Label + + + Toggle + + +
+
+ +
+ +

Stacked Div

+ + Label +
A div
+ + + + + Align items: center +
A div
+ + + + Align items: center +
A div: align self right
+ + + Floating: textarea + + + + Floating: textarea value + + + + Stacked: textarea + + + + Stacked: textarea focused value + + + + Stacked: textarea focus + + + + + + + + + + + + diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index b31380e242..15203a1986 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -135,3 +135,18 @@ pointer-events: none; } + + +// Item Floating: Placeholder +// ---------------------------------------------------------------- +// When used with a floating item the placeholder should hide + +:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) { + opacity: 0; +} + +:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) { + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); + + opacity: 1; +}