From c41f24d8ee21deec18322958c5ed8da1f1bfb2c1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 8 Jun 2016 12:50:07 -0400
Subject: [PATCH] feat(item): add the ability to show a forward arrow on md and
 wp modes

The following Sass variables control this:

```
$item-ios-detail-push-show
$item-md-detail-push-show
$item-wp-detail-push-show
```

ios is set to true by default, the others are set to false.

references #5993
---
 src/components/item/item.ios.scss          | 19 +++++++++++++---
 src/components/item/item.md.scss           | 26 ++++++++++++++++++++++
 src/components/item/item.wp.scss           | 26 ++++++++++++++++++++++
 src/components/item/test/buttons/main.html |  2 +-
 src/themes/dark.ios.scss                   | 14 ++++++------
 src/themes/dark.md.scss                    | 12 ++++++++++
 src/themes/dark.wp.scss                    | 11 +++++++++
 src/themes/default.ios.scss                |  2 +-
 src/themes/default.md.scss                 | 10 +++++++++
 src/themes/default.wp.scss                 | 11 +++++++++
 10 files changed, 121 insertions(+), 12 deletions(-)

diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 536a79d1e6..7af4790ac8 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -10,6 +10,8 @@ $item-ios-paragraph-text-color:       #666 !default;
 $item-ios-avatar-size:                3.6rem !default;
 $item-ios-thumbnail-size:             5.6rem !default;
 $item-ios-note-color:                 darken($list-ios-border-color, 10%) !default;
+
+$item-ios-detail-push-show:           true !default;
 $item-ios-detail-push-color:          $list-ios-border-color !default;
 
 $item-ios-divider-background:         #f7f7f7 !default;
@@ -163,9 +165,11 @@ ion-note {
   color: $item-ios-note-color;
 }
 
-button.item:not([detail-none]) .item-inner,
-a.item:not([detail-none]) .item-inner,
-.item[detail-push] .item-inner {
+
+// iOS Item Detail Push
+// --------------------------------------------------
+
+@mixin ios-detail-push() {
   @include ios-detail-push-icon($item-ios-detail-push-color);
 
   padding-right: 32px;
@@ -175,6 +179,15 @@ a.item:not([detail-none]) .item-inner,
   background-size: 14px 14px;
 }
 
+// Only show the forward arrow icon if true
+@if $item-ios-detail-push-show == true {
+  .item[detail-push] .item-inner,
+  button.item:not([detail-none]) .item-inner,
+  a.item:not([detail-none]) .item-inner {
+    @include ios-detail-push();
+  }
+}
+
 
 // iOS Item Group
 // --------------------------------------------------
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index fbca15d0cb..eed37782cb 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -13,6 +13,9 @@ $item-md-avatar-size:                4rem !default;
 $item-md-thumbnail-size:             8rem !default;
 $item-md-note-color:                 darken($list-md-border-color, 10%) !default;
 
+$item-md-detail-push-show:           false !default;
+$item-md-detail-push-color:          $list-md-border-color !default;
+
 $item-md-divider-background:         #fff !default;
 $item-md-divider-color:              #222 !default;
 $item-md-divider-padding:            5px 15px !default;
@@ -84,6 +87,29 @@ $item-md-sliding-content-background: $list-md-background-color !default;
 }
 
 
+// Material Design Item Detail Push
+// --------------------------------------------------
+
+@mixin md-detail-push() {
+  @include md-detail-push-icon($item-md-detail-push-color);
+
+  padding-right: 32px;
+
+  background-repeat: no-repeat;
+  background-position: right ($item-md-padding-right - 2) center;
+  background-size: 14px 14px;
+}
+
+// Only show the forward arrow icon if true
+@if $item-md-detail-push-show == true {
+  .item[detail-push] .item-inner,
+  button.item:not([detail-none]) .item-inner,
+  a.item:not([detail-none]) .item-inner {
+    @include md-detail-push();
+  }
+}
+
+
 // Material Design Item Media
 // --------------------------------------------------
 
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index d6f7f240d1..77d06a0a60 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -15,6 +15,9 @@ $item-wp-avatar-size:                4rem !default;
 $item-wp-thumbnail-size:             8rem !default;
 $item-wp-note-color:                 $input-wp-border-color !default;
 
+$item-wp-detail-push-show:           false !default;
+$item-wp-detail-push-color:          $input-wp-border-color !default;
+
 $item-wp-divider-background:         #fff !default;
 $item-wp-divider-color:              #222 !default;
 $item-wp-divider-padding:            5px 15px !default;
@@ -85,6 +88,29 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
 }
 
 
