From 11a24b98aaad519a4dd3fb3d323ac6fe2cb16931 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Jul 2016 11:31:42 -0400 Subject: [PATCH] fix(input): add input highlight for ios, fix the highlight size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/input/input.ios.scss | 66 +++++++++++ src/components/input/input.md.scss | 79 +++++++------ src/components/input/input.wp.scss | 32 ++++-- src/components/input/test/highlight/e2e.ts | 0 src/components/input/test/highlight/index.ts | 54 +++++++++ src/components/input/test/highlight/main.html | 105 ++++++++++++++++++ 6 files changed, 295 insertions(+), 41 deletions(-) create mode 100644 src/components/input/test/highlight/e2e.ts create mode 100644 src/components/input/test/highlight/index.ts create mode 100644 src/components/input/test/highlight/main.html diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index cb1618a42e0..58d180d6dc3 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -16,6 +16,14 @@ $text-input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; $text-input-ios-input-clear-icon-svg: "" !default; $text-input-ios-input-clear-icon-size: 18px !default; +$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; + +$text-input-ios-highlight-color: color($colors-ios, primary) !default; +$text-input-ios-highlight-color-valid: color($colors-ios, secondary) !default; +$text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default; + // iOS Default Input // -------------------------------------------------- @@ -82,3 +90,61 @@ ion-input[clearInput] { background-size: $text-input-ios-input-clear-icon-size; } + + +// iOS Highlighted Input +// -------------------------------------------------- + +// Input highlight mixin for focus, valid, and invalid states +@mixin ios-input-highlight($highlight-color) { + border-bottom-color: $highlight-color; +} + +// Show the focus highlight when the input has focus +@if ($text-input-ios-show-focus-highlight) { + // In order to get a 2px border we need to add an inset + // box-shadow 1px (this is to avoid the div resizing) + .item-input.input-has-focus .item-inner { + @include ios-input-highlight($text-input-ios-highlight-color); + } + + // The last item in a list has a border on the item, not the + // inner item, so add it to the item itself + ion-list .item-input.input-has-focus:last-child { + @include ios-input-highlight($text-input-ios-highlight-color); + + .item-inner { + box-shadow: none; + } + } +} + +// Show the valid highlight when it has the .ng-valid class and a value +@if ($text-input-ios-show-valid-highlight) { + .item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner { + @include ios-input-highlight($text-input-ios-highlight-color-valid); + } + + ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child { + @include ios-input-highlight($text-input-ios-highlight-color-valid); + + .item-inner { + box-shadow: none; + } + } +} + +// Show the invalid highlight when it has the invalid class and has been touched +@if ($text-input-ios-show-invalid-highlight) { + .item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner { + @include ios-input-highlight($text-input-ios-highlight-color-invalid); + } + + ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child { + @include ios-input-highlight($text-input-ios-highlight-color-invalid); + + .item-inner { + box-shadow: none; + } + } +} diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 20762dcfc15..32d647e7b6b 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- $text-input-md-background-color: $list-md-background-color !default; -$text-input-md-highlight-color: color($colors-md, primary) !default; -$text-input-md-hightlight-color-valid: color($colors-md, secondary) !default; -$text-input-md-hightlight-color-invalid: color($colors-md, danger) !default; $text-input-md-margin-top: $item-md-padding-top !default; $text-input-md-margin-right: ($item-md-padding-right / 2) !default; @@ -19,8 +16,13 @@ $text-input-md-input-clear-icon-color: #5b5b5b !default; $text-input-md-input-clear-icon-svg: "" !default; $text-input-md-input-clear-icon-size: 22px !default; -$text-input-md-show-success-highlight: true !default; -$text-input-md-show-error-highlight: true !default; +$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; + +$text-input-md-highlight-color: color($colors-md, primary) !default; +$text-input-md-highlight-color-valid: color($colors-md, secondary) !default; +$text-input-md-highlight-color-invalid: color($colors-md, danger) !default; // Material Design Default Input @@ -46,42 +48,57 @@ $text-input-md-show-error-highlight: true !default; // Material Design Highlighted Input // -------------------------------------------------- -.item-input::after { - position: absolute; - right: 0; - bottom: 0; - left: $item-md-padding-left; - - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: transparent; - content: ""; +// Input highlight mixin for focus, valid, and invalid states +@mixin md-input-highlight($highlight-color) { + border-bottom-color: $highlight-color; + box-shadow: inset 0 -1px 0 0 $highlight-color; } -.item-input.input-has-focus::after { - border-bottom-color: $text-input-md-highlight-color; -} +// Show the focus highlight when the input has focus +@if ($text-input-md-show-focus-highlight) { + // In order to get a 2px border we need to add an inset + // box-shadow 1px (this is to avoid the div resizing) + .item-input.input-has-focus .item-inner { + @include md-input-highlight($text-input-md-highlight-color); + } -@if($text-input-md-show-success-highlight) { - .item-input.ng-valid.input-has-value { - &::after { - border-bottom-color: $text-input-md-hightlight-color-valid; - } + // The last item in a list has a border on the item, not the + // inner item, so add it to the item itself + ion-list .item-input.input-has-focus:last-child { + @include md-input-highlight($text-input-md-highlight-color); - &.input-has-focus::after { - border-bottom-color: $text-input-md-highlight-color; + .item-inner { + box-shadow: none; } } } -@if($text-input-md-show-error-highlight) { - .item-input.ng-invalid.ng-touched { - &::after { - border-bottom-color: $text-input-md-hightlight-color-invalid; +// Show the valid highlight when it has the .ng-valid class and a value +@if ($text-input-md-show-valid-highlight) { + .item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner { + @include md-input-highlight($text-input-md-highlight-color-valid); + } + + ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child { + @include md-input-highlight($text-input-md-highlight-color-valid); + + .item-inner { + box-shadow: none; } + } +} + +// Show the invalid highlight when it has the invalid class and has been touched +@if ($text-input-md-show-invalid-highlight) { + .item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner { + @include md-input-highlight($text-input-md-highlight-color-invalid); + } + + ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child { + @include md-input-highlight($text-input-md-highlight-color-invalid); - &.input-has-focus::after { - border-bottom-color: $text-input-md-highlight-color; + .item-inner { + box-shadow: none; } } } diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index 53e77ec9595..9ecbefaa698 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -16,15 +16,18 @@ $text-input-wp-padding-vertical: 0 !default; $text-input-wp-padding-horizontal: 8px !default; $text-input-wp-line-height: 3rem !default; -$text-input-wp-highlight-color: color($colors-wp, primary) !default; -$text-input-wp-hightlight-color-valid: color($colors-wp, secondary) !default; -$text-input-wp-hightlight-color-invalid: color($colors-wp, danger) !default; - $text-input-wp-input-clear-icon-width: 30px !default; $text-input-wp-input-clear-icon-color: $input-wp-border-color !default; $text-input-wp-input-clear-icon-svg: "" !default; $text-input-wp-input-clear-icon-size: 22px !default; +$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; + +$text-input-wp-highlight-color: color($colors-wp, primary) !default; +$text-input-wp-highlight-color-valid: color($colors-wp, secondary) !default; +$text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default; // Windows Default Input @@ -53,16 +56,25 @@ $text-input-wp-input-clear-icon-size: 22px !default; // Windows Highlighted Input // -------------------------------------------------- -.input-has-focus .text-input { - border-color: $text-input-wp-highlight-color; +// Show the focus highlight when the input has focus +@if ($text-input-wp-show-focus-highlight) { + .item-input.input-has-focus .text-input { + border-color: $text-input-wp-highlight-color; + } } -ion-input.ng-valid.input-has-value .text-input { - border-color: $text-input-wp-hightlight-color-valid; +// Show the valid highlight when it has the .ng-valid class and a value +@if ($text-input-wp-show-valid-highlight) { + .item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input { + border-color: $text-input-wp-highlight-color-valid; + } } -ion-input.ng-invalid.ng-touched .text-input { - border-color: $text-input-wp-hightlight-color-invalid; +// Show the invalid highlight when it has the invalid class and has been touched +@if ($text-input-wp-show-invalid-highlight) { + .item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input { + border-color: $text-input-wp-highlight-color-invalid; + } } diff --git a/src/components/input/test/highlight/e2e.ts b/src/components/input/test/highlight/e2e.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/components/input/test/highlight/index.ts b/src/components/input/test/highlight/index.ts new file mode 100644 index 00000000000..35778288514 --- /dev/null +++ b/src/components/input/test/highlight/index.ts @@ -0,0 +1,54 @@ +import { Component } from '@angular/core'; +import { FormBuilder, Validators } from '@angular/common'; +import { ionicBootstrap } from '../../../../../src'; + + +@Component({ + templateUrl: 'main.html' +}) +class E2EPage { + loginForm: any; + + login = { + email: 'help@ionic.io', + username: 'admin', + }; + + submitted: boolean = false; + + constructor(fb: FormBuilder) { + this.loginForm = fb.group({ + email: ["", Validators.compose([ + Validators.required, + this.emailValidator + ])], + username: [""], + password: ["", Validators.required], + comments: ["", Validators.required], + inset: ["", Validators.required] + }); + } + + emailValidator(control: any) { + 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; + + if (!EMAIL_REGEXP.test(control.value)) { + return {invalidEmail: true}; + } + } + + submit(ev: UIEvent, value: any) { + console.log("Submitted", value); + this.submitted = true; + } + +} + +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/input/test/highlight/main.html b/src/components/input/test/highlight/main.html new file mode 100644 index 00000000000..1c0e267c04d --- /dev/null +++ b/src/components/input/test/highlight/main.html @@ -0,0 +1,105 @@ + + + + Form Inputs + + + + + + +
+ + + Stacked + + + + + Floating + + + + + Fixed + + + + + Inline + Comment value + + + + Inset + + + + + + + + Stacked + + + + + + Floating + + + + + + Fixed + + + + + + Inline + Comment value + + + + + Inset + + + + + + + + + Stacked + + + + + + Floating + + + + + + Fixed + + + + + + Inline + Comment value + + + + + Inset + + + + +
+