From 5e5c33a2d9fef7c460805eca61d04ee86008e6ad Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 10 Nov 2016 20:46:25 -0500
Subject: [PATCH] fix(item): fix color input for item divider and list header

* fix(item): fix color input for item divider and list header

- adds ItemDivider class to add color and mode css classes to item
divider
- adds e2e test for item divider colors
- adds sass variables to improve control over list headers and item
divider styles
- fixes style for item divider so it will be styled regardless of being
inside a list for md and wp modes

references #8376

* refactor(popover): remove the background color styling from ion-content and item

- change the default text color and background color to match the theme
variables. This makes popover look better on dark theme and removes the
nesting of styles that breaks list headers.

fixes #8376
---
 src/components/item/item.ios.scss             |  7 +--
 src/components/item/item.md.scss              | 20 +++++--
 src/components/item/item.ts                   | 53 ++++++++++++++++++-
 src/components/item/item.wp.scss              | 20 +++++--
 src/components/item/test/dividers/e2e.ts      |  0
 src/components/item/test/dividers/main.html   | 42 +++++++++------
 src/components/item/test/text/main.html       | 17 +++++-
 src/components/list/list-header.ts            | 22 +++++++-
 src/components/list/list.ios.scss             | 21 +++++++-
 src/components/list/list.md.scss              | 22 ++++++--
 src/components/list/list.wp.scss              | 22 ++++++--
 .../list/test/header-scenarios/main.html      | 12 ++---
 src/components/popover/popover.ios.scss       | 13 +----
 src/components/popover/popover.md.scss        | 14 +----
 src/components/popover/popover.wp.scss        | 14 +----
 .../popover/test/basic/app-module.ts          |  8 ++-
 src/directives.ts                             |  5 +-
 17 files changed, 219 insertions(+), 93 deletions(-)
 create mode 100644 src/components/item/test/dividers/e2e.ts

diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 135e5a93bf..0df7b6118d 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -215,7 +215,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {
 // iOS Item Divider
 // --------------------------------------------------
 
-ion-item-divider.item-ios {
+.item-divider-ios {
   padding-left: $item-ios-padding-left;
 
   color: $item-ios-divider-color;
@@ -223,7 +223,7 @@ ion-item-divider.item-ios {
 }
 
 
-// Generate iOS Item Divider Colors
+// Generate iOS Item and Item Divider Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@@ -233,7 +233,8 @@ ion-item-divider.item-ios {
     color: $color-base;
   }
 
-  .item-ios-#{$color-name} {
+  .item-ios-#{$color-name},
+  .item-divider-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index 9647d902a6..638db84755 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -33,11 +33,17 @@ $item-md-detail-push-color:          $list-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 - Color for the divider
+$item-md-divider-color:              #858585 !default;
+
 /// @prop - Background for the divider
 $item-md-divider-background:         #fff !default;
 
-/// @prop - Color for the divider
-$item-md-divider-color:              #222 !default;
+/// @prop - Font size for the divider
+$item-md-divider-font-size:          $item-md-body-text-font-size !default;
+
+/// @prop - Border bottom for the divider
+$item-md-divider-border-bottom:      1px solid $list-md-border-color !default;
 
 /// @prop - Padding for the divider
 $item-md-divider-padding:            5px 15px !default;
@@ -218,15 +224,18 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
 // Material Design Item Divider
 // --------------------------------------------------
 
-ion-item-divider.item-md {
+.item-divider-md {
   padding-left: $item-md-padding-left;
 
   color: $item-md-divider-color;
   background-color: $item-md-divider-background;
+
+  border-bottom: $item-md-divider-border-bottom;
+  font-size: $item-md-divider-font-size;
 }
 
 
-// Generate Material Design Item Divider Colors
+// Generate Material Design Item and Item Divider Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@@ -236,7 +245,8 @@ ion-item-divider.item-md {
     color: $color-base;
   }
 
-  .item-md-#{$color-name} {
+  .item-md-#{$color-name},
+  .item-divider-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
index 95bcf75c9f..2f19b44151 100644
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -298,6 +298,7 @@ export class Item extends Ion {
   _inputs: Array<string> = [];
   _label: Label;
   _viewLabel: boolean = true;
+  _name: string = 'item';
   _shouldHaveReorder: boolean = false;
 
   /**
@@ -315,7 +316,7 @@ export class Item extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._updateColor(val);
+    this._updateColor(val, this._name);
   }
 
   /**
@@ -334,6 +335,8 @@ export class Item extends Ion {
     @Optional() reorder: ItemReorder
   ) {
     super(config, elementRef, renderer);
+
+    this._setName(elementRef);
     this._shouldHaveReorder = !!reorder;
     this.mode = config.get('mode');
     this.id = form.nextId().toString();
@@ -361,11 +364,25 @@ export class Item extends Ion {
     }
   }
 
+  /**
+   * @private
+   */
   _updateColor(newColor: string, colorClass?: string) {
     colorClass = colorClass || 'item'; // item-radio
     this._setColor(colorClass, newColor);
   }
 
+  /**
+   * @private
+   */
+  _setName(elementRef: ElementRef) {
+    let nodeName = elementRef.nativeElement.nodeName.replace('ION-', '');
+
+    if (nodeName === 'LIST-HEADER' || nodeName === 'ITEM-DIVIDER') {
+      this._name = nodeName;
+    }
+  }
+
   /**
    * @private
    */
@@ -419,6 +436,40 @@ export class Item extends Ion {
       icon.setElementClass('item-icon', true);
     });
   }
+}
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-item-divider',
+  host: {
+    'class': 'item-divider'
+  }
+})
+export class ItemDivider extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('item-divider', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('item-divider', val);
+  }
+
+  constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+  }
 
 }
 
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index b87f360687..05b5319a51 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -39,11 +39,17 @@ $item-wp-detail-push-color:          $input-wp-border-color !default;
 /// @prop - Icon for the detail arrow
 $item-wp-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-wp-detail-push-color}'/></svg>" !default;
 
