From a4b4f6abecacfcc9a57a4bced0ee8fce48619d1d Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 15 Jun 2021 07:03:36 -0700 Subject: [PATCH 1/7] fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips * Add the 'mdc-tooltip--multiline' class when a tooltip overflows to make the text align left (or right in rtl) instead of center --- .../mdc-tooltip/tooltip.html | 1 + src/material-experimental/mdc-tooltip/tooltip.ts | 4 ++-- src/material/tooltip/BUILD.bazel | 1 + src/material/tooltip/tooltip.ts | 16 ++++++++++++++-- 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-tooltip/tooltip.html b/src/material-experimental/mdc-tooltip/tooltip.html index a0ce52a5f955..6eff2c6af2c9 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.html +++ b/src/material-experimental/mdc-tooltip/tooltip.html @@ -1,6 +1,7 @@
diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts index b1603e0fa2b1..01f2423fcc45 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.ts +++ b/src/material-experimental/mdc-tooltip/tooltip.ts @@ -115,7 +115,7 @@ export class MatTooltip extends _MatTooltipBase { } }) export class TooltipComponent extends _TooltipComponentBase { - constructor(changeDetectorRef: ChangeDetectorRef) { - super(changeDetectorRef); + constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef) { + super(changeDetectorRef, elementRef); } } diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel index db181bfeafe3..c600190d09d5 100644 --- a/src/material/tooltip/BUILD.bazel +++ b/src/material/tooltip/BUILD.bazel @@ -33,6 +33,7 @@ ng_module( "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/core", + "@npm//@material/tooltip", "@npm//rxjs", ], ) diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts index 7e462626d429..d8e622a9d926 100644 --- a/src/material/tooltip/tooltip.ts +++ b/src/material/tooltip/tooltip.ts @@ -43,6 +43,7 @@ import { AfterViewInit, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; +import {numbers} from '@material/tooltip'; import {Observable, Subject} from 'rxjs'; import {take, takeUntil} from 'rxjs/operators'; @@ -770,13 +771,16 @@ export abstract class _TooltipComponentBase implements OnDestroy { /** Property watched by the animation framework to show or hide the tooltip */ _visibility: TooltipVisibility = 'initial'; + /* Whether the tooltip text overflows to multiple lines */ + _isMultiline: boolean = false; + /** Whether interactions on the page should close the tooltip */ private _closeOnInteraction: boolean = false; /** Subject for notifying that the tooltip has been hidden from the view */ private readonly _onHide: Subject = new Subject(); - constructor(private _changeDetectorRef: ChangeDetectorRef) {} + constructor(private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {} /** * Shows the tooltip with an animation originating from the provided origin @@ -791,6 +795,7 @@ export abstract class _TooltipComponentBase implements OnDestroy { this._showTimeoutId = setTimeout(() => { this._visibility = 'visible'; this._showTimeoutId = undefined; + this._isMultiline = this._isTooltipMultiline(); // Mark for check so if any parent component has set the // ChangeDetectionStrategy to OnPush it will be checked anyways @@ -867,6 +872,12 @@ export abstract class _TooltipComponentBase implements OnDestroy { _markForCheck(): void { this._changeDetectorRef.markForCheck(); } + + /** Whether the tooltip text has overflown to the next line */ + private _isTooltipMultiline() { + const rect = this._elementRef.nativeElement.getBoundingClientRect(); + return Number(rect.height) > numbers.MIN_HEIGHT && Number(rect.width) >= numbers.MAX_WIDTH; + } } /** @@ -895,7 +906,8 @@ export class TooltipComponent extends _TooltipComponentBase { constructor( changeDetectorRef: ChangeDetectorRef, + elementRef: ElementRef, private _breakpointObserver: BreakpointObserver) { - super(changeDetectorRef); + super(changeDetectorRef, elementRef); } } From 17406c981e7ef5a7840c6cfa34a5a539b67e5efe Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 10:10:16 -0700 Subject: [PATCH 2/7] fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips --- .../mdc-tooltip/tooltip.ts | 17 +++++++++++++++-- src/material/tooltip/BUILD.bazel | 1 - src/material/tooltip/tooltip.ts | 17 ++++------------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts index 01f2423fcc45..a297f8877227 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.ts +++ b/src/material-experimental/mdc-tooltip/tooltip.ts @@ -115,7 +115,20 @@ export class MatTooltip extends _MatTooltipBase { } }) export class TooltipComponent extends _TooltipComponentBase { - constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef) { - super(changeDetectorRef, elementRef); + /* Whether the tooltip text overflows to multiple lines */ + _isMultiline: boolean = false; + + constructor(changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) { + super(changeDetectorRef); + } + + protected _onShow(): void { + this._isMultiline = this._isTooltipMultiline(); + } + + /** Whether the tooltip text has overflown to the next line */ + private _isTooltipMultiline() { + const rect = this._elementRef.nativeElement.getBoundingClientRect(); + return rect.height > numbers.MIN_HEIGHT && rect.width >= numbers.MAX_WIDTH; } } diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel index c600190d09d5..db181bfeafe3 100644 --- a/src/material/tooltip/BUILD.bazel +++ b/src/material/tooltip/BUILD.bazel @@ -33,7 +33,6 @@ ng_module( "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/core", - "@npm//@material/tooltip", "@npm//rxjs", ], ) diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts index d8e622a9d926..b7982a1aede3 100644 --- a/src/material/tooltip/tooltip.ts +++ b/src/material/tooltip/tooltip.ts @@ -43,7 +43,6 @@ import { AfterViewInit, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; -import {numbers} from '@material/tooltip'; import {Observable, Subject} from 'rxjs'; import {take, takeUntil} from 'rxjs/operators'; @@ -771,16 +770,13 @@ export abstract class _TooltipComponentBase implements OnDestroy { /** Property watched by the animation framework to show or hide the tooltip */ _visibility: TooltipVisibility = 'initial'; - /* Whether the tooltip text overflows to multiple lines */ - _isMultiline: boolean = false; - /** Whether interactions on the page should close the tooltip */ private _closeOnInteraction: boolean = false; /** Subject for notifying that the tooltip has been hidden from the view */ private readonly _onHide: Subject = new Subject(); - constructor(private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {} + constructor(private _changeDetectorRef: ChangeDetectorRef) {} /** * Shows the tooltip with an animation originating from the provided origin @@ -795,7 +791,7 @@ export abstract class _TooltipComponentBase implements OnDestroy { this._showTimeoutId = setTimeout(() => { this._visibility = 'visible'; this._showTimeoutId = undefined; - this._isMultiline = this._isTooltipMultiline(); + this._onShow(); // Mark for check so if any parent component has set the // ChangeDetectionStrategy to OnPush it will be checked anyways @@ -873,11 +869,7 @@ export abstract class _TooltipComponentBase implements OnDestroy { this._changeDetectorRef.markForCheck(); } - /** Whether the tooltip text has overflown to the next line */ - private _isTooltipMultiline() { - const rect = this._elementRef.nativeElement.getBoundingClientRect(); - return Number(rect.height) > numbers.MIN_HEIGHT && Number(rect.width) >= numbers.MAX_WIDTH; - } + protected _onShow(): void {} } /** @@ -906,8 +898,7 @@ export class TooltipComponent extends _TooltipComponentBase { constructor( changeDetectorRef: ChangeDetectorRef, - elementRef: ElementRef, private _breakpointObserver: BreakpointObserver) { - super(changeDetectorRef, elementRef); + super(changeDetectorRef); } } From 3d9f54b6aea2536d7ec9d7041bb859ba9174fe43 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 10:15:47 -0700 Subject: [PATCH 3/7] fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips --- src/material/tooltip/tooltip.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts index b7982a1aede3..5fda975ba472 100644 --- a/src/material/tooltip/tooltip.ts +++ b/src/material/tooltip/tooltip.ts @@ -869,6 +869,11 @@ export abstract class _TooltipComponentBase implements OnDestroy { this._changeDetectorRef.markForCheck(); } + /** + * Callback for when the timeout in this.show() gets completed. + * This method is only needed by the mdc-tooltip, and so it is only implemented + * in the mdc-tooltip, not here. + */ protected _onShow(): void {} } From 6329154d53b9d261b7c207953c590418fa2faa10 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 10:17:18 -0700 Subject: [PATCH 4/7] fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips --- src/material-experimental/mdc-tooltip/tooltip.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts index a297f8877227..ed9d1596c496 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.ts +++ b/src/material-experimental/mdc-tooltip/tooltip.ts @@ -122,6 +122,7 @@ export class TooltipComponent extends _TooltipComponentBase { super(changeDetectorRef); } + /** @override */ protected _onShow(): void { this._isMultiline = this._isTooltipMultiline(); } From 543843d1433ef8d67eb2a075bce7eec05746ece2 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 12:04:49 -0700 Subject: [PATCH 5/7] test(material-experimental/mdc-tooltip): ensure the multiline class is set on tooltips with messages that overflow --- .../mdc-tooltip/tooltip.spec.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts index 156bf1a718ee..84f1899d6664 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.spec.ts +++ b/src/material-experimental/mdc-tooltip/tooltip.spec.ts @@ -865,6 +865,23 @@ describe('MDC-based MatTooltip', () => { fixture.destroy(); })); + it('should set the multiline class on tooltips that have messages that overflow', fakeAsync(() => { + fixture.componentInstance.message = 'This is a very long message that should cause the' + + 'tooltip message body to overflow onto a new line.'; + tooltipDirective.show(); + fixture.detectChanges(); + tick(); + + // Need to detect changes again to wait for the multiline class to be applied. + fixture.detectChanges(); + + const tooltipElement = + overlayContainerElement.querySelector('.mat-mdc-tooltip') as HTMLElement; + + expect(tooltipElement.classList).toContain('mdc-tooltip--multiline'); + expect(tooltipDirective._tooltipInstance?._isMultiline).toBeTrue(); + })); + }); describe('fallback positions', () => { From 84b3365364bfc65d8fb3948ee04fe28d1f5c9a48 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 12:09:35 -0700 Subject: [PATCH 6/7] fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips --- tools/public_api_guard/material/tooltip.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tools/public_api_guard/material/tooltip.d.ts b/tools/public_api_guard/material/tooltip.d.ts index 7fe5c1ab613c..c4e3176cf6ee 100644 --- a/tools/public_api_guard/material/tooltip.d.ts +++ b/tools/public_api_guard/material/tooltip.d.ts @@ -56,6 +56,7 @@ export declare abstract class _TooltipComponentBase implements OnDestroy { _animationStart(): void; _handleBodyInteraction(): void; _markForCheck(): void; + protected _onShow(): void; afterHidden(): Observable; hide(delay: number): void; isVisible(): boolean; From e9c46958d618fba4f0a6f9627069a758fdc2be02 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 17 Jun 2021 12:27:15 -0700 Subject: [PATCH 7/7] fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips --- src/material-experimental/mdc-tooltip/tooltip.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts index 84f1899d6664..424d51ea4806 100644 --- a/src/material-experimental/mdc-tooltip/tooltip.spec.ts +++ b/src/material-experimental/mdc-tooltip/tooltip.spec.ts @@ -865,7 +865,7 @@ describe('MDC-based MatTooltip', () => { fixture.destroy(); })); - it('should set the multiline class on tooltips that have messages that overflow', fakeAsync(() => { + it('should set the multiline class on tooltips with messages that overflow', fakeAsync(() => { fixture.componentInstance.message = 'This is a very long message that should cause the' + 'tooltip message body to overflow onto a new line.'; tooltipDirective.show();