Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: consistent names for all cdk directives #8088

Merged
merged 1 commit into from
Oct 30, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/cdk/bidi/directionality.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export type Direction = 'ltr' | 'rtl';
* We also can't re-provide the DOCUMENT token from platform-brower because the unit tests
* themselves use things like `querySelector` in test code.
*/
export const DIR_DOCUMENT = new InjectionToken<Document>('mat-dir-doc');
export const DIR_DOCUMENT = new InjectionToken<Document>('cdk-dir-doc');

/**
* The directionality (LTR / RTL) context for the application (or a subtree of it).
Expand Down
4 changes: 2 additions & 2 deletions src/cdk/observers/observe-content.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {async, TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
import {ObserversModule, MatMutationObserverFactory} from './observe-content';
import {ObserversModule, MutationObserverFactory} from './observe-content';

// TODO(elad): `ProxyZone` doesn't seem to capture the events raised by
// `MutationObserver` and needs to be investigated
Expand Down Expand Up @@ -61,7 +61,7 @@ describe('Observe content', () => {
imports: [ObserversModule],
declarations: [ComponentWithDebouncedListener],
providers: [{
provide: MatMutationObserverFactory,
provide: MutationObserverFactory,
useValue: {
create: function(callback: Function) {
callbacks.push(callback);
Expand Down
12 changes: 6 additions & 6 deletions src/cdk/observers/observe-content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {debounceTime} from 'rxjs/operators';
* @docs-private
*/
@Injectable()
export class MatMutationObserverFactory {
export class MutationObserverFactory {
create(callback: MutationCallback): MutationObserver | null {
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
}
Expand All @@ -40,7 +40,7 @@ export class MatMutationObserverFactory {
selector: '[cdkObserveContent]',
exportAs: 'cdkObserveContent',
})
export class ObserveContent implements AfterContentInit, OnDestroy {
export class CdkObserveContent implements AfterContentInit, OnDestroy {
private _observer: MutationObserver | null;

/** Event emitted for each change in the element's content. */
Expand All @@ -53,7 +53,7 @@ export class ObserveContent implements AfterContentInit, OnDestroy {
@Input() debounce: number;

constructor(
private _mutationObserverFactory: MatMutationObserverFactory,
private _mutationObserverFactory: MutationObserverFactory,
private _elementRef: ElementRef,
private _ngZone: NgZone) { }

Expand Down Expand Up @@ -93,8 +93,8 @@ export class ObserveContent implements AfterContentInit, OnDestroy {


@NgModule({
exports: [ObserveContent],
declarations: [ObserveContent],
providers: [MatMutationObserverFactory]
exports: [CdkObserveContent],
declarations: [CdkObserveContent],
providers: [MutationObserverFactory]
})
export class ObserversModule {}
3 changes: 3 additions & 0 deletions src/cdk/observers/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,6 @@
*/

export * from './observe-content';

/** @deprecated Use CdkObserveContent */
export {CdkObserveContent as ObserveContent} from './observe-content';
4 changes: 2 additions & 2 deletions src/cdk/overlay/overlay-container.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {async, inject, TestBed} from '@angular/core/testing';
import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
import {PortalModule, TemplatePortalDirective} from '@angular/cdk/portal';
import {PortalModule, CdkPortal} from '@angular/cdk/portal';
import {Overlay, OverlayContainer, OverlayModule} from './index';

describe('OverlayContainer', () => {
Expand Down Expand Up @@ -68,7 +68,7 @@ describe('OverlayContainer', () => {
providers: [Overlay],
})
class TestComponentWithTemplatePortals {
@ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
@ViewChild(CdkPortal) templatePortal: CdkPortal;

constructor(public viewContainerRef: ViewContainerRef) { }
}
Expand Down
8 changes: 4 additions & 4 deletions src/cdk/overlay/overlay-directives.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
import {Directionality} from '@angular/cdk/bidi';
import {dispatchKeyboardEvent} from '@angular/cdk/testing';
import {ESCAPE} from '@angular/cdk/keycodes';
import {ConnectedOverlayDirective, OverlayModule, OverlayOrigin} from './index';
import {CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
import {OverlayContainer} from './overlay-container';
import {ConnectedPositionStrategy} from './position/connected-position-strategy';
import {ConnectedOverlayPositionChange} from './position/connected-position';
Expand Down Expand Up @@ -330,7 +330,7 @@ class ConnectedOverlayDirectiveTest {
detachHandler = jasmine.createSpy('detachHandler');
attachResult: HTMLElement;

@ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
@ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay;
}

@Component({
Expand All @@ -339,7 +339,7 @@ class ConnectedOverlayDirectiveTest {
<ng-template cdk-connected-overlay>Menu content</ng-template>`,
})
class ConnectedOverlayPropertyInitOrder {
@ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
@ViewChild('trigger') trigger: OverlayOrigin;
@ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay;
@ViewChild('trigger') trigger: CdkOverlayOrigin;
}

26 changes: 12 additions & 14 deletions src/cdk/overlay/overlay-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,23 @@ const defaultPositionList = [
];

/** Injection token that determines the scroll handling while the connected overlay is open. */
export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY =
new InjectionToken<() => ScrollStrategy>('mat-connected-overlay-scroll-strategy');
export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY =
new InjectionToken<() => ScrollStrategy>('cdk-connected-overlay-scroll-strategy');

/** @docs-private */
export function MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
() => RepositionScrollStrategy {
return () => overlay.scrollStrategies.reposition();
}

/** @docs-private */
export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
provide: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY,
export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
deps: [Overlay],
useFactory: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
};



/**
* Directive applied to an element to make it usable as an origin for an Overlay using a
* ConnectedPositionStrategy.
Expand All @@ -78,22 +77,21 @@ export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
exportAs: 'cdkOverlayOrigin',
})
export class OverlayOrigin {
export class CdkOverlayOrigin {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking about this one a few days ago: do we really need the directive? It doesn't really provide a lot of value since using it ends up being slightly longer than straight-up passing in the elementRef to the overlay:

<button cdk-overlay-origin #origin="cdkOverlayOrigin">Open</button>
<ng-template cdk-connected-overlay [origin]="origin"></ng-template>

Versus something like this if we got rid of it:

<button #origin>Open</button>
<ng-template cdk-connected-overlay [origin]="origin"></ng-template>

It's not something we should necessarily address now, but it just something to think about.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that if the element you're applying it do has a component (like mat-button), you don't have a way to grab the ElementRef in the template.

constructor(
/** Reference to the element on which the directive is applied. */
public elementRef: ElementRef) { }
}



/**
* Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
*/
@Directive({
selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
exportAs: 'cdkConnectedOverlay'
})
export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
export class CdkConnectedOverlay implements OnDestroy, OnChanges {
private _overlayRef: OverlayRef;
private _templatePortal: TemplatePortal<any>;
private _hasBackdrop = false;
Expand All @@ -105,7 +103,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
private _escapeListener = () => {};

/** Origin for the connected overlay. */
@Input('cdkConnectedOverlayOrigin') origin: OverlayOrigin;
@Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;

/** Registered connected position pairs. */
@Input('cdkConnectedOverlayPositions') positions: ConnectionPositionPair[];
Expand Down Expand Up @@ -159,8 +157,8 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {

/** @deprecated */
@Input('origin')
get _deprecatedOrigin(): OverlayOrigin { return this.origin; }
set _deprecatedOrigin(_origin: OverlayOrigin) { this.origin = _origin; }
get _deprecatedOrigin(): CdkOverlayOrigin { return this.origin; }
set _deprecatedOrigin(_origin: CdkOverlayOrigin) { this.origin = _origin; }

/** @deprecated */
@Input('positions')
Expand Down Expand Up @@ -238,7 +236,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
private _renderer: Renderer2,
templateRef: TemplateRef<any>,
viewContainerRef: ViewContainerRef,
@Inject(MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
@Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
@Optional() private _dir: Directionality) {
this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
}
Expand Down
12 changes: 6 additions & 6 deletions src/cdk/overlay/overlay-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import {NgModule, Provider} from '@angular/core';
import {Overlay} from './overlay';
import {OVERLAY_CONTAINER_PROVIDER} from './overlay-container';
import {
ConnectedOverlayDirective,
MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
OverlayOrigin,
CdkConnectedOverlay,
CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
CdkOverlayOrigin,
} from './overlay-directives';
import {OverlayPositionBuilder} from './position/overlay-position-builder';
import {OVERLAY_KEYBOARD_DISPATCHER_PROVIDER} from './keyboard/overlay-keyboard-dispatcher';
Expand All @@ -27,13 +27,13 @@ export const OVERLAY_PROVIDERS: Provider[] = [
OVERLAY_KEYBOARD_DISPATCHER_PROVIDER,
VIEWPORT_RULER_PROVIDER,
OVERLAY_CONTAINER_PROVIDER,
MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
];

@NgModule({
imports: [BidiModule, PortalModule, ScrollDispatchModule],
exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule],
declarations: [ConnectedOverlayDirective, OverlayOrigin],
exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollDispatchModule],
declarations: [CdkConnectedOverlay, CdkOverlayOrigin],
providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
})
export class OverlayModule {}
4 changes: 2 additions & 2 deletions src/cdk/overlay/overlay.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
ComponentPortal,
PortalModule,
TemplatePortal,
TemplatePortalDirective
CdkPortal
} from '@angular/cdk/portal';
import {
Overlay,
Expand Down Expand Up @@ -482,7 +482,7 @@ class PizzaMsg { }
/** Test-bed component that contains a TempatePortal and an ElementRef. */
@Component({template: `<ng-template cdk-portal>Cake</ng-template>`})
class TestComponentWithTemplatePortals {
@ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
@ViewChild(CdkPortal) templatePortal: CdkPortal;

constructor(public viewContainerRef: ViewContainerRef) { }
}
Expand Down
15 changes: 10 additions & 5 deletions src/cdk/overlay/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,25 @@
*/

export * from './overlay-config';
export * from './position/connected-position';
export * from './scroll/index';
export * from './overlay-module';
export {Overlay} from './overlay';
export {OverlayContainer} from './overlay-container';
export {CdkOverlayOrigin, CdkConnectedOverlay} from './overlay-directives';
export {FullscreenOverlayContainer} from './fullscreen-overlay-container';
export {OverlayRef} from './overlay-ref';
export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives';
export {ViewportRuler} from '@angular/cdk/scrolling';
export {ComponentType} from '@angular/cdk/portal';

export * from './position/connected-position';
export * from './scroll/index';
export * from './overlay-module';

// Export pre-defined position strategies and interface to build custom ones.
export {PositionStrategy} from './position/position-strategy';
export {GlobalPositionStrategy} from './position/global-position-strategy';
export {ConnectedPositionStrategy} from './position/connected-position-strategy';
export {VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling';

/** @deprecated Use CdkConnectedOverlay */
export {CdkConnectedOverlay as ConnectedOverlayDirective} from './overlay-directives';

/** @deprecated Use CdkOverlayOrigin */
export {CdkOverlayOrigin as OverlayOrigin} from './overlay-directives';
8 changes: 4 additions & 4 deletions src/cdk/portal/portal-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalOutlet} from './porta
selector: '[cdk-portal], [cdkPortal], [portal]',
exportAs: 'cdkPortal',
})
export class TemplatePortalDirective extends TemplatePortal<any> {
export class CdkPortal extends TemplatePortal<any> {
constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
super(templateRef, viewContainerRef);
}
Expand All @@ -47,7 +47,7 @@ export class TemplatePortalDirective extends TemplatePortal<any> {
exportAs: 'cdkPortalOutlet, cdkPortalHost',
inputs: ['portal: cdkPortalOutlet']
})
export class PortalOutletDirective extends BasePortalOutlet implements OnDestroy {
export class CdkPortalOutlet extends BasePortalOutlet implements OnDestroy {
/** The attached portal. */
private _portal: Portal<any> | null = null;

Expand Down Expand Up @@ -134,7 +134,7 @@ export class PortalOutletDirective extends BasePortalOutlet implements OnDestroy


@NgModule({
exports: [TemplatePortalDirective, PortalOutletDirective],
declarations: [TemplatePortalDirective, PortalOutletDirective],
exports: [CdkPortal, CdkPortalOutlet],
declarations: [CdkPortal, CdkPortalOutlet],
})
export class PortalModule {}
10 changes: 5 additions & 5 deletions src/cdk/portal/portal.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ built upon.

#### Portals in practice

##### `TemplatePortalDirective`
Used to get a portal from an `<ng-template>`. `TemplatePortalDirectives` *is* a `Portal`.
##### `CdkPortal`
Used to get a portal from an `<ng-template>`. `CdkPortal` *is* a `Portal`.

Usage:
```html
Expand All @@ -45,7 +45,7 @@ Usage:
```

A component can use `@ViewChild` or `@ViewChildren` to get a reference to a
`TemplatePortalDirective`.
`CdkPortal`.

##### `ComponentPortal`
Used to create a portal from a component type. When a component is dynamically created using
Expand All @@ -57,8 +57,8 @@ this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
```


##### `PortalOutletDirective`
Used to add a portal outlet to a template. `PortalOutletDirective` *is* a `PortalOutlet`.
##### `CdkPortalOutlet`
Used to add a portal outlet to a template. `CdkPortalOutlet` *is* a `PortalOutlet`.

Usage:
```html
Expand Down
8 changes: 4 additions & 4 deletions src/cdk/portal/portal.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
TemplateRef
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TemplatePortalDirective, PortalOutletDirective, PortalModule} from './portal-directives';
import {CdkPortal, CdkPortalOutlet, PortalModule} from './portal-directives';
import {Portal, ComponentPortal, TemplatePortal} from './portal';
import {DomPortalOutlet} from './dom-portal-outlet';

Expand All @@ -28,7 +28,7 @@ describe('Portals', () => {
TestBed.compileComponents();
}));

describe('PortalOutletDirective', () => {
describe('CdkPortalOutlet', () => {
let fixture: ComponentFixture<PortalTestApp>;

beforeEach(() => {
Expand Down Expand Up @@ -480,8 +480,8 @@ class ArbitraryViewContainerRefComponent {
`,
})
class PortalTestApp {
@ViewChildren(TemplatePortalDirective) portals: QueryList<TemplatePortalDirective>;
@ViewChild(PortalOutletDirective) portalOutlet: PortalOutletDirective;
@ViewChildren(CdkPortal) portals: QueryList<CdkPortal>;
@ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;
@ViewChild('templateRef', { read: TemplateRef }) templateRef: TemplateRef<any>;

selectedPortal: Portal<any>;
Expand Down
5 changes: 4 additions & 1 deletion src/cdk/portal/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@ export * from './portal-directives';
export * from './portal-injector';

export {DomPortalOutlet as DomPortalHost} from './dom-portal-outlet';
export {PortalOutletDirective as PortalHostDirective} from './portal-directives';
export {
CdkPortalOutlet as PortalHostDirective,
CdkPortal as TemplatePortalDirective,
} from './portal-directives';
export {PortalOutlet as PortalHost, BasePortalOutlet as BasePortalHost} from './portal';
4 changes: 2 additions & 2 deletions src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,12 +194,12 @@ export class CdkStepper {

/** Returns a unique id for each step label element. */
_getStepLabelId(i: number): string {
return `mat-step-label-${this._groupId}-${i}`;
return `cdk-step-label-${this._groupId}-${i}`;
}

/** Returns unique id for each step content element. */
_getStepContentId(i: number): string {
return `mat-step-content-${this._groupId}-${i}`;
return `cdk-step-content-${this._groupId}-${i}`;
}

/** Marks the component to be change detected. */
Expand Down
Loading