Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(textarea): update label alignment to baseline #18042

Merged
merged 10 commits into from
Apr 16, 2019
Merged

fix(textarea): update label alignment to baseline #18042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cb18e61
fix(textarea): align label and textarea to baseline
brandyscarney Apr 15, 2019
83c2234
test(input): include spec test to match md spec
brandyscarney Apr 15, 2019
1307439
fix(label): update floating and stacked labels for md spec
brandyscarney Apr 15, 2019
f6c32a0
Merge branch 'master' into fix-textarea-alignment
brandyscarney Apr 15, 2019
5e91693
Merge branch 'master' into fix-textarea-alignment
brandyscarney Apr 16, 2019
db3154d
fix(textarea): add margin to the textarea for a buffer between label
brandyscarney Apr 16, 2019
4520dbe
Merge branch 'master' into fix-textarea-alignment
brandyscarney Apr 16, 2019
71a6c6a
Merge branch 'master' into fix-textarea-alignment
brandyscarney Apr 16, 2019
7464a70
fix(label): move floating label to align with select icon in select
brandyscarney Apr 16, 2019
55b1268
Merge branch 'master' into fix-textarea-alignment
brandyscarney Apr 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions core/src/components/input/test/spec/e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 61 additions & 0 deletions core/src/components/input/test/spec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion core/src/components/item/item.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions core/src/components/label/label.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
// --------------------------------------------------
Expand Down
19 changes: 15 additions & 4 deletions core/src/components/label/label.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}


Expand Down
10 changes: 4 additions & 6 deletions core/src/components/label/label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
pointer-events: none;
}

:host-context(.item-textarea) {
align-self: baseline;
}


// Fixed Inputs
// --------------------------------------------------
Expand All @@ -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;
}
4 changes: 2 additions & 2 deletions core/src/components/textarea/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -16,7 +16,7 @@

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

Expand Down
2 changes: 2 additions & 0 deletions core/src/components/textarea/textarea.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/textarea/textarea.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
4 changes: 3 additions & 1 deletion core/src/components/textarea/textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@

:host-context(ion-item) {
position: static;

align-self: baseline;
}

:host-context(ion-item:not(.item-label)) {
Expand All @@ -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;

Expand Down