Skip to content

Commit 11a24b9

Browse files
brandyscarneybrandyscarney
committed
fix(input): add input highlight for ios, fix the highlight size
The input highlight can now be enabled for ios. Fixed wp’s valid/invalid highlighting. The highlight bar now goes on top of the item-inner border so it will resize if there is an icon to the left. BREAKING CHANGES: Fixed typos in the input highlight variables: - `$text-input-md-hightlight-color-valid` -> `$text-input-md-highlight-color-valid` - `$text-input-wp-hightlight-color-valid` -> `$text-input-wp-highlight-color-valid` Modified variables to turn on/off the highlight: ios (defaults to false for all): ``` $text-input-ios-show-focus-highlight: false !default; $text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default; $text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default; ``` md (defaults to true for all): ``` $text-input-md-show-focus-highlight: true !default; $text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default; $text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default; ``` wp (defaults to true for all): ``` $text-input-wp-show-focus-highlight: true !default; $text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default; $text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default; ``` fixes #6449 references #5052
1 parent 86fd8a4 commit 11a24b9

File tree

6 files changed

+295
-41
lines changed

6 files changed

+295
-41
lines changed

‎src/components/input/input.ios.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ $text-input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
1616
$text-input-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
1717
$text-input-ios-input-clear-icon-size: 18px !default;
1818

19+
$text-input-ios-show-focus-highlight: false !default;
20+
$text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default;
21+
$text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default;
22+
23+
$text-input-ios-highlight-color: color($colors-ios, primary) !default;
24+
$text-input-ios-highlight-color-valid: color($colors-ios, secondary) !default;
25+
$text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;
26+
1927

2028
// iOS Default Input
2129
// --------------------------------------------------
@@ -82,3 +90,61 @@ ion-input[clearInput] {
8290

8391
background-size: $text-input-ios-input-clear-icon-size;
8492
}
93+
94+
95+
// iOS Highlighted Input
96+
// --------------------------------------------------
97+
98+
// Input highlight mixin for focus, valid, and invalid states
99+
@mixin ios-input-highlight($highlight-color) {
100+
border-bottom-color: $highlight-color;
101+
}
102+
103+
// Show the focus highlight when the input has focus
104+
@if ($text-input-ios-show-focus-highlight) {
105+
// In order to get a 2px border we need to add an inset
106+
// box-shadow 1px (this is to avoid the div resizing)
107+
.item-input.input-has-focus .item-inner {
108+
@include ios-input-highlight($text-input-ios-highlight-color);
109+
}
110+
111+
// The last item in a list has a border on the item, not the
112+
// inner item, so add it to the item itself
113+
ion-list .item-input.input-has-focus:last-child {
114+
@include ios-input-highlight($text-input-ios-highlight-color);
115+
116+
.item-inner {
117+
box-shadow: none;
118+
}
119+
}
120+
}
121+
122+
// Show the valid highlight when it has the .ng-valid class and a value
123+
@if ($text-input-ios-show-valid-highlight) {
124+
.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
125+
@include ios-input-highlight($text-input-ios-highlight-color-valid);
126+
}
127+
128+
ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
129+
@include ios-input-highlight($text-input-ios-highlight-color-valid);
130+
131+
.item-inner {
132+
box-shadow: none;
133+
}
134+
}
135+
}
136+
137+
// Show the invalid highlight when it has the invalid class and has been touched
138+
@if ($text-input-ios-show-invalid-highlight) {
139+
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
140+
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
141+
}
142+
143+
ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
144+
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
145+
146+
.item-inner {
147+
box-shadow: none;
148+
}
149+
}
150+
}

‎src/components/input/input.md.scss

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
// --------------------------------------------------
66

77
$text-input-md-background-color: $list-md-background-color !default;
8-
$text-input-md-highlight-color: color($colors-md, primary) !default;
9-
$text-input-md-hightlight-color-valid: color($colors-md, secondary) !default;
10-
$text-input-md-hightlight-color-invalid: color($colors-md, danger) !default;
118

