fix(item): add detail prop, fix lines and styles

- removes item-block class
- fixes some styling with first/last-child
- adds detail prop to replace detail-none / detail-push attributes
- style the border and push arrow properly inside of an item with color

packages/core/src/components.d.ts

@@ -1475,6 +1475,7 @@ declare global {
   namespace JSXElements {
     export interface IonItemAttributes extends HTMLAttributes {
       color?: string;
+      detail?: boolean;
       disabled?: boolean;
       href?: string;
       mode?: 'ios' | 'md';

packages/core/src/components/app/test/cordova/index.html

@@ -26,7 +26,7 @@
             Settings
           </ion-list-header>
 
-          <ion-item menuClose detail-none>
+          <ion-item menuClose detail="false">
             Close Menu
           </ion-item>
 
@@ -44,7 +44,7 @@
             No toolbar
           </ion-list-header>
 
-          <ion-item menuClose="right" detail-none>
+          <ion-item menuClose="right" detail="false">
             Close Menu
           </ion-item>
 

packages/core/src/components/card/card.ios.scss

@@ -29,7 +29,7 @@
   border-bottom: 0;
 }
 
-.card-ios .item-ios.item-block .item-inner {
+.card-ios .item-ios .item-inner {
   border: 0;
 }
 

packages/core/src/components/card/card.md.scss

@@ -27,7 +27,7 @@
   border-bottom: 0;
 }
 
-.card-md .item-md.item-block .item-inner {
+.card-md .item-md .item-inner {
   border: 0;
 }
 

packages/core/src/components/icon/test/basic/index.html

@@ -154,10 +154,10 @@
             </ion-label>
           </ion-item>
 
-          <ion-item detail-push>
+          <ion-item detail="true">
             <ion-label>
               <code>
-                ion-item w/ [detail-push] attr. text text text text text text
+                ion-item w/ [detail="true"] attr. text text text text text text
               </code>
             </ion-label>
           </ion-item>

packages/core/src/components/item-group/item-group.ios.scss

@@ -10,6 +10,6 @@
 }
 
 .item-group-ios ion-item:last-child .item-inner,
-.item-group-ios .item-sliding:last-child .item .item-inner {
+.item-group-ios ion-item-sliding:last-child .item .item-inner {
   border: 0;
 }

packages/core/src/components/item-group/item-group.md.scss

@@ -10,6 +10,6 @@
 }
 
 .item-group-md ion-item:last-child .item-inner,
-.item-group-md .item-sliding:last-child .item .item-inner {
+.item-group-md ion-item-sliding:last-child .item .item-inner {
   border: 0;
 }

packages/core/src/components/item-sliding/test/basic/index.html

@@ -123,7 +123,7 @@
             </ion-item-sliding>
 
             <ion-item-sliding id="item1">
-              <ion-item text-wrap detail-push href="#" class="activated">
+              <ion-item text-wrap detail href="#" class="activated">
                 <ion-label>
                   <h2>LEFT side - no icons</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>
@@ -137,7 +137,7 @@
 
 
             <ion-item-sliding id="item2">
-              <ion-item text-wrap detail-push>
+              <ion-item text-wrap detail>
                 <ion-label>
                   <h2>RIGHT/LEFT side - icons</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>
@@ -160,7 +160,7 @@
             </ion-item-sliding>
 
             <ion-item-sliding id="item3">
-              <ion-item text-wrap detail-push>
+              <ion-item text-wrap detail>
                 <ion-label>
                   <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>

packages/core/src/components/item/item.ios.scss

@@ -69,7 +69,7 @@
   @include margin(null, null, 0, null);
 }
 
-.item-ios.item-block .item-inner {
+.item-ios .item-inner {
   @include padding-horizontal(null, $item-ios-padding-end / 2);
 
   @media screen and (orientation: landscape) {
@@ -80,6 +80,29 @@
 }
 
 
+// iOS Items in Lists
+// --------------------------------------------------
+// Removed the requirement that their immmediate
+// parent is listed this adds support for other list components
+
+ion-list,
+ion-reorder-group > ion-gesture {
+  > ion-item:first-child .item-ios,
+  > ion-item-sliding:first-child .item-ios {
+    border-top: $hairlines-width solid $item-ios-border-color;
+  }
+
+  > ion-item:last-child .item-ios,
+  > ion-item-sliding:last-child .item-ios {
+    border-bottom: $hairlines-width solid $item-ios-border-color;
+  }
+
+  > ion-item:last-child .item-ios .item-inner,
+  > ion-item-sliding:last-child .item-ios .item-inner {
+    border-bottom: 0;
+  }
+}
+
 // iOS Item Slots
 // --------------------------------------------------
 
@@ -102,7 +125,7 @@
 }
 
 
-// TODO iOS Item Button
+// iOS Item Button
 // --------------------------------------------------
 
 .item-ios .button-small-ios {
@@ -140,24 +163,18 @@
 // --------------------------------------------------
 
 // Only show the forward arrow icon if true
-@if $item-ios-detail-push-show == true {
+.item-ios.item-detail-push .item-inner {
-  .item-ios[detail-push] .item-inner,
+  $safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right));
-  button.item-ios:not([detail-none]) .item-inner,
+  $safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right));
-  a.item-ios:not([detail-none]) .item-inner {
 
-    $safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right));
+  @include item-push-svg-url($item-ios-detail-push-color);
-    $safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right));
+  @include padding-horizontal(null, 32px);
+  @include background-position(end, $item-ios-padding-end - 2, center);
+  @include background-position(end, $safe-area-position, center);
+  @include background-position(end, $safe-area-position-env, center);
 
