Skip to content

Commit 7161587

Browse files
mmalerbammalerba
authored
fix(material-experimental/mdc-tooltip): change class prefixes to mat-mdc (#22025)
* 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
1 parent 5c61292 commit 7161587

File tree

6 files changed

+93
-85
lines changed

6 files changed

+93
-85
lines changed

‎src/material-experimental/mdc-tooltip/public-api.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export {
1818
TooltipTouchGestures,
1919
TooltipVisibility,
2020
SCROLL_THROTTLE_MS,
21-
TOOLTIP_PANEL_CLASS,
2221
MAT_TOOLTIP_SCROLL_STRATEGY,
2322
MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER,
2423
MatTooltipDefaultOptions,

‎src/material-experimental/mdc-tooltip/tooltip.spec.ts‎

Lines changed: 44 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
1+
import {AnimationEvent} from '@angular/animations';
2+
import {FocusMonitor} from '@angular/cdk/a11y';
3+
import {Direction, Directionality} from '@angular/cdk/bidi';
4+
import {ESCAPE} from '@angular/cdk/keycodes';
5+
import {CdkScrollable, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
6+
import {Platform} from '@angular/cdk/platform';
17
import {
2-
waitForAsync,
3-
ComponentFixture,
4-
fakeAsync,
5-
flush,
6-
flushMicrotasks,
7-
inject,
8-
TestBed,
9-
tick
10-
} from '@angular/core/testing';
8+
createFakeEvent,
9+
createKeyboardEvent,
10+
dispatchEvent,
11+
dispatchFakeEvent,
12+
dispatchKeyboardEvent,
13+
dispatchMouseEvent,
14+
patchElementFocus,
15+
} from '@angular/cdk/testing/private';
1116
import {
1217
ChangeDetectionStrategy,
1318
Component,
1419
DebugElement,
1520
ElementRef,
16-
ViewChild,
1721
NgZone,
22+
ViewChild,
1823
} from '@angular/core';
19-
import {AnimationEvent} from '@angular/animations';
24+
import {
25+
ComponentFixture,
26+
fakeAsync,
27+
flush,
28+
flushMicrotasks,
29+
inject,
30+
TestBed,
31+
tick,
32+
waitForAsync
33+
} from '@angular/core/testing';
2034
import {By} from '@angular/platform-browser';
2135
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
22-
import {Direction, Directionality} from '@angular/cdk/bidi';
23-
import {OverlayContainer, OverlayModule, CdkScrollable} from '@angular/cdk/overlay';
24-
import {Platform} from '@angular/cdk/platform';
25-
import {
26-
dispatchFakeEvent,
27-
dispatchKeyboardEvent,
28-
patchElementFocus,
29-
dispatchMouseEvent,
30-
createKeyboardEvent,
31-
dispatchEvent,
32-
createFakeEvent,
33-
} from '@angular/cdk/testing/private';
34-
import {ESCAPE} from '@angular/cdk/keycodes';
35-
import {FocusMonitor} from '@angular/cdk/a11y';
3636
import {
37+
MAT_TOOLTIP_DEFAULT_OPTIONS,
3738
MatTooltip,
3839
MatTooltipModule,
3940
SCROLL_THROTTLE_MS,
40-
TOOLTIP_PANEL_CLASS,
41-
MAT_TOOLTIP_DEFAULT_OPTIONS,
42-
TooltipTouchGestures,
4341
TooltipPosition,
42+
TooltipTouchGestures,
4443
} from './index';
4544

4645

@@ -244,7 +243,7 @@ describe('MDC-based MatTooltip', () => {
244243
const overlayRef = tooltipDirective._overlayRef;
245244

246245
expect(!!overlayRef).toBeTruthy();
247-
expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS,
246+
expect(overlayRef!.overlayElement.classList).toContain('mat-mdc-tooltip-panel',
248247
'Expected the overlay panel element to have the tooltip panel class set.');
249248
}));
250249

@@ -695,7 +694,7 @@ describe('MDC-based MatTooltip', () => {
695694
expect(event.defaultPrevented).toBe(false);
696695
}));
697696

