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

Author: brandyscarney

src/components/item/item.ios.scss

@@ -215,15 +215,15 @@ 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;
   background-color: $item-ios-divider-background;
 }
 
 
-// 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/e2e.ts

@@ -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 @@ <h2>H2 Title Text</h2>
       </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/dividers/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/item/test/text/main.html

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