-
+  background-repeat: no-repeat;
-    @include svg-background-image($item-ios-detail-push-svg, true);
+  background-size: 14px 14px;
-    @include padding-horizontal(null, 32px);
-    @include background-position(end, $item-ios-padding-end - 2, center);
-    @include background-position(end, $safe-area-position, center);
-    @include background-position(end, $safe-area-position-env, center);
-
-    background-repeat: no-repeat;
-    background-size: 14px 14px;
-  }
 }
 
 
@@ -167,19 +184,17 @@
 @each $color-name, $color-value in $colors-ios {
   $color-base: ion-color($colors-ios, $color-name, base, ios);
   $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+  $color-shade: ion-color($colors-ios, $color-name, shade, ios);
   $color-tint: ion-color($colors-ios, $color-name, tint, ios);
 
-  // If there is text with a color it should use this color
+  .item-ios-#{$color-name} {
-  // and override whatever item sets it to
-  .item-ios .text-ios-#{$color-name} {
-    color: $color-base;
-  }
-
-  .item-ios-#{$color-name},
-  .item-divider-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
+    .item-inner {
+      border-bottom-color: $color-shade;
+    }
+
     p {
       color: $color-contrast;
     }
@@ -188,4 +203,8 @@
       background-color: $color-tint;
     }
   }
+
+  .item-ios-#{$color-name}.item-detail-push .item-inner {
+    @include item-push-svg-url($color-shade);
+  }
 }

packages/core/src/components/item/item.ios.vars.scss

@@ -39,15 +39,9 @@ $item-ios-thumbnail-width:                   56px !default;
 /// @prop - Height of the thumbnail in the item
 $item-ios-thumbnail-height:                  $item-ios-thumbnail-width !default;
 
-/// @prop - Shows the detail arrow icon on an item
-$item-ios-detail-push-show:                  true !default;
-
 /// @prop - Color of the detail arrow icon
 $item-ios-detail-push-color:                 $item-ios-border-color !default;
 
-/// @prop - Icon for the detail arrow
-$item-ios-detail-push-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='#{$item-ios-detail-push-color}'/></svg>" !default;
-
 /// @prop - Padding top for the item content
 $item-ios-padding-top:                       11px !default;
 

packages/core/src/components/item/item.md.scss

@@ -64,28 +64,56 @@
   color: $item-md-paragraph-text-color;
 }
 
