Add ability to specify modal size of small, medium, or large.

src/app/components/modal/index.html

@@ -19,12 +19,21 @@
       A Boolean property of <code>config</code> with a default of false. When set to true, the modal will become full screen.
     </sky-demo-page-property>
 
-        <sky-demo-page-property
+    <sky-demo-page-property
         propertyName="providers?"
     >
       A array property of <code>providers</code> This can be used to pass context values from the component launching the modal to the modal component.
 
     </sky-demo-page-property>
+
+    <sky-demo-page-property
+        propertyName="size?"
+        defaultValue="medium"
+        isOptional="true"
+    >
+      Specifies a size for the modal. The valid options are <code>small</code>,
+      <code>medium</code>, and <code>large</code>.
+    </sky-demo-page-property>
   </sky-demo-page-properties>
 
   <sky-demo-page-properties sectionHeading="Modal component properties">

src/app/components/modal/modal-demo.component.html

@@ -2,6 +2,14 @@
   Open modal
 </button>
 
+<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('smallModal')">
+  Open small modal
+</button>
+
+<button type="button" class="sky-btn sky-btn-primary" (click)="openModal('largeModal')">
+  Open large modal
+</button>
+
 <button type="button" class="sky-btn sky-btn-secondary" (click)="openModal('fullScreenModal')">
  Open Full Screen modal
 </button>

src/app/components/modal/modal-demo.component.ts

@@ -22,6 +22,10 @@ export class SkyModalDemoComponent {
 
     if (type === 'fullScreenModal') {
       options.fullPage = true;
+    } else if (type === 'smallModal') {
+      options.size = 'small';
+    } else if (type === 'largeModal') {
+      options.size = 'large';
     }
 
     let modalInstance = this.modal.open(SkyModalDemoFormComponent, options);

src/modules/modal/fixtures/modal.component.visual-fixture.html

@@ -3,7 +3,7 @@
     type="button"
     class="sky-btn sky-btn-primary"
     (click)="openModal()"
->
+  >
   Open modal
   </button>
   <button
@@ -21,4 +21,25 @@
   >
   Open content modal
   </button>
+  <button
+    type="button"
+    class="sky-btn sky-btn-primary sky-test-small-size-modal"
+    (click)="openSmallSizeModal()"
+  >
+  Open small modal
+  </button>
+  <button
+    type="button"
+    class="sky-btn sky-btn-primary sky-test-medium-size-modal"
+    (click)="openMediumSizeModal()"
+  >
+  Open medium size modal
+  </button>
+  <button
+    type="button"
+    class="sky-btn sky-btn-primary sky-test-large-size-modal"
+    (click)="openLargeSizeModal()"
+  >
+  Open large size modal
+  </button>
 </div>

src/modules/modal/fixtures/modal.component.visual-fixture.ts

@@ -17,20 +17,35 @@ class AppComponent {
   constructor(public viewContainerRef: ViewContainerRef, private modal: SkyModalService) { }
 
   public openModal() {
-
     this.modal.open(ModalDemoComponent, { 'providers': [] });
   }
 
   public openLargeModal() {
     this.modal.open(ModalLargeDemoComponent, { 'providers': [] });
   }
+
   public openFullScreenModal() {
     this.modal.open(ModalFullPageDemoComponent, { 'providers': [], 'fullPage': true });
   }
 
   public openContentModal() {
     this.modal.open(ModalContentDemoComponent);
   }
+
+  public openSmallSizeModal() {
+    this.modal.open(
+      ModalDemoComponent, { 'providers': [], 'fullPage': false , 'size': 'small'});
+  }
+
+  public openMediumSizeModal() {
+    this.modal.open(
+      ModalDemoComponent, { 'providers': [], 'fullPage': false , 'size': 'medium'});
+  }
+
+  public openLargeSizeModal() {
+    this.modal.open(
+      ModalDemoComponent, { 'providers': [], 'fullPage': false , 'size': 'large'});
+  }
 }
 
 @NgModule({

src/modules/modal/modal-configuration.ts

@@ -4,9 +4,10 @@ import { Injectable } from '@angular/core';
 export class SkyModalConfiguration {
 
   public fullPage: boolean;
+  public size: string;
 
   constructor() {
     this.fullPage = this.fullPage;
-
+    this.size = 'medium';
   }
 }

src/modules/modal/modal.component.html

@@ -9,7 +9,10 @@
 >
   <div class="sky-modal"
     [ngClass]="{
-      'sky-modal-full-page': modalFullPage
+      'sky-modal-full-page': modalFullPage,
+      'sky-modal-small' : isSmallSize,
+      'sky-modal-medium' : isMediumSize,
+      'sky-modal-large' : isLargeSize
       }"
     [ngStyle]="{
         zIndex: modalZIndex

src/modules/modal/modal.component.scss

@@ -15,9 +15,20 @@
 
 @media (min-width: $sky-screen-sm-min) {
   .sky-modal {
-    width: 600px;
     margin: 0 auto;
   }
+
+  .sky-modal-small {
+    width: 300px;
+  }
+
+  .sky-modal-medium {
+    width: 600px;
+  }
+
+  .sky-modal-large {
+    width: 900px;
+  }
 }
 
 .sky-modal-content {

src/modules/modal/modal.component.spec.ts

@@ -126,4 +126,53 @@ describe('Modal component', () => {
     closeModal(modalInstance);
   }));
 
+  it('should not contain small,medium, or large classes in full size mode', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {'fullPage': true});
+
+    expect(document.querySelector('.sky-modal-small')).not.toExist();
+    expect(document.querySelector('.sky-modal-medium')).not.toExist();
+    expect(document.querySelector('.sky-modal-large')).not.toExist();
+
+    closeModal(modalInstance);
+  }));
+
+  it('should default to medium size', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {'fullPage': false});
+
+    expect(document.querySelector('.sky-modal-small')).not.toExist();
+    expect(document.querySelector('.sky-modal-medium')).toExist();
+    expect(document.querySelector('.sky-modal-large')).not.toExist();
+
+    closeModal(modalInstance);
+  }));
+
+  it('should respect medium config setting size', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {'fullPage': false, 'size': 'medium'});
+
+    expect(document.querySelector('.sky-modal-small')).not.toExist();
+    expect(document.querySelector('.sky-modal-medium')).toExist();
+    expect(document.querySelector('.sky-modal-large')).not.toExist();
+
+    closeModal(modalInstance);
+  }));
+
+  it('should respect small config setting size', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {'fullPage': false, 'size': 'small'});
+
+    expect(document.querySelector('.sky-modal-small')).toExist();
+    expect(document.querySelector('.sky-modal-medium')).not.toExist();
+    expect(document.querySelector('.sky-modal-large')).not.toExist();
+
+    closeModal(modalInstance);
+  }));
+
+  it('should respect large config setting size', fakeAsync(() => {
+    let modalInstance = openModal(ModalTestComponent, {'fullPage': false, 'size': 'large'});
+
+    expect(document.querySelector('.sky-modal-small')).not.toExist();
+    expect(document.querySelector('.sky-modal-medium')).not.toExist();
+    expect(document.querySelector('.sky-modal-large')).toExist();
+
+    closeModal(modalInstance);
+  }));
 });

