feat(material/tooltip): switch to MDC implementation (#25209)

Author: andrewseguin

.github/CODEOWNERS

@@ -36,6 +36,7 @@
 /src/material/tabs/**                              @andrewseguin
 /src/material/testing/**                           @andrewseguin
 /src/material/toolbar/**                           @devversion
+/src/material/legacy-tooltip/**                    @andrewseguin
 /src/material/tooltip/**                           @andrewseguin
 /src/material/tree/**                              @jelbourn @andrewseguin
 
@@ -345,7 +346,7 @@
 /tools/public_api_guard/material/table**           @andrewseguin
 /tools/public_api_guard/material/tabs**            @andrewseguin
 /tools/public_api_guard/material/toolbar**         @devversion
-/tools/public_api_guard/material/tooltip**         @andrewseguin
+/tools/public_api_guard/material/legacy-tooltip**  @andrewseguin
 /tools/public_api_guard/material/tree**            @jelbourn @andrewseguin
 /tools/public_api_guard/material/material**        @andrewseguin
 /tools/public_api_guard/google-maps/**             @crisbeto

.ng-dev/commit-message.mts

@@ -107,6 +107,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/testing',
     'material/theming',
     'material/toolbar',
+    'material/legacy-tooltip',
     'material/tooltip',
     'material/tree',
     'youtube-player',

src/components-examples/material/tooltip/BUILD.bazel

@@ -19,9 +19,9 @@ ng_module(
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/input",
+        "//src/material/legacy-tooltip",
+        "//src/material/legacy-tooltip/testing",
         "//src/material/select",
-        "//src/material/tooltip",
-        "//src/material/tooltip/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
         ":tooltip",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/tooltip",
-        "//src/material/tooltip/testing",
+        "//src/material/legacy-tooltip",
+        "//src/material/legacy-tooltip/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/tooltip/index.ts

@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example';
 import {TooltipCustomClassExample} from './tooltip-custom-class/tooltip-custom-class-example';
 import {TooltipDelayExample} from './tooltip-delay/tooltip-delay-example';
@@ -51,7 +51,7 @@ const EXAMPLES = [
     MatCheckboxModule,
     MatInputModule,
     MatSelectModule,
-    MatTooltipModule,
+    MatLegacyTooltipModule,
     ReactiveFormsModule,
     ScrollingModule, // Required for the auto-scrolling example
   ],

src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material/tooltip';
+import {TooltipPosition} from '@angular/material/legacy-tooltip';
 
 /**
  * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.

src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatTooltipHarness} from '@angular/material/tooltip/testing';
+import {MatLegacyTooltipHarness} from '@angular/material/legacy-tooltip/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {TooltipHarnessExample} from './tooltip-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -12,7 +12,7 @@ describe('TooltipHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatTooltipModule, NoopAnimationsModule],
+      imports: [MatLegacyTooltipModule, NoopAnimationsModule],
       declarations: [TooltipHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(TooltipHarnessExample);
@@ -21,19 +21,19 @@ describe('TooltipHarnessExample', () => {
   });
 
   it('should load all tooltip harnesses', async () => {
-    const tooltips = await loader.getAllHarnesses(MatTooltipHarness);
+    const tooltips = await loader.getAllHarnesses(MatLegacyTooltipHarness);
     expect(tooltips.length).toBe(2);
   });
 
   it('should be able to show a tooltip', async () => {
-    const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
     expect(await tooltip.isOpen()).toBe(false);
     await tooltip.show();
     expect(await tooltip.isOpen()).toBe(true);
   });
 
   it('should be able to hide a tooltip', async () => {
-    const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
     expect(await tooltip.isOpen()).toBe(false);
     await tooltip.show();
     expect(await tooltip.isOpen()).toBe(true);
@@ -42,13 +42,13 @@ describe('TooltipHarnessExample', () => {
   });
 
   it('should be able to get the text of a tooltip', async () => {
-    const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
     await tooltip.show();
     expect(await tooltip.getTooltipText()).toBe('Tooltip message');
   });
 
   it('should return empty when getting the tooltip text while closed', async () => {
-    const tooltip = await loader.getHarness(MatTooltipHarness.with({selector: '#one'}));
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
     expect(await tooltip.getTooltipText()).toBe('');
   });
 });

src/components-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts

@@ -1,5 +1,8 @@
 import {Component} from '@angular/core';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
+import {
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
+  MatTooltipDefaultOptions,
+} from '@angular/material/legacy-tooltip';
 
 /** Custom options the configure the tooltip's default show/hide delays. */
 export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {

src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material/tooltip';
+import {TooltipPosition} from '@angular/material/legacy-tooltip';
 
 /**
  * @title Tooltip with a custom position

src/dev-app/mdc-tooltip/BUILD.bazel

@@ -14,7 +14,7 @@ ng_module(
         "//src/material-experimental/mdc-form-field",
         "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-select",
-        "//src/material-experimental/mdc-tooltip",
+        "//src/material/tooltip",
         "@npm//@angular/common",
         "@npm//@angular/forms",
     ],

src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts

@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {TooltipPosition, MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
+import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip';
 import {CommonModule} from '@angular/common';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';