fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc (#22025)

mmalerba · web-flow · commit 716158724851 · 2021-03-02T11:48:09.000-05:00
* fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc

* fixup! fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc

* fixup! fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc

* fixup! fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc

* fixup! fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc

* fixup! fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc
diff --git a/src/material-experimental/mdc-tooltip/public-api.ts b/src/material-experimental/mdc-tooltip/public-api.ts
@@ -18,7 +18,6 @@ export {
   TooltipTouchGestures,
   TooltipVisibility,
   SCROLL_THROTTLE_MS,
-  TOOLTIP_PANEL_CLASS,
   MAT_TOOLTIP_SCROLL_STRATEGY,
   MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
   MatTooltipDefaultOptions,
diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts
@@ -1,46 +1,45 @@
+import {AnimationEvent} from '@angular/animations';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {ESCAPE} from '@angular/cdk/keycodes';
+import {CdkScrollable, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
+import {Platform} from '@angular/cdk/platform';
 import {
-  waitForAsync,
-  ComponentFixture,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  inject,
-  TestBed,
-  tick
-} from '@angular/core/testing';
+  createFakeEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  patchElementFocus,
+} from '@angular/cdk/testing/private';
 import {
   ChangeDetectionStrategy,
   Component,
   DebugElement,
   ElementRef,
-  ViewChild,
   NgZone,
+  ViewChild,
 } from '@angular/core';
-import {AnimationEvent} from '@angular/animations';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  flushMicrotasks,
+  inject,
+  TestBed,
+  tick,
+  waitForAsync
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Direction, Directionality} from '@angular/cdk/bidi';
-import {OverlayContainer, OverlayModule, CdkScrollable} from '@angular/cdk/overlay';
-import {Platform} from '@angular/cdk/platform';
-import {
-  dispatchFakeEvent,
-  dispatchKeyboardEvent,
-  patchElementFocus,
-  dispatchMouseEvent,
-  createKeyboardEvent,
-  dispatchEvent,
-  createFakeEvent,
-} from '@angular/cdk/testing/private';
-import {ESCAPE} from '@angular/cdk/keycodes';
-import {FocusMonitor} from '@angular/cdk/a11y';
 import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
   MatTooltip,
   MatTooltipModule,
   SCROLL_THROTTLE_MS,
-  TOOLTIP_PANEL_CLASS,
-  MAT_TOOLTIP_DEFAULT_OPTIONS,
-  TooltipTouchGestures,
   TooltipPosition,
+  TooltipTouchGestures,
 } from './index';
 
 
@@ -244,7 +243,7 @@ describe('MDC-based MatTooltip', () => {
       const overlayRef = tooltipDirective._overlayRef;
 
       expect(!!overlayRef).toBeTruthy();
-      expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS,
+      expect(overlayRef!.overlayElement.classList).toContain('mat-mdc-tooltip-panel',
           'Expected the overlay panel element to have the tooltip panel class set.');
     }));
 
@@ -695,7 +694,7 @@ describe('MDC-based MatTooltip', () => {
       expect(event.defaultPrevented).toBe(false);
     }));
 
