Removed deprecated styles and classes inputs

docs/upgrading/0.14.0-0.15.0.md

@@ -10,3 +10,7 @@ Dynamic animation can be achieved by binding the `animation` input to `undefined
 - <fa-icon [icon]="['fas', 'sync']" [spin]="isSyncAnimated" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>
 + <fa-icon [icon]="['fas', 'sync']" [animation]="isSyncAnimated ? 'spin' : undefined" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>
 ```
+
+## Remove usage of the `styles` and `classes` inputs
+
+Previously deprecated `styles` and `classes` inputs in all components were removed. These inputs don't work the way one would expect and cause a lot of confusion. For the majority of the cases, one should use regular [class and style bindings](https://angular.io/guide/class-binding) provided by Angular. For those rare cases, when it is not enough, there is a guide on how one can style component's internal elements at their own risk - [Styling icon internals](https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/guide/styling-icon-internals.md).

projects/demo/e2e/src/app.e2e-spec.ts

@@ -9,7 +9,7 @@ describe('Angular FontAwesome demo', () => {
   });
 
   it('should render all icons', async () => {
-    expect(await appPage.icons.count()).toBe(43);
+    expect(await appPage.icons.count()).toBe(45);
   });
 
   afterEach(async () => {

projects/demo/src/app/app.component.html

@@ -37,6 +37,11 @@ <h3>With Mask and Transform</h3>
 <h3>Change Size</h3>
 <fa-icon [icon]="faAdjust" size="2x"></fa-icon>
 
+<h3>Change color</h3>
+
+<p>Using custom style: <fa-icon [icon]="faAdjust" [style.color]="'red'"></fa-icon></p>
+<p>Using custom class: <fa-icon [icon]="faAdjust" class="green-icon"></fa-icon></p>
+
 <h3>Animations</h3>
 
 <button type="button" (click)="isAnimated = !isAnimated">Toggle animations</button>
@@ -106,12 +111,12 @@ <h3>Layers</h3>
 <p>Custom icons created with multiple layers.</p>
 <div>
   <fa-layers [fixedWidth]="true" size="4x">
-    <fa-icon [icon]="faCircle" [styles]="{ color: 'Tomato' }"></fa-icon>
+    <fa-icon [icon]="faCircle" [style.color]="'Tomato'"></fa-icon>
     <fa-icon [icon]="faTimes" [inverse]="true" transform="shrink-6"></fa-icon>
   </fa-layers>
   <fa-layers [fixedWidth]="true" size="4x">
     <fa-icon [icon]="faSquare"></fa-icon>
-    <fa-icon [icon]="faBatteryQuarter" transform="shrink-8" [styles]="{ color: 'Tomato' }"></fa-icon>
+    <fa-icon [icon]="faBatteryQuarter" transform="shrink-8" [style.color]="'Tomato'"></fa-icon>
   </fa-layers>
   <fa-layers [fixedWidth]="true" size="4x">
     <fa-icon [icon]="faFighterJet"></fa-icon>
@@ -124,12 +129,7 @@ <h3>Layers</h3>
 <div>
   <fa-layers [fixedWidth]="true" size="4x">
     <fa-icon [icon]="faFlag"></fa-icon>
-    <fa-layers-text
-      title="Fort Awesome"
-      [content]="'Fa'"
-      transform="up-4"
-      [styles]="{ 'font-size': '0.3em' }"
-    ></fa-layers-text>
+    <fa-layers-text title="Fort Awesome" [content]="'Fa'" transform="up-4" [style.font-size]="'0.3em'"></fa-layers-text>
   </fa-layers>
 </div>
 

projects/demo/src/app/app.component.scss

@@ -14,4 +14,8 @@
 select {
   font-size: 15px;
   font-family: Tahoma, Geneva, sans-serif;
-}
+}
+
+.green-icon {
+  color: green;
+}

src/lib/icon/duotone-icon.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { IconDefinition, IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition, IconParams, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FaIconComponent } from './icon.component';
 
 @Component({
@@ -64,11 +64,21 @@ export class FaDuotoneIconComponent extends FaIconComponent {
     return definition;
   }
 
-  protected buildParams() {
+  protected buildParams(): IconParams {
     const params = super.buildParams();
 
     if (this.swapOpacity === true || this.swapOpacity === 'true') {
-      params.classes.push('fa-swap-opacity');
+      if (Array.isArray(params.classes)) {
+        params.classes.push('fa-swap-opacity');
+      } else if (typeof params.classes === 'string') {
+        params.classes = [params.classes, 'fa-swap-opacity'];
+      } else {
+        params.classes = ['fa-swap-opacity'];
+      }
+    }
+
+    if (params.styles == null) {
+      params.styles = {};
     }
     if (this.primaryOpacity != null) {
       params.styles['--fa-primary-opacity'] = this.primaryOpacity.toString();

src/lib/icon/icon.component.ts

@@ -11,7 +11,6 @@ import {
   PullProp,
   RotateProp,
   SizeProp,
-  Styles,
   Transform,
 } from '@fortawesome/fontawesome-svg-core';
 import { FaConfig } from '../config';
@@ -53,16 +52,6 @@ export class FaIconComponent implements OnChanges {
   @Input() animation?: AnimationProp;
 
   @Input() mask?: IconProp;
-
-  /**
-   * Set `style` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `style` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() styles?: Styles;
   @Input() flip?: FlipProp;
   @Input() size?: SizeProp;
   @Input() pull?: PullProp;
@@ -71,16 +60,6 @@ export class FaIconComponent implements OnChanges {
   @Input() symbol?: FaSymbol;
   @Input() rotate?: RotateProp;
   @Input() fixedWidth?: boolean;
-
-  /**
-   * Set `class` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `class` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() classes?: string[] = [];
   @Input() transform?: string | Transform;
 
   /**
@@ -149,7 +128,7 @@ export class FaIconComponent implements OnChanges {
     return null;
   }
 
-  protected buildParams() {
+  protected buildParams(): IconParams {
     const classOpts: FaProps = {
       flip: this.flip,
       animation: this.animation,
@@ -167,9 +146,8 @@ export class FaIconComponent implements OnChanges {
     return {
       title: this.title,
       transform: parsedTransform,
-      classes: [...faClassList(classOpts), ...this.classes],
+      classes: faClassList(classOpts),
       mask: this.mask != null ? this.findIconDefinition(this.mask) : null,
-      styles: this.styles != null ? this.styles : {},
       symbol: this.symbol,
       attributes: {
         role: this.a11yRole,

src/lib/layers/layers-counter.component.spec.ts

@@ -7,7 +7,7 @@ describe('FaLayersCounterComponent', () => {
       selector: 'fa-host',
       template: `
         <fa-layers>
-          <fa-layers-counter [content]="'Test'" [styles]="{ color: 'Tomato' }"></fa-layers-counter>
+          <fa-layers-counter [content]="'Test'"></fa-layers-counter>
         </fa-layers>
       `,
     })

src/lib/layers/layers-counter.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, OnChanges, Optional, SimpleChanges } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { counter, CounterParams, Styles } from '@fortawesome/fontawesome-svg-core';
+import { counter, CounterParams } from '@fortawesome/fontawesome-svg-core';
 import { faWarnIfParentNotExist } from '../shared/errors/warn-if-parent-not-exist';
 import { FaLayersComponent } from './layers.component';
 
@@ -15,26 +15,6 @@ import { FaLayersComponent } from './layers.component';
 export class FaLayersCounterComponent implements OnChanges {
   @Input() content: string;
   @Input() title?: string;
-
-  /**
-   * Set `style` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `style` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() styles?: Styles;
-
-  /**
-   * Set `class` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `class` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() classes?: string[] = [];
   @Input() position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 
   @HostBinding('innerHTML') renderedHTML: SafeHtml;
@@ -54,17 +34,9 @@ export class FaLayersCounterComponent implements OnChanges {
   }
 
   protected buildParams(): CounterParams {
-    const classes = [];
-    if (this.classes != null) {
-      classes.push(...this.classes);
-    }
-    if (this.position != null) {
-      classes.push(`fa-layers-${this.position}`);
-    }
     return {
       title: this.title,
-      classes,
-      styles: this.styles,
+      classes: this.position != null ? [`fa-layers-${this.position}`] : undefined,
     };
   }
 

src/lib/layers/layers-text.component.spec.ts

@@ -7,7 +7,7 @@ describe('FaLayersTextComponent', () => {
       selector: 'fa-host',
       template: `
         <fa-layers>
-          <fa-layers-text [content]="'Test'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-layers-text [content]="'Test'"></fa-layers-text>
         </fa-layers>
       `,
     })

src/lib/layers/layers-text.component.ts

@@ -6,7 +6,6 @@ import {
   PullProp,
   RotateProp,
   SizeProp,
-  Styles,
   text,
   TextParams,
   Transform,
@@ -27,27 +26,6 @@ import { FaLayersComponent } from './layers.component';
 export class FaLayersTextComponent implements OnChanges {
   @Input() content: string;
   @Input() title?: string;
-
-  /**
-   * Set `style` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `style` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() styles?: Styles;
-
-  /**
-   * Set `class` attribute on the SVG element rendered by the component.
-   *
-   * @deprecated This input breaks view encapsulation and is not recommended.
-   * For simple cases (like colors), use `class` on the component itself, for
-   * more complex usages, explicitly opt-in to break the view encapsulation.
-   * This input is deprecated since 0.12.0 and will be removed in 0.13.0.
-   */
-  @Input() classes?: string[] = [];
-
   @Input() flip?: FlipProp;
   @Input() size?: SizeProp;
   @Input() pull?: PullProp;
@@ -94,9 +72,8 @@ export class FaLayersTextComponent implements OnChanges {
 
     return {
       transform: parsedTransform,
-      classes: [...faClassList(classOpts), ...this.classes],
+      classes: faClassList(classOpts),
       title: this.title,
-      styles: this.styles,
     };
   }
 

src/lib/layers/layers.component.spec.ts

@@ -14,7 +14,7 @@ describe('FaLayersComponent', () => {
         <fa-layers>
           <fa-icon [icon]="faUser"></fa-icon>
           <fa-icon [icon]="faCoffee"></fa-icon>
-          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-layers-text [content]="'User with coffee'"></fa-layers-text>
         </fa-layers>
       `,
     })
@@ -35,7 +35,7 @@ describe('FaLayersComponent', () => {
         <fa-layers size="2x">
           <fa-icon [icon]="faUser"></fa-icon>
           <fa-icon [icon]="faCoffee"></fa-icon>
-          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-layers-text [content]="'User with coffee'"></fa-layers-text>
         </fa-layers>
       `,
     })
@@ -84,7 +84,7 @@ describe('FaLayersComponent', () => {
         <fa-layers [fixedWidth]="false">
           <fa-icon [icon]="faUser"></fa-icon>
           <fa-icon [icon]="faCoffee"></fa-icon>
-          <fa-layers-text [content]="'User with coffee'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-layers-text [content]="'User with coffee'"></fa-layers-text>
         </fa-layers>
       `,
     })
@@ -135,7 +135,7 @@ describe('FaLayersComponent', () => {
       template: `
         <fa-layers>
           <fa-duotone-icon [icon]="faDummy"></fa-duotone-icon>
-          <fa-layers-text [content]="'Dummy'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          <fa-layers-text [content]="'Dummy'"></fa-layers-text>
         </fa-layers>
       `,
     })
@@ -155,7 +155,7 @@ describe('FaLayersComponent', () => {
         <fa-layers>
           <ng-container>
             <fa-icon [icon]="faUser"></fa-icon>
-            <fa-layers-text [content]="'Dummy'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+            <fa-layers-text [content]="'Dummy'"></fa-layers-text>
           </ng-container>
         </fa-layers>
       `,