feat(design): change daffSizeMixin to a directive (#2925)

apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts

@@ -126,12 +126,4 @@ describe('DemoCartViewComponent', () => {
       expect(loadingIcon).toBeNull();
     });
   });
-
-  describe('on <daff-container>', () => {
-    it('should set size="md"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('md');
-    });
-  });
 });

apps/demo/src/app/core/footer/footer.component.spec.ts

@@ -41,14 +41,6 @@ describe('FooterComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('on <daff-container>', () => {
-    it('should set size="md"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('md');
-    });
-  });
-
   it('renders a <daff-list-item> for each leaf in the tree of links', () => {
     const listItems = fixture.debugElement.queryAll(By.css('daff-list-item'));
     const numberOfLinks = component.links.reduce((acc,linkset)=>acc+linkset.links.length,0);

apps/demo/src/app/newsletter/newsletter.component.spec.ts

@@ -4,7 +4,6 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
 
 import { DaffContainerModule } from '@daffodil/design/container';
 import {
@@ -45,14 +44,6 @@ describe('NewsletterComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('on <daff-container>', () => {
-    it('should set size="md"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('md');
-    });
-  });
-
   describe('when intialized', () => {
     let newsletterElement;
 

apps/demo/src/app/product/components/product/product.component.spec.ts

@@ -105,12 +105,4 @@ describe('ProductComponent', () => {
       expect(router.navigateByUrl).toHaveBeenCalledWith('/404');
     });
   });
-
-  describe('on <daff-container>', () => {
-    it('should set size="lg"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('lg');
-    });
-  });
 });

apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts

@@ -67,14 +67,6 @@ describe('ProductGridViewComponent', () => {
     });
   });
 
