feat: custom modal dimension

projects/components/src/modal/modal-container.component.scss

@@ -11,36 +11,6 @@
   display: flex;
   flex-direction: column;
 
-  &.modal-size-small {
-    height: 365px;
-    width: 420px;
-  }
-
-  &.modal-size-medium {
-    height: 530px;
-    width: 456px;
-  }
-
-  &.modal-size-large-short {
-    height: 540px;
-    width: 640px;
-  }
-
-  &.modal-size-large {
-    height: 720px;
-    width: 640px;
-  }
-
-  &.modal-size-large-tall {
-    height: 800px;
-    width: 640px;
-  }
-
-  &.modal-size-medium-wide {
-    height: 600px;
-    width: 840px;
-  }
-
   .header {
     display: flex;
     flex-direction: column;

projects/components/src/modal/modal-container.component.test.ts

@@ -22,6 +22,12 @@ class TestComponent {
 describe('Modal Container component', () => {
   let spectator: Spectator<ModalContainerComponent>;
 
+  const checkSyles = (width: string, height: string): void => {
+    const modalContainer = spectator.query('.modal-container') as HTMLElement;
+    expect(modalContainer.style.height).toBe(height);
+    expect(modalContainer.style.width).toBe(width);
+  };
+
   const createHost = createHostFactory({
     component: ModalContainerComponent,
     shallow: true,
@@ -77,14 +83,77 @@ describe('Modal Container component', () => {
     expect(spectator.query('.header')).toHaveText('Create User');
   });
 
-  test('uses the requested size', () => {
+  test('uses the requested small size', () => {
     spectator = createConfiguredHost({
       showControls: true,
       title: 'Create User',
       content: TestComponent,
       size: ModalSize.Small
     });
-    expect(spectator.query('.modal-container')).toHaveClass('modal-size-small');
+    checkSyles('420px', '365px');
+  });
+
+  test('uses the requested medium size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Medium
+    });
+    checkSyles('456px', '530px');
+  });
+
+  test('uses the requested large-short size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeShort
+    });
+    checkSyles('640px', '540px');
+  });
+
+  test('uses the requested large size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Large
+    });
+    checkSyles('640px', '720px');
+  });
+
+  test('uses the requested large-tall size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeTall
+    });
+    checkSyles('640px', '800px');
+  });
+
+  test('uses the requested medium-wide size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.MediumWide
+    });
+    checkSyles('840px', '600px');
+  });
+
+  test('custom size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: {
+        width: 100,
+        height: 100
+      }
+    });
+    checkSyles('100px', '100px');
   });
 
   test('closes on close button click', () => {

projects/components/src/modal/modal-container.component.ts

@@ -4,14 +4,14 @@ import { LayoutChangeService } from '@hypertrace/common';
 import { ButtonSize, ButtonStyle } from '../button/button';
 import { POPOVER_DATA } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
-import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
+import { getModalDimensions, ModalConfig, ModalDimension, MODAL_DATA } from './modal';
 
 @Component({
   selector: 'ht-modal-container',
   styleUrls: ['./modal-container.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div *ngIf="this.visible" class="modal-container" [ngClass]="'modal-size-' + this.size">
+    <div *ngIf="this.visible" class="modal-container" [style.height]="this.size.height" [style.width]="this.size.width">
       <div class="header">
         <ht-button
           *ngIf="this.showControls"
@@ -41,7 +41,7 @@ import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
 export class ModalContainerComponent {
   public readonly modalTitle: string;
   public readonly showControls: boolean;
-  public readonly size: ModalSize;
+  public readonly size: ModalDimension;
   public readonly isComponentModal: boolean;
   public readonly renderer: TemplateRef<unknown> | Type<unknown>;
   public readonly rendererInjector: Injector;
@@ -58,7 +58,9 @@ export class ModalContainerComponent {
     const config = constructionData.config;
     this.showControls = config.showControls ?? false;
     this.modalTitle = config.title ?? '';
-    this.size = config.size;
+    this.size = this.isModalDimension(config.size)
+      ? this.getDimensionsWithUnits(config.size)
+      : this.getDimensionsWithUnits(getModalDimensions(config.size));
     this.isComponentModal = !(config.content instanceof TemplateRef);
     this.closeOnEscape = config.closeOnEscapeKey ?? true;
     this.renderer = config.content;
@@ -85,6 +87,24 @@ export class ModalContainerComponent {
     this.visible = false;
     this.popoverRef.close();
   }
+
+  private isModalDimension(size: unknown): size is ModalDimension {
+    // tslint:disable-next-line:strict-type-predicates
+    return typeof size === 'object' && size !== null && 'width' in (size as ModalDimension);
+  }
+
+  private getDimensionsWithUnits(dims: ModalDimension): ModalDimension {
+    const dimsWithUnits: ModalDimension = { ...dims };
+    if (typeof dims.height === 'number') {
+      dimsWithUnits.height = `${dims.height}px`;
+    }
+
+    if (typeof dims.width === 'number') {
+      dimsWithUnits.width = `${dims.width}px`;
+    }
+
+    return dimsWithUnits;
+  }
 }
 
 export interface ModalConstructionData {

projects/components/src/modal/modal.ts

@@ -2,8 +2,8 @@ import { InjectionToken, TemplateRef, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 
 export interface ModalConfig<TData = unknown> {
-  size: ModalSize;
   content: TemplateRef<unknown> | Type<unknown>;
+  size: ModalSize | ModalDimension;
   showControls?: boolean;
   title?: string;
   data?: TData;
@@ -19,6 +19,33 @@ export const enum ModalSize {
   MediumWide = 'medium-wide'
 }
 
+export interface ModalDimension {
+  // Number => without unit (considered px) and String => with units (expression included)
+  width: number | string;
+  height: number | string;
+}
+
+export const getModalDimensions = (modalSize: ModalSize): ModalDimension => {
+  switch (modalSize) {
+    case ModalSize.Small:
+      return getModalDimensionObject(420, 365);
+    case ModalSize.Medium:
+      return getModalDimensionObject(456, 530);
+    case ModalSize.LargeShort:
+      return getModalDimensionObject(640, 540);
+    case ModalSize.Large:
+      return getModalDimensionObject(640, 720);
+    case ModalSize.LargeTall:
+      return getModalDimensionObject(640, 800);
+    case ModalSize.MediumWide:
+      return getModalDimensionObject(840, 600);
+    default:
+      return getModalDimensionObject(420, 365);
+  }
+};
+
+const getModalDimensionObject = (width: number, height: number): ModalDimension => ({ width: width, height: height });
+
 export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');
 
 export abstract class ModalRef<TResult> {