+/// @prop - Color for the divider
+$item-wp-divider-color:              $list-wp-text-color !default;
+
 /// @prop - Background for the divider
 $item-wp-divider-background:         #fff !default;
 
-/// @prop - Color for the divider
-$item-wp-divider-color:              #222 !default;
+/// @prop - Bodrer bottom for the divider
+$item-wp-divider-border-bottom:      1px solid $list-wp-border-color !default;
+
+/// @prop - Font size for the divider
+$item-wp-divider-font-size:          2rem !default;
 
 /// @prop - Padding for the divider
 $item-wp-divider-padding:            5px 15px !default;
@@ -215,15 +221,18 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
 // Windows Item Divider
 // --------------------------------------------------
 
-ion-item-divider.item-wp {
+.item-divider-wp {
   padding-left: $item-wp-padding-left;
 
+  border-bottom: $item-wp-divider-border-bottom;
+  font-size: $item-wp-divider-font-size;
+
   color: $item-wp-divider-color;
   background-color: $item-wp-divider-background;
 }
 
 
-// Generate Windows Item Divider Colors
+// Generate Windows Item and Item Divider Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@@ -233,7 +242,8 @@ ion-item-divider.item-wp {
     color: $color-base;
   }
 
-  .item-wp-#{$color-name} {
+  .item-wp-#{$color-name},
+  .item-divider-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
diff --git a/src/components/item/test/dividers/e2e.ts b/src/components/item/test/dividers/e2e.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/item/test/dividers/main.html b/src/components/item/test/dividers/main.html
index ddc7f76160..a8bd21e9ac 100644
--- a/src/components/item/test/dividers/main.html
+++ b/src/components/item/test/dividers/main.html
@@ -8,20 +8,42 @@
 
 
 <ion-content class="outer-content">
+  <ion-item-divider>
+    Divider by itself
+  </ion-item-divider>
+
+  <ion-list>
+    <ion-item-divider>
+      Divider in List
+    </ion-item-divider>
+    <ion-item-divider color="danger">
+      Danger Divider in List
+    </ion-item-divider>
+  </ion-list>
+
+  <ion-item-group>
+    <ion-item-divider>
+      Divider in Item Group
+    </ion-item-divider>
+    <ion-item-divider color="secondary">
+      Secondary Divider in Item Group
+    </ion-item-divider>
+  </ion-item-group>
 
   <ion-item-group>
     <ion-item>
+      <h3 color="secondary">Secondary header</h3>
       Plain Ol' div with some text
     </ion-item>
   </ion-item-group>
 
   <ion-item-group>
     <ion-item-divider>
-      Item Divider
+      Item Divider <span color="danger">Danger Span</span>
       <button ion-button item-right>button</button>
     </ion-item-divider>
 
-    <ion-item text-wrap>
+    <ion-item text-wrap class="custom-item">
       Multiline text that should wrap when it is too long
       to fit on one line in the item. Attribute on .item
     </ion-item>
@@ -35,16 +57,12 @@
       <button ion-button item-left clear color="light">
         <ion-icon name="rainy"></ion-icon>
       </button>
-      Dark
+      Dark <h5 color="primary">Primary h5</h5>
     </ion-item-divider>
 
     <ion-item text-wrap>
       <h1>H1 Title Text</h1>
     </ion-item>
