javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(textarea): update label alignment for inputs and textareas (#18042)

Browse Source 
- aligns label and textarea to baseline
- updates floating and stacked labels in items to align closer to the md spec

fixes #16187
This commit is contained in:
Brandy Carney
2019-04-16 14:57:32 -04:00
committed by GitHub
parent 72be80cb58
commit 38ae3620a2
10 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/input/test/spec/e2e.ts Normal file
View File

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

61
core/src/components/input/test/spec/index.html Normal file
View File

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

2
core/src/components/item/item.md.scss
View File

@ -245,7 +245,7 @@
:host(.item-label-floating), :host(.item-label-floating),
:host(.item-label-stacked) { :host(.item-label-stacked) {
--min-height: 65px; --min-height: 55px;
} }
// TODO: refactor, ion-item and ion-textarea have the same CSS // TODO: refactor, ion-item and ion-textarea have the same CSS

6
core/src/components/label/label.ios.scss
View File

@ -33,6 +33,12 @@
color: $label-ios-text-color-focused; 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 // iOS Typography
// -------------------------------------------------- // --------------------------------------------------

19
core/src/components/label/label.md.scss
View File

@ -13,19 +13,30 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.label-stacked) { :host(.label-stacked) {
font-size: 12.8px; @include transform-origin(start, top);
@include transform(translate3d(0, 50%, 0), scale(.75));
} }
:host(.label-floating) { :host(.label-floating) {
@include transform(translate3d(0, 27px, 0)); @include transform(translate3d(0, 96%, 0));
@include transform-origin(start, top); @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-stacked),
:host(.label-floating) { :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));
} }

10
core/src/components/label/label.scss
View File

@ -46,6 +46,10 @@
pointer-events: none; pointer-events: none;
} }
:host-context(.item-textarea) {
align-self: baseline;
}
// Fixed Inputs // Fixed Inputs
// -------------------------------------------------- // --------------------------------------------------
@ -71,12 +75,6 @@
max-width: 100%; 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) { :host(.label-no-animate.label-floating) {
transition: none; transition: none;
} }

4
core/src/components/textarea/test/basic/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <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"> <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="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@ -16,7 +16,7 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Input - Textarea</ion-title> <ion-title>Textarea - Basic</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>

2
core/src/components/textarea/textarea.md.scss
View File

@ -10,6 +10,8 @@
--padding-bottom: #{$textarea-md-padding-bottom}; --padding-bottom: #{$textarea-md-padding-bottom};
--padding-start: #{$textarea-md-padding-start}; --padding-start: #{$textarea-md-padding-start};
@include margin(8px, 0, 0, 0);
font-size: $textarea-md-font-size; font-size: $textarea-md-font-size;
} }

2
core/src/components/textarea/textarea.md.vars.scss
View File

@ -20,4 +20,4 @@ $textarea-md-padding-bottom: $item-md-padding-bottom !default;
$textarea-md-padding-start: ($item-md-padding-start / 2) !default; $textarea-md-padding-start: ($item-md-padding-start / 2) !default;
/// @prop - Placeholder text color of the textarea /// @prop - Placeholder text color of the textarea
$textarea-md-placeholder-color: $placeholder-text-color !default; $textarea-md-placeholder-color: $placeholder-text-color !default;

4
core/src/components/textarea/textarea.scss
View File

@ -58,6 +58,8 @@
:host-context(ion-item) { :host-context(ion-item) {
position: static; position: static;
align-self: baseline;
} }
:host-context(ion-item:not(.item-label)) { :host-context(ion-item:not(.item-label)) {
@ -69,10 +71,10 @@
// -------------------------------------------------- // --------------------------------------------------
.native-textarea { .native-textarea {
@include text-inherit();
@include border-radius(var(--border-radius)); @include border-radius(var(--border-radius));
@include margin(0); @include margin(0);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include text-inherit();
display: block; display: block;