+// Windows Item Detail Push
+// --------------------------------------------------
+
+@mixin wp-detail-push() {
+  @include wp-detail-push-icon($item-wp-detail-push-color);
+
+  padding-right: 32px;
+
+  background-repeat: no-repeat;
+  background-position: right ($item-wp-padding-right - 2) center;
+  background-size: 14px 14px;
+}
+
+// Only show the forward arrow icon if true
+@if $item-wp-detail-push-show == true {
+  .item[detail-push] .item-inner,
+  button.item:not([detail-none]) .item-inner,
+  a.item:not([detail-none]) .item-inner {
+    @include wp-detail-push();
+  }
+}
+
+
 // Windows Item Media
 // --------------------------------------------------
 
diff --git a/src/components/item/test/buttons/main.html b/src/components/item/test/buttons/main.html
index d0ede1aeb4..257205a49d 100644
--- a/src/components/item/test/buttons/main.html
+++ b/src/components/item/test/buttons/main.html
@@ -88,7 +88,7 @@
     <button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
 
-  <button ion-item *ngFor="let data of [0,1,2,3,4]; #i = index" [class.activated]="i == 1" (click)="testClick($event)">
+  <button ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" (click)="testClick($event)">
     <ion-avatar item-left>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-avatar>
diff --git a/src/themes/dark.ios.scss b/src/themes/dark.ios.scss
index ed19a0bba1..2b69d3a65f 100644
--- a/src/themes/dark.ios.scss
+++ b/src/themes/dark.ios.scss
@@ -71,13 +71,7 @@ $item-ios-padding-icon-top:           10px !default;
 $item-ios-padding-icon-bottom:        9px !default;
 
 
-// iOS Toggle
-// --------------------------------------------------
-
-$toggle-ios-handle-background-color:  color($colors-ios, light) !default;
-
-
-// iOS Icon
+// iOS Item Push Icon
 // --------------------------------------------------
 
 $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
@@ -88,6 +82,12 @@ $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' vi
 }
 
 
+// iOS Toggle
+// --------------------------------------------------
+
+$toggle-ios-handle-background-color:  color($colors-ios, light) !default;
+
+
 // iOS Body
 // --------------------------------------------------
 
diff --git a/src/themes/dark.md.scss b/src/themes/dark.md.scss
index b43c84425c..e7b5ee6d52 100644
--- a/src/themes/dark.md.scss
+++ b/src/themes/dark.md.scss
@@ -59,6 +59,18 @@ $item-md-padding-icon-bottom:         10px !default;
 $item-md-divider-background:          #151515 !default;
 $item-md-divider-color:               color($colors-md, light) !default;
 
+
+// Material Design Item Push Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin md-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
+  @include svg-background-image($svg);
+}
+
+
 // Material Design Toggle
 // ---------------------------------------------------
 $toggle-md-handle-background-color-off: color($colors-md, light) !default;
diff --git a/src/themes/dark.wp.scss b/src/themes/dark.wp.scss
index 18cb8347a0..78e4953193 100644
--- a/src/themes/dark.wp.scss
+++ b/src/themes/dark.wp.scss
@@ -60,6 +60,17 @@ $item-wp-divider-background:          #151515 !default;
 $item-wp-divider-color:               color($colors-wp, light) !default;
 
 
+// Windows Item Push Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin wp-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
+  @include svg-background-image($svg);
+}
+
+
 // Windows Toggle
 // ---------------------------------------------------
 $toggle-wp-handle-background-color-off: color($colors-wp, light) !default;
diff --git a/src/themes/default.ios.scss b/src/themes/default.ios.scss
index aa5bbffcd2..22bf54b34a 100644
--- a/src/themes/default.ios.scss
+++ b/src/themes/default.ios.scss
@@ -48,7 +48,7 @@ $item-ios-padding-icon-top:           10px !default;
 $item-ios-padding-icon-bottom:        9px !default;
 
 
-// iOS Icon
+// iOS Item Push Icon
 // --------------------------------------------------
 
 $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
diff --git a/src/themes/default.md.scss b/src/themes/default.md.scss
index de85d4c5a0..7992991906 100644
--- a/src/themes/default.md.scss
+++ b/src/themes/default.md.scss
@@ -48,6 +48,16 @@ $item-md-padding-icon-top:            11px !default;
 $item-md-padding-icon-bottom:         10px !default;
 
 
+// Material Design Item Push Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin md-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
+  @include svg-background-image($svg);
+}
+
 
 // Material Design Body
 // --------------------------------------------------
diff --git a/src/themes/default.wp.scss b/src/themes/default.wp.scss
index de24e4e744..be0eb70a5b 100644
--- a/src/themes/default.wp.scss
+++ b/src/themes/default.wp.scss
@@ -48,6 +48,17 @@ $item-wp-padding-icon-top:            11px !default;
 $item-wp-padding-icon-bottom:         10px !default;
 
 
+// Windows Item Push Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin wp-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
+  @include svg-background-image($svg);
+}
+
+
 // Windows Input
 // --------------------------------------------------