-
-    <ion-item text-wrap>
-      <h2>H2 Title Text</h2>
-    </ion-item>
   </ion-item-group>
 
   <ion-item-group>
@@ -58,22 +76,12 @@
       </button>
     </ion-item-divider>
 
-    <ion-item text-wrap>
-      <h3>H3 Title Text</h3>
-    </ion-item>
-  </ion-item-group>
-
-  <ion-item-group>
     <ion-item-divider color="primary">
       Primary
       <ion-thumbnail item-right>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-thumbnail>
     </ion-item-divider>
-
-    <ion-item text-wrap>
-      <h4>H4 Title Text</h4>
-    </ion-item>
   </ion-item-group>
 
   <ion-item-group>
diff --git a/src/components/item/test/text/main.html b/src/components/item/test/text/main.html
index 705709b765..47c936c297 100644
--- a/src/components/item/test/text/main.html
+++ b/src/components/item/test/text/main.html
@@ -9,6 +9,21 @@
 
 <ion-content class="outer-content">
 
+<ion-list>
+  <ion-list-header>
+    List Header
+  </ion-list-header>
+  <ion-item>
+    Item
+  </ion-item>
+  <ion-item-divider>
+    Item Divider
+  </ion-item-divider>
+  <ion-item>
+    Item
+  </ion-item>
+</ion-list>
+
   <ion-item>
     Plain Ol' div with some text
   </ion-item>
@@ -26,7 +41,7 @@
     to fit on one line in the item. Attribute on .item
   </ion-item>
 
-  <ion-item text-wrap>
+  <ion-item text-wrap color="secondary">
     <h1>H1 Title Text</h1>
     <p>Paragraph line 1</p>
   </ion-item>
diff --git a/src/components/list/list-header.ts b/src/components/list/list-header.ts
index 04364b06b1..4226ab657d 100644
--- a/src/components/list/list-header.ts
+++ b/src/components/list/list-header.ts
@@ -1,4 +1,4 @@
-import { Attribute, Directive, ElementRef, Renderer } from '@angular/core';
+import { Attribute, Directive, ElementRef, Input, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
@@ -10,9 +10,27 @@ import { Ion } from '../ion';
   selector: 'ion-list-header'
 })
 export class ListHeader extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor('list-header', val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('list-header', val);
+  }
+
   constructor(config: Config, renderer: Renderer, elementRef: ElementRef, @Attribute('id') private _id: string) {
     super(config, elementRef, renderer);
-    this._setMode('list-header', config.get('mode'));
+
+    this.mode = config.get('mode');
   }
 
   get id(): string {
diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss
index 9bc273d2da..5d95daea0c 100644
--- a/src/components/list/list.ios.scss
+++ b/src/components/list/list.ios.scss
@@ -33,6 +33,9 @@ $list-inset-ios-border-radius:        4px !default;
 /// @prop - Padding left of the header in a list
 $list-ios-header-padding-left:        $item-ios-padding-left !default;
 
+/// @prop - Border bottom of the header in a list
+$list-ios-header-border-bottom:       $hairlines-width solid $list-ios-border-color !default;
+
 /// @prop - Font size of the header in a list
 $list-ios-header-font-size:           1.2rem !default;
 
@@ -42,6 +45,9 @@ $list-ios-header-font-weight:         500 !default;
 /// @prop - Letter spacing of the header in a list
 $list-ios-header-letter-spacing:      .1rem !default;
 
+/// @prop - Text transform of the header in a list
+$list-ios-header-text-transform:      uppercase !default;
+
 /// @prop - Text color of the header in a list
 $list-ios-header-color:               #333 !default;
 
@@ -167,11 +173,22 @@ $list-ios-header-background-color:    transparent !default;
 
   padding-left: $list-ios-header-padding-left;
 
-  border-bottom: $hairlines-width solid $list-ios-border-color;
+  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;
-  text-transform: uppercase;
+  text-transform: $list-ios-header-text-transform;
   color: $list-ios-header-color;
   background: $list-ios-header-background-color;
 }
+
+
+// Generate iOS List Header Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  .list-header-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
\ No newline at end of file
diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss
index 5b780cb61a..e712aad6b7 100644
--- a/src/components/list/list.md.scss
+++ b/src/components/list/list.md.scss
@@ -33,6 +33,9 @@ $list-inset-md-border-radius:    2px !default;
 /// @prop - Padding left of the header in a list
 $list-md-header-padding-left:    $item-md-padding-left !default;
 
