From f2a081429cf016b8a5d247b463b04e2575922294 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Fri, 18 Jun 2021 10:08:33 -0700
Subject: [PATCH] =?UTF-8?q?fix(material-experimental/mdc-tooltip):=20fix?=
 =?UTF-8?q?=20text=20alignment=20of=20multili=E2=80=A6=20(#22981)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* test(material-experimental/mdc-tooltip): ensure the multiline class is set on tooltips with messages that overflow

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

* fixup! fix(material-experimental/mdc-tooltip): fix text alignment of multiline tooltips

(cherry picked from commit 81cd26bac763e7e1195b01c0806fba0fb74e79a6)
---
 .../mdc-tooltip/tooltip.html                    |  1 +
 .../mdc-tooltip/tooltip.spec.ts                 | 17 +++++++++++++++++
 .../mdc-tooltip/tooltip.ts                      | 16 +++++++++++++++-
 src/material/tooltip/tooltip.ts                 |  8 ++++++++
 tools/public_api_guard/material/tooltip.d.ts    |  1 +
 5 files changed, 42 insertions(+), 1 deletion(-)

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 @@
 <div
   class="mdc-tooltip mdc-tooltip--shown mat-mdc-tooltip"
   [ngClass]="tooltipClass"
+  [class.mdc-tooltip--multiline]="_isMultiline"
   [@state]="_visibility"
   (@state.start)="_animationStart()"
   (@state.done)="_animationDone($event)">
diff --git a/src/material-experimental/mdc-tooltip/tooltip.spec.ts b/src/material-experimental/mdc-tooltip/tooltip.spec.ts
index 156bf1a718ee..424d51ea4806 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 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();
+      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', () => {
diff --git a/src/material-experimental/mdc-tooltip/tooltip.ts b/src/material-experimental/mdc-tooltip/tooltip.ts
index b1603e0fa2b1..ed9d1596c496 100644
--- a/src/material-experimental/mdc-tooltip/tooltip.ts
+++ b/src/material-experimental/mdc-tooltip/tooltip.ts
@@ -115,7 +115,21 @@ export class MatTooltip extends _MatTooltipBase<TooltipComponent> {
   }
 })
 export class TooltipComponent extends _TooltipComponentBase {
-  constructor(changeDetectorRef: ChangeDetectorRef) {
+  /* Whether the tooltip text overflows to multiple lines */
+  _isMultiline: boolean = false;
+
+  constructor(changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {
     super(changeDetectorRef);
   }
+
+  /** @override */
+  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/tooltip.ts b/src/material/tooltip/tooltip.ts
index 7e462626d429..5fda975ba472 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/src/material/tooltip/tooltip.ts
@@ -791,6 +791,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     this._showTimeoutId = setTimeout(() => {
       this._visibility = 'visible';
       this._showTimeoutId = undefined;
+      this._onShow();
 
       // Mark for check so if any parent component has set the
       // ChangeDetectionStrategy to OnPush it will be checked anyways
@@ -867,6 +868,13 @@ export abstract class _TooltipComponentBase implements OnDestroy {
   _markForCheck(): void {
     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 {}
 }
 
 /**
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<void>;
     hide(delay: number): void;
     isVisible(): boolean;