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

.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';

src/material-experimental/_index.scss

@@ -64,8 +64,6 @@
   mdc-table-density, mdc-table-theme;
 @forward './mdc-tabs/tabs-theme' as mdc-tabs-* show mdc-tabs-color, mdc-tabs-typography,
   mdc-tabs-density, mdc-tabs-theme;
-@forward './mdc-tooltip/tooltip-theme' as mdc-tooltip-* show mdc-tooltip-color,
-  mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme;
 
 // Additional public APIs for individual components
 @forward './mdc-dialog/dialog-legacy-padding' as mdc-dialog-* show mdc-dialog-legacy-padding;

src/material-experimental/config.bzl

@@ -40,8 +40,6 @@ entryPoints = [
     "mdc-table/testing",
     "mdc-tabs",
     "mdc-tabs/testing",
-    "mdc-tooltip",
-    "mdc-tooltip/testing",
     "menubar",
     "popover-edit",
     "selection",

src/material-experimental/mdc-core/color/_all-color.import.scss

@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;

src/material-experimental/mdc-core/density/_all-density.import.scss

@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;

src/material-experimental/mdc-core/theming/BUILD.bazel

@@ -40,8 +40,8 @@ sass_library(
         "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
-        "//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib",
         "//src/material/card:card_scss_lib",
+        "//src/material/tooltip:tooltip_scss_lib",
     ],
 )
 

src/material-experimental/mdc-core/theming/_all-theme.import.scss

@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
@@ -99,7 +98,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @import '../../mdc-snack-bar/snack-bar-theme';
 @import '../../mdc-tabs/tabs-theme';
 @import '../../mdc-table/table-theme';
-@import '../../mdc-tooltip/tooltip-theme';
 @import '../../mdc-paginator/paginator-theme';
 @import '../../mdc-progress-bar/progress-bar-theme';
 @import '../../mdc-progress-spinner/progress-spinner-theme';

src/material-experimental/mdc-core/theming/_all-theme.scss

@@ -17,7 +17,6 @@
 @use '../../mdc-snack-bar/snack-bar-theme';
 @use '../../mdc-tabs/tabs-theme';
 @use '../../mdc-table/table-theme';
-@use '../../mdc-tooltip/tooltip-theme';
 @use '../../mdc-paginator/paginator-theme';
 @use '../../mdc-progress-bar/progress-bar-theme';
 @use '../../mdc-progress-spinner/progress-spinner-theme';
@@ -50,7 +49,7 @@
     @include form-field-theme.theme($theme-or-color-config);
     @include input-theme.theme($theme-or-color-config);
     @include tabs-theme.theme($theme-or-color-config);
-    @include tooltip-theme.theme($theme-or-color-config);
+    @include mat.tooltip-theme($theme-or-color-config);
   }
 }
 

src/material-experimental/mdc-core/typography/_all-typography.import.scss

@@ -74,7 +74,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
-@forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
 @forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;

src/material-experimental/mdc-paginator/BUILD.bazel

@@ -19,8 +19,8 @@ ng_module(
     deps = [
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-select",
-        "//src/material-experimental/mdc-tooltip",
         "//src/material/paginator",
+        "//src/material/tooltip",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",  # TODO(jelbourn): transitive dep via generated code

src/material-experimental/mdc-paginator/module.ts

@@ -11,7 +11,7 @@ import {NgModule} from '@angular/core';
 import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
-import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatPaginator} from './paginator';
 
 @NgModule({