From c7e3defca51f03368be84e7f86d71e7ec2fb374c Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Apr 2014 15:33:32 -0500
Subject: [PATCH] refactor(item): Create .icon-accessory and remove auto nav
 icons, closes #1061

BREAKING CHANGE: The developer should be stating exactly how an icon
should show, but previously the right nav arrow icon violates this by
automatically showing a right arrow when an item was an anchor or
button. Instead of using the `:after` item selector, which was always
applied by default, it uses the same markup as `item-icon-right`, which
is easier to understand, customizable and not a hard coded default.

This change removes the `:after` nav icon styling, and creates a new
class, `icon-accessory`, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that's
reusable.

An example of right side arrow using `ion-chevron-right` as the icon:

    <a class="item item-icon-right" href="#">
      Check mail
      <i class="icon ion-chevron-right icon-accessory"></i>
    </a>
---
 scss/_items.scss     | 65 ++++++++------------------------------------
 scss/_variables.scss |  3 ++
 test/html/lists.html | 38 +++++++++++++++++---------
 3 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/scss/_items.scss b/scss/_items.scss
index e7aef6041c9..8c7544937ea 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -300,6 +300,18 @@ a.item-content {
   left: auto;
 }
 
+.item-icon-left .icon-accessory,
+.item-icon-right .icon-accessory {
+  color: $item-icon-accessory-color;
+  font-size: $item-icon-accessory-font-size;
+}
+.item-icon-left .icon-accessory {
+  left: round($item-padding / 5);
+}
+.item-icon-right .icon-accessory {
+  right: round($item-padding / 5);
+}
+
 
 /**
  * Item Button
@@ -375,59 +387,6 @@ button.item.item-button-right {
 }
 
 
-/**
- * Auto Right Arrow Icon
- * --------------------------------------------------
- * By default, if an .item is created out of an <a> or <button>
- * then a arrow will be added to the right side of the item.
- */
-
-a.item,
-button.item,
-.item[href] .item-content,
-.item[ng-click] .item-content {
-  padding-right: (($item-padding * 3) - 5);
-
-  &:after {
-    // By default, both <a> and <button> have right side arrow icons
-    @include font-smoothing(antialiased);
-    position: absolute;
-    top: 50%;
-    right: $item-padding - 4;
-    display: block;
-    margin-top: -8px;
-    color: #ccc;
-    content: "\f125"; // ion-chevron-right
-    text-transform: none;
-    font-weight: normal;
-    font-style: normal;
-    font-variant: normal;
-    font-size: 16px;
-    font-family: 'Ionicons';
-    line-height: 1;
-    speak: none;
-  }
-}
-
-.grade-c {
-  a.item:after,
-  button.item:after,
-  .item[href] .item-content:after,
-  .item[ng-click] .item-content:after {
-    @include font-smoothing(none);
-  }
-}
-
-// do not show the default right arrow when they want their own right side icon
-a.item-icon-right:after,
-button.item-icon-right:after,
-a.item-button-right:after,
-button.item-button-right:after,
-.item a.item-content:after {
-  display: none;
-}
-
-
 // Item Avatar
 // -------------------------------
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3e8dcb79d78..0855298e0b9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -289,6 +289,9 @@ $item-button-line-height:         32px !default;
 $item-icon-font-size:             32px !default;
 $item-icon-fill-font-size:        28px !default;
 
+$item-icon-accessory-color:       #ccc !default;
+$item-icon-accessory-font-size:   16px !default;
+
 $item-avatar-width:               40px !default;
 $item-avatar-height:              40px !default;
 
diff --git a/test/html/lists.html b/test/html/lists.html
index a0e325c69d8..ae626062496 100644
--- a/test/html/lists.html
+++ b/test/html/lists.html
@@ -36,9 +36,20 @@ <h1 class="title">Lists</h1>
             Check mail
           </a>
 
-          <a href="#" class="item item-icon-left">
+          <a href="#" class="item item-icon-left item-icon-right">
             <i class="icon ion-chatbubble-working"></i>
             Call Ma
