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
ionic-team · Nov 9, 2016 · 32e3253 · 32e3253
1 parent a98284a
commit 32e3253
Show file tree

Hide file tree

Showing 14 changed files with 208 additions and 57 deletions.
diff --git a/src/components/item/item.ios.scss b/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;
   }

diff --git 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
@@ -297,6 +297,7 @@ export class Item extends Ion {
   _inputs: Array<string> = [];
   _label: Label;
   _viewLabel: boolean = true;
+  _name: string = 'item';
 
   /**
    * @private
@@ -313,7 +314,7 @@ export class Item extends Ion {
    */
   @Input()
   set color(val: string) {
-    this._updateColor(val);
+    this._updateColor(val, this._name);
   }
 
   /**
@@ -327,6 +328,8 @@ export class Item extends Ion {
   constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
     super(config, elementRef, renderer);
 
+    this._setName(elementRef);
+
     this.mode = config.get('mode');
     this.id = form.nextId().toString();
   }
@@ -353,11 +356,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
    */
@@ -411,6 +428,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
@@ -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
diff --git 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 @@ <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>

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