Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/CODEOWNERS
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions .ng-dev/commit-message.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export const commitMessage: CommitMessageConfig = {
'material/testing',
'material/theming',
'material/toolbar',
'material/legacy-tooltip',
'material/tooltip',
'material/tree',
'youtube-player',
Expand Down
8 changes: 4 additions & 4 deletions src/components-examples/material/tooltip/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
],
Expand Down
4 changes: 2 additions & 2 deletions src/components-examples/material/tooltip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -51,7 +51,7 @@ const EXAMPLES = [
MatCheckboxModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
MatLegacyTooltipModule,
ReactiveFormsModule,
ScrollingModule, // Required for the auto-scrolling example
],
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
16 changes: 8 additions & 8 deletions src/components-examples/material/tooltip/tooltip-harness/tooltip-harness-example.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -12,7 +12,7 @@ describe('TooltipHarnessExample', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatTooltipModule, NoopAnimationsModule],
imports: [MatLegacyTooltipModule, NoopAnimationsModule],
declarations: [TooltipHarnessExample],
}).compileComponents();
fixture = TestBed.createComponent(TooltipHarnessExample);
Expand All @@ -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);
Expand All @@ -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('');
});
});
5 changes: 4 additions & 1 deletion ...-examples/material/tooltip/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/mdc-tooltip/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
],
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 0 additions & 2 deletions src/material-experimental/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 0 additions & 2 deletions src/material-experimental/config.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ entryPoints = [
"mdc-table/testing",
"mdc-tabs",
"mdc-tabs/testing",
"mdc-tooltip",
"mdc-tooltip/testing",
"menubar",
"popover-edit",
"selection",
Expand Down
1 change: 0 additions & 1 deletion src/material-experimental/mdc-core/color/_all-color.import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-*;
Expand Down
1 change: 0 additions & 1 deletion src/material-experimental/mdc-core/density/_all-density.import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-*;
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-core/theming/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
],
)

Expand Down
2 changes: 0 additions & 2 deletions src/material-experimental/mdc-core/theming/_all-theme.import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-*;
Expand All @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions src/material-experimental/mdc-core/theming/_all-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
}

Expand Down
1 change: 0 additions & 1 deletion src/material-experimental/mdc-core/typography/_all-typography.import.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-*;
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-paginator/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-paginator/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
76 changes: 0 additions & 76 deletions src/material-experimental/mdc-tooltip/BUILD.bazel
View file
Open in desktop

This file was deleted.

Loading