feat(design)!: change daffArticleEncapsulatedMixin to a directive (#2913)

BREAKING CHANGE: daffArticleEncapsulatedMixin has been removed in favor of DaffArticleEncapsulatedDirective. Update usage by using the hostDirective instead.

Co-authored-by: Damien Retzinger <[email protected]>

Author: xelaint

apps/design-land/src/app/core/article-encapsulated/article-encapsulated.component.ts

@@ -1,26 +1,13 @@
-import {
-  Component,
-  ElementRef,
-  Renderer2,
-} from '@angular/core';
+import { Component } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '@daffodil/design';
-
-/**
- * An _elementRef and an instance of renderer2 are needed for the link set mixins
- */
-class DesignLandArticleEncapsulatedBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _designLandArticleEncapsulatedBase = daffArticleEncapsulatedMixin((DesignLandArticleEncapsulatedBase));
+import { DaffArticleEncapsulatedDirective } from '@daffodil/design';
 
 @Component({
   selector: 'design-land-article-encapsulated',
   template: '<ng-content></ng-content>',
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
 })
-export class DesignLandArticleEncapsulatedComponent extends _designLandArticleEncapsulatedBase {
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
+export class DesignLandArticleEncapsulatedComponent {
 }

libs/design/accordion/src/accordion/accordion/accordion.component.ts

@@ -1,20 +1,9 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
-  Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '@daffodil/design';
-
-/**
- * An _elementRef and an instance of renderer2 are needed for the link set mixins
- */
-class DaffAccordionBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
+import { DaffArticleEncapsulatedDirective } from '@daffodil/design';
 
 @Component({
   selector: 'daff-accordion',
@@ -24,11 +13,10 @@ const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
       display: block;
     }
   `],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class DaffAccordionComponent extends _daffAccordionBase {
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
-}
+export class DaffAccordionComponent {}

libs/design/article/README.md

@@ -4,41 +4,47 @@ Article provides styles to common element selectors to create an article in a co
 ## Overview
 Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
 
-## Headings
+## Supported Elements
+
+### Headings
 <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
 
-## Article Meta
+### Article Meta
 Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add `daffArticleMeta` to a paragraph (`<p>`).
 
 <design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>
 
-## Link
+### Link
 The link style in an article uses the default browser link style.
 
 <design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>
 
-<h2>Table</h2>
+### Table
 <design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
 
-## Lists
+### Lists
 
-### Unordered List
+#### Unordered List
 <design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
 
-### Ordered List
+#### Ordered List
 <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
 
-## Code
+### Code
 These are styles for inline and multiline blocks of code.
 
-### Inline code
+#### Inline code
 <design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
 
-### Code blocks
+#### Code blocks
 <design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
 
-## Horizontal Rules
+### Horizontal Rules
 <design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
 
-## Blockquote
-<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
+### Blockquote
+<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
+
+## Encapsulation
+
+Articles also support other custom "non-native" components like [Accordions](../accordion/README.md), [Media Galleries](../media-gallery/README.md), and [Lists](../list/README.md). Unlike typical HTML (<p>, <ol>, <ul>, etc) content, these components must be style encaspulated to prevent article styles bleeding down from the article into their content. Many Daffodil components support this out of the box. If you have a custom component that you would like to place inside an article, you can use the `DaffArticleEncapsulatedDirective` on your component to prevent article styles bleeding into your component.

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

@@ -24,7 +24,7 @@ import {
   daffSizeMixin,
   DaffStatusable,
   daffStatusMixin,
-  daffArticleEncapsulatedMixin,
+  DaffArticleEncapsulatedDirective,
 } from '@daffodil/design';
 
 /**
@@ -46,7 +46,7 @@ class DaffButtonBase{
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffButtonBase = daffArticleEncapsulatedMixin(daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin<DaffButtonSize>(DaffButtonBase, 'md'))))));
+const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin<DaffButtonSize>(DaffButtonBase, 'md')))));
 
 export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
 
@@ -87,6 +87,9 @@ enum DaffButtonTypeEnum {
   //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', 'size', 'status'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -1,15 +1,14 @@
 import {
   Component,
   ViewEncapsulation,
-  Input,
   ElementRef,
   ChangeDetectionStrategy,
   HostBinding,
   Renderer2,
 } from '@angular/core';
 
 import {
-  daffArticleEncapsulatedMixin,
+  DaffArticleEncapsulatedDirective,
   DaffColorable,
   daffColorMixin,
   DaffCompactable,
@@ -26,7 +25,7 @@ class DaffCalloutBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
+const _daffCalloutBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left'))));
 
 /**
  * @inheritdoc
@@ -39,6 +38,9 @@ const _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutM
   //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', 'compact', 'textAlignment'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffTextAlignable, DaffCompactable {

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 
 import {
-  daffArticleEncapsulatedMixin,
+  DaffArticleEncapsulatedDirective,
   DaffColorable,
   daffColorMixin,
 } from '@daffodil/design';
@@ -38,7 +38,7 @@ class DaffCardBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
+const _daffCardBase = daffColorMixin(DaffCardBase);
 
 /**
  * @inheritdoc
@@ -57,6 +57,9 @@ const _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase))
   //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,
+  }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 

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

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 
 import {
-  daffArticleEncapsulatedMixin,
+  DaffArticleEncapsulatedDirective,
   DaffColorable,
   daffColorMixin,
   DaffCompactable,
@@ -25,7 +25,7 @@ class DaffHeroBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
+const _daffHeroBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left'))));
 
 /**
  * @inheritdoc
@@ -38,6 +38,9 @@ const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixi
   //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', 'compact', 'textAlignment'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {

libs/design/link-set/src/link-set/link-set.component.ts

@@ -3,20 +3,9 @@ import {
   HostBinding,
   ViewEncapsulation,
   ChangeDetectionStrategy,
-  ElementRef,
-  Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '@daffodil/design';
-
-/**
- * An _elementRef and an instance of renderer2 are needed for the link set mixins
- */
-class DaffLinkSetBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
+import { DaffArticleEncapsulatedDirective } from '@daffodil/design';
 
 /**
  * DaffLinkSetComponent is a component for displaying a two or more links.
@@ -25,17 +14,16 @@ const _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
   selector: 'daff-link-set',
   template: '<ng-content></ng-content>',
   styleUrls: ['./link-set.component.scss'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffLinkSetComponent extends _daffLinkSetBase {
+export class DaffLinkSetComponent {
 
   /**
    * @docs-private
    */
   @HostBinding('class.daff-link-set') class = true;
-
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
 }

libs/design/list/src/list/list.component.ts

@@ -4,10 +4,9 @@ import {
   ChangeDetectionStrategy,
   HostBinding,
   ElementRef,
-  Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '@daffodil/design';
+import { DaffArticleEncapsulatedDirective } from '@daffodil/design';
 
 export type DaffListType = 'daff-list' | 'daff-nav-list';
 
@@ -16,26 +15,20 @@ enum DaffListTypeEnum {
   Nav = 'daff-nav-list'
 }
 
-/**
- * An _elementRef and an instance of renderer2 are needed for the list mixins
- */
-class DaffListBase {
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
-
 @Component({
   selector:
     'daff-list' + ',' +
     'daff-nav-list',
   template: '<ng-content></ng-content>',
   styleUrls: ['./list.component.scss'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class DaffListComponent extends _daffListBase {
+export class DaffListComponent {
   /**
    * @docs-private
    */
@@ -50,9 +43,7 @@ export class DaffListComponent extends _daffListBase {
     return this._getHostElement().localName;
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
+  constructor(private elementRef: ElementRef) {}
 
   /**
    * @docs-private

libs/design/media-gallery/src/media-gallery/media-gallery.component.ts

@@ -12,7 +12,7 @@ import {
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-  daffArticleEncapsulatedMixin,
+  DaffArticleEncapsulatedDirective,
 } from '@daffodil/design';
 
 import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
@@ -28,7 +28,7 @@ class DaffMediaGalleryBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffMediaGalleryBase = daffSkeletonableMixin(daffArticleEncapsulatedMixin((DaffMediaGalleryBase)));
+const _daffMediaGalleryBase = daffSkeletonableMixin((DaffMediaGalleryBase));
 
 @Component({
   selector: 'daff-media-gallery',
@@ -42,6 +42,9 @@ const _daffMediaGalleryBase = daffSkeletonableMixin(daffArticleEncapsulatedMixin
   // 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: ['skeleton'],
+  hostDirectives: [{
+    directive: DaffArticleEncapsulatedDirective,
+  }],
 })
 export class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, DaffSkeletonable, OnInit, OnDestroy {
   /**