feat(design): change daffColorMixin to a directive (#2942)

BREAKING CHANGE: daffColorMixin has been removed in favor of DaffColorableDirective. Update usage by using the hostDirective feature.

Author: xelaint

libs/design/button/src/button/button.component.ts

@@ -11,14 +11,13 @@ import {
 } from '@angular/core';
 
 import {
-  daffColorMixin,
-  DaffColorable,
   DaffPrefixable,
   DaffSuffixable,
   daffPrefixableMixin,
   daffSuffixableMixin,
   DaffArticleEncapsulatedDirective,
   DaffStatusableDirective,
+  DaffColorableDirective,
 } from '@daffodil/design';
 
 import { DaffButtonSizableDirective } from './button-sizable.directive';
@@ -42,7 +41,7 @@ class DaffButtonBase{
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin((DaffButtonBase))));
+const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin((DaffButtonBase)));
 
 export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
 
@@ -77,7 +76,6 @@ enum DaffButtonTypeEnum {
   styleUrls: ['./button.component.scss'],
   //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     {
@@ -88,13 +86,17 @@ enum DaffButtonTypeEnum {
       directive: DaffStatusableDirective,
       inputs: ['status'],
     },
+    {
+      directive: DaffColorableDirective,
+      inputs: ['color'],
+    },
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffButtonComponent
   extends _daffButtonBase
-  implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable {
+  implements OnInit, DaffPrefixable, DaffSuffixable {
 
   private buttonType: DaffButtonType;
 

libs/design/callout/src/callout/callout.component.spec.ts

@@ -62,17 +62,11 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => {
     });
   });
 
