refactor(typography): add ion-text attribute selector, deprecate others

* fix(fab): remove chained css and exclude from typography directive

references #8293

* refactor(typography): add `ion-text` attribute selector, deprecate others

closes #8293

src/components/fab/fab.ios.scss

@@ -50,12 +50,12 @@ $fab-ios-list-button-background-color-activated:  color-shade($fab-ios-list-butt
   $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
-  .fab-ios.fab-ios-#{$color-name} {
+  .fab-ios-#{$color-name} {
     color: $fg-color;
     background-color: $bg-color;
   }
 
-  .fab-ios.fab-ios-#{$color-name}.activated {
+  .fab-ios-#{$color-name}.activated {
     background-color: $bg-color-activated;
   }
 }

src/components/fab/fab.md.scss

@@ -63,12 +63,12 @@ $fab-md-list-button-background-color-activated:   color-shade($fab-md-list-butto
   $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
-  .fab-md.fab-md-#{$color-name} {
+  .fab-md-#{$color-name} {
     color: $fg-color;
     background-color: $bg-color;
   }
 
-  .fab-md.fab-md-#{$color-name}.activated {
+  .fab-md-#{$color-name}.activated {
     background-color: $bg-color-activated;
   }
 }

src/components/fab/fab.wp.scss

@@ -50,12 +50,12 @@ $fab-wp-list-button-background-color-activated:   color-shade($fab-wp-list-butto
   $bg-color-activated: color-shade($bg-color);
   $fg-color: $color-contrast;
 
-  .fab-wp.fab-wp-#{$color-name} {
+  .fab-wp-#{$color-name} {
     color: $fg-color;
     background-color: $bg-color;
   }
 
-  .fab-wp.fab-wp-#{$color-name}.activated {
+  .fab-wp-#{$color-name}.activated {
     background-color: $bg-color-activated;
   }
 }

src/components/fab/test/basic/main.html

@@ -51,7 +51,7 @@
   </ion-fab>
 
   <ion-fab center middle #fab5>
-    <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
+    <a ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></a>
     <ion-fab-list side="top">
       <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
     </ion-fab-list>
@@ -67,7 +67,7 @@
   </ion-fab>
 
   <ion-fab right middle>
-    <button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
+    <a ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></a>
   </ion-fab>
 
 </ion-content>

src/components/item/test/text/main.html

@@ -37,9 +37,9 @@
   </ion-item>
 
   <ion-item text-wrap>
-    <h3 color="primary">H3 Title Text</h3>
+    <h3 ion-text color="primary">H3 Title Text</h3>
     <p>Paragraph line 1</p>
-    <p color="secondary">Paragraph line 2 secondary</p>
+    <p ion-text color="secondary">Paragraph line 2 secondary</p>
   </ion-item>
 
   <ion-item text-wrap>

src/components/nav/test/nav-push-pop/main.html

@@ -107,13 +107,13 @@
   </p>
 
   <p *ngIf="!visible">
-    <a color="danger"
+    <a ion-text color="danger"
       [navPush]="pushPage"
       [navParams]="{msg:'a (p *ngIf=!visible)'}">a (p *ngIf="!visible")</a>
   </p>
 
   <p>
-    <a color="danger"
+    <a ion-text color="danger"
       *ngIf="!visible"
       [navPush]="pushPage"
       [navParams]="{msg:'a (a *ngIf=!visible)'}">a (a *ngIf="!visible")</a>

src/components/typography/test/basic/main.html

@@ -9,29 +9,29 @@
 
 <ion-content padding>
 
-  <h1 color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
+  <h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
 
-  <h2 color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
+  <h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
 
-  <h3 color="light">H3: The quick brown fox jumps over the lazy dog</h3>
+  <h3 ion-text color="light">H3: The quick brown fox jumps over the lazy dog</h3>
 
-  <h4 color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
+  <h4 ion-text color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
 
-  <h5 color="dark">H5: The quick brown fox jumps over the lazy dog</h5>
+  <h5 ion-text color="dark">H5: The quick brown fox jumps over the lazy dog</h5>
 
-  <h6 [color]="dynamicColor">H6: The quick brown fox jumps over the lazy dog</h6>
+  <h6 ion-text [color]="dynamicColor">H6: The quick brown fox jumps over the lazy dog</h6>
 
   <p>
     I saw a werewolf with a Chinese menu in his hand.
-    Walking through the <sub color="danger">streets</sub> of Soho in the rain.
-    He <i color="primary">was</i> looking for a place called Lee Ho Fook's.
-    Gonna get a <a color="secondary">big dish of beef chow mein.</a>
+    Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+    He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+    Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
     <a class="color-purple">My purple class link.</a>
   </p>
 
   <p>
     He's the hairy-handed gent who ran amuck in Kent.
-    Lately he's <sup color="primary">been</sup> overheard in Mayfair.
+    Lately he's <sup ion-text color="primary">been</sup> overheard in Mayfair.
     Better stay away from him.
     He'll rip your lungs out, Jim.
     I'd like to meet his tailor.

src/components/typography/typography.ts

@@ -1,15 +1,53 @@
-import { Directive, ElementRef, Input, Renderer } from '@angular/core';
+import { Attribute, Directive, ElementRef, Input, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
 
 
 /**
-  * @private
-  * Select all of the HTML text elements with the color attribute to apply the text-color class.
+  * @private TODO remove this line when we remove the other selectors in order to document it
+  * @name Typography
+  * @module ionic
+  * @description
+  *
+  * The Typography component is a simple component that can be used to style the text color of any element.
+  * The `ion-text` attribute should be added to the element in order to pass a color from the Sass `$colors`
+  * map and change the text color of that element.
+  *
+  * @usage
+  *
+  * ```html
+  * <h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
+  *
+  * <h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
+  *
+  * <h3 ion-text color="light">H3: The quick brown fox jumps over the lazy dog</h3>
+  *
+  * <h4 ion-text color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
+  *
+  * <h5 ion-text color="dark">H5: The quick brown fox jumps over the lazy dog</h5>
+  *
+  * <h6 ion-text [color]="dynamicColor">H6: The quick brown fox jumps over the lazy dog</h6>
+  *
+  * <p>
+  *   I saw a werewolf with a Chinese menu in his hand.
+  *   Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+  *   He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+  *   Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
+  * </p>
+  *
+  * <p>
+  *   He's the hairy-handed gent who ran amuck in Kent.
+  *   Lately he's <sup ion-text color="primary">been</sup> overheard in Mayfair.
+  *   Better stay away from him.
+  *   He'll rip your lungs out, Jim.
+  *   I'd like to meet his tailor.
+  * </p>
+  * ```
+  *
  */
 @Directive({
-  selector: 'h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]), p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]'
+  selector: 'h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]):not([ion-fab]), p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color], [ion-text]'
 })
 export class Typography extends Ion {
 
@@ -29,10 +67,16 @@ export class Typography extends Ion {
     this._setMode('text', val);
   }
 
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Attribute('ion-text') ionText: string) {
     super(config, elementRef, renderer);
 
     this.mode = config.get('mode');
+
+    // TODO: Deprecated: all selectors besides `[ion-text]` rc.3
+    // Remove all other selectors and the `ionText` attribute
+    if (ionText === null) {
+      console.warn('Deprecated: The color input has been removed from HTML elements. Please add the `ion-text` attribute in order to use the color input. For example: `<a ion-text color="secondary">Link</a>`');
+    }
   }
 
 }