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

@@ -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;
 

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;
 

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');
+  }
 
 }
 

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;
 

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>

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>

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 {

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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>

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;
 }
 
 

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;

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;

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 {

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,