fix(overlay): rename OverlayState to OverlayConfig (#6972)

BREAKING CHANGE: OverlayState has been renamed to OverlayConfig

Author: jelbourn

src/cdk/overlay/overlay-state.ts renamed to src/cdk/overlay/overlay-config.ts

@@ -12,11 +12,8 @@ import {ScrollStrategy} from './scroll/scroll-strategy';
 import {NoopScrollStrategy} from './scroll/noop-scroll-strategy';
 
 
-/**
- * OverlayState is a bag of values for either the initial configuration or current state of an
- * overlay.
- */
-export class OverlayState {
+/** OverlayConfig captures the initial configuration used when opening an overlay. */
+export class OverlayConfig {
   /** Strategy with which to position the overlay. */
   positionStrategy?: PositionStrategy;
 
@@ -53,14 +50,9 @@ export class OverlayState {
   /** The direction of the text in the overlay panel. */
   direction?: Direction = 'ltr';
 
-  constructor(state?: OverlayState) {
+  constructor(state?: OverlayConfig) {
     if (state) {
       Object.keys(state).forEach(key => this[key] = state[key]);
     }
   }
-
-  // TODO(jelbourn): configuration still to add
-  // - focus trap
-  // - disable pointer events
-  // - z-index
 }

src/cdk/overlay/overlay-directives.ts

@@ -28,7 +28,7 @@ import {ESCAPE} from '@angular/cdk/keycodes';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {Overlay} from './overlay';
 import {OverlayRef} from './overlay-ref';
-import {OverlayState} from './overlay-state';
+import {OverlayConfig} from './overlay-config';
 import {
   // This import is only used to define a generic type. The current TypeScript version incorrectly
   // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
@@ -271,9 +271,9 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   }
 
   /** Builds the overlay config based on the directive's inputs */
-  private _buildConfig(): OverlayState {
+  private _buildConfig(): OverlayConfig {
     const positionStrategy = this._position = this._createPositionStrategy();
-    const overlayConfig = new OverlayState({
+    const overlayConfig = new OverlayConfig({
       positionStrategy,
       scrollStrategy: this.scrollStrategy,
       hasBackdrop: this.hasBackdrop

src/cdk/overlay/overlay-ref.ts

@@ -8,7 +8,7 @@
 
 import {NgZone} from '@angular/core';
 import {PortalHost, Portal} from '@angular/cdk/portal';
-import {OverlayState} from './overlay-state';
+import {OverlayConfig} from './overlay-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
@@ -26,7 +26,7 @@ export class OverlayRef implements PortalHost {
   constructor(
       private _portalHost: PortalHost,
       private _pane: HTMLElement,
-      private _state: OverlayState,
+      private _state: OverlayConfig,
       private _ngZone: NgZone) {
 
     if (_state.scrollStrategy) {
@@ -154,7 +154,7 @@ export class OverlayRef implements PortalHost {
   /**
    * Gets the current state config of the overlay.
    */
-  getState(): OverlayState {
+  getState(): OverlayConfig {
     return this._state;
   }
 

src/cdk/overlay/overlay.spec.ts

@@ -11,7 +11,7 @@ import {
   OverlayContainer,
   OverlayModule,
   OverlayRef,
-  OverlayState,
+  OverlayConfig,
   PositionStrategy,
   ScrollStrategy,
 } from './index';
@@ -133,7 +133,7 @@ describe('Overlay', () => {
   });
 
   it('should set the direction', () => {
-    const state = new OverlayState({direction: 'rtl'});
+    const state = new OverlayConfig({direction: 'rtl'});
 
     overlay.create(state).attach(componentPortal);
 
@@ -152,7 +152,7 @@ describe('Overlay', () => {
   });
 
   it('should emit the attachment event after everything is added to the DOM', () => {
-    let state = new OverlayState({hasBackdrop: true});
+    let state = new OverlayConfig({hasBackdrop: true});
     let overlayRef = overlay.create(state);
 
     overlayRef.attachments().subscribe(() => {
@@ -220,10 +220,10 @@ describe('Overlay', () => {
   });
 
   describe('positioning', () => {
-    let state: OverlayState;
+    let state: OverlayConfig;
 
     beforeEach(() => {
-      state = new OverlayState();
+      state = new OverlayConfig();
     });
 
     it('should apply the positioning strategy', () => {
@@ -236,10 +236,10 @@ describe('Overlay', () => {
   });
 
   describe('size', () => {
-    let state: OverlayState;
+    let state: OverlayConfig;
 
     beforeEach(() => {
-      state = new OverlayState();
+      state = new OverlayConfig();
     });
 
     it('should apply the width set in the config', () => {
@@ -320,10 +320,10 @@ describe('Overlay', () => {
   });
 
   describe('backdrop', () => {
-    let config: OverlayState;
+    let config: OverlayConfig;
 
     beforeEach(() => {
-      config = new OverlayState();
+      config = new OverlayConfig();
       config.hasBackdrop = true;
     });
 
@@ -411,7 +411,7 @@ describe('Overlay', () => {
 
   describe('panelClass', () => {
     it('should apply a custom overlay pane class', () => {
-      const config = new OverlayState({panelClass: 'custom-panel-class'});
+      const config = new OverlayConfig({panelClass: 'custom-panel-class'});
 
       overlay.create(config).attach(componentPortal);
       viewContainerFixture.detectChanges();
@@ -421,7 +421,7 @@ describe('Overlay', () => {
     });
 
     it('should be able to apply multiple classes', () => {
-      const config = new OverlayState({panelClass: ['custom-class-one', 'custom-class-two']});
+      const config = new OverlayConfig({panelClass: ['custom-class-one', 'custom-class-two']});
 
       overlay.create(config).attach(componentPortal);
       viewContainerFixture.detectChanges();
@@ -435,12 +435,12 @@ describe('Overlay', () => {
 
   describe('scroll strategy', () => {
     let fakeScrollStrategy: FakeScrollStrategy;
-    let config: OverlayState;
+    let config: OverlayConfig;
     let overlayRef: OverlayRef;
 
     beforeEach(() => {
       fakeScrollStrategy = new FakeScrollStrategy();
-      config = new OverlayState({scrollStrategy: fakeScrollStrategy});
+      config = new OverlayConfig({scrollStrategy: fakeScrollStrategy});
       overlayRef = overlay.create(config);
     });
 

src/cdk/overlay/overlay.ts

@@ -14,7 +14,7 @@ import {
   NgZone,
 } from '@angular/core';
 import {DomPortalHost} from '@angular/cdk/portal';
-import {OverlayState} from './overlay-state';
+import {OverlayConfig} from './overlay-config';
 import {OverlayRef} from './overlay-ref';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {OverlayContainer} from './overlay-container';
@@ -25,7 +25,7 @@ import {ScrollStrategyOptions} from './scroll/index';
 let nextUniqueId = 0;
 
 /** The default state for newly created overlays. */
-let defaultState = new OverlayState();
+let defaultState = new OverlayConfig();
 
 
 /**
@@ -51,7 +51,7 @@ export class Overlay {
    * @param state State to apply to the overlay.
    * @returns Reference to the created overlay.
    */
-  create(state: OverlayState = defaultState): OverlayRef {
+  create(state: OverlayConfig = defaultState): OverlayRef {
     const pane = this._createPaneElement();
     const portalHost = this._createPortalHost(pane);
     return new OverlayRef(portalHost, pane, state, this._ngZone);

src/cdk/overlay/public_api.ts

@@ -40,7 +40,7 @@ export {Overlay} from './overlay';
 export {OverlayContainer} from './overlay-container';
 export {FullscreenOverlayContainer} from './fullscreen-overlay-container';
 export {OverlayRef} from './overlay-ref';
-export {OverlayState} from './overlay-state';
+export {OverlayConfig} from './overlay-config';
 export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives';
 export {ViewportRuler} from '@angular/cdk/scrolling';
 export {ComponentType} from '@angular/cdk/portal';

src/cdk/overlay/scroll/block-scroll-strategy.spec.ts

@@ -3,7 +3,7 @@ import {async, inject, TestBed} from '@angular/core/testing';
 import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
 import {Platform} from '@angular/cdk/platform';
 import {ViewportRuler} from '@angular/cdk/scrolling';
-import {Overlay, OverlayContainer, OverlayModule, OverlayRef, OverlayState} from '../index';
+import {Overlay, OverlayContainer, OverlayModule, OverlayRef, OverlayConfig} from '../index';
 
 
 describe('BlockScrollStrategy', () => {
@@ -23,9 +23,9 @@ describe('BlockScrollStrategy', () => {
   }));
 
   beforeEach(inject([Overlay, ViewportRuler], (overlay: Overlay, viewportRuler: ViewportRuler) => {
-    let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.block()});
+    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.block()});
 
-    overlayRef = overlay.create(overlayState);
+    overlayRef = overlay.create(overlayConfig);
     componentPortal = new ComponentPortal(FocacciaMsg);
 
     viewport = viewportRuler;

src/cdk/overlay/scroll/close-scroll-strategy.spec.ts

@@ -5,7 +5,7 @@ import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   Overlay,
-  OverlayState,
+  OverlayConfig,
   OverlayRef,
   OverlayModule,
   OverlayContainer,
@@ -33,8 +33,8 @@ describe('CloseScrollStrategy', () => {
   }));
 
   beforeEach(inject([Overlay], (overlay: Overlay) => {
-    let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.close()});
-    overlayRef = overlay.create(overlayState);
+    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.close()});
+    overlayRef = overlay.create(overlayConfig);
     componentPortal = new ComponentPortal(MozarellaMsg);
   }));
 

src/cdk/overlay/scroll/reposition-scroll-strategy.spec.ts

@@ -7,7 +7,7 @@ import {
   OverlayContainer,
   OverlayModule,
   OverlayRef,
-  OverlayState,
+  OverlayConfig,
   ScrollDispatcher,
 } from '../index';
 
@@ -33,8 +33,8 @@ describe('RepositionScrollStrategy', () => {
   }));
 
   beforeEach(inject([Overlay], (overlay: Overlay) => {
-    let overlayState = new OverlayState({scrollStrategy: overlay.scrollStrategies.reposition()});
-    overlayRef = overlay.create(overlayState);
+    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.reposition()});
+    overlayRef = overlay.create(overlayConfig);
     componentPortal = new ComponentPortal(PastaMsg);
   }));
 

src/cdk/overlay/scroll/scroll-strategy.md

@@ -7,15 +7,15 @@ recalculate the position, close the overlay, block scrolling, etc.
 
 ## Usage
 To associate an overlay with a scroll strategy, you have to pass in a function, that returns a
-scroll strategy, to the `OverlayState`. By default, all overlays will use the `noop` strategy which
+scroll strategy, to the `OverlayConfig`. By default, all overlays will use the `noop` strategy which
 doesn't do anything. The other available strategies are `reposition`, `block` and `close`:
 
 ```ts
-let overlayState = new OverlayState({
+let overlayConfig = new OverlayConfig({
   scrollStrategy: overlay.scrollStrategies.block()
 });
 
-this._overlay.create(overlayState).attach(yourPortal);
+this._overlay.create(overlayConfig).attach(yourPortal);
 ```
 
 ## Creating a custom scroll strategy
@@ -35,6 +35,6 @@ export class CustomScrollStrategy implements ScrollStrategy {
   // your implementation
 }
 
-overlayState.scrollStrategy = new CustomScrollStrategy();
-this._overlay.create(overlayState).attach(yourPortal);
+overlayConfig.scrollStrategy = new CustomScrollStrategy();
+this._overlay.create(overlayConfig).attach(yourPortal);
 ```