-  describe('on <daff-container>', () => {
-    it('should set size="lg"', () => {
-      const container = fixture.debugElement.query(By.css('daff-container'));
-
-      expect(container.componentInstance.size).toEqual('lg');
-    });
-  });
-
   describe('when loading$ becomes false', () => {
 
     beforeEach(() => {

libs/design/button/src/button/button-sizable.directive.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+
+import {
+  DaffSizableDirective,
+  DaffSizeLargeType,
+  DaffSizeMediumType,
+  DaffSizeSmallType,
+} from '@daffodil/design';
+
+/**
+ * The DaffSizable {@link DaffSizable } types that the DaffButtonComponent can implement.
+ */
+export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
+
+@Directive({
+  standalone: true,
+})
+
+export class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {}
+

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

@@ -18,10 +18,8 @@ import {
   DaffLoadingIconComponent,
 } from '@daffodil/design/loading-icon';
 
-import {
-  DaffButtonComponent,
-  DaffButtonSize,
-} from './button.component';
+import { DaffButtonSize } from './button-sizable.directive';
+import { DaffButtonComponent } from './button.component';
 
 @Component({
   template: `
@@ -197,7 +195,7 @@ describe('@daffodil/design/button | DaffButtonComponent', () => {
   });
 
   describe('using the size property of a button', () => {
-    it('should add the class of the defined size to the host element', () => {
+    it('should take size as an input', () => {
       wrapper.size = 'md';
       fixture.detectChanges();
 

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

@@ -17,16 +17,13 @@ import {
   DaffSuffixable,
   daffPrefixableMixin,
   daffSuffixableMixin,
-  DaffSizable,
-  DaffSizeSmallType,
-  DaffSizeMediumType,
-  DaffSizeLargeType,
-  daffSizeMixin,
   DaffStatusable,
   daffStatusMixin,
   DaffArticleEncapsulatedDirective,
 } from '@daffodil/design';
 
+import { DaffButtonSizableDirective } from './button-sizable.directive';
+
 /**
  * List of classes to add to DaffButtonComponent instances based on host attributes to style as different variants.
  */
@@ -46,15 +43,10 @@ class DaffButtonBase{
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin<DaffButtonSize>(DaffButtonBase, 'md')))));
+const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin((DaffButtonBase)))));
 
 export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
 
-/**
- * The DaffSizable types that the DaffButtonComponent can implement
- */
-export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
-
 enum DaffButtonTypeEnum {
   Default = 'daff-button',
   Stroked = 'daff-stroked-button',
@@ -86,27 +78,40 @@ 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', 'size', 'status'],
-  hostDirectives: [{
-    directive: DaffArticleEncapsulatedDirective,
-  }],
+  inputs: ['color', 'status'],
+  hostDirectives: [
+    { directive: DaffArticleEncapsulatedDirective },
+    {
+      directive: DaffButtonSizableDirective,
+      inputs: ['size'],
+    },
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffButtonComponent
   extends _daffButtonBase
-  implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable, DaffSizable<DaffButtonSize>, DaffStatusable {
+  implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable, DaffStatusable {
 
   private buttonType: DaffButtonType;
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private size: DaffButtonSizableDirective,
+  ) {
     super(elementRef, renderer);
 
     for (const attr of BUTTON_HOST_ATTRIBUTES) {
       if (this._hasHostAttributes(attr)) {
         (<HTMLElement>elementRef.nativeElement).classList.add(attr);
       }
     }
+
+    /**
+     * Sets the default size of a button to medium.
+     */
+    this.size.defaultSize = 'md';
   }
 
   /**

libs/design/button/src/public_api.ts

@@ -1,2 +1,3 @@
 export { DaffButtonComponent } from './button/button.component';
 export { DaffButtonModule } from './button.module';
+export { DaffButtonSizableDirective } from './button/button-sizable.directive';

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

@@ -57,16 +57,16 @@ describe('@daffodil/design/container | DaffContainerComponent', () => {
   });
 
   describe('setting the size', () => {
+    it('should take size as an input', () => {
+      wrapper.size = 'md';
+      fixture.detectChanges();
+
+      expect(de.nativeElement.classList.contains('daff-md')).toEqual(true);
+    });
+
     it('should not set a default size', () => {
       de = fixture.debugElement.query(By.css('daff-container'));
       expect(de.nativeElement.classList.toString()).toEqual('daff-container');
     });
-
-    it('should add the size class on the host element for the defined size', () => {
-      wrapper.size = 'xs';
-      fixture.detectChanges();
-
-      expect(de.nativeElement.classList.contains('daff-xs')).toEqual(true);
-    });
   });
 });

libs/design/container/src/container/container.component.ts

@@ -1,26 +1,10 @@
 import {
   Component,
-  Input,
   ChangeDetectionStrategy,
   HostBinding,
-  ElementRef,
-  Renderer2,
 } from '@angular/core';
 
-import {
-  DaffSizable,
-  DaffSizeAllType,
-  daffSizeMixin,
-} from '@daffodil/design';
-
-/**
- * An _elementRef and an instance of renderer2 are needed for the Sizeable mixin
- */
-class DaffContainerBase{
-  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
-}
-
-const _daffContainerBase = daffSizeMixin(DaffContainerBase);
+import { DaffSizableDirective } from '@daffodil/design';
 
 /**
  * @inheritdoc
@@ -29,19 +13,17 @@ const _daffContainerBase = daffSizeMixin(DaffContainerBase);
   selector: 'daff-container',
   styleUrls: ['./container.component.scss'],
   template: '<ng-content></ng-content>',
-  //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: ['size'],
+  hostDirectives: [
+    {
+      directive: DaffSizableDirective,
+      inputs: ['size'],
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffContainerComponent extends _daffContainerBase implements DaffSizable<DaffSizeAllType> {
-
+export class DaffContainerComponent {
   /**
    * @docs-private
    */
   @HostBinding('class.daff-container') class = true;
-
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    super(elementRef, renderer);
-  }
 }

libs/design/src/core/sizable/public_api.ts

@@ -8,4 +8,4 @@ export {
   DaffSizeLargeType,
   DaffSizeXLargeType,
 } from './sizable';
-export { daffSizeMixin } from './sizable-mixin';
+export { DaffSizableDirective } from './sizable.directive';