-  describe('using a colored variant of a callout',() => {
-    it('should not set a default color', () => {
-      expect(component.color).toBeFalsy();
-    });
-
-    it('should set a color class on the callout', () => {
-      wrapper.color = 'primary';
-      fixture.detectChanges();
+  it('should take color as an input', () => {
+    wrapper.color = 'primary';
+    fixture.detectChanges();
 
-      expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
-    });
+    expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
   });
 
   it('should take textAlignment as an input', () => {

libs/design/callout/src/callout/callout.component.ts

@@ -1,30 +1,20 @@
 import {
   Component,
   ViewEncapsulation,
-  ElementRef,
   ChangeDetectionStrategy,
   HostBinding,
-  Renderer2,
 } from '@angular/core';
 
-import { DaffCompactableDirective } from '@daffodil/design';
+import {
+  DaffColorableDirective,
+  DaffCompactableDirective,
+} from '@daffodil/design';
 import {
   DaffArticleEncapsulatedDirective,
-  DaffColorable,
-  daffColorMixin,
   DaffManageContainerLayoutDirective,
   DaffTextAlignableDirective,
 } from '@daffodil/design';
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-class DaffCalloutBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) { }
-}
-
-const _daffCalloutBase = daffColorMixin(DaffCalloutBase);
-
 /**
  * @inheritdoc
  */
@@ -33,9 +23,6 @@ const _daffCalloutBase = daffColorMixin(DaffCalloutBase);
   template: '<ng-content></ng-content>',
   styleUrls: ['./callout.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
@@ -47,17 +34,15 @@ const _daffCalloutBase = daffColorMixin(DaffCalloutBase);
       directive: DaffCompactableDirective,
       inputs: ['compact'],
     },
+    {
+      directive: DaffColorableDirective,
+      inputs: ['color'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable {
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private textAlignable: DaffTextAlignableDirective,
-  ) {
-    super(elementRef, renderer);
-
+export class DaffCalloutComponent {
+  constructor(private textAlignable: DaffTextAlignableDirective) {
     this.textAlignable.textAlignment = 'left';
   }
 

libs/design/card/src/card/card.component.spec.ts

@@ -61,17 +61,11 @@ describe('@daffodil/design/card | DaffCardComponent', () => {
     });
   });
 
-  describe('using the color property of a card', () => {
-    it('should not set a default color', () => {
-      expect(component.color).toBeFalsy();
-    });
-
-    it('should add the class of the defined color to the host element', () => {
-      wrapper.color = 'primary';
-      fixture.detectChanges();
+  it('should take color as an input', () => {
+    wrapper.color = 'primary';
+    fixture.detectChanges();
 
-      expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
-    });
+    expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
   });
 
   it('should take orientation as an input', () => {

libs/design/card/src/card/card.component.ts

@@ -11,8 +11,7 @@ import {
 
 import {
   DaffArticleEncapsulatedDirective,
-  DaffColorable,
-  daffColorMixin,
+  DaffColorableDirective,
 } from '@daffodil/design';
 
 export type DaffCardType = null | 'daff-raised-card' | 'daff-stroked-card';
@@ -31,15 +30,6 @@ export enum DaffCardOrientationEnum {
   Horizontal = 'horizontal',
 }
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-class DaffCardBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffCardBase = daffColorMixin(DaffCardBase);
-
 /**
  * @inheritdoc
  */
@@ -54,16 +44,17 @@ const _daffCardBase = daffColorMixin(DaffCardBase);
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color'],
-  hostDirectives: [{
-    directive: DaffArticleEncapsulatedDirective,
-  }],
+  hostDirectives: [
+    { directive: DaffArticleEncapsulatedDirective },
+    {
+      directive: DaffColorableDirective,
+      inputs: ['color'],
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class DaffCardComponent extends _daffCardBase implements OnInit, DaffColorable {
+export class DaffCardComponent implements OnInit {
   private _orientation: DaffCardOrientation = DaffCardOrientationEnum.Vertical;
 
   @Input()
@@ -101,8 +92,6 @@ export class DaffCardComponent extends _daffCardBase implements OnInit, DaffColo
   }
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-
     this.cardType = this.initCardType();
   }
 

libs/design/hero/src/hero/hero.component.spec.ts

@@ -59,17 +59,11 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
     });
   });
 
-  describe('using a color variant of a hero', () => {
-    it('should set a color class on the hero', () => {
-      wrapper.color = 'primary';
-      fixture.detectChanges();
-
-      expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
-    });
+  it('should take color as an input', () => {
+    wrapper.color = 'primary';
+    fixture.detectChanges();
 
-    it('should not set a default color', () => {
-      expect(component.color).toBeFalsy();
-    });
+    expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
   });
 
   it('should take textAlignment as an input', () => {

libs/design/hero/src/hero/hero.component.ts

@@ -1,30 +1,20 @@
 import {
   Component,
   ViewEncapsulation,
-  ElementRef,
   ChangeDetectionStrategy,
   HostBinding,
-  Renderer2,
 } from '@angular/core';
 
-import { DaffCompactableDirective } from '@daffodil/design';
+import {
+  DaffColorableDirective,
+  DaffCompactableDirective,
+} from '@daffodil/design';
 import {
   DaffArticleEncapsulatedDirective,
-  DaffColorable,
-  daffColorMixin,
   DaffManageContainerLayoutDirective,
   DaffTextAlignableDirective,
 } from '@daffodil/design';
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the hero mixins
- */
-class DaffHeroBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffHeroBase = daffColorMixin(DaffHeroBase);
-
 /**
  * @inheritdoc
  */
@@ -33,9 +23,6 @@ const _daffHeroBase = daffColorMixin(DaffHeroBase);
   template: '<ng-content></ng-content>',
   styleUrls: ['./hero.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
@@ -47,17 +34,15 @@ const _daffHeroBase = daffColorMixin(DaffHeroBase);
       directive: DaffCompactableDirective,
       inputs: ['compact'],
     },
+    {
+      directive: DaffColorableDirective,
+      inputs: ['color'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffHeroComponent extends _daffHeroBase implements DaffColorable {
-  constructor(
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private textAlignable: DaffTextAlignableDirective,
-  ){
-    super(elementRef, renderer);
-
+export class DaffHeroComponent {
+  constructor(private textAlignable: DaffTextAlignableDirective) {
     this.textAlignable.defaultAlignment = 'left';
   }
 

libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts

@@ -65,19 +65,10 @@ describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
     expect(de.nativeElement.style.maxWidth).toEqual('50px');
   });
 
-  describe('using a colored variant of a loading icon',() => {
-    let loadingIconDe;
-
-    it('should not set a default color', () => {
-      expect(component.color).toBeFalsy();
-    });
-
-    it('should set a color class on the loading icon', () => {
-      wrapper.color = 'secondary';
-      fixture.detectChanges();
+  it('should take color as an input', () => {
+    wrapper.color = 'primary';
+    fixture.detectChanges();
 
-      loadingIconDe = fixture.debugElement.query(By.css('daff-loading-icon'));
-      expect(loadingIconDe.nativeElement.classList.contains('daff-secondary')).toEqual(true);
-    });
+    expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true);
   });
 });

libs/design/loading-icon/src/loading-icon/loading-icon.component.ts

@@ -2,24 +2,10 @@ import {
   Component,
   ChangeDetectionStrategy,
   Input,
-  ElementRef,
-  Renderer2,
   HostBinding,
 } from '@angular/core';
 
-import {
-  daffColorMixin,
-  DaffColorable,
-} from '@daffodil/design';
-
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-class DaffLoadingIconBase{
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffLoadingIconBase = daffColorMixin(DaffLoadingIconBase);
+import { DaffColorableDirective } from '@daffodil/design';
 
 /**
  * @inheritdoc
@@ -28,12 +14,15 @@ const _daffLoadingIconBase = daffColorMixin(DaffLoadingIconBase);
   selector: 'daff-loading-icon',
   templateUrl: './loading-icon.component.html',
   styleUrls: ['./loading-icon.component.scss'],
-  //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color'],
+  hostDirectives: [
+    {
+      directive: DaffColorableDirective,
+      inputs: ['color'],
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffLoadingIconComponent extends _daffLoadingIconBase implements DaffColorable {
+export class DaffLoadingIconComponent {
 
   /**
    * The (pixel) diameter of the animation
@@ -50,8 +39,4 @@ export class DaffLoadingIconComponent extends _daffLoadingIconBase implements Da
   @HostBinding('style.max-width') get maxWidth() {
 	  return this.diameter + 'px';
   }
-
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
 }