-.item-md.item-block .item-inner {
+.item-md .item-inner {
   @include padding-horizontal(null, ($item-md-padding-end / 2));
 
   border-bottom: 1px solid $item-md-border-color;
 }
 
 
+// Material Design Items in Lists
+// --------------------------------------------------
+// Removed the requirement that their immmediate
+// parent is listed this adds support for other list components
+
+ion-list,
+ion-reorder-group > ion-gesture {
+  > ion-item:first-child .item-md,
+  > ion-item-sliding:first-child .item-md {
+    border-top: 1px solid $item-md-border-color;
+  }
+
+  > ion-item:last-child .item-md,
+  > ion-item-sliding:last-child .item-md {
+    border-bottom: 1px solid $item-md-border-color;
+  }
+
+  > ion-item:last-child .item-md .item-inner,
+  > ion-item-sliding:last-child .item-md .item-inner {
+    border-bottom: 0;
+  }
+}
+
+// If the item has the no-lines attribute remove the bottom border from:
+// the item itself (for last-child items)
+// the item-inner class (if it is not last)
+ion-item[no-lines],
+ion-item[no-lines] .item-inner {
+  border-width: 0;
+}
+
+
 // Material Design Item Detail Push
 // --------------------------------------------------
 
 // Only show the forward arrow icon if true
-@if $item-md-detail-push-show == true {
+.item-md.item-detail-push .item-inner {
-  .item-md[detail-push] .item-inner,
+  @include item-push-svg-url($item-md-detail-push-color);
-  button.item-md:not([detail-none]) .item-inner,
+  @include padding-horizontal(null, 32px);
-  a.item-md:not([detail-none]) .item-inner {
+  @include background-position(end, $item-md-padding-end - 2, center);
-    @include svg-background-image($item-md-detail-push-svg, true);
-    @include padding-horizontal(null, 32px);
-    @include background-position(end, $item-md-padding-end - 2, center);
 
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: 14px 14px;
+  background-size: 14px 14px;
-  }
 }
 
 
@@ -123,7 +151,7 @@
 }
 
 
-// TODO Material Design Item Button
+// Material Design Item Button
 // --------------------------------------------------
 
 .item-md .button-small-md {
@@ -163,19 +191,17 @@
 @each $color-name, $color-value in $colors-md {
   $color-base: ion-color($colors-md, $color-name, base, md);
   $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+  $color-shade: ion-color($colors-md, $color-name, shade, md);
   $color-tint: ion-color($colors-md, $color-name, tint, md);
 
-  // If there is text with a color it should use this color
+  .item-md-#{$color-name} {
-  // and override whatever item sets it to
-  .item-md .text-md-#{$color-name} {
-    color: $color-base;
-  }
-
-  .item-md-#{$color-name},
-  .item-divider-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
+    .item-inner {
+      border-bottom-color: $color-shade;
+    }
+
     p {
       color: $color-contrast;
     }
@@ -184,4 +210,8 @@
       background-color: $color-tint;
     }
   }
+
+  .item-md-#{$color-name}.item-detail-push .item-inner {
+    @include item-push-svg-url($color-shade);
+  }
 }

packages/core/src/components/item/item.md.vars.scss

@@ -24,14 +24,8 @@ $item-md-thumbnail-width:            80px !default;
 /// @prop - Height of the thumbnail in the item
 $item-md-thumbnail-height:           $item-md-thumbnail-width !default;
 
-/// @prop - Shows the detail arrow icon on an item
-$item-md-detail-push-show:           false !default;
-
 /// @prop - Color of the detail arrow icon
-$item-md-detail-push-color:          $item-md-text-color !default;
+$item-md-detail-push-color:          $item-md-border-color !default;
-
-/// @prop - Icon for the detail arrow
-$item-md-detail-push-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='#{$item-md-detail-push-color}'/></svg>" !default;
 
 /// @prop - Padding top for the item content
 $item-md-padding-top:                 13px !default;

packages/core/src/components/item/item.mixins.scss

@@ -0,0 +1,9 @@
+
+// Item Mixins
+// --------------------------------------------------
+
+@mixin item-push-svg-url($fill) {
+  $item-detail-push-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='#{$fill}'/></svg>";
+
+  @include svg-background-image($item-detail-push-svg, true);
+}

packages/core/src/components/item/item.scss

@@ -2,23 +2,12 @@
 
 // Item
 // --------------------------------------------------
-// Core structure only, dimensions belong in specific modes
-//
-// ".item" includes elements:
-//   ion-item
-//   [ion-item]
-//   ion-item-divider
-//   ion-list-header
-//
-// ".item-block" includes elements:
-//   ion-item
-//   [ion-item]
 
 ion-item {
   display: block;
 }
 