698-
it('should not show the tooltip on progammatic focus', fakeAsync(() => {
697+
it('should not show the tooltip on programmatic focus', fakeAsync(() => {
699698
patchElementFocus(buttonElement);
700699
assertTooltipInstance(tooltipDirective, false);
701700

@@ -761,19 +760,19 @@ describe('MDC-based MatTooltip', () => {
761760
setPositionAndShow('below');
762761

763762
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
764-
expect(classList).toContain('mat-tooltip-panel-below');
763+
expect(classList).toContain('mat-mdc-tooltip-panel-below');
765764

766765
setPositionAndShow('above');
767-
expect(classList).not.toContain('mat-tooltip-panel-below');
768-
expect(classList).toContain('mat-tooltip-panel-above');
766+
expect(classList).not.toContain('mat-mdc-tooltip-panel-below');
767+
expect(classList).toContain('mat-mdc-tooltip-panel-above');
769768

770769
setPositionAndShow('left');
771-
expect(classList).not.toContain('mat-tooltip-panel-above');
772-
expect(classList).toContain('mat-tooltip-panel-left');
770+
expect(classList).not.toContain('mat-mdc-tooltip-panel-above');
771+
expect(classList).toContain('mat-mdc-tooltip-panel-left');
773772

774773
setPositionAndShow('right');
775-
expect(classList).not.toContain('mat-tooltip-panel-left');
776-
expect(classList).toContain('mat-tooltip-panel-right');
774+
expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
775+
expect(classList).toContain('mat-mdc-tooltip-panel-right');
777776

778777
function setPositionAndShow(position: TooltipPosition) {
779778
tooltipDirective.hide(0);
@@ -804,10 +803,10 @@ describe('MDC-based MatTooltip', () => {
804803
tick(500);
805804

806805
const classList = tooltipDirective._overlayRef!.overlayElement.classList;
807-
expect(classList).not.toContain('mat-tooltip-panel-after');
808-
expect(classList).not.toContain('mat-tooltip-panel-before');
809-
expect(classList).not.toContain('mat-tooltip-panel-left');
810-
expect(classList).toContain('mat-tooltip-panel-right');
806+
expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
807+
expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
808+
expect(classList).not.toContain('mat-mdc-tooltip-panel-left');
809+
expect(classList).toContain('mat-mdc-tooltip-panel-right');
811810

812811
tooltipDirective.hide(0);
813812
fixture.detectChanges();
@@ -819,10 +818,10 @@ describe('MDC-based MatTooltip', () => {
819818
fixture.detectChanges();
820819
tick(500);
821820

822-
expect(classList).not.toContain('mat-tooltip-panel-after');
823-
expect(classList).not.toContain('mat-tooltip-panel-before');
824-
expect(classList).not.toContain('mat-tooltip-panel-right');
825-
expect(classList).toContain('mat-tooltip-panel-left');
821+
expect(classList).not.toContain('mat-mdc-tooltip-panel-after');
822+
expect(classList).not.toContain('mat-mdc-tooltip-panel-before');
823+
expect(classList).not.toContain('mat-mdc-tooltip-panel-right');
824+
expect(classList).toContain('mat-mdc-tooltip-panel-left');
826825
}));
827826

828827
it('should clear the show timeout on destroy', fakeAsync(() => {

‎src/material-experimental/mdc-tooltip/tooltip.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ import {
3333
import {numbers} from '@material/tooltip';
3434
import {matTooltipAnimations} from './tooltip-animations';
3535

36+
/**
37+
* CSS class that will be attached to the overlay panel.
38+
* @deprecated
39+
* @breaking-change 13.0.0 remove this variable
40+
*/
41+
export const TOOLTIP_PANEL_CLASS = 'mat-mdc-tooltip-panel';
42+
3643
/**
3744
* Directive that attaches a material design tooltip to the host element. Animates the showing and
3845
* hiding of a tooltip provided position (defaults to below the element).
@@ -48,7 +55,7 @@ import {matTooltipAnimations} from './tooltip-animations';
4855
})
4956
export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
5057
protected readonly _tooltipComponent = TooltipComponent;
51-
protected readonly _transformOriginSelector = '.mat-mdc-tooltip';
58+
protected readonly _cssClassPrefix = 'mat-mdc';
5259

5360
constructor(
5461
overlay: Overlay,

‎src/material/tooltip/tooltip.spec.ts‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
1+
import {AnimationEvent} from '@angular/animations';
2+
import {FocusMonitor} from '@angular/cdk/a11y';
3+
import {Direction, Directionality} from '@angular/cdk/bidi';
4+
import {ESCAPE} from '@angular/cdk/keycodes';
5+
import {CdkScrollable, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
6+
import {Platform} from '@angular/cdk/platform';
17
import {
2-
waitForAsync,
3-
ComponentFixture,
4-
fakeAsync,
5-
flush,
6-
flushMicrotasks,
7-
inject,
8-
TestBed,
9-
tick
10-
} from '@angular/core/testing';
8+
createFakeEvent,
9+
createKeyboardEvent,
10+
dispatchEvent,
11+
dispatchFakeEvent,
12+
dispatchKeyboardEvent,
13+
dispatchMouseEvent,
14+
patchElementFocus,
15+
} from '@angular/cdk/testing/private';
1116
import {
1217
ChangeDetectionStrategy,
1318
Component,
1419
DebugElement,
1520
ElementRef,
16-
ViewChild,
1721
NgZone,
22+
ViewChild,
1823
} from '@angular/core';
19-
import {AnimationEvent} from '@angular/animations';
24+
import {
25+
ComponentFixture,
26+
fakeAsync,
27+
flush,
28+
flushMicrotasks,
29+
inject,
30+
TestBed,
31+
tick,
32+
waitForAsync
33+
} from '@angular/core/testing';
2034
import {By} from '@angular/platform-browser';
2135
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
22-
import {Direction, Directionality} from '@angular/cdk/bidi';
23-
import {OverlayContainer, OverlayModule, CdkScrollable} from '@angular/cdk/overlay';
24-
import {Platform} from '@angular/cdk/platform';
25-
import {
26-
dispatchFakeEvent,
27-
dispatchKeyboardEvent,
28-
patchElementFocus,
29-
dispatchMouseEvent,
30-
createKeyboardEvent,
31-
dispatchEvent,
32-
createFakeEvent,
33-
} from '@angular/cdk/testing/private';
34-
import {ESCAPE} from '@angular/cdk/keycodes';
35-
import {FocusMonitor} from '@angular/cdk/a11y';
3636
import {
37+
MAT_TOOLTIP_DEFAULT_OPTIONS,
3738
MatTooltip,
3839
MatTooltipModule,
3940
SCROLL_THROTTLE_MS,
40-
TOOLTIP_PANEL_CLASS,
41-
MAT_TOOLTIP_DEFAULT_OPTIONS,
42-
TooltipTouchGestures,
4341
TooltipPosition,
42+
TooltipTouchGestures,
4443
} from './index';
4544

4645

@@ -243,7 +242,7 @@ describe('MatTooltip', () => {
243242
const overlayRef = tooltipDirective._overlayRef;
244243

245244
expect(!!overlayRef).toBeTruthy();
246-
expect(overlayRef!.overlayElement.classList).toContain(TOOLTIP_PANEL_CLASS,
245+
expect(overlayRef!.overlayElement.classList).toContain('mat-tooltip-panel',
247246
'Expected the overlay panel element to have the tooltip panel class set.');
248247
}));
249248

@@ -694,7 +693,7 @@ describe('MatTooltip', () => {
694693
expect(event.defaultPrevented).toBe(false);
695694
}));
696695

697-
it('should not show the tooltip on progammatic focus', fakeAsync(() => {
696+
it('should not show the tooltip on programmatic focus', fakeAsync(() => {
698697
patchElementFocus(buttonElement);
699698
assertTooltipInstance(tooltipDirective, false);
700699

‎src/material/tooltip/tooltip.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,15 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
6464
/** Time in ms to throttle repositioning after scroll events. */
6565
export const SCROLL_THROTTLE_MS = 20;
6666

67-
/** CSS class that will be attached to the overlay panel. */
67+
/**
68+
* CSS class that will be attached to the overlay panel.
69+
* @deprecated
70+
* @breaking-change 13.0.0 remove this variable
71+
*/
6872
export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
6973

74+
const PANEL_CLASS = 'tooltip-panel';
75+
7076
/** Options used to bind passive event listeners. */
7177
const passiveListenerOptions = normalizePassiveListenerOptions({passive: true});
7278

@@ -140,9 +146,9 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
140146
private _viewInitialized = false;
141147
private _pointerExitEventsInitialized = false;
142148
protected abstract readonly _tooltipComponent: ComponentType<T>;
143-
protected abstract readonly _transformOriginSelector: string;
144149
protected _viewportMargin = 8;
145150
private _currentPosition: TooltipPosition;
151+
protected readonly _cssClassPrefix: string = 'mat';
146152

147153
/** Allows the user to define the position of the tooltip relative to the parent element */
148154
@Input('matTooltipPosition')
@@ -388,7 +394,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
388394
// Create connected position strategy that listens for scroll events to reposition.
389395
const strategy = this._overlay.position()
390396
.flexibleConnectedTo(this._elementRef)
391-
.withTransformOriginOn(this._transformOriginSelector)
397+
.withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
392398
.withFlexibleDimensions(false)
393399
.withViewportMargin(this._viewportMargin)
394400
.withScrollableContainers(scrollableAncestors);
@@ -408,7 +414,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
408414
this._overlayRef = this._overlay.create({
409415
direction: this._dir,
410416
positionStrategy: strategy,
411-
panelClass: TOOLTIP_PANEL_CLASS,
417+
panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
412418
scrollStrategy: this._scrollStrategy()
413419
});
414420

@@ -583,7 +589,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
583589
const overlayRef = this._overlayRef;
584590

585591
if (overlayRef) {
586-
const classPrefix = 'mat-tooltip-panel-';
592+
const classPrefix = `${this._cssClassPrefix}-${PANEL_CLASS}-`;
587593
overlayRef.removePanelClass(classPrefix + this._currentPosition);
588594
overlayRef.addPanelClass(classPrefix + newPosition);
589595
}
@@ -726,7 +732,6 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase> implement
726732
})
727733
export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
728734
protected readonly _tooltipComponent = TooltipComponent;
729-
protected readonly _transformOriginSelector = '.mat-tooltip';
730735

731736
constructor(
732737
overlay: Overlay,

‎tools/public_api_guard/material/tooltip.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export declare abstract class _MatTooltipBase<T extends _TooltipComponentBase> implements OnDestroy, AfterViewInit {
2+
protected readonly _cssClassPrefix: string;
23
protected _dir: Directionality;
34
_overlayRef: OverlayRef | null;
45
protected abstract readonly _tooltipComponent: ComponentType<T>;
56
_tooltipInstance: T | null;
6-
protected abstract readonly _transformOriginSelector: string;
77
protected _viewportMargin: number;
88
get disabled(): boolean;
99
set disabled(value: boolean);
@@ -83,7 +83,6 @@ export declare const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
8383

8484
export declare class MatTooltip extends _MatTooltipBase<TooltipComponent> {
8585
protected readonly _tooltipComponent: typeof TooltipComponent;
86-
protected readonly _transformOriginSelector = ".mat-tooltip";
8786
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);
8887
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatTooltip, "[matTooltip]", ["matTooltip"], {}, {}, never>;
8988
static ɵfac: i0.ɵɵFactoryDef<MatTooltip, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;

0 commit comments

Comments
 (0)