+            <i class="icon ion-chevron-right icon-accessory"></i>
+          </a>
+
+          <a href="#" class="item item-icon-right">
+            Right side nav icon
+            <i class="icon ion-chevron-right icon-accessory"></i>
+          </a>
+
+          <a href="#" class="item item-icon-left">
+            <i class="icon ion-chevron-left icon-accessory"></i>
+            Left side nav icon
           </a>
 
         </div>
@@ -49,10 +60,11 @@ <h1 class="title">Lists</h1>
             Work
           </div>
 
-          <a href="#" class="item item-icon-left">
+          <a href="#" class="item item-icon-left item-icon-right">
             <i class="icon ion-email"></i>
             Check mail
             <span class="badge">5</span>
+            <i class="icon ion-chevron-right icon-accessory"></i>
           </a>
 
           <div class="item item-icon-left item-button-right">
@@ -364,7 +376,7 @@ <h3>List with card</h3>
             <div class="item-content">
               <i class="icon ion-heart brand-assertive fill-icon"></i>
               Madison, WI
-              <i class="icon ion-chevron-right"></i>
+              <i class="icon ion-chevron-right icon-accessory"></i>
             </div>
           </a>
 
@@ -372,7 +384,7 @@ <h3>List with card</h3>
             <div class="item-content slide-left">
               <i class="icon ion-image brand-energized fill-icon"></i>
               Driving Directions
-              <i class="icon ion-chevron-right"></i>
+              <i class="icon ion-chevron-right icon-accessory"></i>
             </div>
             <div class="item-options">
              <button class="button">Button</button>
@@ -383,7 +395,7 @@ <h3>List with card</h3>
             <div class="item-content slide-right">
               <i class="icon ion-ios7-cog gray fill-icon"></i>
               Settings
-              <i class="icon ion-chevron-right"></i>
+              <i class="icon ion-chevron-right icon-accessory"></i>
             </div>
           </a>
 
@@ -418,7 +430,7 @@ <h3>List with card</h3>
             Default has no wrap! This is a list item with really really really really really
             really really really really long long long long long long
             text text text texxxxxttt text testy text!!!
-            <i class="icon ion-chevron-right"></i>
+            <i class="icon ion-chevron-right icon-accessory"></i>
           </a>
 
           <a href="#" class="item item-icon-left item-icon-right item-text-wrap">
@@ -426,7 +438,7 @@ <h3>List with card</h3>
             Assigned "item-text-wrap". This is a list item with really really really really really
             really really really really long long long long long long
             text text text texxxxxttt text testy text!!!
-            <i class="icon ion-chevron-right"></i>
+            <i class="icon ion-chevron-right icon-accessory"></i>
           </a>
 
           <a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
@@ -435,7 +447,7 @@ <h3>List with card</h3>
               Default no wrap and has item-content! This is a list item with really really really really really
               really really really really long long long long long long
               text text text texxxxxttt text testy text!!!
-              <i class="icon ion-chevron-right"></i>
+              <i class="icon ion-chevron-right icon-accessory"></i>
             </div>
             <div class="item-options">
              <button class="button">Button</button>
@@ -448,7 +460,7 @@ <h3>List with card</h3>
               Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
               really really really really long long long long long long
               text text text texxxxxttt text testy text!!!
-              <i class="icon ion-chevron-right"></i>
+              <i class="icon ion-chevron-right icon-accessory"></i>
             </div>
             <div class="item-options">
              <button class="button">Button</button>
@@ -465,7 +477,7 @@ <h3>List with card</h3>
         <h3>Thumbnails .item-thumbnail</h3>
         <div class="list">
 
-          <a href="#" class="item item-avatar">
+          <a href="#" class="item item-avatar-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
@@ -473,7 +485,7 @@ <h2>Pretty Hate Machine</h2>
             </div>
           </a>
 
-          <a href="#" class="item item-avatar">
+          <a href="#" class="item item-avatar-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
@@ -481,7 +493,7 @@ <h2>Nevermind</h2>
             </div>
           </a>
 
-          <a href="#" class="item item-avatar">
+          <a href="#" class="item item-avatar-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
@@ -489,7 +501,7 @@ <h2>License To Ill</h2>
             </div>
           </a>
 
-          <a href="#" class="item item-avatar">
+          <a href="#" class="item item-avatar-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>gjpqy</h2>