Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandyscarney committed Apr 16, 2019
1 parent 72be80c commit 38ae3620a22c77805b7dea61530b4bb5a83a4ede
@@ -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();
}
});
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html dir="ltr">

<head>
<meta charset="UTF-8">
<title>Input - Spec</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>

<body>
<ion-app>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="floating">Standard</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Standard</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input value="value"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-textarea value="value"></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-textarea value="value"></ion-textarea>
</ion-item>

</ion-content>

<style>
ion-item {
--background: #f5f5f5;
}
</style>
</ion-app>
</body>

</html>
@@ -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
@@ -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
// --------------------------------------------------
@@ -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));
}


@@ -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;
}
@@ -3,7 +3,7 @@

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

<ion-header>
<ion-toolbar>
<ion-title>Input - Textarea</ion-title>
<ion-title>Textarea - Basic</ion-title>
</ion-toolbar>
</ion-header>

@@ -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;
}

@@ -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;
@@ -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;

0 comments on commit 38ae362

Please sign in to comment.
You can’t perform that action at this time.