-    it('should not show the tooltip on progammatic focus', fakeAsync(() => {
+    it('should not show the tooltip on programmatic focus', fakeAsync(() => {
       patchElementFocus(buttonElement);
       assertTooltipInstance(tooltipDirective, false);
 
@@ -761,19 +760,19 @@ describe('MDC-based MatTooltip', () => {
       setPositionAndShow('below');
 
       const classList = tooltipDirective._overlayRef!.overlayElement.classList;
-      expect(classList).toContain('mat-tooltip-panel-below');
+      expect(classList).toContain('mat-mdc-tooltip-panel-below');
 
       setPositionAndShow('above');
-      expect(classList).not.toContain('mat-tooltip-panel-below');
-      expect(classList).toContain('mat-tooltip-panel-above');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-below');
+      expect(classList).toContain('mat-mdc-tooltip-panel-above');
 
       setPositionAndShow('left');
-      expect(classList).not.toContain('mat-tooltip-panel-above');
-      expect(classList).toContain('mat-tooltip-panel-left');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-above');
+      expect(classList).toContain('mat-mdc-tooltip-panel-left');
 
       setPositionAndShow('right');
-      expect(classList).not.toContain('mat-tooltip-panel-left');
-      expect(classList).toContain('mat-tooltip-panel-right');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
+      expect(classList).toContain('mat-mdc-tooltip-panel-right');
 
       function setPositionAndShow(position: TooltipPosition) {
         tooltipDirective.hide(0);
@@ -804,10 +803,10 @@ describe('MDC-based MatTooltip', () => {
       tick(500);
 
       const classList = tooltipDirective._overlayRef!.overlayElement.classList;
-      expect(classList).not.toContain('mat-tooltip-panel-after');
-      expect(classList).not.toContain('mat-tooltip-panel-before');
-      expect(classList).not.toContain('mat-tooltip-panel-left');
-      expect(classList).toContain('mat-tooltip-panel-right');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
+      expect(classList).toContain('mat-mdc-tooltip-panel-right');
 
       tooltipDirective.hide(0);
       fixture.detectChanges();
@@ -819,10 +818,10 @@ describe('MDC-based MatTooltip', () => {
       fixture.detectChanges();
       tick(500);
 
-      expect(classList).not.toContain('mat-tooltip-panel-after');
-      expect(classList).not.toContain('mat-tooltip-panel-before');
-      expect(classList).not.toContain('mat-tooltip-panel-right');
-      expect(classList).toContain('mat-tooltip-panel-left');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
+      expect(classList).not.toContain('mat-mdc-tooltip-panel-right');
+      expect(classList).toContain('mat-mdc-tooltip-panel-left');
     }));
 
     it('should clear the show timeout on destroy', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts
@@ -33,6 +33,13 @@ import {
 import {numbers} from '@material/tooltip';
 import {matTooltipAnimations} from './tooltip-animations';
 
+/**
+ * CSS class that will be attached to the overlay panel.
+ * @deprecated
+ * @breaking-change 13.0.0 remove this variable
+ */
+export const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
+
 /**
  * Directive that attaches a material design tooltip to the host element. Animates the showing and
  * hiding of a tooltip provided position (defaults to below the element).
@@ -48,7 +55,7 @@ import {matTooltipAnimations} from './tooltip-animations';
 })
 export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
   protected readonly _tooltipComponent = TooltipComponent;
-  protected readonly _transformOriginSelector = '.mat-mdc-tooltip';
+  protected readonly _cssClassPrefix = 'mat-mdc';
 
   constructor(
     overlay: Overlay,
diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
@@ -1,46 +1,45 @@
+import {AnimationEvent} from '@angular/animations';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {ESCAPE} from '@angular/cdk/keycodes';
+import {CdkScrollable, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
+import {Platform} from '@angular/cdk/platform';
 import {
-  waitForAsync,
-  ComponentFixture,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  inject,
-  TestBed,
-  tick
-} from '@angular/core/testing';
+  createFakeEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  patchElementFocus,
+} from '@angular/cdk/testing/private';
 import {
   ChangeDetectionStrategy,
   Component,
   DebugElement,
   ElementRef,
-  ViewChild,
   NgZone,
+  ViewChild,
 } from '@angular/core';
-import {AnimationEvent} from '@angular/animations';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  flushMicrotasks,
+  inject,
+  TestBed,
+  tick,
+  waitForAsync
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Direction, Directionality} from '@angular/cdk/bidi';
-import {OverlayContainer, OverlayModule, CdkScrollable} from '@angular/cdk/overlay';
-import {Platform} from '@angular/cdk/platform';
-import {
-  dispatchFakeEvent,
-  dispatchKeyboardEvent,
-  patchElementFocus,
-  dispatchMouseEvent,
-  createKeyboardEvent,
-  dispatchEvent,
-  createFakeEvent,
-} from '@angular/cdk/testing/private';
-import {ESCAPE} from '@angular/cdk/keycodes';
-import {FocusMonitor} from '@angular/cdk/a11y';
 import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
   MatTooltip,
   MatTooltipModule,
   SCROLL_THROTTLE_MS,
-  TOOLTIP_PANEL_CLASS,
-  MAT_TOOLTIP_DEFAULT_OPTIONS,
-  TooltipTouchGestures,
   TooltipPosition,
+  TooltipTouchGestures,
 } from './index';
 
 
@@ -243,7 +242,7 @@ describe('MatTooltip', () => {
       const overlayRef = tooltipDirective._overlayRef;
 
       expect(!!overlayRef).toBeTruthy();
-      expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS,
+      expect(overlayRef!.overlayElement.classList).toContain('mat-tooltip-panel',
           'Expected the overlay panel element to have the tooltip panel class set.');
     }));
 
@@ -694,7 +693,7 @@ describe('MatTooltip', () => {
       expect(event.defaultPrevented).toBe(false);
     }));
 
-    it('should not show the tooltip on progammatic focus', fakeAsync(() => {
+    it('should not show the tooltip on programmatic focus', fakeAsync(() => {
       patchElementFocus(buttonElement);
       assertTooltipInstance(tooltipDirective, false);
 
diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
@@ -64,9 +64,15 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
 /** Time in ms to throttle repositioning after scroll events. */
 export const SCROLL_THROTTLE_MS = 20;
 
-/** CSS class that will be attached to the overlay panel. */
+/**
+ * CSS class that will be attached to the overlay panel.
+ * @deprecated
+ * @breaking-change 13.0.0 remove this variable
+ */
 export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
 
+const PANEL_CLASS = 'tooltip-panel';
+
 /** Options used to bind passive event listeners. */
 const passiveListenerOptions = normalizePassiveListenerOptions({passive: true});
 
@@ -140,9 +146,9 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
   private _viewInitialized = false;
   private _pointerExitEventsInitialized = false;
   protected abstract readonly _tooltipComponent: ComponentType<T>;
-  protected abstract readonly _transformOriginSelector: string;
   protected _viewportMargin = 8;
   private _currentPosition: TooltipPosition;
+  protected readonly _cssClassPrefix: string = 'mat';
 
   /** Allows the user to define the position of the tooltip relative to the parent element */
   @Input('matTooltipPosition')
@@ -388,7 +394,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
     // Create connected position strategy that listens for scroll events to reposition.
     const strategy = this._overlay.position()
                          .flexibleConnectedTo(this._elementRef)
-                         .withTransformOriginOn(this._transformOriginSelector)
+                         .withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
                          .withFlexibleDimensions(false)
                          .withViewportMargin(this._viewportMargin)
                          .withScrollableContainers(scrollableAncestors);
@@ -408,7 +414,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
     this._overlayRef = this._overlay.create({
       direction: this._dir,
       positionStrategy: strategy,
-      panelClass: TOOLTIP_PANEL_CLASS,
+      panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
       scrollStrategy: this._scrollStrategy()
     });
 
@@ -583,7 +589,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
       const overlayRef = this._overlayRef;
 
       if (overlayRef) {
-        const classPrefix = 'mat-tooltip-panel-';
+        const classPrefix = `${this._cssClassPrefix}-${PANEL_CLASS}-`;
         overlayRef.removePanelClass(classPrefix + this._currentPosition);
         overlayRef.addPanelClass(classPrefix + newPosition);
       }
@@ -726,7 +732,6 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
 })
 export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
   protected readonly _tooltipComponent = TooltipComponent;
-  protected readonly _transformOriginSelector = '.mat-tooltip';
 
   constructor(
     overlay: Overlay,
diff --git a/tools/public_api_guard/material/tooltip.d.ts b/tools/public_api_guard/material/tooltip.d.ts
@@ -1,9 +1,9 @@
 export declare abstract class _MatTooltipBase<T extends _TooltipComponentBase> implements OnDestroy, AfterViewInit {
+    protected readonly _cssClassPrefix: string;
     protected _dir: Directionality;
     _overlayRef: OverlayRef | null;
     protected abstract readonly _tooltipComponent: ComponentType<T>;
     _tooltipInstance: T | null;
-    protected abstract readonly _transformOriginSelector: string;
     protected _viewportMargin: number;
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -83,7 +83,6 @@ export declare const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 
 export declare class MatTooltip extends _MatTooltipBase<TooltipComponent> {
     protected readonly _tooltipComponent: typeof TooltipComponent;
-    protected readonly _transformOriginSelector = ".mat-tooltip";
     constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, viewContainerRef: ViewContainerRef, ngZone: NgZone, platform: Platform, ariaDescriber: AriaDescriber, focusMonitor: FocusMonitor, scrollStrategy: any, dir: Directionality, defaultOptions: MatTooltipDefaultOptions, _document: any);
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatTooltip, "[matTooltip]", ["matTooltip"], {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatTooltip, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
