refactor(item): remove paragraph styles, update activated colors

- Adds test for item colors - Removes the color from native paragraph elements allowing colors to be passed Closes #9081
ionic-team · Nov 10, 2016 · e350a78 · e350a78
1 parent 7475133
commit e350a78
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 12 deletions.
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
@@ -6,9 +6,6 @@
 /// @prop - Font size of the item text
 $item-ios-body-text-font-size:            1.6rem !default;
 
-/// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color:           #666 !default;
-
 /// @prop - Size of the avatar in the item
 $item-ios-avatar-size:                    3.6rem !default;
 
@@ -93,7 +90,6 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   font-size: 1.2rem;
   line-height: normal;
   text-overflow: inherit;
-  color: $item-ios-paragraph-text-color;
 }
 
 .item-ios h2:last-child,
@@ -236,6 +232,10 @@ ion-item-divider.item-ios {
   .item-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
+
+    &.activated {
+     background-color: color-shade($color-base);
+    }
   }
 }
 

diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
@@ -9,9 +9,6 @@ $item-md-body-text-font-size:        1.4rem !default;
 /// @prop - line height of the item text
 $item-md-body-text-line-height:      1.5 !default;
 
-/// @prop - Color of the item paragraph
-$item-md-paragraph-text-color:       #666 !default;
-
 /// @prop - Font size of the item
 $item-md-font-size:                  1.6rem !default;
 
@@ -103,7 +100,6 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   font-size: 1.4rem;
   line-height: normal;
   text-overflow: inherit;
-  color: $item-md-paragraph-text-color;
 }
 
 .item-md.item-block .item-inner {
@@ -239,6 +235,10 @@ ion-item-divider.item-md {
   .item-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
+
+    &.activated {
+     background-color: color-shade($color-base);
+    }
   }
 }
 

diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
@@ -15,9 +15,6 @@ $item-wp-body-background-color:      $list-wp-background-color !default;
 /// @prop - Color of the item text
 $item-wp-body-text-color:            $list-wp-text-color !default;
 
-/// @prop - Color of the item paragraph
-$item-wp-paragraph-text-color:       #666 !default;
-
 /// @prop - Font size of the item
 $item-wp-font-size:                  1.6rem !default;
 
@@ -108,7 +105,6 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   font-size: 1.4rem;
   line-height: normal;
   text-overflow: inherit;
-  color: $item-wp-paragraph-text-color;
 }
 
 .item-wp.item-block .item-inner {
@@ -236,6 +232,10 @@ ion-item-divider.item-wp {
   .item-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
+
+    &.activated {
+      background-color: color-shade($color-base);
+    }
   }
 }
 

diff --git a/src/components/item/test/colors/app-module.ts b/src/components/item/test/colors/app-module.ts
@@ -0,0 +1,33 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/item/test/colors/e2e.ts b/src/components/item/test/colors/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/src/components/item/test/colors/main.html b/src/components/item/test/colors/main.html
@@ -0,0 +1,78 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item Colors</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-item>
+    <ion-label color="primary">Primary label</ion-label>
+  </ion-item>
+
+  <ion-item color="dark">
+    <ion-label color="primary">Primary label</ion-label>
+  </ion-item>
+
+  <a ion-item href="#" color="danger">
+    a[ion-item] danger
+  </a>
+
+  <a ion-item href="#" color="danger" class="activated">
+    a[ion-item].activated danger
+  </a>
+
+  <button ion-item color="secondary">
+    button[ion-item]
+  </button>
+
+  <button ion-item color="secondary" class="activated">
+    button[ion-item].activated secondary
+  </button>
+
+  <ion-item color="primary">
+    <button ion-button item-left color="dark">Dark</button>
+    Inner Buttons
+    <p>Normal paragraph</p>
+    <button ion-button outline item-right>Outline</button>
+  </ion-item>
+
+  <button ion-item color="dark">
+    <button ion-button item-left icon-left>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </button>
+    left icon buttons
+    <p color="primary">Primary paragraph</p>
+  </button>
+
+  <button ion-item disabled color="dark">
+    <button ion-button item-left icon-left>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </button>
+    disabled left icon buttons
+    <p color="primary">Primary paragraph</p>
+  </button>
+
+  <ion-item color="light">
+    <button ion-button item-left icon-right>
+      Right Icon
+      <ion-icon name="home"></ion-icon>
+    </button>
+    right icon buttons
+    <button ion-button outline item-right icon-right>
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </button>
+  </ion-item>
+
+  <a ion-item disabled color="danger">
+    a ion-item disabled right icon/text button large
+    <p>Default paragraph</p>
+  </a>
+
+</ion-content>