src/modules/modal/modal.component.ts

@@ -46,6 +46,18 @@ export class SkyModalComponent implements AfterViewInit {
     return this.config.fullPage;
   }
 
+  public get isSmallSize() {
+    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'small');
+  }
+
+  public get isMediumSize() {
+    return !this.modalFullPage && !(this.isSmallSize || this.isLargeSize);
+  }
+
+  public get isLargeSize() {
+    return !this.modalFullPage && this.isSizeEqual(this.config.size, 'large');
+  }
+
   constructor(
     private hostService: SkyModalHostService,
     private config: SkyModalConfiguration,
@@ -63,4 +75,8 @@ export class SkyModalComponent implements AfterViewInit {
   public windowResize() {
     this.componentAdapter.handleWindowChange(this.elRef);
   }
+
+  private isSizeEqual(actualSize: string, size: string) {
+    return actualSize && actualSize.toLowerCase() === size;
+  }
 }

src/modules/modal/modal.component.visual-spec.js

@@ -65,4 +65,43 @@ describe('Modal', function () {
         checkAccessibility: true
       });
   });
+
+  it('should match previous small size modal screenshot', function () {
+    return browser
+      .setupTest('/modal.html')
+      .click('.sky-test-small-size-modal')
+      .moveCursorOffScreen()
+      .pause(1000)
+      .compareScreenshot({
+        screenshotName: 'modal_small_size',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      });
+  });
+
+  it('should match previous medium size modal screenshot', function () {
+    return browser
+      .setupTest('/modal.html')
+      .click('.sky-test-medium-size-modal')
+      .moveCursorOffScreen()
+      .pause(1000)
+      .compareScreenshot({
+        screenshotName: 'modal_medium_size',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      });
+  });
+
+  it('should match previous large size modal screenshot', function () {
+    return browser
+      .setupTest('/modal.html')
+      .click('.sky-test-large-size-modal')
+      .moveCursorOffScreen()
+      .pause(1000)
+      .compareScreenshot({
+        screenshotName: 'modal_large_size',
+        selector: '.sky-modal',
+        checkAccessibility: true
+      });
+  });
 });

src/modules/modal/modal.interface.ts

@@ -1,4 +1,5 @@
 export interface SkyModalConfiguationInterface {
   fullPage?: boolean;
+  size?: string;
   providers?: any[];
 }

src/modules/modal/modal.service.ts

@@ -60,7 +60,7 @@ export class SkyModalService {
   }
 
   private getConfigFromParameter(providersOrConfig: any) {
-    let defaultParams: IConfig = { 'providers': [], 'fullPage': false };
+    let defaultParams: IConfig = { 'providers': [], 'fullPage': false, 'size': 'medium' };
     let params: any = undefined;
     let method: any = undefined;