Skip to content

Commit

Permalink
refactor(item): Create .icon-accessory and remove auto nav icons, closes
Browse files Browse the repository at this point in the history 
 #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>
  • Loading branch information
@adamdbradley
adamdbradley committed Apr 7, 2014
1 parent 518e54e commit c7e3def
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 66 deletions.
65 changes: 12 additions & 53 deletions scss/_items.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
// -------------------------------

Expand Down
3 changes: 3 additions & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
38 changes: 25 additions & 13 deletions test/html/lists.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -364,15 +376,15 @@ <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>

<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
<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>
Expand All @@ -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>

Expand Down Expand Up @@ -418,15 +430,15 @@ <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">
<i class="icon ion-ios7-cog gray fill-icon"></i>
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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -465,31 +477,31 @@ <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>
<p>Nine Inch Nails</p>
</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>
<p>Nirvana</p>
</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>
<p>Bestie Boys</p>
</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>
Expand Down

2 comments on commit c7e3def

@damienleri
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you update the docs when you get a chance, http://ionicframework.com/docs/components/#list -- it was confusing that the simulator/screenshots show the disclosure indicator.

@MrOnosa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have to agree with Damienleri. I was also confused by the documentation here... http://ionicframework.com/docs/components/#item-icons
The documentation still says that the ion-chevron-right icon will automatically show up if no other icon is specified. Also, the demo at http://plnkr.co/edit/qYMCrt?p=preview is referencing 1.0.0-beta.1 which makes this whole situation even more confusing.

Please sign in to comment.