-.item-block {
+.item {
   @include margin(0);
   @include padding(0);
   @include text-align(initial);

packages/core/src/components/item/item.tsx

@@ -31,6 +31,12 @@ export class Item {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
+   * is `ios` and an `href`, `onclick` or `tappable` property is present.
+   */
+  @Prop() detail: boolean;
+
   /**
    * If true, the user cannot interact with the item. Defaults to `false`.
    */
@@ -50,7 +56,7 @@ export class Item {
 
   /**
    * Whether or not this item should be tappable.
-   * If true, a button tag will be rendered. Default `true`.
+   * If true, a button tag will be rendered. Defaults to `false`.
    */
   @Prop() tappable = false;
 
@@ -96,17 +102,7 @@ export class Item {
       childStyles = Object.assign(childStyles, this.itemStyles[key]);
     }
 
-    const themedClasses = {
+    const clickable = !!(this.href || this.onclick || this.tappable);
-      ...childStyles,
-      ...createThemedClasses(this.mode, this.color, 'item'),
-      ...getElementClassMap(this.el.classList),
-      'item-block': true,
-      'item-disabled': this.disabled,
-    };
-
-    this.hasStyleChange = false;
-
-    const clickable = this.href || this.onclick || this.tappable;
 
     let TagType = 'div';
     if (clickable) {
@@ -116,6 +112,18 @@ export class Item {
       ? {type: 'button'}
       : {};
 
+    const showDetail = this.detail != null ? this.detail : (this.mode === 'ios' && clickable);
+
+    const themedClasses = {
+      ...childStyles,
+      ...createThemedClasses(this.mode, this.color, 'item'),
+      ...getElementClassMap(this.el.classList),
+      'item-disabled': this.disabled,
+      'item-detail-push': showDetail,
+    };
+
+    this.hasStyleChange = false;
+
     return (
       <TagType class={themedClasses} {...attrs}>
         <slot name='start'></slot>

packages/core/src/components/item/item.vars.scss

@@ -1,5 +1,7 @@
 @import "../../themes/ionic.globals";
 
+@import "./item.mixins";
+
 // Item
 // --------------------------------------------------
 

packages/core/src/components/item/readme.md

@@ -16,6 +16,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### detail
+
+boolean
+
+If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
+is `ios` and an `href`, `onclick` or `tappable` property is present.
+
+
 #### disabled
 
 boolean
@@ -53,7 +61,7 @@ If this property is set, a button tag will be rendered.
 boolean
 
 Whether or not this item should be tappable.
-If true, a button tag will be rendered. Default `true`.
+If true, a button tag will be rendered. Defaults to `false`.
 
 
 ## Attributes
@@ -67,6 +75,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### detail
+
+boolean
+
+If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
+is `ios` and an `href`, `onclick` or `tappable` property is present.
+
+
 #### disabled
 
 boolean
@@ -104,7 +120,7 @@ If this property is set, a button tag will be rendered.
 boolean
 
 Whether or not this item should be tappable.
-If true, a button tag will be rendered. Default `true`.
+If true, a button tag will be rendered. Defaults to `false`.
 
 
 

packages/core/src/components/item/test/colors/index.html

@@ -16,97 +16,98 @@
       </ion-header>
 
       <ion-content id="content">
-        <ion-item>
+        <ion-list>
-          <ion-label>
+          <ion-item>
-            <h1>Heading</h1>
+            <ion-label>
-            <p>Paragraph</p>
+              <h1>Heading</h1>
-            <ion-text color="secondary"><p>Secondary paragraph</p></ion-text>
+              <p>Paragraph</p>
-          </ion-label>
+              <ion-text color="secondary"><p>Secondary paragraph</p></ion-text>
-        </ion-item>
+            </ion-label>
+          </ion-item>
 
-        <ion-item color="dark">
+          <ion-item color="dark">
-          <ion-label>
+            <ion-label>
-            <h1>Heading</h1>
+              <h1>Heading</h1>
-            <p>Paragraph</p>
+              <p>Paragraph</p>
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item href="#" color="danger">
+          <ion-item href="#" color="danger">
-          <ion-label>
+            <ion-label>
-            a[ion-item] danger
+              a[ion-item] danger
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item href="#" color="danger" class="activated">
+          <ion-item href="#" color="danger" class="activated">
-          <ion-label>
+            <ion-label>
-            a[ion-item].activated danger
+              a[ion-item].activated danger
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item onclick="testClick(event)" color="secondary">
+          <ion-item onclick="testClick(event)" color="secondary">
-          <ion-label>
+            <ion-label>
-            button[ion-item]
+              button[ion-item]
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item onclick="testClick(event)" color="secondary" class="activated">
+          <ion-item onclick="testClick(event)" color="secondary" class="activated">
-          <ion-label>
+            <ion-label>
-            button[ion-item].activated secondary
+              button[ion-item].activated secondary
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item color="primary">
+          <ion-item color="primary">
-          <ion-button slot="start" color="dark">Dark</ion-button>
+            <ion-button slot="start" color="dark">Dark</ion-button>
-          <ion-label>
+            <ion-label>
-            <h1>Heading</h1>
+              <h1>Heading</h1>
-            <p>Normal paragraph</p>
+              <p>Normal paragraph</p>
-          </ion-label>
+            </ion-label>
-          <ion-button slot="end" fill="outline">Outline</ion-button>
+            <ion-button slot="end" fill="outline">Outline</ion-button>
-        </ion-item>
+          </ion-item>
 
-        <ion-item onclick="testClick(event)" color="dark">
+          <ion-item onclick="testClick(event)" color="dark">
-          <ion-button slot="start">
+            <ion-button slot="start">
-            <ion-icon slot="start" name="home"></ion-icon>
+              <ion-icon slot="start" name="home"></ion-icon>
-            Left Icon
+              Left Icon
-          </ion-button>
+            </ion-button>
-          <ion-label>
+            <ion-label>
-            left icon buttons
+              left icon buttons
-            <ion-text color="primary"><p>Primary paragraph</p></ion-text>
+              <ion-text color="primary"><p>Primary paragraph</p></ion-text>
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item onclick="testClick(event)" disabled color="dark">
+          <ion-item onclick="testClick(event)" disabled color="dark">
-          <ion-button slot="start">
+            <ion-button slot="start">
-            <ion-icon slot="start" name="home"></ion-icon>
+              <ion-icon slot="start" name="home"></ion-icon>
-            Left Icon
+              Left Icon
-          </ion-button>
+            </ion-button>
-          <ion-label>
+            <ion-label>
-            disabled left icon buttons
+              disabled left icon buttons
-            <ion-text color="primary"><p>Primary paragraph</p></ion-text>
+              <ion-text color="primary"><p>Primary paragraph</p></ion-text>
-          </ion-label>
+            </ion-label>
-        </ion-item>
+          </ion-item>
 
-        <ion-item color="light">
+          <ion-item color="light">
-          <ion-button slot="start">
+            <ion-button slot="start">
-            Right Icon
+              Right Icon
-            <ion-icon slot="end" name="home"></ion-icon>
+              <ion-icon slot="end" name="home"></ion-icon>
-          </ion-button>
+            </ion-button>
-          <ion-label>
+            <ion-label>
-            right icon buttons
+              right icon buttons
-          </ion-label>
+            </ion-label>
-          <ion-button slot="end" fill="outline">
+            <ion-button slot="end" fill="outline">
-            Right Icon
+              Right Icon
-            <ion-icon slot="end" name="star"></ion-icon>
+              <ion-icon slot="end" name="star"></ion-icon>
-          </ion-button>
+            </ion-button>
-        </ion-item>
+          </ion-item>
-
-        <ion-item href="#" disabled color="danger">
-          <ion-label>
-            a ion-item disabled right icon/text button large
-            <p>Default paragraph</p>
-          </ion-label>
-        </ion-item>
 
+          <ion-item href="#" disabled color="danger">
+            <ion-label>
+              a ion-item disabled right icon/text button large
+              <p>Default paragraph</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
       </ion-content>
     </ion-page>
   </ion-app>

packages/core/src/components/item/test/icons/index.html

@@ -18,9 +18,9 @@
       </ion-header>
 
       <ion-content id="content">
-        <ion-item detail-push>
+        <ion-item detail>
           <ion-label>
-            ion-item [detail-push] attr
+            ion-item [detail] attr
           </ion-label>
         </ion-item>
 
@@ -64,10 +64,10 @@
           </ion-label>
         </ion-item>
 
-        <ion-item onclick="testClick(event)" detail-none>
+        <ion-item onclick="testClick(event)" detail="false">
           <ion-icon name="flag" slot="start"></ion-icon>
           <ion-label>
-            button[ion-item][detail-none]
+            button[ion-item][detail="false"]
           </ion-label>
         </ion-item>
 

packages/core/src/components/item/test/sliding/index.html

@@ -123,7 +123,7 @@
             </ion-item-sliding>
 
             <ion-item-sliding id="item1">
-              <ion-item text-wrap detail-push href="#" class="activated">
+              <ion-item text-wrap detail href="#" class="activated">
                 <ion-label>
                   <h2>LEFT side - no icons</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>
@@ -137,7 +137,7 @@
 
 
             <ion-item-sliding id="item2">
-              <ion-item text-wrap detail-push>
+              <ion-item text-wrap detail>
                 <ion-label>
                   <h2>RIGHT/LEFT side - icons</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>
@@ -160,7 +160,7 @@
             </ion-item-sliding>
 
             <ion-item-sliding id="item3">
-              <ion-item text-wrap detail-push>
+              <ion-item text-wrap detail>
                 <ion-label>
                   <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                   <p>I think I figured out how to get more Mountain Dew</p>

packages/core/src/components/item/test/standalone/index.html

@@ -13,6 +13,14 @@
     <ion-label>Item Text</ion-label>
   </ion-item>
 
+  <ion-item tappable color="danger">
+    <ion-label>Item Tappable Danger</ion-label>
+  </ion-item>
+
+  <ion-item tappable color="danger" class="activated">
+    <ion-label>Item Tappable Danger.activated</ion-label>
+  </ion-item>
+
   <ion-item>
     <ion-label>
       <h1>Item Multiline Text</h1>
@@ -45,4 +53,10 @@
     <ion-thumbnail slot="end"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-thumbnail>
   </ion-item>
 </body>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
 </html>

packages/core/src/components/list-header/list-header.ios.scss

@@ -9,7 +9,6 @@
 
   position: relative;
 
-  border-bottom: $list-ios-header-border-bottom;
   font-size: $list-ios-header-font-size;
   font-weight: $list-ios-header-font-weight;
   letter-spacing: $list-ios-header-letter-spacing;

packages/core/src/components/list-header/list-header.ios.vars.scss

@@ -8,9 +8,6 @@
 /// @prop - Padding start of the header in a list
 $list-ios-header-padding-start:       $item-ios-padding-start !default;
 
-/// @prop - Border bottom of the header in a list
-$list-ios-header-border-bottom:       $hairlines-width solid $item-ios-border-color !default;
-
 /// @prop - Font size of the header in a list
 $list-ios-header-font-size:           12px !default;
 

packages/core/src/components/list-header/list-header.md.scss

@@ -10,7 +10,6 @@
 
   min-height: $list-md-header-min-height;
 
-  border-top: $list-md-header-border-top;
   font-size: $list-md-header-font-size;
   color: $list-md-header-color;
 }

packages/core/src/components/list-header/list-header.md.vars.scss

@@ -14,9 +14,6 @@ $list-md-header-padding-start:   $item-md-padding-start !default;
 /// @prop - Minimum height of the header in a list
 $list-md-header-min-height:      45px !default;
 
-/// @prop - Border top of the header in a list
-$list-md-header-border-top:      1px solid $item-md-border-color !default;
-
 /// @prop - Font size of the header in a list
 $list-md-header-font-size:       14px !default;
 

packages/core/src/components/list/list.ios.scss

@@ -8,23 +8,6 @@
   @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start);
 }
 
-.list-ios > .item-block:first-child {
-  border-top: $hairlines-width solid $item-ios-border-color;
-}
-
-.list-ios > .item-block:last-child,
-.list-ios > .item-sliding:last-child .item-block {
-  border-bottom: $hairlines-width solid $item-ios-border-color;
-}
-
-.list-ios > .item-block:last-child .item-inner,
-.list-ios > .item-sliding:last-child .item-block .item-inner {
-  border-bottom: 0;
-}
-
-.list-ios .item-block .item-inner {
-  border-bottom: $hairlines-width solid $item-ios-border-color;
-}
 
 // If the item has the no-lines attribute remove the bottom border from:
 // the item itself (for last-child items)
@@ -60,13 +43,13 @@
   border-bottom: 0;
 }
 
-.list-ios[inset] > .item:first-child,
+.list-ios[inset] > ion-item:first-child .item,
-.list-ios[inset] > .item-sliding:first-child .item {
+.list-ios[inset] > ion-item-sliding:first-child .item {
   border-top: 0;
 }
 
-.list-ios[inset] > .item:last-child,
+.list-ios[inset] > ion-item:last-child .item,
-.list-ios[inset] > .item-sliding:last-child .item {
+.list-ios[inset] > ion-item-sliding:last-child .item {
   border-bottom: 0;
 }
 
@@ -80,6 +63,6 @@
 
 .list-ios[no-lines] ion-list-header,
 .list-ios[no-lines] .item,
-.list-ios[no-lines] .item .item-inner {
+.list-ios[no-lines] .item-inner {
   border-width: 0;
 }

packages/core/src/components/list/list.md.scss

@@ -8,35 +8,14 @@
   @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start);
 }
 
-.list-md .item-block .item-inner {
+.list-md + .list ion-list-header {
-  border-bottom: 1px solid $item-md-border-color;
+  @include margin(-$list-md-margin-top, null, null, null);
-}
-
-.list-md > .item-block:last-child,
-.list-md > .item-sliding:last-child {
-  ion-label,
-  .item-inner {
-    border-bottom: 0;
-  }
 }
 
 .list-md > ion-input:last-child::after {
   @include position-horizontal(0, null);
 }
 
-// If the item has the no-lines attribute remove the bottom border from:
-// the item itself (for last-child items)
-// the item-inner class (if it is not last)
-.list-md .item[no-lines],
-.list-md .item[no-lines] .item-inner {
-  border-width: 0;
-}
-
-.list-md + ion-list ion-list-header {
-  @include margin(-$list-md-margin-top, null, null, null);
-}
-
-
 // Material Design Inset List
 // --------------------------------------------------
 
@@ -45,13 +24,13 @@
   @include border-radius($list-inset-md-border-radius);
 }
 
-.list-md[inset] .item:first-child {
+.list-md[inset] ion-item:first-child .item-md {
   @include border-radius($list-inset-md-border-radius, $list-inset-md-border-radius, null, null);
 
   border-top-width: 0;
 }
 
-.list-md[inset] .item:last-child {
+.list-md[inset] ion-item:last-child .item-md {
   @include border-radius(null, null, $list-inset-md-border-radius, $list-inset-md-border-radius);
 
   border-bottom-width: 0;
@@ -73,15 +52,7 @@
 // Material Design No Lines List
 // --------------------------------------------------
 
-.list-md[no-lines] .item-block,
+.list-md[no-lines] .item-md,
-.list-md[no-lines] .item .item-inner {
+.list-md[no-lines] .item-md .item-inner {
   border-width: 0;
 }
-
-
-// Material Design List inputs
-// --------------------------------------------------
-
-.list-md .item-input:last-child {
-  border-bottom: 1px solid $item-md-border-color;
-}

packages/core/src/components/menu-toggle/test/basic/index.html

@@ -21,17 +21,17 @@
       <ion-content>
         <ion-list>
           <ion-item>Open Right Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
         </ion-list>
       </ion-content>
 

packages/core/src/components/menu-toggle/test/button/index.html

@@ -21,17 +21,17 @@
       <ion-content>
         <ion-list>
           <ion-item>Open Right Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
         </ion-list>
       </ion-content>
 

packages/core/src/components/menu/test/basic/index.html

@@ -30,17 +30,17 @@
       <ion-content>
         <ion-list>
           <ion-item>Open Right Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
         </ion-list>
       </ion-content>
 

packages/core/src/components/menu/test/standalone/index.html

@@ -19,17 +19,17 @@
     <ion-content>
       <ion-list>
         <ion-item>Open Right Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
-        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item>Close Menu</ion-item>
       </ion-list>
     </ion-content>
 

packages/core/src/components/split-pane/test/basic/index.html

@@ -23,17 +23,17 @@
         <ion-content>
           <ion-list>
             <ion-item>Open Right Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
-            <ion-item detail-none>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
           </ion-list>
         </ion-content>