+/// @prop - Border bottom of the header in a list
+$list-md-header-border-bottom:   1px solid $list-md-border-color !default;
+
 /// @prop - Font size of the header in a list
 $list-md-header-font-size:       1.4rem !default;
 
@@ -156,15 +159,24 @@ $list-md-header-color:           #858585 !default;
 }
 
 
-// Material Design List Header / Divider
+// Material Design List Header
 // --------------------------------------------------
 
-.list-header-md,
-.list-md ion-item-divider {
-  margin-left: 0;
+.list-header-md {
   padding-left: $list-md-header-padding-left;
 
-  border-bottom: 1px solid $list-md-border-color;
+  border-bottom: $list-md-header-border-bottom;
   font-size: $list-md-header-font-size;
   color: $list-md-header-color;
 }
+
+
+// Generate Material Design List Header Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  .list-header-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss
index 66e20768cd..78d32103ee 100644
--- a/src/components/list/list.wp.scss
+++ b/src/components/list/list.wp.scss
@@ -33,6 +33,9 @@ $list-inset-wp-border-radius:    2px !default;
 /// @prop - Padding left of the header in a list
 $list-wp-header-padding-left:    $item-wp-padding-left !default;
 
+/// @prop - Border bottom of the header in a list
+$list-wp-header-border-bottom:   1px solid $list-wp-border-color !default;
+
 /// @prop - Font size of the header in a list
 $list-wp-header-font-size:       2rem !default;
 
@@ -151,15 +154,24 @@ $list-wp-header-color:           $list-wp-text-color !default;
 }
 
 
-// Windows List Header / Divider
+// Windows List Header
 // --------------------------------------------------
 
-.list-header-wp,
-.list-wp ion-item-divider {
-  margin-left: 0;
+.list-header-wp {
   padding-left: $list-wp-header-padding-left;
 
-  border-bottom: 1px solid $list-wp-border-color;
+  border-bottom: $list-wp-header-border-bottom;
   font-size: $list-wp-header-font-size;
   color: $list-wp-header-color;
 }
+
+
+// Generate Windows List Header Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  .list-header-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
diff --git a/src/components/list/test/header-scenarios/main.html b/src/components/list/test/header-scenarios/main.html
index e3e6785db0..5a28351944 100644
--- a/src/components/list/test/header-scenarios/main.html
+++ b/src/components/list/test/header-scenarios/main.html
@@ -16,10 +16,6 @@
   </ion-fab>
 
   <ion-list>
-    <!--<ion-list-header>
-      ion-list-header
-    </ion-list-header>-->
-
     <ion-list-header text-wrap>
       This is multiline text that has a
       long description of about how the text is really long
@@ -27,9 +23,9 @@
       <button ion-button outline item-right (click)="testClick($event)">View</button>
     </ion-list-header>
 
-    <ion-list-header>
+    <ion-list-header color="secondary">
       <button ion-button item-left (click)="testClick($event)">Default</button>
-      Inner Buttons
+      Secondary Inner Buttons
       <button ion-button outline item-right (click)="testClick($event)">Outline</button>
     </ion-list-header>
 
@@ -45,12 +41,12 @@
       </button>
     </ion-list-header>
 
-    <ion-list-header>
+    <ion-list-header color="dark">
       <button ion-button icon-right item-left (click)="testClick($event)">
         Right Icon
         <ion-icon name="home"></ion-icon>
       </button>
-      right icon buttons
+      Dark right icon buttons
       <button ion-button icon-right outline item-right (click)="testClick($event)">
         Right Icon
         <ion-icon name="star"></ion-icon>
diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss
index fda95efcc1..3e67bb56cf 100644
--- a/src/components/popover/popover.ios.scss
+++ b/src/components/popover/popover.ios.scss
@@ -9,10 +9,9 @@ $popover-ios-min-height:                0 !default;
 $popover-ios-max-height:                90% !default;
 
 $popover-ios-border-radius:             10px !default;
-$popover-ios-text-color:                #000 !default;
+$popover-ios-text-color:                $text-ios-color !default;
 
-$popover-ios-background:                #fff !default;
-$popover-ios-item-background:           $popover-ios-background !default;
+$popover-ios-background:                $background-ios-color !default;
 $popover-ios-arrow-background:          $popover-ios-background !default;
 
 
@@ -25,14 +24,6 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
   border-radius: $popover-ios-border-radius;
   color: $popover-ios-text-color;
   background: $popover-ios-background;
-
-  ion-content {
-    background: $popover-ios-background;
-  }
-}
-
-.popover-ios .popover-content .item {
-  background-color: $popover-ios-item-background;
 }
 
 
diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
index 98e5bf5483..f18022cddb 100644
--- a/src/components/popover/popover.md.scss
+++ b/src/components/popover/popover.md.scss
@@ -9,13 +9,11 @@ $popover-md-min-height:                0 !default;
 $popover-md-max-height:                90% !default;
 
 $popover-md-border-radius:             2px !default;
-$popover-md-text-color:                #000 !default;
-$popover-md-background:                #fafafa !default;
+$popover-md-text-color:                $text-md-color !default;
+$popover-md-background:                $background-md-color !default;
 $popover-md-box-shadow-color:          rgba(0, 0, 0, .3) !default;
 $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-color !default;
 
-$popover-md-item-background:           $popover-md-background !default;
-
 
 .popover-md .popover-content {
   width: $popover-md-width;
@@ -31,14 +29,6 @@ $popover-md-item-background:           $popover-md-background !default;
   transform-origin: top left;
 }
 
-.popover-md .popover-content ion-content {
-  background: $popover-md-background;
-}
-
-.popover-md .popover-content .item {
-  background-color: $popover-md-item-background;
-}
-
 .popover-md .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;
diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss
index e70f4dddd4..4e6102b659 100644
--- a/src/components/popover/popover.wp.scss
+++ b/src/components/popover/popover.wp.scss
@@ -10,10 +10,8 @@ $popover-wp-max-height:                90% !default;
 
 $popover-wp-border:                    2px solid #ccc !default;
 $popover-wp-border-radius:             0 !default;
-
-$popover-wp-text-color:                #000 !default;
-$popover-wp-background:                #f2f2f2 !default;
-$popover-wp-item-background:           $popover-wp-background !default;
+$popover-wp-text-color:                $text-wp-color !default;
+$popover-wp-background:                $background-wp-color !default;
 
 
 .popover-wp .popover-content {
@@ -30,14 +28,6 @@ $popover-wp-item-background:           $popover-wp-background !default;
   transform-origin: top left;
 }
 
-.popover-wp ion-content {
-  background: $popover-wp-background;
-}
-
-.popover-wp .popover-content .item {
-  background-color: $popover-wp-item-background;
-}
-
 .popover-wp .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;
diff --git a/src/components/popover/test/basic/app-module.ts b/src/components/popover/test/basic/app-module.ts
index f73b8d7698..b210b33936 100644
--- a/src/components/popover/test/basic/app-module.ts
+++ b/src/components/popover/test/basic/app-module.ts
@@ -139,11 +139,15 @@ export class PopoverRadioPage {
 
 @Component({
   template: `
-    <ion-list>
-      <ion-list-header>Ionic</ion-list-header>
+    <ion-list style="margin-bottom: 0">
+      <ion-list-header color="secondary">Ionic</ion-list-header>
       <button ion-item (click)="close()">Learn Ionic</button>
       <button ion-item (click)="close()">Documentation</button>
     </ion-list>
+    <div padding style="padding-top: 0">
+      <p>Paragraph text</p>
+      Some more text and <span color="danger">danger span</span>.
+    </div>
   `
 })
 export class PopoverListPage {
diff --git a/src/directives.ts b/src/directives.ts
index 3cd96140a9..44edd0aa96 100644
--- a/src/directives.ts
+++ b/src/directives.ts
@@ -18,7 +18,7 @@ import { Img } from './components/img/img';
 import { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
 import { InfiniteScrollContent } from './components/infinite-scroll/infinite-scroll-content';
 import { IonicApp } from './components/app/app-root';
-import { Item, ItemContent, ItemGroup } from './components/item/item';
+import { Item, ItemContent, ItemDivider, ItemGroup } from './components/item/item';
 import { ItemReorder, Reorder } from './components/item/item-reorder';
 import { ItemSliding, ItemOptions } from './components/item/item-sliding';
 import { Label } from './components/label/label';
@@ -88,7 +88,7 @@ export { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
 export { InfiniteScrollContent } from './components/infinite-scroll/infinite-scroll-content';
 export { TextArea, TextInput } from './components/input/input';
 export { IonicApp } from './components/app/app-root';
-export { Item, ItemContent, ItemGroup } from './components/item/item';
+export { Item, ItemContent, ItemDivider, ItemGroup } from './components/item/item';
 export { ItemReorder, Reorder } from './components/item/item-reorder';
 export { ItemSliding, ItemOptions, ItemSideFlags } from './components/item/item-sliding';
 export { Label } from './components/label/label';
@@ -187,6 +187,7 @@ export const IONIC_DIRECTIVES: any[] = [
   IonicApp,
   Item,
   ItemContent,
+  ItemDivider,
   ItemGroup,
   ItemOptions,
   ItemReorder,