129
$text-input-md-margin-top: $item-md-padding-top !default;
1310
$text-input-md-margin-right: ($item-md-padding-right / 2) !default;
@@ -19,8 +16,13 @@ $text-input-md-input-clear-icon-color: #5b5b5b !default;
1916
$text-input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
2017
$text-input-md-input-clear-icon-size: 22px !default;
2118

22-
$text-input-md-show-success-highlight: true !default;
23-
$text-input-md-show-error-highlight: true !default;
19+
$text-input-md-show-focus-highlight: true !default;
20+
$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default;
21+
$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default;
22+
23+
$text-input-md-highlight-color: color($colors-md, primary) !default;
24+
$text-input-md-highlight-color-valid: color($colors-md, secondary) !default;
25+
$text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
2426

2527

2628
// Material Design Default Input
@@ -46,42 +48,57 @@ $text-input-md-show-error-highlight: true !default;
4648
// Material Design Highlighted Input
4749
// --------------------------------------------------
4850

49-
.item-input::after {
50-
position: absolute;
51-
right: 0;
52-
bottom: 0;
53-
left: $item-md-padding-left;
54-
55-
border-bottom-width: 2px;
56-
border-bottom-style: solid;
57-
border-bottom-color: transparent;
58-
content: "";
51+
// Input highlight mixin for focus, valid, and invalid states
52+
@mixin md-input-highlight($highlight-color) {
53+
border-bottom-color: $highlight-color;
54+
box-shadow: inset 0 -1px 0 0 $highlight-color;
5955
}
6056

61-
.item-input.input-has-focus::after {
62-
border-bottom-color: $text-input-md-highlight-color;
63-
}
57+
// Show the focus highlight when the input has focus
58+
@if ($text-input-md-show-focus-highlight) {
59+
// In order to get a 2px border we need to add an inset
60+
// box-shadow 1px (this is to avoid the div resizing)
61+
.item-input.input-has-focus .item-inner {
62+
@include md-input-highlight($text-input-md-highlight-color);
63+
}
6464

65-
@if($text-input-md-show-success-highlight) {
66-
.item-input.ng-valid.input-has-value {
67-
&::after {
68-
border-bottom-color: $text-input-md-hightlight-color-valid;
69-
}
65+
// The last item in a list has a border on the item, not the
66+
// inner item, so add it to the item itself
67+
ion-list .item-input.input-has-focus:last-child {
68+
@include md-input-highlight($text-input-md-highlight-color);
7069

71-
&.input-has-focus::after {
72-
border-bottom-color: $text-input-md-highlight-color;
70+
.item-inner {
71+
box-shadow: none;
7372
}
7473
}
7574
}
7675

77-
@if($text-input-md-show-error-highlight) {
78-
.item-input.ng-invalid.ng-touched {
79-
&::after {
80-
border-bottom-color: $text-input-md-hightlight-color-invalid;
76+
// Show the valid highlight when it has the .ng-valid class and a value
77+
@if ($text-input-md-show-valid-highlight) {
78+
.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
79+
@include md-input-highlight($text-input-md-highlight-color-valid);
80+
}
81+
82+
ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
83+
@include md-input-highlight($text-input-md-highlight-color-valid);
84+
85+
.item-inner {
86+
box-shadow: none;
8187
}
88+
}
89+
}
90+
91+
// Show the invalid highlight when it has the invalid class and has been touched
92+
@if ($text-input-md-show-invalid-highlight) {
93+
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
94+
@include md-input-highlight($text-input-md-highlight-color-invalid);
95+
}
96+
97+
ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
98+
@include md-input-highlight($text-input-md-highlight-color-invalid);
8299

83-
&.input-has-focus::after {
84-
border-bottom-color: $text-input-md-highlight-color;
100+
.item-inner {
101+
box-shadow: none;
85102
}
86103
}
87104
}

‎src/components/input/input.wp.scss

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,18 @@ $text-input-wp-padding-vertical: 0 !default;
1616
$text-input-wp-padding-horizontal: 8px !default;
1717
$text-input-wp-line-height: 3rem !default;
1818

19-
$text-input-wp-highlight-color: color($colors-wp, primary) !default;
20-
$text-input-wp-hightlight-color-valid: color($colors-wp, secondary) !default;
21-
$text-input-wp-hightlight-color-invalid: color($colors-wp, danger) !default;
22-
2319
$text-input-wp-input-clear-icon-width: 30px !default;
2420
$text-input-wp-input-clear-icon-color: $input-wp-border-color !default;
2521
$text-input-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
2622
$text-input-wp-input-clear-icon-size: 22px !default;
2723

24+
$text-input-wp-show-focus-highlight: true !default;
25+
$text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default;
26+
$text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default;
27+
28+
$text-input-wp-highlight-color: color($colors-wp, primary) !default;
29+
$text-input-wp-highlight-color-valid: color($colors-wp, secondary) !default;
30+
$text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
2831

2932

3033
// Windows Default Input
@@ -53,16 +56,25 @@ $text-input-wp-input-clear-icon-size: 22px !default;
5356
// Windows Highlighted Input
5457
// --------------------------------------------------
5558

56-
.input-has-focus .text-input {
57-
border-color: $text-input-wp-highlight-color;
59+
// Show the focus highlight when the input has focus
60+
@if ($text-input-wp-show-focus-highlight) {
61+
.item-input.input-has-focus .text-input {
62+
border-color: $text-input-wp-highlight-color;
63+
}
5864
}
5965

60-
ion-input.ng-valid.input-has-value .text-input {
61-
border-color: $text-input-wp-hightlight-color-valid;
66+
// Show the valid highlight when it has the .ng-valid class and a value
67+
@if ($text-input-wp-show-valid-highlight) {
68+
.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
69+
border-color: $text-input-wp-highlight-color-valid;
70+
}
6271
}
6372

64-
ion-input.ng-invalid.ng-touched .text-input {
65-
border-color: $text-input-wp-hightlight-color-invalid;
73+
// Show the invalid highlight when it has the invalid class and has been touched
74+
@if ($text-input-wp-show-invalid-highlight) {
75+
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
76+
border-color: $text-input-wp-highlight-color-invalid;
77+
}
6678
}
6779

6880

‎src/components/input/test/highlight/e2e.ts

Whitespace-only changes.

‎src/components/input/test/highlight/index.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component } from '@angular/core';
2+
import { FormBuilder, Validators } from '@angular/common';
3+
import { ionicBootstrap } from '../../../../../src';
4+
5+
6+
@Component({
7+
templateUrl: 'main.html'
8+
})
9+
class E2EPage {
10+
loginForm: any;
11+
12+
login = {
13+
email: 'help@ionic.io',
14+
username: 'admin',
15+
};
16+
17+
submitted: boolean = false;
18+
19+
constructor(fb: FormBuilder) {
20+
this.loginForm = fb.group({
21+
email: ["", Validators.compose([
22+
Validators.required,
23+
this.emailValidator
24+
])],
25+
username: [""],
26+
password: ["", Validators.required],
27+
comments: ["", Validators.required],
28+
inset: ["", Validators.required]
29+
});
30+
}
31+
32+
emailValidator(control: any) {
33+
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
34+
35+
if (!EMAIL_REGEXP.test(control.value)) {
36+
return {invalidEmail: true};
37+
}
38+
}
39+
40+
submit(ev: UIEvent, value: any) {
41+
console.log("Submitted", value);
42+
this.submitted = true;
43+
}
44+
45+
}
46+
47+
@Component({
48+
template: '<ion-nav [root]="root"></ion-nav>'
49+
})
50+
class E2EApp {
51+
root = E2EPage;
52+
}
53+
54+
ionicBootstrap(E2EApp);

0 commit comments

Comments
 (0)