diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index caba5eb81526..c0a4558771bd 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -4,7 +4,7 @@ /src/material/badge/** @jelbourn /src/material/bottom-sheet/** @jelbourn @crisbeto /src/material/button-toggle/** @andrewseguin -/src/material/button/** @andrewseguin +/src/material/legacy-button/** @andrewseguin /src/material/legacy-card/** @andrewseguin /src/material/legacy-checkbox/** @andrewseguin @devversion /src/material/legacy-chips/** @andrewseguin @@ -111,7 +111,7 @@ /src/material-experimental/* @andrewseguin /src/material-experimental/column-resize/** @andrewseguin /src/material/autocomplete/** @crisbeto -/src/material-experimental/mdc-button/** @andrewseguin +/src/material/button/** @andrewseguin /src/material/card/** @mmalerba /src/material/checkbox/** @mmalerba /src/material/chips/** @mmalerba @crisbeto @@ -319,7 +319,7 @@ /tools/public_api_guard/material/badge** @andrewseguin /tools/public_api_guard/material/bottom-sheet** @andrewseguin @crisbeto /tools/public_api_guard/material/button-toggle** @andrewseguin -/tools/public_api_guard/material/button** @andrewseguin +/tools/public_api_guard/material/legacy-button** @andrewseguin /tools/public_api_guard/material/legacy-card** @andrewseguin /tools/public_api_guard/material/legacy-checkbox** @andrewseguin @devversion /tools/public_api_guard/material/chips** @andrewseguin diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts index ded36e2cbded..39505c242cd7 100644 --- a/.ng-dev/commit-message.mts +++ b/.ng-dev/commit-message.mts @@ -40,7 +40,7 @@ export const commitMessage: CommitMessageConfig = { 'cdk/tree', 'google-maps', 'material-experimental/column-resize', - 'material-experimental/mdc-button', + 'material/button', 'material/card', 'material/checkbox', 'material-experimental/mdc-core', @@ -65,7 +65,7 @@ export const commitMessage: CommitMessageConfig = { 'material/legacy-autocomplete', 'material/badge', 'material/bottom-sheet', - 'material/button', + 'material/legacy-button', 'material/button-toggle', 'material/legacy-card', 'material/legacy-checkbox', diff --git a/integration/yarn-pnp-compat/src/app/app.module.ts b/integration/yarn-pnp-compat/src/app/app.module.ts index decbce65272d..895ff3336c71 100644 --- a/integration/yarn-pnp-compat/src/app/app.module.ts +++ b/integration/yarn-pnp-compat/src/app/app.module.ts @@ -1,13 +1,13 @@ import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, BrowserAnimationsModule, MatButtonModule], + imports: [BrowserModule, BrowserAnimationsModule, MatLegacyButtonModule], providers: [], bootstrap: [AppComponent], }) diff --git a/src/components-examples/cdk/text-field/BUILD.bazel b/src/components-examples/cdk/text-field/BUILD.bazel index 18c101935ee7..f0e676999c3a 100644 --- a/src/components-examples/cdk/text-field/BUILD.bazel +++ b/src/components-examples/cdk/text-field/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ]), deps = [ "//src/cdk/text-field", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-input", "//src/material/legacy-select", ], diff --git a/src/components-examples/cdk/text-field/index.ts b/src/components-examples/cdk/text-field/index.ts index d625776cb446..f9a70a7604ea 100644 --- a/src/components-examples/cdk/text-field/index.ts +++ b/src/components-examples/cdk/text-field/index.ts @@ -1,7 +1,7 @@ import {TextFieldModule} from '@angular/cdk/text-field'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example'; @@ -24,7 +24,7 @@ const EXAMPLES = [ imports: [ CommonModule, TextFieldModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyInputModule, MatLegacySelectModule, ], diff --git a/src/components-examples/cdk/tree/BUILD.bazel b/src/components-examples/cdk/tree/BUILD.bazel index da97ed3380ec..d80f65517a2b 100644 --- a/src/components-examples/cdk/tree/BUILD.bazel +++ b/src/components-examples/cdk/tree/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ]), deps = [ "//src/cdk/tree", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", ], ) diff --git a/src/components-examples/cdk/tree/index.ts b/src/components-examples/cdk/tree/index.ts index a7f2305695de..6dfb3aa760e4 100644 --- a/src/components-examples/cdk/tree/index.ts +++ b/src/components-examples/cdk/tree/index.ts @@ -1,6 +1,6 @@ import {CdkTreeModule} from '@angular/cdk/tree'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example'; import {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example'; @@ -10,7 +10,7 @@ export {CdkTreeFlatExample, CdkTreeNestedExample}; const EXAMPLES = [CdkTreeFlatExample, CdkTreeNestedExample]; @NgModule({ - imports: [CdkTreeModule, MatButtonModule, MatIconModule], + imports: [CdkTreeModule, MatLegacyButtonModule, MatIconModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material-experimental/mdc-card/BUILD.bazel b/src/components-examples/material-experimental/mdc-card/BUILD.bazel index f276e136724a..7f56a3350519 100644 --- a/src/components-examples/material-experimental/mdc-card/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-card/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( "**/*.css", ]), deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/card", ], ) diff --git a/src/components-examples/material-experimental/mdc-card/index.ts b/src/components-examples/material-experimental/mdc-card/index.ts index 2cd66d4a4185..04cd834b495b 100644 --- a/src/components-examples/material-experimental/mdc-card/index.ts +++ b/src/components-examples/material-experimental/mdc-card/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example'; diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel index dfaedcdf1cc3..0cf8faea8633 100644 --- a/src/components-examples/material-experimental/mdc-table/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-table/BUILD.bazel @@ -18,10 +18,10 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material-experimental/mdc-table", - "//src/material/button", "//src/material/button-toggle", "//src/material/core", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/paginator", diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts index 7cdde9f61a73..cc640f4e4c3e 100644 --- a/src/components-examples/material-experimental/mdc-table/index.ts +++ b/src/components-examples/material-experimental/mdc-table/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatRippleModule} from '@angular/material/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; @@ -118,7 +118,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCheckboxModule, MatIconModule, diff --git a/src/components-examples/material-experimental/popover-edit/BUILD.bazel b/src/components-examples/material-experimental/popover-edit/BUILD.bazel index 9682b28ac100..7b4071810d19 100644 --- a/src/components-examples/material-experimental/popover-edit/BUILD.bazel +++ b/src/components-examples/material-experimental/popover-edit/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ]), deps = [ "//src/material-experimental/popover-edit", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/legacy-list", diff --git a/src/components-examples/material-experimental/popover-edit/index.ts b/src/components-examples/material-experimental/popover-edit/index.ts index 5896571fc4b9..da317432c550 100644 --- a/src/components-examples/material-experimental/popover-edit/index.ts +++ b/src/components-examples/material-experimental/popover-edit/index.ts @@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -31,7 +31,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatIconModule, MatLegacyInputModule, diff --git a/src/components-examples/material/badge/BUILD.bazel b/src/components-examples/material/badge/BUILD.bazel index e7aa5a21781a..ad0df4051424 100644 --- a/src/components-examples/material/badge/BUILD.bazel +++ b/src/components-examples/material/badge/BUILD.bazel @@ -17,8 +17,8 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/badge", "//src/material/badge/testing", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", "@npm//@types/jasmine", diff --git a/src/components-examples/material/badge/index.ts b/src/components-examples/material/badge/index.ts index 19d59070a97b..1ead04931e84 100644 --- a/src/components-examples/material/badge/index.ts +++ b/src/components-examples/material/badge/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {MatBadgeModule} from '@angular/material/badge'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {BadgeOverviewExample} from './badge-overview/badge-overview-example'; import {BadgeHarnessExample} from './badge-harness/badge-harness-example'; @@ -10,7 +10,7 @@ export {BadgeOverviewExample, BadgeHarnessExample}; const EXAMPLES = [BadgeOverviewExample, BadgeHarnessExample]; @NgModule({ - imports: [MatBadgeModule, MatButtonModule, MatIconModule], + imports: [MatBadgeModule, MatLegacyButtonModule, MatIconModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/bottom-sheet/BUILD.bazel b/src/components-examples/material/bottom-sheet/BUILD.bazel index de008a3b6873..57ae9df0e63a 100644 --- a/src/components-examples/material/bottom-sheet/BUILD.bazel +++ b/src/components-examples/material/bottom-sheet/BUILD.bazel @@ -18,7 +18,7 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/bottom-sheet", "//src/material/bottom-sheet/testing", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-list", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/bottom-sheet/index.ts b/src/components-examples/material/bottom-sheet/index.ts index adec0b5c174e..8768bf49b9d3 100644 --- a/src/components-examples/material/bottom-sheet/index.ts +++ b/src/components-examples/material/bottom-sheet/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyListModule} from '@angular/material/legacy-list'; import { BottomSheetOverviewExample, @@ -17,7 +17,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [MatBottomSheetModule, MatButtonModule, MatLegacyListModule], + imports: [MatBottomSheetModule, MatLegacyButtonModule, MatLegacyListModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/button/BUILD.bazel b/src/components-examples/material/button/BUILD.bazel index c535f58d8b7c..18cca5e59144 100644 --- a/src/components-examples/material/button/BUILD.bazel +++ b/src/components-examples/material/button/BUILD.bazel @@ -15,10 +15,10 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", - "//src/material/button/testing", "//src/material/divider", "//src/material/icon", + "//src/material/legacy-button", + "//src/material/legacy-button/testing", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", "@npm//@types/jasmine", @@ -41,8 +41,8 @@ ng_test_library( ":button", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", - "//src/material/button/testing", + "//src/material/legacy-button", + "//src/material/legacy-button/testing", "@npm//@angular/platform-browser-dynamic", ], ) diff --git a/src/components-examples/material/button/button-harness/button-harness-example.spec.ts b/src/components-examples/material/button/button-harness/button-harness-example.spec.ts index 6384afff3811..c8fa83e414a1 100644 --- a/src/components-examples/material/button/button-harness/button-harness-example.spec.ts +++ b/src/components-examples/material/button/button-harness/button-harness-example.spec.ts @@ -1,8 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatButtonHarness} from '@angular/material/button/testing'; +import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing'; import {HarnessLoader} from '@angular/cdk/testing'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {ButtonHarnessExample} from './button-harness-example'; describe('ButtonHarnessExample', () => { @@ -11,7 +11,7 @@ describe('ButtonHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatButtonModule], + imports: [MatLegacyButtonModule], declarations: [ButtonHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(ButtonHarnessExample); @@ -20,18 +20,20 @@ describe('ButtonHarnessExample', () => { }); it('should load all button harnesses', async () => { - const buttons = await loader.getAllHarnesses(MatButtonHarness); + const buttons = await loader.getAllHarnesses(MatLegacyButtonHarness); expect(buttons.length).toBe(1); }); it('should load button with exact text', async () => { - const buttons = await loader.getAllHarnesses(MatButtonHarness.with({text: 'Basic button'})); + const buttons = await loader.getAllHarnesses( + MatLegacyButtonHarness.with({text: 'Basic button'}), + ); expect(buttons.length).toBe(1); expect(await buttons[0].getText()).toBe('Basic button'); }); it('should click a button', async () => { - const button = await loader.getHarness(MatButtonHarness.with({text: 'Basic button'})); + const button = await loader.getHarness(MatLegacyButtonHarness.with({text: 'Basic button'})); expect(fixture.componentInstance.clicked).toBe(false); await button.click(); expect(fixture.componentInstance.clicked).toBe(true); diff --git a/src/components-examples/material/button/button-harness/button-harness-example.ts b/src/components-examples/material/button/button-harness/button-harness-example.ts index 79f67cf3b0df..c6565313ef59 100644 --- a/src/components-examples/material/button/button-harness/button-harness-example.ts +++ b/src/components-examples/material/button/button-harness/button-harness-example.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; /** - * @title Testing with MatButtonHarness + * @title Testing with MatLegacyButtonHarness */ @Component({ selector: 'button-harness-example', diff --git a/src/components-examples/material/button/index.ts b/src/components-examples/material/button/index.ts index bb13ae3729f2..c1ef653f6234 100644 --- a/src/components-examples/material/button/index.ts +++ b/src/components-examples/material/button/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; import {ButtonOverviewExample} from './button-overview/button-overview-example'; @@ -11,7 +11,7 @@ export {ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample}; const EXAMPLES = [ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample]; @NgModule({ - imports: [MatButtonModule, MatDividerModule, MatIconModule], + imports: [MatLegacyButtonModule, MatDividerModule, MatIconModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel index 2629b622dfc7..5c236b2f4989 100644 --- a/src/components-examples/material/card/BUILD.bazel +++ b/src/components-examples/material/card/BUILD.bazel @@ -15,9 +15,9 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", - "//src/material/button/testing", "//src/material/divider", + "//src/material/legacy-button", + "//src/material/legacy-button/testing", "//src/material/legacy-card", "//src/material/legacy-card/testing", "//src/material/legacy-progress-bar", @@ -43,7 +43,7 @@ ng_test_library( ":card", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button/testing", + "//src/material/legacy-button/testing", "//src/material/legacy-card", "//src/material/legacy-card/testing", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts index a86229645593..b3589b4b5906 100644 --- a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts +++ b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts @@ -1,6 +1,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatButtonHarness} from '@angular/material/button/testing'; +import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing'; import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; @@ -36,7 +36,7 @@ describe('CardHarnessExample', () => { it('should act as a harness loader for user content', async () => { const card = await loader.getHarness(MatLegacyCardHarness.with({title: 'Shiba Inu'})); - const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? []; + const footerSubcomponents = (await card.getAllHarnesses(MatLegacyButtonHarness)) ?? []; expect(footerSubcomponents.length).toBe(2); }); }); diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts index 6301affbe18e..82e1500326ba 100644 --- a/src/components-examples/material/card/index.ts +++ b/src/components-examples/material/card/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatDividerModule} from '@angular/material/divider'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; @@ -32,7 +32,12 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule], + imports: [ + MatLegacyButtonModule, + MatLegacyCardModule, + MatDividerModule, + MatLegacyProgressBarModule, + ], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/chips/BUILD.bazel b/src/components-examples/material/chips/BUILD.bazel index 539f88e94a84..62981804512b 100644 --- a/src/components-examples/material/chips/BUILD.bazel +++ b/src/components-examples/material/chips/BUILD.bazel @@ -16,9 +16,9 @@ ng_module( "//src/cdk/drag-drop", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", "//src/material/legacy-autocomplete", + "//src/material/legacy-button", "//src/material/legacy-chips", "//src/material/legacy-chips/testing", "//src/material/legacy-form-field", diff --git a/src/components-examples/material/chips/index.ts b/src/components-examples/material/chips/index.ts index 1ef35dc08f98..53c5df7b3474 100644 --- a/src/components-examples/material/chips/index.ts +++ b/src/components-examples/material/chips/index.ts @@ -14,7 +14,7 @@ import {ChipsStackedExample} from './chips-stacked/chips-stacked-example'; import {ChipsHarnessExample} from './chips-harness/chips-harness-example'; import {ChipsFormControlExample} from './chips-form-control/chips-form-control-example'; import {ChipsAvatarExample} from './chips-avatar/chips-avatar-example'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; export { ChipsAutocompleteExample, @@ -43,7 +43,7 @@ const EXAMPLES = [ CommonModule, DragDropModule, MatLegacyAutocompleteModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyChipsModule, MatIconModule, MatLegacyFormFieldModule, diff --git a/src/components-examples/material/core/BUILD.bazel b/src/components-examples/material/core/BUILD.bazel index ceb896031c56..9f764b7b93ea 100644 --- a/src/components-examples/material/core/BUILD.bazel +++ b/src/components-examples/material/core/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( "**/*.css", ]), deps = [ - "//src/material/button", "//src/material/core", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "@npm//@angular/forms", diff --git a/src/components-examples/material/core/index.ts b/src/components-examples/material/core/index.ts index 073c72feda7e..6759a257ddb9 100644 --- a/src/components-examples/material/core/index.ts +++ b/src/components-examples/material/core/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatRippleModule} from '@angular/material/core'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -13,7 +13,7 @@ const EXAMPLES = [ElevationOverviewExample, RippleOverviewExample]; @NgModule({ imports: [ - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyInputModule, MatRippleModule, diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel index 82246fd044d6..177fbbaccf66 100644 --- a/src/components-examples/material/datepicker/BUILD.bazel +++ b/src/components-examples/material/datepicker/BUILD.bazel @@ -16,11 +16,11 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material-moment-adapter", - "//src/material/button", "//src/material/core", "//src/material/datepicker", "//src/material/datepicker/testing", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-input", "@npm//@angular/forms", diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts index 48b48a614d13..d0a7515e4860 100644 --- a/src/components-examples/material/datepicker/index.ts +++ b/src/components-examples/material/datepicker/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; @@ -95,7 +95,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatDatepickerModule, MatLegacyInputModule, diff --git a/src/components-examples/material/dialog/BUILD.bazel b/src/components-examples/material/dialog/BUILD.bazel index 5af77bf39268..e7e2459c57fd 100644 --- a/src/components-examples/material/dialog/BUILD.bazel +++ b/src/components-examples/material/dialog/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-dialog", "//src/material/legacy-dialog/testing", "//src/material/legacy-input", diff --git a/src/components-examples/material/dialog/index.ts b/src/components-examples/material/dialog/index.ts index 5f226f12bb95..10d967c16e37 100644 --- a/src/components-examples/material/dialog/index.ts +++ b/src/components-examples/material/dialog/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; @@ -63,7 +63,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyDialogModule, MatLegacyInputModule, MatLegacyMenuModule, diff --git a/src/components-examples/material/expansion/BUILD.bazel b/src/components-examples/material/expansion/BUILD.bazel index bceb514c6edc..95e912ae9b8d 100644 --- a/src/components-examples/material/expansion/BUILD.bazel +++ b/src/components-examples/material/expansion/BUILD.bazel @@ -15,11 +15,11 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/datepicker", "//src/material/expansion", "//src/material/expansion/testing", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-input", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/expansion/index.ts b/src/components-examples/material/expansion/index.ts index c3832dbfc344..c5f896a233c3 100644 --- a/src/components-examples/material/expansion/index.ts +++ b/src/components-examples/material/expansion/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/core'; import {MatExpansionModule} from '@angular/material/expansion'; @@ -26,7 +26,7 @@ const EXAMPLES = [ @NgModule({ imports: [ - MatButtonModule, + MatLegacyButtonModule, MatDatepickerModule, MatNativeDateModule, MatExpansionModule, diff --git a/src/components-examples/material/form-field/BUILD.bazel b/src/components-examples/material/form-field/BUILD.bazel index 3e768c46ff21..90025cec4703 100644 --- a/src/components-examples/material/form-field/BUILD.bazel +++ b/src/components-examples/material/form-field/BUILD.bazel @@ -15,12 +15,12 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/form-field", "//src/material/form-field/testing", "//src/material/icon", "//src/material/input", "//src/material/input/testing", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-radio", "//src/material/select", diff --git a/src/components-examples/material/form-field/index.ts b/src/components-examples/material/form-field/index.ts index 4f47fb0e35ce..2f5b4fc723af 100644 --- a/src/components-examples/material/form-field/index.ts +++ b/src/components-examples/material/form-field/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatIconModule} from '@angular/material/icon'; @@ -49,7 +49,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatFormFieldModule, MatIconModule, diff --git a/src/components-examples/material/input/BUILD.bazel b/src/components-examples/material/input/BUILD.bazel index 18a85f450c8d..cba7b3d7a0ef 100644 --- a/src/components-examples/material/input/BUILD.bazel +++ b/src/components-examples/material/input/BUILD.bazel @@ -15,8 +15,8 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-input", "//src/material/legacy-input/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/input/index.ts b/src/components-examples/material/input/index.ts index af1d2ef59914..684ef52759e5 100644 --- a/src/components-examples/material/input/index.ts +++ b/src/components-examples/material/input/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {InputClearableExample} from './input-clearable/input-clearable-example'; @@ -38,7 +38,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatIconModule, MatLegacyInputModule, FormsModule, diff --git a/src/components-examples/material/menu/BUILD.bazel b/src/components-examples/material/menu/BUILD.bazel index 7cf558e9b2ef..8b6efe0be8c5 100644 --- a/src/components-examples/material/menu/BUILD.bazel +++ b/src/components-examples/material/menu/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( "//src/cdk/overlay", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-menu", "//src/material/legacy-menu/testing", "@npm//@angular/platform-browser", diff --git a/src/components-examples/material/menu/index.ts b/src/components-examples/material/menu/index.ts index d0e436d4258d..47c6be61c427 100644 --- a/src/components-examples/material/menu/index.ts +++ b/src/components-examples/material/menu/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; import {MenuIconsExample} from './menu-icons/menu-icons-example'; @@ -25,7 +25,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [MatButtonModule, MatIconModule, MatLegacyMenuModule], + imports: [MatLegacyButtonModule, MatIconModule, MatLegacyMenuModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/sidenav/BUILD.bazel b/src/components-examples/material/sidenav/BUILD.bazel index e59545343d9e..6fbbb0f2ed1d 100644 --- a/src/components-examples/material/sidenav/BUILD.bazel +++ b/src/components-examples/material/sidenav/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( "//src/cdk/layout", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-list", "//src/material/legacy-radio", diff --git a/src/components-examples/material/sidenav/index.ts b/src/components-examples/material/sidenav/index.ts index d3177169f00f..0fcd648cc801 100644 --- a/src/components-examples/material/sidenav/index.ts +++ b/src/components-examples/material/sidenav/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyListModule} from '@angular/material/legacy-list'; @@ -53,7 +53,7 @@ const EXAMPLES = [ imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatIconModule, MatLegacyListModule, diff --git a/src/components-examples/material/slide-toggle/BUILD.bazel b/src/components-examples/material/slide-toggle/BUILD.bazel index b28afd2bef43..9d681c98a07c 100644 --- a/src/components-examples/material/slide-toggle/BUILD.bazel +++ b/src/components-examples/material/slide-toggle/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-checkbox", "//src/material/legacy-radio", diff --git a/src/components-examples/material/slide-toggle/index.ts b/src/components-examples/material/slide-toggle/index.ts index 0298751c7173..59dbf324e54b 100644 --- a/src/components-examples/material/slide-toggle/index.ts +++ b/src/components-examples/material/slide-toggle/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -27,7 +27,7 @@ const EXAMPLES = [ @NgModule({ imports: [ FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyCheckboxModule, MatLegacyRadioModule, diff --git a/src/components-examples/material/snack-bar/BUILD.bazel b/src/components-examples/material/snack-bar/BUILD.bazel index a8b3f60f8ea1..9a7af8625f35 100644 --- a/src/components-examples/material/snack-bar/BUILD.bazel +++ b/src/components-examples/material/snack-bar/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-input", "//src/material/legacy-select", "//src/material/snack-bar", diff --git a/src/components-examples/material/snack-bar/index.ts b/src/components-examples/material/snack-bar/index.ts index f6f1cc1325c9..642f4f042029 100644 --- a/src/components-examples/material/snack-bar/index.ts +++ b/src/components-examples/material/snack-bar/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatSnackBarModule} from '@angular/material/snack-bar'; @@ -30,7 +30,7 @@ const EXAMPLES = [ @NgModule({ imports: [ FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyInputModule, MatLegacySelectModule, MatSnackBarModule, diff --git a/src/components-examples/material/stepper/BUILD.bazel b/src/components-examples/material/stepper/BUILD.bazel index 807789ab4551..48d117c22901 100644 --- a/src/components-examples/material/stepper/BUILD.bazel +++ b/src/components-examples/material/stepper/BUILD.bazel @@ -17,8 +17,8 @@ ng_module( "//src/cdk/stepper", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-input", "//src/material/legacy-radio", "//src/material/stepper", diff --git a/src/components-examples/material/stepper/index.ts b/src/components-examples/material/stepper/index.ts index 4542b1b68fa0..2e6da65480b0 100644 --- a/src/components-examples/material/stepper/index.ts +++ b/src/components-examples/material/stepper/index.ts @@ -1,7 +1,7 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -55,7 +55,7 @@ const EXAMPLES = [ @NgModule({ imports: [ FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatIconModule, MatLegacyInputModule, MatLegacyRadioModule, diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel index 7394995d8b05..a5c9906776bc 100644 --- a/src/components-examples/material/table/BUILD.bazel +++ b/src/components-examples/material/table/BUILD.bazel @@ -17,10 +17,10 @@ ng_module( "//src/cdk/table", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/button-toggle", "//src/material/core", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/paginator", diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index a69365259924..20a42015084c 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatRippleModule} from '@angular/material/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; @@ -115,7 +115,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCheckboxModule, MatIconModule, diff --git a/src/components-examples/material/tabs/BUILD.bazel b/src/components-examples/material/tabs/BUILD.bazel index 5f5916f1df24..16bf55f6c1db 100644 --- a/src/components-examples/material/tabs/BUILD.bazel +++ b/src/components-examples/material/tabs/BUILD.bazel @@ -15,9 +15,9 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/button-toggle", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/tabs", diff --git a/src/components-examples/material/tabs/index.ts b/src/components-examples/material/tabs/index.ts index 9114294f91f6..b4badeaece56 100644 --- a/src/components-examples/material/tabs/index.ts +++ b/src/components-examples/material/tabs/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; @@ -59,7 +59,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCheckboxModule, MatIconModule, diff --git a/src/components-examples/material/toolbar/BUILD.bazel b/src/components-examples/material/toolbar/BUILD.bazel index 7a8a564d5c37..37e7160832d2 100644 --- a/src/components-examples/material/toolbar/BUILD.bazel +++ b/src/components-examples/material/toolbar/BUILD.bazel @@ -15,8 +15,8 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/toolbar", "//src/material/toolbar/testing", "@npm//@angular/platform-browser", diff --git a/src/components-examples/material/toolbar/index.ts b/src/components-examples/material/toolbar/index.ts index 2fc3a3dcbdb5..06fd874b1558 100644 --- a/src/components-examples/material/toolbar/index.ts +++ b/src/components-examples/material/toolbar/index.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {MatToolbarModule} from '@angular/material/toolbar'; import {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example'; @@ -17,7 +17,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [MatButtonModule, MatIconModule, MatToolbarModule], + imports: [MatLegacyButtonModule, MatIconModule, MatToolbarModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/tooltip/BUILD.bazel b/src/components-examples/material/tooltip/BUILD.bazel index 8572bcd2fa36..eab4d1f36912 100644 --- a/src/components-examples/material/tooltip/BUILD.bazel +++ b/src/components-examples/material/tooltip/BUILD.bazel @@ -16,7 +16,7 @@ ng_module( "//src/cdk/scrolling", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/legacy-select", diff --git a/src/components-examples/material/tooltip/index.ts b/src/components-examples/material/tooltip/index.ts index 4ad892a840eb..01c724cd26c8 100644 --- a/src/components-examples/material/tooltip/index.ts +++ b/src/components-examples/material/tooltip/index.ts @@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; import {ScrollingModule} from '@angular/cdk/scrolling'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; @@ -50,7 +50,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyInputModule, MatLegacySelectModule, diff --git a/src/components-examples/material/tree/BUILD.bazel b/src/components-examples/material/tree/BUILD.bazel index 5b4447517baf..447a86e92383 100644 --- a/src/components-examples/material/tree/BUILD.bazel +++ b/src/components-examples/material/tree/BUILD.bazel @@ -15,8 +15,8 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/legacy-progress-bar", diff --git a/src/components-examples/material/tree/index.ts b/src/components-examples/material/tree/index.ts index 396dd07818ce..f8a4fe898071 100644 --- a/src/components-examples/material/tree/index.ts +++ b/src/components-examples/material/tree/index.ts @@ -1,6 +1,6 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -34,7 +34,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatIconModule, MatLegacyInputModule, diff --git a/src/dev-app/autocomplete/BUILD.bazel b/src/dev-app/autocomplete/BUILD.bazel index 47e732fd6ddd..0cf180c1e6f3 100644 --- a/src/dev-app/autocomplete/BUILD.bazel +++ b/src/dev-app/autocomplete/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":autocomplete_demo_scss", ], deps = [ - "//src/material/button", "//src/material/legacy-autocomplete", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index 67c8c13f92eb..2c7f2d498741 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -10,7 +10,7 @@ import {Component, ViewChild} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms'; import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -36,7 +36,7 @@ export interface StateGroup { CommonModule, FormsModule, MatLegacyAutocompleteModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyFormFieldModule, MatLegacyInputModule, diff --git a/src/dev-app/badge/BUILD.bazel b/src/dev-app/badge/BUILD.bazel index 5b8ad1ea694a..77f6f1092c2d 100644 --- a/src/dev-app/badge/BUILD.bazel +++ b/src/dev-app/badge/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/material/badge", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/badge/badge-demo.ts b/src/dev-app/badge/badge-demo.ts index 43e2552e0428..2e6295ded2fc 100644 --- a/src/dev-app/badge/badge-demo.ts +++ b/src/dev-app/badge/badge-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatBadgeModule} from '@angular/material/badge'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; @Component({ @@ -18,7 +18,7 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: 'badge-demo.html', styleUrls: ['badge-demo.css'], standalone: true, - imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule], + imports: [CommonModule, FormsModule, MatBadgeModule, MatLegacyButtonModule, MatIconModule], }) export class BadgeDemo { visible = true; diff --git a/src/dev-app/bottom-sheet/BUILD.bazel b/src/dev-app/bottom-sheet/BUILD.bazel index 4f394b3b46e6..e8205786208d 100644 --- a/src/dev-app/bottom-sheet/BUILD.bazel +++ b/src/dev-app/bottom-sheet/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/material/bottom-sheet", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index 664ef88c9829..63c36a49bd86 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -15,7 +15,7 @@ import { MatBottomSheetModule, MatBottomSheetRef, } from '@angular/material/bottom-sheet'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; @@ -35,7 +35,7 @@ const defaultConfig = new MatBottomSheetConfig(); CommonModule, FormsModule, MatBottomSheetModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyCheckboxModule, MatLegacyFormFieldModule, diff --git a/src/dev-app/button/BUILD.bazel b/src/dev-app/button/BUILD.bazel index a3ef67d45f42..b7378f842a4d 100644 --- a/src/dev-app/button/BUILD.bazel +++ b/src/dev-app/button/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/components-examples/material/button", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", ], ) diff --git a/src/dev-app/button/button-demo.ts b/src/dev-app/button/button-demo.ts index 25a0e75aefc6..a0c10eaa75a3 100644 --- a/src/dev-app/button/button-demo.ts +++ b/src/dev-app/button/button-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {ButtonExamplesModule} from '@angular/components-examples/material/button'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; @Component({ @@ -16,7 +16,7 @@ import {MatIconModule} from '@angular/material/icon'; templateUrl: 'button-demo.html', styleUrls: ['button-demo.css'], standalone: true, - imports: [ButtonExamplesModule, MatButtonModule, MatIconModule], + imports: [ButtonExamplesModule, MatLegacyButtonModule, MatIconModule], }) export class ButtonDemo { isDisabled: boolean = false; diff --git a/src/dev-app/card/BUILD.bazel b/src/dev-app/card/BUILD.bazel index ca5fcd850d18..ad980483a2a5 100644 --- a/src/dev-app/card/BUILD.bazel +++ b/src/dev-app/card/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":card_demo_scss", ], deps = [ - "//src/material/button", "//src/material/divider", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-progress-bar", ], diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts index fb85c3b6fbd7..2691b3ab910e 100644 --- a/src/dev-app/card/card-demo.ts +++ b/src/dev-app/card/card-demo.ts @@ -7,7 +7,7 @@ */ import {Component} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatDividerModule} from '@angular/material/divider'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; @@ -17,7 +17,12 @@ import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar' templateUrl: 'card-demo.html', styleUrls: ['card-demo.css'], standalone: true, - imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule], + imports: [ + MatLegacyButtonModule, + MatLegacyCardModule, + MatDividerModule, + MatLegacyProgressBarModule, + ], }) export class CardDemo { longText = diff --git a/src/dev-app/chips/BUILD.bazel b/src/dev-app/chips/BUILD.bazel index dfe2fbc3a7b2..f2b0a9781353 100644 --- a/src/dev-app/chips/BUILD.bazel +++ b/src/dev-app/chips/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":chips_demo_scss", ], deps = [ - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-checkbox", "//src/material/legacy-chips", diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts index b4dda715989a..d383c2a933ce 100644 --- a/src/dev-app/chips/chips-demo.ts +++ b/src/dev-app/chips/chips-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {COMMA, ENTER} from '@angular/cdk/keycodes'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyChipInputEvent, MatLegacyChipsModule} from '@angular/material/legacy-chips'; @@ -36,7 +36,7 @@ export interface DemoColor { imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyCheckboxModule, MatLegacyChipsModule, diff --git a/src/dev-app/connected-overlay/BUILD.bazel b/src/dev-app/connected-overlay/BUILD.bazel index 9a13b65e0ca8..86e698838d48 100644 --- a/src/dev-app/connected-overlay/BUILD.bazel +++ b/src/dev-app/connected-overlay/BUILD.bazel @@ -14,7 +14,7 @@ ng_module( "//src/cdk/overlay", "//src/cdk/portal", "//src/components-examples/cdk/overlay", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-radio", "@npm//@angular/forms", diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts index 7e6e7a8f9e81..213fc606e968 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo.ts +++ b/src/dev-app/connected-overlay/connected-overlay-demo.ts @@ -26,7 +26,7 @@ import { ViewEncapsulation, } from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -40,7 +40,7 @@ import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; CdkOverlayExamplesModule, CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyRadioModule, OverlayModule, diff --git a/src/dev-app/datepicker/BUILD.bazel b/src/dev-app/datepicker/BUILD.bazel index 118b54216ee8..f5612da83d46 100644 --- a/src/dev-app/datepicker/BUILD.bazel +++ b/src/dev-app/datepicker/BUILD.bazel @@ -12,10 +12,10 @@ ng_module( ":custom_header_scss", ], deps = [ - "//src/material/button", "//src/material/core", "//src/material/datepicker", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index 502c771f28ee..58c4e77a9d5f 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/src/dev-app/datepicker/datepicker-demo.ts @@ -20,7 +20,7 @@ import { } from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import { DateAdapter, @@ -185,7 +185,7 @@ export class CustomHeaderNgContent { imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatDatepickerModule, MatLegacyFormFieldModule, diff --git a/src/dev-app/dev-app/BUILD.bazel b/src/dev-app/dev-app/BUILD.bazel index d7e0f048c38b..8afe2028b4db 100644 --- a/src/dev-app/dev-app/BUILD.bazel +++ b/src/dev-app/dev-app/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/cdk/bidi", "//src/cdk/overlay", - "//src/material/button", "//src/material/core", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-list", "//src/material/sidenav", "//src/material/toolbar", diff --git a/src/dev-app/dev-app/dev-app-404.ts b/src/dev-app/dev-app/dev-app-404.ts index 538503bcab0a..512863ebe188 100644 --- a/src/dev-app/dev-app/dev-app-404.ts +++ b/src/dev-app/dev-app/dev-app-404.ts @@ -7,7 +7,7 @@ */ import {Component} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {RouterModule} from '@angular/router'; @Component({ @@ -18,6 +18,6 @@ import {RouterModule} from '@angular/router'; `, host: {'class': 'mat-typography'}, standalone: true, - imports: [MatButtonModule, RouterModule], + imports: [MatLegacyButtonModule, RouterModule], }) export class DevApp404 {} diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 1dbf750a5a60..4007b57a3ccb 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -14,7 +14,7 @@ import {DevAppRippleOptions} from './ripple-options'; import {CommonModule, DOCUMENT} from '@angular/common'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatLegacyListModule} from '@angular/material/legacy-list'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {RouterModule} from '@angular/router'; import {MatIconModule} from '@angular/material/icon'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -32,7 +32,7 @@ export const ANIMATIONS_STORAGE_KEY = 'ANGULAR_COMPONENTS_ANIMATIONS_DISABLED'; standalone: true, imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatIconModule, MatLegacyListModule, MatSidenavModule, diff --git a/src/dev-app/dialog/BUILD.bazel b/src/dev-app/dialog/BUILD.bazel index f28c2caa4116..7702929ffb99 100644 --- a/src/dev-app/dialog/BUILD.bazel +++ b/src/dev-app/dialog/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ], deps = [ "//src/cdk/drag-drop", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-checkbox", "//src/material/legacy-dialog", diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index 7ff1dac9f1ca..76c8289bdacb 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -10,7 +10,7 @@ import {Component, Inject, TemplateRef, ViewChild, ViewEncapsulation} from '@ang import {DOCUMENT} from '@angular/common'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import { @@ -33,7 +33,7 @@ const defaultDialogConfig = new MatLegacyDialogConfig(); standalone: true, imports: [ FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyCheckboxModule, MatLegacyDialogModule, @@ -205,7 +205,7 @@ export class JazzDialog { `, standalone: true, - imports: [MatLegacyDialogModule, MatButtonModule], + imports: [MatLegacyDialogModule, MatLegacyButtonModule], }) export class ContentElementDialog { actionsAlignment: 'start' | 'center' | 'end'; @@ -227,7 +227,7 @@ export class ContentElementDialog { `, ], standalone: true, - imports: [MatLegacyDialogModule, MatButtonModule], + imports: [MatLegacyDialogModule, MatLegacyButtonModule], template: `

Neptune

diff --git a/src/dev-app/drawer/BUILD.bazel b/src/dev-app/drawer/BUILD.bazel index 2f91c505260d..9349aec48c18 100644 --- a/src/dev-app/drawer/BUILD.bazel +++ b/src/dev-app/drawer/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":drawer_demo_scss", ], deps = [ - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-list", "//src/material/sidenav", ], diff --git a/src/dev-app/drawer/drawer-demo.ts b/src/dev-app/drawer/drawer-demo.ts index 61da9bc65720..f50c09755b81 100644 --- a/src/dev-app/drawer/drawer-demo.ts +++ b/src/dev-app/drawer/drawer-demo.ts @@ -7,7 +7,7 @@ */ import {Component} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyListModule} from '@angular/material/legacy-list'; import {MatSidenavModule} from '@angular/material/sidenav'; @@ -16,7 +16,7 @@ import {MatSidenavModule} from '@angular/material/sidenav'; templateUrl: 'drawer-demo.html', styleUrls: ['drawer-demo.css'], standalone: true, - imports: [MatButtonModule, MatLegacyListModule, MatSidenavModule], + imports: [MatLegacyButtonModule, MatLegacyListModule, MatSidenavModule], }) export class DrawerDemo { invert = false; diff --git a/src/dev-app/expansion/BUILD.bazel b/src/dev-app/expansion/BUILD.bazel index ad498fb990aa..0b14d1031aa7 100644 --- a/src/dev-app/expansion/BUILD.bazel +++ b/src/dev-app/expansion/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/cdk/accordion", - "//src/material/button", "//src/material/expansion", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts index 1b8f393f6367..b681284e9664 100644 --- a/src/dev-app/expansion/expansion-demo.ts +++ b/src/dev-app/expansion/expansion-demo.ts @@ -10,7 +10,7 @@ import {Component, ViewChild} from '@angular/core'; import {CdkAccordionModule} from '@angular/cdk/accordion'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import { MatAccordion, @@ -32,7 +32,7 @@ import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle' CdkAccordionModule, CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatExpansionModule, MatLegacyFormFieldModule, diff --git a/src/dev-app/focus-trap/BUILD.bazel b/src/dev-app/focus-trap/BUILD.bazel index 0f13efbe079d..b8949bd54974 100644 --- a/src/dev-app/focus-trap/BUILD.bazel +++ b/src/dev-app/focus-trap/BUILD.bazel @@ -14,7 +14,7 @@ ng_module( deps = [ "//src/cdk/a11y", "//src/cdk/platform", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-dialog", "//src/material/toolbar", diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts index 66c7c93a9a98..af8ccd247294 100644 --- a/src/dev-app/focus-trap/focus-trap-demo.ts +++ b/src/dev-app/focus-trap/focus-trap-demo.ts @@ -19,7 +19,7 @@ import {A11yModule, CdkTrapFocus} from '@angular/cdk/a11y'; import {MatLegacyDialog, MatLegacyDialogModule} from '@angular/material/legacy-dialog'; import {_supportsShadowDom} from '@angular/cdk/platform'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -40,7 +40,7 @@ export class FocusTrapShadowDomDemo {} imports: [ A11yModule, CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyDialogModule, MatToolbarModule, diff --git a/src/dev-app/grid-list/BUILD.bazel b/src/dev-app/grid-list/BUILD.bazel index d49530c89615..cf81cdf6fec6 100644 --- a/src/dev-app/grid-list/BUILD.bazel +++ b/src/dev-app/grid-list/BUILD.bazel @@ -10,9 +10,9 @@ ng_module( ":grid_list_demo_scss", ], deps = [ - "//src/material/button", "//src/material/grid-list", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", ], ) diff --git a/src/dev-app/grid-list/grid-list-demo.ts b/src/dev-app/grid-list/grid-list-demo.ts index 91f80bc056b7..26edb655ce7f 100644 --- a/src/dev-app/grid-list/grid-list-demo.ts +++ b/src/dev-app/grid-list/grid-list-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatIconModule} from '@angular/material/icon'; @@ -22,7 +22,7 @@ import {MatIconModule} from '@angular/material/icon'; imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatGridListModule, MatIconModule, diff --git a/src/dev-app/input-modality/BUILD.bazel b/src/dev-app/input-modality/BUILD.bazel index 3b887b07a6ee..d31ba50f7978 100644 --- a/src/dev-app/input-modality/BUILD.bazel +++ b/src/dev-app/input-modality/BUILD.bazel @@ -8,7 +8,7 @@ ng_module( assets = ["input-modality-detector-demo.html"], deps = [ "//src/cdk/a11y", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-form-field", "//src/material/legacy-input", "//src/material/legacy-radio", diff --git a/src/dev-app/input-modality/input-modality-detector-demo.ts b/src/dev-app/input-modality/input-modality-detector-demo.ts index 4a33e800f674..589e334c5491 100644 --- a/src/dev-app/input-modality/input-modality-detector-demo.ts +++ b/src/dev-app/input-modality/input-modality-detector-demo.ts @@ -12,7 +12,7 @@ import {A11yModule, InputModality, InputModalityDetector} from '@angular/cdk/a11 import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -25,7 +25,7 @@ import {MatLegacySelectModule} from '@angular/material/legacy-select'; imports: [ A11yModule, CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyFormFieldModule, MatLegacyInputModule, MatLegacyRadioModule, diff --git a/src/dev-app/input/BUILD.bazel b/src/dev-app/input/BUILD.bazel index 3e467ecd6324..1e921389f853 100644 --- a/src/dev-app/input/BUILD.bazel +++ b/src/dev-app/input/BUILD.bazel @@ -10,9 +10,9 @@ ng_module( ":input_demo_scss", ], deps = [ - "//src/material/button", "//src/material/button-toggle", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts index 61abf17e21b1..1348d82ae50e 100644 --- a/src/dev-app/input/input-demo.ts +++ b/src/dev-app/input/input-demo.ts @@ -9,7 +9,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; @@ -34,7 +34,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCardModule, MatLegacyCheckboxModule, diff --git a/src/dev-app/list/BUILD.bazel b/src/dev-app/list/BUILD.bazel index e010b3180b5e..3da3b0e67233 100644 --- a/src/dev-app/list/BUILD.bazel +++ b/src/dev-app/list/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":list_demo_scss", ], deps = [ - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-list", ], diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts index 7d0c3eeb8003..ad9c3911ffc2 100644 --- a/src/dev-app/list/list-demo.ts +++ b/src/dev-app/list/list-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatIconModule} from '@angular/material/icon'; import { @@ -25,7 +25,7 @@ import { imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatIconModule, MatLegacyListModule, diff --git a/src/dev-app/live-announcer/BUILD.bazel b/src/dev-app/live-announcer/BUILD.bazel index b7b1420f0082..2816e75fde41 100644 --- a/src/dev-app/live-announcer/BUILD.bazel +++ b/src/dev-app/live-announcer/BUILD.bazel @@ -8,6 +8,6 @@ ng_module( assets = ["live-announcer-demo.html"], deps = [ "//src/cdk/a11y", - "//src/material/button", + "//src/material/legacy-button", ], ) diff --git a/src/dev-app/live-announcer/live-announcer-demo.ts b/src/dev-app/live-announcer/live-announcer-demo.ts index 6e46f456159b..a1bc38a85968 100644 --- a/src/dev-app/live-announcer/live-announcer-demo.ts +++ b/src/dev-app/live-announcer/live-announcer-demo.ts @@ -8,13 +8,13 @@ import {Component} from '@angular/core'; import {A11yModule, LiveAnnouncer} from '@angular/cdk/a11y'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; @Component({ selector: 'toolbar-demo', templateUrl: 'live-announcer-demo.html', standalone: true, - imports: [A11yModule, MatButtonModule], + imports: [A11yModule, MatLegacyButtonModule], }) export class LiveAnnouncerDemo { constructor(private _liveAnnouncer: LiveAnnouncer) {} diff --git a/src/dev-app/mdc-autocomplete/BUILD.bazel b/src/dev-app/mdc-autocomplete/BUILD.bazel index ed00daed99ee..3955c861450c 100644 --- a/src/dev-app/mdc-autocomplete/BUILD.bazel +++ b/src/dev-app/mdc-autocomplete/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":mdc_autocomplete_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", "//src/material/autocomplete", + "//src/material/button", "//src/material/card", "//src/material/form-field", "//src/material/input", diff --git a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts index 1092f7fa1687..4933e63a7607 100644 --- a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts +++ b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts @@ -10,7 +10,7 @@ import {Component, ViewChild} from '@angular/core'; import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MatInputModule} from '@angular/material/input'; import {Observable} from 'rxjs'; diff --git a/src/dev-app/mdc-button/BUILD.bazel b/src/dev-app/mdc-button/BUILD.bazel index b01f97e5137d..a9e694875995 100644 --- a/src/dev-app/mdc-button/BUILD.bazel +++ b/src/dev-app/mdc-button/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_button_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/icon", ], ) diff --git a/src/dev-app/mdc-button/mdc-button-demo.ts b/src/dev-app/mdc-button/mdc-button-demo.ts index a5a8fadb0d6d..7dc5f6a7e6c3 100644 --- a/src/dev-app/mdc-button/mdc-button-demo.ts +++ b/src/dev-app/mdc-button/mdc-button-demo.ts @@ -7,7 +7,7 @@ */ import {Component} from '@angular/core'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; @Component({ diff --git a/src/dev-app/mdc-card/BUILD.bazel b/src/dev-app/mdc-card/BUILD.bazel index e2759341621f..17664da81fec 100644 --- a/src/dev-app/mdc-card/BUILD.bazel +++ b/src/dev-app/mdc-card/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_card_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/card", "//src/material/checkbox", ], diff --git a/src/dev-app/mdc-card/mdc-card-demo.ts b/src/dev-app/mdc-card/mdc-card-demo.ts index 207b5f94eac6..992638cab4ef 100644 --- a/src/dev-app/mdc-card/mdc-card-demo.ts +++ b/src/dev-app/mdc-card/mdc-card-demo.ts @@ -9,7 +9,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatCardAppearance, MatCardModule} from '@angular/material/card'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; @Component({ diff --git a/src/dev-app/mdc-chips/BUILD.bazel b/src/dev-app/mdc-chips/BUILD.bazel index d33cafd52803..860d6a381dab 100644 --- a/src/dev-app/mdc-chips/BUILD.bazel +++ b/src/dev-app/mdc-chips/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_chips_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/card", "//src/material/checkbox", "//src/material/chips", diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-demo.ts index 6a9948f7f3ed..41bddfd1c992 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.ts +++ b/src/dev-app/mdc-chips/mdc-chips-demo.ts @@ -12,7 +12,7 @@ import {CommonModule} from '@angular/common'; import {ThemePalette} from '@angular/material/core'; import {MatChipInputEvent, MatChipEditedEvent, MatChipsModule} from '@angular/material/chips'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; diff --git a/src/dev-app/mdc-dialog/BUILD.bazel b/src/dev-app/mdc-dialog/BUILD.bazel index 460e6d4ccf2a..5f9907ccfb70 100644 --- a/src/dev-app/mdc-dialog/BUILD.bazel +++ b/src/dev-app/mdc-dialog/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ], deps = [ "//src/cdk/drag-drop", - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/card", "//src/material/checkbox", "//src/material/dialog", diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts index 0890f3afc373..071545813c81 100644 --- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts +++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts @@ -16,7 +16,7 @@ import { MatDialogModule, } from '@angular/material/dialog'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; diff --git a/src/dev-app/mdc-input/BUILD.bazel b/src/dev-app/mdc-input/BUILD.bazel index 7f190e807ddb..777c0c42225c 100644 --- a/src/dev-app/mdc-input/BUILD.bazel +++ b/src/dev-app/mdc-input/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/components-examples/material-experimental/mdc-form-field", - "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-tabs", "//src/material/autocomplete", + "//src/material/button", "//src/material/button-toggle", "//src/material/card", "//src/material/checkbox", diff --git a/src/dev-app/mdc-input/mdc-input-demo.ts b/src/dev-app/mdc-input/mdc-input-demo.ts index 6ff6055f4628..2ce3eace3bad 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.ts +++ b/src/dev-app/mdc-input/mdc-input-demo.ts @@ -18,7 +18,7 @@ import {CommonModule} from '@angular/common'; import {MdcFormFieldExamplesModule} from '@angular/components-examples/material-experimental/mdc-form-field'; import {MatInputModule} from '@angular/material/input'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; diff --git a/src/dev-app/mdc-list/BUILD.bazel b/src/dev-app/mdc-list/BUILD.bazel index 0b60ff60c322..9b5b0da722b5 100644 --- a/src/dev-app/mdc-list/BUILD.bazel +++ b/src/dev-app/mdc-list/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_list_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/icon", "//src/material/list", ], diff --git a/src/dev-app/mdc-list/mdc-list-demo.ts b/src/dev-app/mdc-list/mdc-list-demo.ts index 508a084d087d..ae131cc067bf 100644 --- a/src/dev-app/mdc-list/mdc-list-demo.ts +++ b/src/dev-app/mdc-list/mdc-list-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatListModule, MatListOptionCheckboxPosition} from '@angular/material/list'; import {MatIconModule} from '@angular/material/icon'; import {CommonModule} from '@angular/common'; diff --git a/src/dev-app/mdc-menu/BUILD.bazel b/src/dev-app/mdc-menu/BUILD.bazel index f829b57b1ea5..1922561d518b 100644 --- a/src/dev-app/mdc-menu/BUILD.bazel +++ b/src/dev-app/mdc-menu/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_menu_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/divider", "//src/material/icon", "//src/material/menu", diff --git a/src/dev-app/mdc-menu/mdc-menu-demo.ts b/src/dev-app/mdc-menu/mdc-menu-demo.ts index f1ade5ce1d23..b528313bc3e4 100644 --- a/src/dev-app/mdc-menu/mdc-menu-demo.ts +++ b/src/dev-app/mdc-menu/mdc-menu-demo.ts @@ -12,7 +12,7 @@ import {MatMenuModule} from '@angular/material/menu'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatIconModule} from '@angular/material/icon'; import {MatDividerModule} from '@angular/material/divider'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; @Component({ selector: 'mdc-menu-demo', diff --git a/src/dev-app/mdc-progress-bar/BUILD.bazel b/src/dev-app/mdc-progress-bar/BUILD.bazel index e7870e4a5362..74f64b50d4ab 100644 --- a/src/dev-app/mdc-progress-bar/BUILD.bazel +++ b/src/dev-app/mdc-progress-bar/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_progress_bar_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/button-toggle", "//src/material/progress-bar", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts b/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts index 7060944ac9f5..5c8d887b622f 100644 --- a/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts +++ b/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts @@ -11,7 +11,7 @@ import {ThemePalette} from '@angular/material/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatProgressBarModule} from '@angular/material/progress-bar'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; @Component({ diff --git a/src/dev-app/mdc-progress-spinner/BUILD.bazel b/src/dev-app/mdc-progress-spinner/BUILD.bazel index 3c50902dd2a4..75dc7802bb3e 100644 --- a/src/dev-app/mdc-progress-spinner/BUILD.bazel +++ b/src/dev-app/mdc-progress-spinner/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":mdc_progress_spinner_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-progress-spinner", + "//src/material/button", "//src/material/button-toggle", "//src/material/checkbox", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts index 8bfdb03f1273..40432f9c3820 100644 --- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts +++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {FormsModule} from '@angular/forms'; diff --git a/src/dev-app/mdc-radio/BUILD.bazel b/src/dev-app/mdc-radio/BUILD.bazel index 0472c137783d..b6936413ae04 100644 --- a/src/dev-app/mdc-radio/BUILD.bazel +++ b/src/dev-app/mdc-radio/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_radio_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/checkbox", "//src/material/radio", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-radio/mdc-radio-demo.ts b/src/dev-app/mdc-radio/mdc-radio-demo.ts index 25581ee91a47..d2426ce6cb52 100644 --- a/src/dev-app/mdc-radio/mdc-radio-demo.ts +++ b/src/dev-app/mdc-radio/mdc-radio-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {MatRadioModule} from '@angular/material/radio'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {CommonModule} from '@angular/common'; diff --git a/src/dev-app/mdc-select/BUILD.bazel b/src/dev-app/mdc-select/BUILD.bazel index d1854a5fe474..e04edc522bd2 100644 --- a/src/dev-app/mdc-select/BUILD.bazel +++ b/src/dev-app/mdc-select/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_select_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/card", "//src/material/form-field", "//src/material/icon", diff --git a/src/dev-app/mdc-select/mdc-select-demo.ts b/src/dev-app/mdc-select/mdc-select-demo.ts index 0c53622e6927..3461bf270bfc 100644 --- a/src/dev-app/mdc-select/mdc-select-demo.ts +++ b/src/dev-app/mdc-select/mdc-select-demo.ts @@ -14,7 +14,7 @@ import {FloatLabelType} from '@angular/material/form-field'; import {CommonModule} from '@angular/common'; import {MatCardModule} from '@angular/material/card'; import {MatIconModule} from '@angular/material/icon'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; /** Error any time control is invalid */ diff --git a/src/dev-app/mdc-snack-bar/BUILD.bazel b/src/dev-app/mdc-snack-bar/BUILD.bazel index 4fbc5a780176..e340c4691539 100644 --- a/src/dev-app/mdc-snack-bar/BUILD.bazel +++ b/src/dev-app/mdc-snack-bar/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/cdk/bidi", - "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-snack-bar", + "//src/material/button", "//src/material/checkbox", "//src/material/form-field", "//src/material/input", diff --git a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts index fe5a7b2816a1..6e4988dcde79 100644 --- a/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts +++ b/src/dev-app/mdc-snack-bar/mdc-snack-bar-demo.ts @@ -17,7 +17,7 @@ import { } from '@angular/material-experimental/mdc-snack-bar'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material/select'; diff --git a/src/dev-app/mdc-tooltip/BUILD.bazel b/src/dev-app/mdc-tooltip/BUILD.bazel index 173fa69dc61f..608289d60f6a 100644 --- a/src/dev-app/mdc-tooltip/BUILD.bazel +++ b/src/dev-app/mdc-tooltip/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":mdc_tooltip_demo_scss", ], deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/form-field", "//src/material/input", "//src/material/select", diff --git a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts index a36751a6b6e5..c161396d9ac4 100644 --- a/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts +++ b/src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; import {MatSelectModule} from '@angular/material/select'; diff --git a/src/dev-app/menu/BUILD.bazel b/src/dev-app/menu/BUILD.bazel index f6acf6b2a95e..e749447e51c1 100644 --- a/src/dev-app/menu/BUILD.bazel +++ b/src/dev-app/menu/BUILD.bazel @@ -10,9 +10,9 @@ ng_module( ":menu_demo_scss", ], deps = [ - "//src/material/button", "//src/material/divider", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-menu", "//src/material/toolbar", ], diff --git a/src/dev-app/menu/menu-demo.ts b/src/dev-app/menu/menu-demo.ts index 31a0ae49d19d..d7558c529486 100644 --- a/src/dev-app/menu/menu-demo.ts +++ b/src/dev-app/menu/menu-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatDividerModule} from '@angular/material/divider'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; @@ -21,7 +21,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; standalone: true, imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatDividerModule, MatIconModule, MatLegacyMenuModule, diff --git a/src/dev-app/progress-bar/BUILD.bazel b/src/dev-app/progress-bar/BUILD.bazel index 9c3a1e998c87..b0278e9c0201 100644 --- a/src/dev-app/progress-bar/BUILD.bazel +++ b/src/dev-app/progress-bar/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":progress_bar_demo_scss", ], deps = [ - "//src/material/button", "//src/material/button-toggle", + "//src/material/legacy-button", "//src/material/legacy-progress-bar", "@npm//@angular/forms", ], diff --git a/src/dev-app/progress-bar/progress-bar-demo.ts b/src/dev-app/progress-bar/progress-bar-demo.ts index 46e2cd3cc81d..84c3c7257f27 100644 --- a/src/dev-app/progress-bar/progress-bar-demo.ts +++ b/src/dev-app/progress-bar/progress-bar-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; @@ -20,7 +20,7 @@ import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar' templateUrl: 'progress-bar-demo.html', styleUrls: ['progress-bar-demo.css'], standalone: true, - imports: [FormsModule, MatButtonModule, MatButtonToggleModule, MatLegacyProgressBarModule], + imports: [FormsModule, MatLegacyButtonModule, MatButtonToggleModule, MatLegacyProgressBarModule], }) export class ProgressBarDemo { color: ThemePalette = 'primary'; diff --git a/src/dev-app/progress-spinner/BUILD.bazel b/src/dev-app/progress-spinner/BUILD.bazel index 1319fdcfc05a..1c6e4482577d 100644 --- a/src/dev-app/progress-spinner/BUILD.bazel +++ b/src/dev-app/progress-spinner/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":progress_spinner_demo_scss", ], deps = [ - "//src/material/button", "//src/material/button-toggle", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/progress-spinner", "@npm//@angular/forms", diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.ts b/src/dev-app/progress-spinner/progress-spinner-demo.ts index 80dca86fa2f4..7d13f74f45b7 100644 --- a/src/dev-app/progress-spinner/progress-spinner-demo.ts +++ b/src/dev-app/progress-spinner/progress-spinner-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {ThemePalette} from '@angular/material/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; @@ -21,7 +21,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; standalone: true, imports: [ FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCheckboxModule, MatProgressSpinnerModule, diff --git a/src/dev-app/radio/BUILD.bazel b/src/dev-app/radio/BUILD.bazel index 3818dcb63979..87b951e530f9 100644 --- a/src/dev-app/radio/BUILD.bazel +++ b/src/dev-app/radio/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":radio_demo_scss", ], deps = [ - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-radio", "@npm//@angular/forms", diff --git a/src/dev-app/radio/radio-demo.ts b/src/dev-app/radio/radio-demo.ts index ae10f58b87c5..29a409bca993 100644 --- a/src/dev-app/radio/radio-demo.ts +++ b/src/dev-app/radio/radio-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -21,7 +21,7 @@ import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyRadioModule, ], diff --git a/src/dev-app/ripple/BUILD.bazel b/src/dev-app/ripple/BUILD.bazel index 89138daf55d1..8386316056c8 100644 --- a/src/dev-app/ripple/BUILD.bazel +++ b/src/dev-app/ripple/BUILD.bazel @@ -12,8 +12,8 @@ ng_module( deps = [ "//src/components-examples/material/core", "//src/dev-app/example", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-input", "@npm//@angular/forms", diff --git a/src/dev-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts index dcf77d4ed5ba..656119e8af0d 100644 --- a/src/dev-app/ripple/ripple-demo.ts +++ b/src/dev-app/ripple/ripple-demo.ts @@ -9,7 +9,7 @@ import {Component, ViewChild} from '@angular/core'; import {CoreExamplesModule} from '@angular/components-examples/material/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatRipple} from '@angular/material/core'; import {MatIconModule} from '@angular/material/icon'; @@ -23,7 +23,7 @@ import {MatLegacyInputModule} from '@angular/material/legacy-input'; imports: [ CoreExamplesModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatIconModule, MatLegacyInputModule, diff --git a/src/dev-app/select/BUILD.bazel b/src/dev-app/select/BUILD.bazel index 6e11b9dc6861..ac65e8425c9a 100644 --- a/src/dev-app/select/BUILD.bazel +++ b/src/dev-app/select/BUILD.bazel @@ -10,8 +10,8 @@ ng_module( ":select_demo_scss", ], deps = [ - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-card", "//src/material/legacy-dialog", "//src/material/legacy-form-field", diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index ddd8ecc942ad..c99bff252604 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -9,7 +9,7 @@ import {Component, TemplateRef} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; import {MatLegacyDialog, MatLegacyDialogModule} from '@angular/material/legacy-dialog'; @@ -36,7 +36,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyDialogModule, MatLegacyFormFieldModule, diff --git a/src/dev-app/sidenav/BUILD.bazel b/src/dev-app/sidenav/BUILD.bazel index 2ff4e13f54e9..2e3a69f316e8 100644 --- a/src/dev-app/sidenav/BUILD.bazel +++ b/src/dev-app/sidenav/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":sidenav_demo_scss", ], deps = [ - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/sidenav", "//src/material/toolbar", diff --git a/src/dev-app/sidenav/sidenav-demo.ts b/src/dev-app/sidenav/sidenav-demo.ts index cb7bca96cce2..e44ede17a47a 100644 --- a/src/dev-app/sidenav/sidenav-demo.ts +++ b/src/dev-app/sidenav/sidenav-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav'; import {MatToolbarModule} from '@angular/material/toolbar'; @@ -22,7 +22,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatSidenavModule, MatToolbarModule, diff --git a/src/dev-app/slide-toggle/BUILD.bazel b/src/dev-app/slide-toggle/BUILD.bazel index 947fd95475e0..a27d082228ed 100644 --- a/src/dev-app/slide-toggle/BUILD.bazel +++ b/src/dev-app/slide-toggle/BUILD.bazel @@ -10,7 +10,7 @@ ng_module( ":slide_toggle_demo_scss", ], deps = [ - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-slide-toggle", "@npm//@angular/forms", ], diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.ts b/src/dev-app/slide-toggle/slide-toggle-demo.ts index b472994ffca6..f850da99b6a8 100644 --- a/src/dev-app/slide-toggle/slide-toggle-demo.ts +++ b/src/dev-app/slide-toggle/slide-toggle-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle'; @Component({ @@ -16,7 +16,7 @@ import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle' templateUrl: 'slide-toggle-demo.html', styleUrls: ['slide-toggle-demo.css'], standalone: true, - imports: [FormsModule, MatButtonModule, MatLegacySlideToggleModule], + imports: [FormsModule, MatLegacyButtonModule, MatLegacySlideToggleModule], }) export class SlideToggleDemo { firstToggle: boolean; diff --git a/src/dev-app/snack-bar/BUILD.bazel b/src/dev-app/snack-bar/BUILD.bazel index afd9b9ea7089..a22f27134e7b 100644 --- a/src/dev-app/snack-bar/BUILD.bazel +++ b/src/dev-app/snack-bar/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ], deps = [ "//src/cdk/bidi", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts index 0d5e558e6de7..9e1733b226a3 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.ts +++ b/src/dev-app/snack-bar/snack-bar-demo.ts @@ -10,7 +10,7 @@ import {Component, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/cor import {Directionality} from '@angular/cdk/bidi'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -32,7 +32,7 @@ import { imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyFormFieldModule, MatLegacyInputModule, diff --git a/src/dev-app/stepper/BUILD.bazel b/src/dev-app/stepper/BUILD.bazel index 2009e8a5f76a..558106d09721 100644 --- a/src/dev-app/stepper/BUILD.bazel +++ b/src/dev-app/stepper/BUILD.bazel @@ -7,8 +7,8 @@ ng_module( srcs = glob(["**/*.ts"]), assets = ["stepper-demo.html"], deps = [ - "//src/material/button", "//src/material/core", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/stepper/stepper-demo.ts b/src/dev-app/stepper/stepper-demo.ts index 425f7404aa2e..a160990495c5 100644 --- a/src/dev-app/stepper/stepper-demo.ts +++ b/src/dev-app/stepper/stepper-demo.ts @@ -16,7 +16,7 @@ import { } from '@angular/forms'; import {ThemePalette} from '@angular/material/core'; import {CommonModule} from '@angular/common'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -30,7 +30,7 @@ import {MatStepperModule} from '@angular/material/stepper'; imports: [ CommonModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCheckboxModule, MatLegacyFormFieldModule, MatLegacyInputModule, diff --git a/src/dev-app/table-scroll-container/BUILD.bazel b/src/dev-app/table-scroll-container/BUILD.bazel index c694b30ff2d1..8834e3cd13c8 100644 --- a/src/dev-app/table-scroll-container/BUILD.bazel +++ b/src/dev-app/table-scroll-container/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/cdk-experimental/table-scroll-container", - "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-table", + "//src/material/button", "//src/material/button-toggle", "//src/material/table", "@npm//@angular/common", diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts index fac45728f5c0..b39a95145d0d 100644 --- a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts +++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts @@ -9,7 +9,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {CdkTableScrollContainerModule} from '@angular/cdk-experimental/table-scroll-container'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleGroup, MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatTableModule} from '@angular/material/table'; diff --git a/src/dev-app/toolbar/BUILD.bazel b/src/dev-app/toolbar/BUILD.bazel index 9f8be5bd9cc4..e0c3490d6544 100644 --- a/src/dev-app/toolbar/BUILD.bazel +++ b/src/dev-app/toolbar/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/components-examples/material/toolbar", - "//src/material/button", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-form-field", "//src/material/legacy-input", "//src/material/legacy-select", diff --git a/src/dev-app/toolbar/toolbar-demo.ts b/src/dev-app/toolbar/toolbar-demo.ts index 9bd62d5c2839..a30b42a6dc74 100644 --- a/src/dev-app/toolbar/toolbar-demo.ts +++ b/src/dev-app/toolbar/toolbar-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {ToolbarExamplesModule} from '@angular/components-examples/material/toolbar'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; @@ -21,7 +21,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; styleUrls: ['toolbar-demo.css'], standalone: true, imports: [ - MatButtonModule, + MatLegacyButtonModule, MatLegacyFormFieldModule, MatIconModule, MatLegacyInputModule, diff --git a/src/dev-app/tree/BUILD.bazel b/src/dev-app/tree/BUILD.bazel index 988662477d5f..a41c32d2694c 100644 --- a/src/dev-app/tree/BUILD.bazel +++ b/src/dev-app/tree/BUILD.bazel @@ -14,9 +14,9 @@ ng_module( "//src/cdk/tree", "//src/components-examples/cdk/tree", "//src/components-examples/material/tree", - "//src/material/button", "//src/material/expansion", "//src/material/icon", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-form-field", "//src/material/legacy-input", diff --git a/src/dev-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts index 0e3e4e28f8f6..fea07f7506f9 100644 --- a/src/dev-app/tree/tree-demo.ts +++ b/src/dev-app/tree/tree-demo.ts @@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common'; import {CdkTreeExamplesModule} from '@angular/components-examples/cdk/tree'; import {TreeExamplesModule} from '@angular/components-examples/material/tree'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; @@ -31,7 +31,7 @@ import {MatTreeModule} from '@angular/material/tree'; CommonModule, FormsModule, TreeExamplesModule, - MatButtonModule, + MatLegacyButtonModule, MatExpansionModule, MatLegacyCheckboxModule, MatLegacyFormFieldModule, diff --git a/src/dev-app/virtual-scroll/BUILD.bazel b/src/dev-app/virtual-scroll/BUILD.bazel index c5739729a2b6..372153bd335b 100644 --- a/src/dev-app/virtual-scroll/BUILD.bazel +++ b/src/dev-app/virtual-scroll/BUILD.bazel @@ -13,7 +13,7 @@ ng_module( "//src/cdk-experimental/scrolling", "//src/cdk/scrolling", "//src/components-examples/cdk/scrolling", - "//src/material/button", + "//src/material/legacy-button", "//src/material/legacy-form-field", "//src/material/legacy-input", "//src/material/legacy-select", diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts index 49ed0b57ca86..b86ceac6f8fe 100644 --- a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts +++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts @@ -11,7 +11,7 @@ import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling' import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; @@ -34,7 +34,7 @@ type State = { CommonModule, ExperimentalScrollingModule, FormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyFormFieldModule, MatLegacyInputModule, MatLegacySelectModule, diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index 5aa4082c4d59..6ae77d4498e5 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -42,7 +42,6 @@ ng_module( "//src/cdk/testing/tests:test_components", "//src/components-examples/material-experimental/mdc-card", "//src/components-examples/private", - "//src/material-experimental/mdc-button", "//src/material-experimental/mdc-progress-spinner", "//src/material-experimental/mdc-table", "//src/material-experimental/mdc-tabs", @@ -55,6 +54,7 @@ ng_module( "//src/material/grid-list", "//src/material/icon", "//src/material/input", + "//src/material/legacy-button", "//src/material/legacy-checkbox", "//src/material/legacy-dialog", "//src/material/legacy-form-field", diff --git a/src/e2e-app/button/button-e2e-module.ts b/src/e2e-app/button/button-e2e-module.ts index e5d9edee958b..9959bb5f8eac 100644 --- a/src/e2e-app/button/button-e2e-module.ts +++ b/src/e2e-app/button/button-e2e-module.ts @@ -7,12 +7,12 @@ */ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatIconModule} from '@angular/material/icon'; import {ButtonE2E} from './button-e2e'; @NgModule({ - imports: [MatButtonModule, MatIconModule], + imports: [MatLegacyButtonModule, MatIconModule], declarations: [ButtonE2E], }) export class ButtonE2eModule {} diff --git a/src/e2e-app/mdc-button/mdc-button-e2e-module.ts b/src/e2e-app/mdc-button/mdc-button-e2e-module.ts index b301cc4806b7..6e644d572974 100644 --- a/src/e2e-app/mdc-button/mdc-button-e2e-module.ts +++ b/src/e2e-app/mdc-button/mdc-button-e2e-module.ts @@ -7,7 +7,7 @@ */ import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {MdcButtonE2e} from './mdc-button-e2e'; diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index 0fbdc9d6fbf3..529c76b9ba43 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -17,12 +17,6 @@ // MDC-related themes @forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color, mdc-core-density, mdc-core-typography; -@forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography, - mdc-button-density, mdc-button-theme; -@forward './mdc-button/fab-theme' as mdc-fab-* show mdc-fab-color, mdc-fab-typography, - mdc-fab-density, mdc-fab-theme; -@forward './mdc-button/icon-button-theme' as mdc-icon-button-* show mdc-icon-button-color, - mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme; @forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color, mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme; @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl index c14b6bd1e3c2..e50c838fc53b 100644 --- a/src/material-experimental/config.bzl +++ b/src/material-experimental/config.bzl @@ -1,7 +1,5 @@ entryPoints = [ "column-resize", - "mdc-button", - "mdc-button/testing", "mdc-core", "mdc-paginator", "mdc-paginator/testing", diff --git a/src/material-experimental/mdc-button/BUILD.bazel b/src/material-experimental/mdc-button/BUILD.bazel deleted file mode 100644 index 64298fc0e197..000000000000 --- a/src/material-experimental/mdc-button/BUILD.bazel +++ /dev/null @@ -1,129 +0,0 @@ -load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") -load( - "//tools:defaults.bzl", - "ng_e2e_test_library", - "ng_module", - "ng_test_library", - "ng_web_test_suite", - "sass_binary", - "sass_library", -) - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "mdc-button", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [ - ":button_high_contrast_scss", - ":button_scss", - ":fab_scss", - ":icon-button_scss", - ] + glob(["**/*.html"]), - deps = [ - "//src/cdk/platform", - "//src/material/core", - ], -) - -sass_library( - name = "mdc_button_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - -sass_library( - name = "button_base_scss_lib", - srcs = ["_button-base.scss"], -) - -sass_binary( - name = "button_scss", - src = "button.scss", - deps = [ - ":button_base_scss_lib", - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "button_high_contrast_scss", - src = "button-high-contrast.scss", - deps = [ - "//src/cdk:sass_lib", - ], -) - -sass_binary( - name = "fab_scss", - src = "fab.scss", - deps = [ - ":button_base_scss_lib", - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "icon-button_scss", - src = "icon-button.scss", - deps = [ - ":button_base_scss_lib", - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - -ng_test_library( - name = "button_tests_lib", - srcs = glob( - ["**/*.spec.ts"], - exclude = [ - "**/*.e2e.spec.ts", - ], - ), - deps = [ - ":mdc-button", - "//src/cdk/platform", - "//src/cdk/testing/private", - "//src/material/button", - "//src/material/core", - "@npm//@angular/platform-browser", - ], -) - -ng_web_test_suite( - name = "unit_tests", - deps = [ - ":button_tests_lib", - ], -) - -ng_e2e_test_library( - name = "e2e_test_sources", - srcs = glob(["**/*.e2e.spec.ts"]), - deps = [ - "//src/cdk/testing/private/e2e", - ], -) - -e2e_test_suite( - name = "e2e_tests", - deps = [ - ":e2e_test_sources", - "//src/cdk/testing/private/e2e", - ], -) diff --git a/src/material-experimental/mdc-button/README.md b/src/material-experimental/mdc-button/README.md deleted file mode 100644 index ca396439aafd..000000000000 --- a/src/material-experimental/mdc-button/README.md +++ /dev/null @@ -1,83 +0,0 @@ -This is a prototype of an alternate version of `MatButton` built on top of -[MDC Web](https://github.com/material-components/material-components-web). This component is -experimental and should not be used in production. - -## How to use -Assuming your application is already up and running using Angular Material, you can add this -component by following these steps: - -1. Install `@angular/material-experimental` and MDC Web: - - ```bash - npm i material-components-web @angular/material-experimental - ``` - -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is - needed for the Sass compiler to be able to find the MDC Web Sass files. - - ```json - ... - "styles": [ - "src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] - }, - ... - ``` - -3. Import the experimental `MatButtonModule` and add it to the module that declares your component: - - ```ts - import {MatButtonModule} from '@angular/material-experimental/mdc-button'; - - @NgModule({ - declarations: [MyComponent], - imports: [MatButtonModule], - }) - export class MyModule {} - ``` - -4. Use the buttons in your component's template: - - ```html - - - - - - - ``` - -5. Add the theme and typography mixins to your Sass. Note that there are three separate mixins for -the button variants: standard buttons, icon buttons, and floating action buttons. Include only the mixins of the -button variants you are using: - - ```scss - @use '@angular/material' as mat; - @use '@angular/material-experimental' as mat-experimental; - - $candy-app-primary: mat.define-palette(mat.$indigo-palette); - $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); - $candy-app-theme: mat.define-light-theme(( - color: ( - primary: $candy-app-primary, - accent: $candy-app-accent, - ) - )); - - @include mat-experimental.mdc-button-theme($candy-app-theme); - @include mat-experimental.mdc-fab-theme($candy-app-theme); - @include mat-experimental.mdc-icon-button-theme($candy-app-theme); - ``` - -## API differences - -The API of the buttons matches the one from `@angular/material/button`. Simply replace imports to -`@angular/material/button` with imports to `@angular/material-experimental/mdc-button`. diff --git a/src/material-experimental/mdc-button/_button-base.import.scss b/src/material-experimental/mdc-button/_button-base.import.scss deleted file mode 100644 index e7375e4618bf..000000000000 --- a/src/material-experimental/mdc-button/_button-base.import.scss +++ /dev/null @@ -1,4 +0,0 @@ -@forward '../../material/core/style/layout-common.import'; -@forward 'button-base'; - -@import '../../material/core/style/layout-common'; diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss deleted file mode 100644 index 24c7c05e7810..000000000000 --- a/src/material-experimental/mdc-button/_button-base.scss +++ /dev/null @@ -1,93 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@use '@material/touch-target' as mdc-touch-target; - -// Adds styles necessary to provide stateful interactions with the button. This includes providing -// content for the state container's ::before and ::after so that they can be given a background -// color and opacity for states like hover, active, and focus. Additionally, adds styles to the -// ripple and state container so that they fill the button, match the border radius, and avoid -// pointer events. -@mixin mat-private-button-interactive() { - // The ripple container should match the bounds of the entire button. - .mat-mdc-button-ripple, - .mat-mdc-button-persistent-ripple, - .mat-mdc-button-persistent-ripple::before { - @include mat.private-fill; - - // Disable pointer events for the ripple container and state overlay because the container - // will overlay the user content and we don't want to disable mouse events on the user content. - // Pointer events can be safely disabled because the ripple trigger element is the host element. - pointer-events: none; - - // Inherit the border radius from the parent so that state overlay and ripples don't exceed the - // parent button boundaries. Note that an inherited border radius does not work properly if - // the actual button element does have a border because it causes the inner content to be - // smaller. We have special logic for stroked buttons to handle this scenario. - border-radius: inherit; - } - - // We use ::before so that we can reuse some of MDC's theming. - .mat-mdc-button-persistent-ripple::before { - content: ''; - opacity: 0; - background-color: var(--mat-mdc-button-persistent-ripple-color); - } - - .mat-ripple-element { - background-color: var(--mat-mdc-button-ripple-color); - } - - // The content should appear over the state and ripple layers, otherwise they may adversely affect - // the accessibility of the text content. - .mdc-button__label { - z-index: 1; - } - - // The focus indicator should match the bounds of the entire button. - .mat-mdc-focus-indicator { - @include mat.private-fill(); - } - - &:focus .mat-mdc-focus-indicator::before { - content: ''; - } -} - -// MDC's disabled buttons define a default cursor with pointer-events none. However, they select -// :disabled for this, which does not affect anchor tags. -// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style, -// and note that having pointer-events may have unintended side-effects, e.g. allowing the user -// to click the target underneath the button. -@mixin mat-private-button-disabled() { - &[disabled] { - cursor: default; - pointer-events: none; - @content; - } -} - -@mixin mat-private-button-touch-target($is-square) { - // Element used to ensure that the button has a touch target that meets the required minimum. - // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC - // class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which - // goes against our rule of not having margins on the host node. Furthermore, having the margin on - // the button itself would require us to wrap it in another div. See: - // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible - .mat-mdc-button-touch-target { - @include mdc-touch-target.touch-target( - $set-width: $is-square, - $query: mat.$private-mdc-base-styles-query); - } -} - -// Changes a button theme to exclude the ripple styles. -@function mat-private-button-remove-ripple($theme) { - @return map.merge($theme, ( - focus-state-layer-color: null, - focus-state-layer-opacity: null, - hover-state-layer-color: null, - hover-state-layer-opacity: null, - pressed-state-layer-color: null, - pressed-state-layer-opacity: null, - )); -} diff --git a/src/material-experimental/mdc-button/_button-theme.import.scss b/src/material-experimental/mdc-button/_button-theme.import.scss deleted file mode 100644 index d80738dcef2c..000000000000 --- a/src/material-experimental/mdc-button/_button-theme.import.scss +++ /dev/null @@ -1,13 +0,0 @@ -@forward '../../material/core/ripple/ripple.import'; -@forward 'button-theme' hide color, density, theme, typography; -@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color, -mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background, -mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme, -mat-mdc-typography; -@forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target, -mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background, -mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color; -@forward 'fab-theme' as mat-mdc-fab-*; -@forward 'icon-button-theme' as mat-mdc-icon-button-*; - -@import '../../material/core/ripple/ripple'; diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss deleted file mode 100644 index e109220a0588..000000000000 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ /dev/null @@ -1,223 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@use '@material/button/button' as mdc-button; -@use '@material/button/button-theme' as mdc-button-theme; -@use '@material/button/button-text-theme' as mdc-button-text-theme; -@use '@material/button/button-filled-theme' as mdc-button-filled-theme; -@use '@material/button/button-protected-theme' as mdc-button-protected-theme; -@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme; -@use '@material/theme/theme-color' as mdc-theme-color; - -@use './button-theme-private'; - -@mixin _button-variant($color) { - @include mdc-button-text-theme.theme(( - label-text-color: $color, - )); -} - -@mixin _unelevated-button-variant($foreground, $background) { - @include mdc-button-filled-theme.theme(( - container-color: $background, - label-text-color: $foreground, - )); -} - -@mixin _raised-button-variant($foreground, $background) { - @include mdc-button-protected-theme.theme(( - container-color: $background, - label-text-color: $foreground, - )); -} - -@mixin _outlined-button-variant($color) { - @include mdc-button-outlined-theme.theme(( - label-text-color: $color, - )); -} - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - @include mat.private-using-mdc-theme($config) { - $is-dark: map.get($config, is-dark); - $on-surface: mdc-theme-color.prop-value(on-surface); - $surface: mdc-theme-color.prop-value(surface); - $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38)); - $disabled-container-color: rgba($on-surface, 0.12); - $primary: mdc-theme-color.prop-value(primary); - $on-primary: mdc-theme-color.prop-value(on-primary); - $secondary: mdc-theme-color.prop-value(secondary); - $on-secondary: mdc-theme-color.prop-value(on-secondary); - $error: mdc-theme-color.prop-value(error); - $on-error: mdc-theme-color.prop-value(on-error); - - .mat-mdc-button { - &.mat-unthemed { - @include _button-variant($on-surface); - } - - &.mat-primary { - @include _button-variant($primary); - } - - &.mat-accent { - @include _button-variant($secondary); - } - - &.mat-warn { - @include _button-variant($error); - } - - @include button-theme-private.apply-disabled-style() { - @include mdc-button-text-theme.theme(( - // We need to pass both the disabled and enabled values, because the enabled - // ones apply to anchors while the disabled ones are for buttons. - disabled-label-text-color: $disabled-ink-color, - label-text-color: $disabled-ink-color - )); - } - } - - .mat-mdc-unelevated-button { - &.mat-unthemed { - @include _unelevated-button-variant($on-surface, $surface); - } - - &.mat-primary { - @include _unelevated-button-variant($on-primary, $primary); - } - - &.mat-accent { - @include _unelevated-button-variant($on-secondary, $secondary); - } - - &.mat-warn { - @include _unelevated-button-variant($on-error, $error); - } - - @include button-theme-private.apply-disabled-style() { - @include mdc-button-filled-theme.theme(( - // We need to pass both the disabled and enabled values, because the enabled - // ones apply to anchors while the disabled ones are for buttons. - disabled-container-color: $disabled-container-color, - disabled-label-text-color: $disabled-ink-color, - container-color: $disabled-container-color, - label-text-color: $disabled-ink-color, - )); - } - } - - .mat-mdc-raised-button { - &.mat-unthemed { - @include _raised-button-variant($on-surface, $surface); - } - - &.mat-primary { - @include _raised-button-variant($on-primary, $primary); - } - - &.mat-accent { - @include _raised-button-variant($on-secondary, $secondary); - } - - &.mat-warn { - @include _raised-button-variant($on-error, $error); - } - - @include button-theme-private.apply-disabled-style() { - @include mdc-button-protected-theme.theme(( - // We need to pass both the disabled and enabled values, because the enabled - // ones apply to anchors while the disabled ones are for buttons. - disabled-container-color: $disabled-container-color, - disabled-label-text-color: $disabled-ink-color, - container-color: $disabled-container-color, - label-text-color: $disabled-ink-color, - container-elevation: 0, - )); - } - } - - .mat-mdc-outlined-button { - @include mdc-button-outlined-theme.theme(( - outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12) - )); - - &.mat-unthemed { - @include _outlined-button-variant($on-surface); - } - - &.mat-primary { - @include _outlined-button-variant($primary); - } - - &.mat-accent { - @include _outlined-button-variant($secondary); - } - - &.mat-warn { - @include _outlined-button-variant($error); - } - - @include button-theme-private.apply-disabled-style() { - @include mdc-button-outlined-theme.theme(( - // We need to pass both the disabled and enabled values, because the enabled - // ones apply to anchors while the disabled ones are for buttons. - label-text-color: $disabled-ink-color, - disabled-label-text-color: $disabled-ink-color, - outline-color: rgba($on-surface, 0.12), - disabled-outline-color: rgba($on-surface, 0.12), - )); - } - } - - // Ripple colors - .mat-mdc-button, .mat-mdc-outlined-button { - @include button-theme-private.ripple-theme-styles($config, false); - } - - .mat-mdc-raised-button, .mat-mdc-unelevated-button { - @include button-theme-private.ripple-theme-styles($config, true); - } - } -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - @include mat.private-using-mdc-typography($config) { - @include mdc-button.without-ripple($query: mat.$private-mdc-typography-styles-query); - } -} - -@mixin density($config-or-theme) { - $density-scale: mat.get-density-config($config-or-theme); - .mat-mdc-button, - .mat-mdc-raised-button, - .mat-mdc-unelevated-button, - .mat-mdc-outlined-button { - // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles. - &.mat-mdc-button-base { - @include mdc-button-theme.density($density-scale, $query: mat.$private-mdc-base-styles-query); - @include button-theme-private.touch-target-density($density-scale); - } - } -} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-button') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-button/button.html b/src/material-experimental/mdc-button/button.html deleted file mode 100644 index e3924c41b2c3..000000000000 --- a/src/material-experimental/mdc-button/button.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/material-experimental/mdc-button/button.scss b/src/material-experimental/mdc-button/button.scss deleted file mode 100644 index 957b98cbcc42..000000000000 --- a/src/material-experimental/mdc-button/button.scss +++ /dev/null @@ -1,127 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@use '@material/button/button' as mdc-button; -@use '@material/button/button-base' as mdc-button-base; -@use '@material/button/variables' as mdc-button-variables; -@use '@material/button/button-text-theme' as mdc-button-text-theme; -@use '@material/button/button-filled-theme' as mdc-button-filled-theme; -@use '@material/button/button-protected-theme' as mdc-button-protected-theme; -@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme; - -@use './button-base'; - -@include mat.private-disable-mdc-fallback-declarations { - @include mdc-button.static-styles-without-ripple($query: mat.$private-mdc-base-styles-query); - - // Keys to exclude from the MDC theme config, allowing us to drop styles we don't need. - $override-keys: button-base.mat-private-button-remove-ripple(( - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, - with-icon-icon-size: null, - label-text-color: inherit, - )); - - // Note that we don't include a feature query, because this mixins declare - // all the "slots" for CSS variables that will be defined in the theme. - .mat-mdc-button { - @include mdc-button-text-theme.theme-styles( - map.merge(mdc-button-text-theme.$light-theme, $override-keys)); - } - - .mat-mdc-unelevated-button { - @include mdc-button-filled-theme.theme-styles( - map.merge(map.merge(mdc-button-filled-theme.$light-theme, $override-keys), ( - container-color: transparent, - ))); - } - - .mat-mdc-raised-button { - @include mdc-button-protected-theme.theme-styles( - map.merge(map.merge(mdc-button-protected-theme.$light-theme, $override-keys), ( - container-color: transparent, - ))); - } - - .mat-mdc-outlined-button { - @include mdc-button-outlined-theme.theme-styles( - map.merge(mdc-button-outlined-theme.$light-theme, $override-keys)); - } -} - -.mat-mdc-button, -.mat-mdc-unelevated-button, -.mat-mdc-raised-button, -.mat-mdc-outlined-button { - @include button-base.mat-private-button-interactive(); - @include button-base.mat-private-button-disabled(); - @include button-base.mat-private-button-touch-target(false); - @include mat.private-animation-noop(); -} - -// MDC expects button icons to contain this HTML content: -// ```html -// favorite -// ``` -// However, Angular Material expects a `mat-icon` instead. The following -// mixins will style the icons appropriately. -.mat-mdc-button { - & > .mat-icon { - @include mdc-button-base.icon(); - } - .mdc-button__label + .mat-icon { - @include mdc-button-base.icon-trailing(); - } -} - -.mat-mdc-unelevated-button, -.mat-mdc-raised-button, -.mat-mdc-outlined-button { - // Icons inside contained buttons have different styles due to increased button padding - & > .mat-icon { - @include mdc-button-base.icon(); - @include mdc-button-base.icon-contained(); - } - - .mdc-button__label + .mat-icon { - @include mdc-button-base.icon-contained-trailing(); - } -} - -// Since the stroked button has has an actual border that reduces the available space for -// child elements such as the ripple container or focus overlay, an inherited border radius -// for the absolute-positioned child elements does not work properly. This is because the -// child element cannot expand to the same boundaries as the parent element with a border. -// In order to work around this issue by *not* hiding overflow, we adjust the child elements -// to fully cover the actual button element. This means that the border-radius would be correct -// then. See: https://github.com/angular/components/issues/13738 -.mat-mdc-outlined-button .mat-mdc-button-ripple, -.mat-mdc-outlined-button .mdc-button__ripple { - $offset: -(mdc-button-variables.$outlined-border-width); - top: $offset; - left: $offset; - bottom: $offset; - right: $offset; - border-width: $offset; -} - -// For the button element, default inset/offset values are necessary to ensure that -// the focus indicator is sufficiently contrastive and renders appropriately. -.mat-mdc-unelevated-button, -.mat-mdc-raised-button { - .mat-mdc-focus-indicator::before { - $default-border-width: mat.$private-strong-focus-indicators-default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); - $offset: calc(#{$border-width} + 2px); - margin: calc(#{$offset} * -1); - } -} - -.mat-mdc-outlined-button .mat-mdc-focus-indicator::before { - $default-border-width: mat.$private-strong-focus-indicators-default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); - $offset: calc(#{$border-width} + 3px); - margin: calc(#{$offset} * -1); -} diff --git a/src/material-experimental/mdc-button/button.ts b/src/material-experimental/mdc-button/button.ts deleted file mode 100644 index eea8f2924e3c..000000000000 --- a/src/material-experimental/mdc-button/button.ts +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Platform} from '@angular/cdk/platform'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - Inject, - NgZone, - Optional, - ViewEncapsulation, -} from '@angular/core'; -import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; - -import { - MAT_ANCHOR_HOST, - MAT_ANCHOR_INPUTS, - MAT_BUTTON_HOST, - MAT_BUTTON_INPUTS, - MatAnchorBase, - MatButtonBase, -} from './button-base'; - -/** - * Material Design button component. Users interact with a button to perform an action. - * See https://material.io/components/buttons - * - * The `MatButton` class applies to native button elements and captures the appearances for - * "text button", "outlined button", and "contained button" per the Material Design - * specification. `MatButton` additionally captures an additional "flat" appearance, which matches - * "contained" but without elevation. - */ -@Component({ - selector: ` - button[mat-button], button[mat-raised-button], button[mat-flat-button], - button[mat-stroked-button] - `, - templateUrl: 'button.html', - styleUrls: ['button.css', 'button-high-contrast.css'], - inputs: MAT_BUTTON_INPUTS, - host: MAT_BUTTON_HOST, - exportAs: 'matButton', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class MatButton extends MatButtonBase { - constructor( - elementRef: ElementRef, - platform: Platform, - ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, - ) { - super(elementRef, platform, ngZone, animationMode); - } -} - -/** - * Material Design button component for anchor elements. Anchor elements are used to provide - * links for the user to navigate across different routes or pages. - * See https://material.io/components/buttons - * - * The `MatAnchor` class applies to native anchor elements and captures the appearances for - * "text button", "outlined button", and "contained button" per the Material Design - * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches - * "contained" but without elevation. - */ -@Component({ - selector: `a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]`, - exportAs: 'matButton, matAnchor', - host: MAT_ANCHOR_HOST, - inputs: MAT_ANCHOR_INPUTS, - templateUrl: 'button.html', - styleUrls: ['button.css', 'button-high-contrast.css'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class MatAnchor extends MatAnchorBase { - constructor( - elementRef: ElementRef, - platform: Platform, - ngZone: NgZone, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, - ) { - super(elementRef, platform, ngZone, animationMode); - } -} diff --git a/src/material-experimental/mdc-button/testing/BUILD.bazel b/src/material-experimental/mdc-button/testing/BUILD.bazel deleted file mode 100644 index e707c510d4d2..000000000000 --- a/src/material-experimental/mdc-button/testing/BUILD.bazel +++ /dev/null @@ -1,33 +0,0 @@ -load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library") - -package(default_visibility = ["//visibility:public"]) - -ts_library( - name = "testing", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - deps = [ - "//src/cdk/coercion", - "//src/cdk/testing", - "//src/material/button/testing", - ], -) - -ng_test_library( - name = "unit_tests_lib", - srcs = glob(["**/*.spec.ts"]), - deps = [ - ":testing", - "//src/material-experimental/mdc-button", - "//src/material/button/testing:harness_tests_lib", - ], -) - -ng_web_test_suite( - name = "unit_tests", - deps = [ - ":unit_tests_lib", - ], -) diff --git a/src/material-experimental/mdc-button/testing/button-harness.spec.ts b/src/material-experimental/mdc-button/testing/button-harness.spec.ts deleted file mode 100644 index d9151564792b..000000000000 --- a/src/material-experimental/mdc-button/testing/button-harness.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {runHarnessTests} from '@angular/material/button/testing/shared.spec'; -import {MatButtonModule} from '../index'; -import {MatButtonHarness} from './button-harness'; - -describe('MDC-based MatButtonHarness', () => { - runHarnessTests(MatButtonModule, MatButtonHarness); -}); diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss index fbf07b4fdd69..458bfbe6bbde 100644 --- a/src/material-experimental/mdc-core/color/_all-color.import.scss +++ b/src/material-experimental/mdc-core/color/_all-color.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-button/button-theme' hide color, density, theme, typography; -@forward '../../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, -mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; -@forward '../../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target; -@forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; -@forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; @forward '../../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide $mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss index 9ec7db33a77f..73020434a2db 100644 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ b/src/material-experimental/mdc-core/density/_all-density.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-button/button-theme' hide color, density, theme, typography; -@forward '../../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, -mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; -@forward '../../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target; -@forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; -@forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; @forward '../../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide $mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index 3bff49de16c2..0965a17778e9 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -20,7 +20,6 @@ sass_library( ], deps = [ "//src/material:sass_lib", - "//src/material-experimental/mdc-button:mdc_button_scss_lib", "//src/material-experimental/mdc-core:mdc_core_scss_lib", "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib", "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib", @@ -28,6 +27,7 @@ sass_library( "//src/material-experimental/mdc-table:mdc_table_scss_lib", "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib", "//src/material/autocomplete:autocomplete_scss_lib", + "//src/material/button:button_scss_lib", "//src/material/card:card_scss_lib", "//src/material/checkbox:checkbox_scss_lib", "//src/material/chips:chips_scss_lib", diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss index d75a592df8f1..e30a28843125 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-button/button-theme' hide color, density, theme, typography; -@forward '../../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, -mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; -@forward '../../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target; -@forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; -@forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; @forward '../../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide $mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, @@ -28,7 +21,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table- @forward 'all-theme' hide all-mdc-component-themes;; @import '../core-theme'; -@import '../../mdc-button/button-theme'; @import '../../mdc-snack-bar/snack-bar-theme'; @import '../../mdc-tabs/tabs-theme'; @import '../../mdc-table/table-theme'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss index 9856e1caa820..7b45ab2dc6f5 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.scss @@ -1,9 +1,6 @@ @use '@angular/material' as mat; @use '../core-theme'; -@use '../../mdc-button/button-theme'; -@use '../../mdc-button/fab-theme'; -@use '../../mdc-button/icon-button-theme'; @use '../../mdc-snack-bar/snack-bar-theme'; @use '../../mdc-tabs/tabs-theme'; @use '../../mdc-table/table-theme'; @@ -15,10 +12,10 @@ @include mat.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { @include core-theme.theme($theme-or-color-config); @include mat.autocomplete-theme($theme-or-color-config); - @include button-theme.theme($theme-or-color-config); + @include mat.button-theme($theme-or-color-config); @include mat.dialog-theme($theme-or-color-config); - @include fab-theme.theme($theme-or-color-config); - @include icon-button-theme.theme($theme-or-color-config); + @include mat.fab-theme($theme-or-color-config); + @include mat.icon-button-theme($theme-or-color-config); @include mat.card-theme($theme-or-color-config); @include mat.checkbox-theme($theme-or-color-config); @include mat.chips-theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss index 900ec9d33dfe..ca867773d0a6 100644 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-button/button-theme' hide color, density, theme, typography; -@forward '../../mdc-button/button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, -mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; -@forward '../../mdc-button/button-theme' as mat-mdc-button-* hide -$mat-mdc-button-mat-button-state-target; -@forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; -@forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; @forward '../../mdc-snack-bar/snack-bar-theme' hide color, density, theme, typography; @forward '../../mdc-snack-bar/snack-bar-theme' as mat-mdc-snack-bar-* hide $mat-mdc-snack-bar-mdc-snackbar-dismiss-ink-color, $mat-mdc-snack-bar-mdc-snackbar-fill-color, diff --git a/src/material-experimental/mdc-paginator/BUILD.bazel b/src/material-experimental/mdc-paginator/BUILD.bazel index f46ace0a0971..0d5e9b2e4315 100644 --- a/src/material-experimental/mdc-paginator/BUILD.bazel +++ b/src/material-experimental/mdc-paginator/BUILD.bazel @@ -17,7 +17,7 @@ ng_module( ), assets = [":paginator.css"] + glob(["**/*.html"]), deps = [ - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/paginator", "//src/material/select", "//src/material/tooltip", diff --git a/src/material-experimental/mdc-paginator/module.ts b/src/material-experimental/mdc-paginator/module.ts index 412d0b5b0b7b..a161cf20c760 100644 --- a/src/material-experimental/mdc-paginator/module.ts +++ b/src/material-experimental/mdc-paginator/module.ts @@ -9,7 +9,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatSelectModule} from '@angular/material/select'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatPaginator} from './paginator'; diff --git a/src/material-experimental/mdc-snack-bar/BUILD.bazel b/src/material-experimental/mdc-snack-bar/BUILD.bazel index 180df7332b31..de8634b86ed4 100644 --- a/src/material-experimental/mdc-snack-bar/BUILD.bazel +++ b/src/material-experimental/mdc-snack-bar/BUILD.bazel @@ -21,7 +21,7 @@ ng_module( ] + glob(["**/*.html"]), deps = [ "//src:dev_mode_types", - "//src/material-experimental/mdc-button", + "//src/material/button", "//src/material/core", "//src/material/snack-bar", "@npm//@angular/core", diff --git a/src/material-experimental/mdc-snack-bar/module.ts b/src/material-experimental/mdc-snack-bar/module.ts index dda6339d013f..d557fdd0b594 100644 --- a/src/material-experimental/mdc-snack-bar/module.ts +++ b/src/material-experimental/mdc-snack-bar/module.ts @@ -10,7 +10,7 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PortalModule} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCommonModule} from '@angular/material/core'; import {SimpleSnackBar} from './simple-snack-bar'; diff --git a/src/material/_index.scss b/src/material/_index.scss index 5753c6802b70..1d25345168d7 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -83,7 +83,13 @@ @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography; @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, bottom-sheet-color, bottom-sheet-typography; +@forward './legacy-button/button-theme' as legacy-button-* show legacy-button-theme, + legacy-button-color, legacy-button-typography; @forward './button/button-theme' as button-* show button-theme, button-color, button-typography; +@forward './button/fab-theme' as fab-* show fab-color, fab-typography, + fab-density, fab-theme; +@forward './button/icon-button-theme' as icon-button-* show icon-button-color, + icon-button-typography, icon-button-density, icon-button-theme; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, button-toggle-color, button-toggle-typography; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density; diff --git a/src/material/_theming.scss b/src/material/_theming.scss index cc9dfefd29ca..32cd63bfc0e1 100644 --- a/src/material/_theming.scss +++ b/src/material/_theming.scss @@ -11,7 +11,7 @@ @forward './badge/badge-legacy-index'; @forward './bottom-sheet/bottom-sheet-legacy-index'; @forward './button-toggle/button-toggle-legacy-index'; -@forward './button/button-legacy-index'; +@forward './legacy-button/button-legacy-index'; @forward './legacy-card/card-legacy-index'; @forward './legacy-checkbox/checkbox-legacy-index'; @forward './legacy-chips/chips-legacy-index'; diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel index 1bf6ab0ee03d..82e5d36a6fc3 100644 --- a/src/material/button/BUILD.bazel +++ b/src/material/button/BUILD.bazel @@ -16,51 +16,100 @@ ng_module( name = "button", srcs = glob( ["**/*.ts"], - exclude = ["**/*.spec.ts"], + exclude = [ + "**/*.spec.ts", + ], ), - assets = [":button.css"] + glob(["**/*.html"]), + assets = [ + ":button_high_contrast_scss", + ":button_scss", + ":fab_scss", + ":icon-button_scss", + ] + glob(["**/*.html"]), deps = [ - "//src/cdk/a11y", + "//src/cdk/platform", "//src/material/core", - "@npm//@angular/animations", - "@npm//@angular/core", - "@npm//@angular/platform-browser", ], ) sass_library( name = "button_scss_lib", srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], + deps = [ + "//:mdc_sass_lib", + "//src/material/core:core_scss_lib", + ], +) + +sass_library( + name = "button_base_scss_lib", + srcs = ["_button-base.scss"], ) sass_binary( name = "button_scss", src = "button.scss", deps = [ - ":button_scss_lib", + ":button_base_scss_lib", + "//:mdc_sass_lib", + "//src/material:sass_lib", + "//src/material/core:core_scss_lib", + ], +) + +sass_binary( + name = "button_high_contrast_scss", + src = "button-high-contrast.scss", + deps = [ "//src/cdk:sass_lib", + ], +) + +sass_binary( + name = "fab_scss", + src = "fab.scss", + deps = [ + ":button_base_scss_lib", + "//:mdc_sass_lib", + "//src/material:sass_lib", + "//src/material/core:core_scss_lib", + ], +) + +sass_binary( + name = "icon-button_scss", + src = "icon-button.scss", + deps = [ + ":button_base_scss_lib", + "//:mdc_sass_lib", + "//src/material:sass_lib", "//src/material/core:core_scss_lib", ], ) ng_test_library( - name = "unit_test_sources", + name = "button_tests_lib", srcs = glob( ["**/*.spec.ts"], - exclude = ["**/*.e2e.spec.ts"], + exclude = [ + "**/*.e2e.spec.ts", + ], ), deps = [ ":button", + "//src/cdk/platform", "//src/cdk/testing/private", "//src/material/core", + "//src/material/legacy-button", "@npm//@angular/platform-browser", ], ) ng_web_test_suite( name = "unit_tests", - deps = [":unit_test_sources"], + deps = [ + ":button_tests_lib", + ], ) ng_e2e_test_library( diff --git a/src/material/button/README.md b/src/material/button/README.md index b83ee6b67b5c..7b2b438d6492 100644 --- a/src/material/button/README.md +++ b/src/material/button/README.md @@ -1 +1,80 @@ -Please see the official documentation at https://material.angular.io/components/component/button \ No newline at end of file +This is a prototype of an alternate version of `MatButton` built on top of +[MDC Web](https://github.com/material-components/material-components-web). This component is +experimental and should not be used in production. + +## How to use +Assuming your application is already up and running using Angular Material, you can add this +component by following these steps: + +1. Install `@angular/material-experimental` and MDC Web: + + ```bash + npm i material-components-web @angular/material-experimental + ``` + +2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is + needed for the Sass compiler to be able to find the MDC Web Sass files. + + ```json + ... + "styles": [ + "src/styles.scss" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules/" + ] + }, + ... + ``` + +3. Import the experimental `MatButtonModule` and add it to the module that declares your component: + + ```ts + import {MatButtonModule} from '@angular/material-experimental/mdc-button'; + @NgModule({ + declarations: [MyComponent], + imports: [MatButtonModule], + }) + export class MyModule {} + ``` + +4. Use the buttons in your component's template: + + ```html + + + + + + + ``` + +5. Add the theme and typography mixins to your Sass. Note that there are three separate mixins for +the button variants: standard buttons, icon buttons, and floating action buttons. Include only the mixins of the +button variants you are using: + + ```scss + @use '@angular/material' as mat; + @use '@angular/material-experimental' as mat-experimental; + $candy-app-primary: mat.define-palette(mat.$indigo-palette); + $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); + $candy-app-theme: mat.define-light-theme(( + color: ( + primary: $candy-app-primary, + accent: $candy-app-accent, + ) + )); + @include mat-experimental.mdc-button-theme($candy-app-theme); + @include mat-experimental.mdc-fab-theme($candy-app-theme); + @include mat-experimental.mdc-icon-button-theme($candy-app-theme); + ``` + +## API differences + +The API of the buttons matches the one from `@angular/material/button`. Simply replace imports to +`@angular/material/button` with imports to `@angular/material-experimental/mdc-button`. diff --git a/src/material/button/_button-base.import.scss b/src/material/button/_button-base.import.scss index 52ec6868bf1d..e7375e4618bf 100644 --- a/src/material/button/_button-base.import.scss +++ b/src/material/button/_button-base.import.scss @@ -1,21 +1,4 @@ -@forward '../core/style/private.import'; -@forward '../core/style/button-common.import'; -@forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius, -$mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin, -$mat-min-width, $mat-padding, mat-base; -@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius, -$mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius, -$mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding, -$mat-button-mini-fab-size, $mat-button-stroked-button-border-width, -$mat-button-stroked-button-line-height, $mat-button-stroked-button-padding, mat-button-fab, -mat-button-raised-button; -@forward 'button-base' as mat-icon-* hide $mat-icon-border-radius, $mat-icon-fab-border-radius, -$mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon-line-height, -$mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size, -$mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height, -$mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button; +@forward '../../material/core/style/layout-common.import'; +@forward 'button-base'; -@import '../core/style/variables'; -@import '../core/style/elevation'; -@import '../core/style/button-common'; -@import '../core/style/private'; +@import '../../material/core/style/layout-common'; diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index c1f2eb7f416d..b7eb781dc12a 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -1,108 +1,95 @@ -@use '../core/style/variables'; -@use '../core/style/elevation'; -@use '../core/style/button-common'; -@use '../core/style/private'; - - -// Flat and raised button standards -$padding: 0 16px !default; -$min-width: 64px !default; -$margin: 0 !default; -$line-height: 36px !default; -$border-radius: 4px !default; -$focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function, - background-color 200ms variables.$swift-ease-in-out-timing-function !default; - -// Stroked button padding is 1px less horizontally than default/flat/raised -// button's padding. -$stroked-button-line-height: $line-height - 2; -$stroked-button-padding: 0 15px; -$stroked-button-border-width: 1px; - -// Icon Button standards -$button-size: 40px !default; -$button-border-radius: 50% !default; -$button-line-height: 24px !default; - -// Fab standards -$fab-border-radius: 50% !default; -$fab-size: 56px !default; -$fab-padding: 16px !default; - -$mini-fab-size: 40px !default; -$mini-fab-padding: 8px !default; - -// Applies base styles to all button types. -@mixin base { - box-sizing: border-box; - position: relative; - - // Reset browser + `, }) @@ -363,6 +380,7 @@ class TestApp { rippleDisabled: boolean = false; buttonColor: ThemePalette; tabIndex: number; + extended: boolean = false; increment() { this.clickCount++; diff --git a/src/material/button/button.ts b/src/material/button/button.ts index 4915d976706c..eea8f2924e3c 100644 --- a/src/material/button/button.ts +++ b/src/material/button/button.ts @@ -6,212 +6,87 @@ * found in the LICENSE file at https://angular.io/license */ -import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y'; +import {Platform} from '@angular/cdk/platform'; import { ChangeDetectionStrategy, Component, ElementRef, - OnDestroy, - ViewChild, - ViewEncapsulation, - Optional, Inject, - Input, - AfterViewInit, NgZone, + Optional, + ViewEncapsulation, } from '@angular/core'; -import { - CanColor, - CanDisable, - CanDisableRipple, - MatRipple, - mixinColor, - mixinDisabled, - mixinDisableRipple, -} from '@angular/material/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; -/** Default color palette for round buttons (mat-fab and mat-mini-fab) */ -const DEFAULT_ROUND_BUTTON_COLOR = 'accent'; - -/** - * List of classes to add to MatButton instances based on host attributes to - * style as different variants. - */ -const BUTTON_HOST_ATTRIBUTES = [ - 'mat-button', - 'mat-flat-button', - 'mat-icon-button', - 'mat-raised-button', - 'mat-stroked-button', - 'mat-mini-fab', - 'mat-fab', -]; - -// Boilerplate for applying mixins to MatButton. -const _MatButtonBase = mixinColor( - mixinDisabled( - mixinDisableRipple( - class { - constructor(public _elementRef: ElementRef) {} - }, - ), - ), -); +import { + MAT_ANCHOR_HOST, + MAT_ANCHOR_INPUTS, + MAT_BUTTON_HOST, + MAT_BUTTON_INPUTS, + MatAnchorBase, + MatButtonBase, +} from './button-base'; /** - * Material design button. + * Material Design button component. Users interact with a button to perform an action. + * See https://material.io/components/buttons + * + * The `MatButton` class applies to native button elements and captures the appearances for + * "text button", "outlined button", and "contained button" per the Material Design + * specification. `MatButton` additionally captures an additional "flat" appearance, which matches + * "contained" but without elevation. */ @Component({ - selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button], - button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], - button[mat-flat-button]`, - exportAs: 'matButton', - host: { - '[attr.disabled]': 'disabled || null', - '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', - // Add a class for disabled button styling instead of the using attribute - // selector or pseudo-selector. This allows users to create focusable - // disabled buttons without recreating the styles. - '[class.mat-button-disabled]': 'disabled', - 'class': 'mat-focus-indicator', - }, + selector: ` + button[mat-button], button[mat-raised-button], button[mat-flat-button], + button[mat-stroked-button] + `, templateUrl: 'button.html', - styleUrls: ['button.css'], - inputs: ['disabled', 'disableRipple', 'color'], + styleUrls: ['button.css', 'button-high-contrast.css'], + inputs: MAT_BUTTON_INPUTS, + host: MAT_BUTTON_HOST, + exportAs: 'matButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatButton - extends _MatButtonBase - implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption -{ - /** Whether the button is round. */ - readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab'); - - /** Whether the button is icon button. */ - readonly isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); - - /** Reference to the MatRipple instance of the button. */ - @ViewChild(MatRipple) ripple: MatRipple; - +export class MatButton extends MatButtonBase { constructor( elementRef: ElementRef, - private _focusMonitor: FocusMonitor, - @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string, + platform: Platform, + ngZone: NgZone, + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, ) { - super(elementRef); - - // For each of the variant selectors that is present in the button's host - // attributes, add the correct corresponding class. - for (const attr of BUTTON_HOST_ATTRIBUTES) { - if (this._hasHostAttributes(attr)) { - (this._getHostElement() as HTMLElement).classList.add(attr); - } - } - - // Add a class that applies to all buttons. This makes it easier to target if somebody - // wants to target all Material buttons. We do it here rather than `host` to ensure that - // the class is applied to derived classes. - elementRef.nativeElement.classList.add('mat-button-base'); - - if (this.isRoundButton) { - this.color = DEFAULT_ROUND_BUTTON_COLOR; - } - } - - ngAfterViewInit() { - this._focusMonitor.monitor(this._elementRef, true); - } - - ngOnDestroy() { - this._focusMonitor.stopMonitoring(this._elementRef); - } - - /** Focuses the button. */ - focus(origin?: FocusOrigin, options?: FocusOptions): void { - if (origin) { - this._focusMonitor.focusVia(this._getHostElement(), origin, options); - } else { - this._getHostElement().focus(options); - } - } - - _getHostElement() { - return this._elementRef.nativeElement; - } - - _isRippleDisabled() { - return this.disableRipple || this.disabled; - } - - /** Gets whether the button has one of the given attributes. */ - _hasHostAttributes(...attributes: string[]) { - return attributes.some(attribute => this._getHostElement().hasAttribute(attribute)); + super(elementRef, platform, ngZone, animationMode); } } /** - * Material design anchor button. + * Material Design button component for anchor elements. Anchor elements are used to provide + * links for the user to navigate across different routes or pages. + * See https://material.io/components/buttons + * + * The `MatAnchor` class applies to native anchor elements and captures the appearances for + * "text button", "outlined button", and "contained button" per the Material Design + * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches + * "contained" but without elevation. */ @Component({ - selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], - a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]`, + selector: `a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]`, exportAs: 'matButton, matAnchor', - host: { - // Note that we ignore the user-specified tabindex when it's disabled for - // consistency with the `mat-button` applied on native buttons where even - // though they have an index, they're not tabbable. - '[attr.tabindex]': 'disabled ? -1 : tabIndex', - '[attr.disabled]': 'disabled || null', - '[attr.aria-disabled]': 'disabled.toString()', - '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', - '[class.mat-button-disabled]': 'disabled', - 'class': 'mat-focus-indicator', - }, - inputs: ['disabled', 'disableRipple', 'color'], + host: MAT_ANCHOR_HOST, + inputs: MAT_ANCHOR_INPUTS, templateUrl: 'button.html', - styleUrls: ['button.css'], + styleUrls: ['button.css', 'button-high-contrast.css'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatAnchor extends MatButton implements AfterViewInit, OnDestroy { - /** Tabindex of the button. */ - @Input() tabIndex: number; - +export class MatAnchor extends MatAnchorBase { constructor( - focusMonitor: FocusMonitor, elementRef: ElementRef, - @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string, - /** @breaking-change 14.0.0 _ngZone will be required. */ - @Optional() private _ngZone?: NgZone, + platform: Platform, + ngZone: NgZone, + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string, ) { - super(elementRef, focusMonitor, animationMode); + super(elementRef, platform, ngZone, animationMode); } - - override ngAfterViewInit(): void { - super.ngAfterViewInit(); - - /** @breaking-change 14.0.0 _ngZone will be required. */ - if (this._ngZone) { - this._ngZone.runOutsideAngular(() => { - this._elementRef.nativeElement.addEventListener('click', this._haltDisabledEvents); - }); - } else { - this._elementRef.nativeElement.addEventListener('click', this._haltDisabledEvents); - } - } - - override ngOnDestroy(): void { - super.ngOnDestroy(); - this._elementRef.nativeElement.removeEventListener('click', this._haltDisabledEvents); - } - - _haltDisabledEvents = (event: Event): void => { - // A disabled button shouldn't apply any actions - if (this.disabled) { - event.preventDefault(); - event.stopImmediatePropagation(); - } - }; } diff --git a/src/material-experimental/mdc-button/fab.scss b/src/material/button/fab.scss similarity index 86% rename from src/material-experimental/mdc-button/fab.scss rename to src/material/button/fab.scss index b4281b17ea5f..b36c3e508e1f 100644 --- a/src/material-experimental/mdc-button/fab.scss +++ b/src/material/button/fab.scss @@ -1,19 +1,21 @@ -@use '@angular/material' as mat; @use '@material/fab' as mdc-fab; @use '@material/elevation/elevation-theme' as mdc-elevation-theme; @use './button-base'; +@use '../core/mdc-helpers/mdc-helpers'; +@use '../core/style/private' as style-private; +@use '../core/focus-indicators/private' as focus-indicators-private; -@include mat.private-disable-mdc-fallback-declarations { - @include mdc-fab.without-ripple($query: mat.$private-mdc-base-styles-query); +@include mdc-helpers.disable-mdc-fallback-declarations { + @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-base-styles-query); } .mat-mdc-fab, .mat-mdc-mini-fab { @include button-base.mat-private-button-interactive(); @include button-base.mat-private-button-touch-target(true); - @include mat.private-animation-noop(); + @include style-private.private-animation-noop(); - @include mat.private-disable-mdc-fallback-declarations { + @include mdc-helpers.disable-mdc-fallback-declarations { // Theme configuration is copied over from MDC, because it isn't exported @include mdc-fab.theme-styles(button-base.mat-private-button-remove-ripple(( container-color: transparent, @@ -66,7 +68,7 @@ } .mat-mdc-focus-indicator::before { - $default-border-width: mat.$private-strong-focus-indicators-default-border-width; + $default-border-width: focus-indicators-private.$default-border-width; $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); @@ -74,7 +76,7 @@ } .mat-mdc-extended-fab { - @include mdc-fab.extended_($query: mat.$private-mdc-base-styles-query); + @include mdc-fab.extended_($query: mdc-helpers.$mdc-base-styles-query); & > .mat-icon, & > .material-icons { // stylelint-disable-line selector-class-pattern diff --git a/src/material-experimental/mdc-button/fab.ts b/src/material/button/fab.ts similarity index 98% rename from src/material-experimental/mdc-button/fab.ts rename to src/material/button/fab.ts index 481b3024cfdc..1355075f67e3 100644 --- a/src/material-experimental/mdc-button/fab.ts +++ b/src/material/button/fab.ts @@ -55,6 +55,8 @@ export function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions { // Default FAB configuration. const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY(); +let buttonInputs = [...MAT_ANCHOR_INPUTS, 'extended']; + /** * Material Design floating action button (FAB) component. These buttons represent the primary * or most common action for users to interact with. @@ -66,7 +68,7 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY(); selector: `button[mat-fab]`, templateUrl: 'button.html', styleUrls: ['fab.css'], - inputs: [...MAT_BUTTON_INPUTS, 'extended'], + inputs: buttonInputs, host: { ...MAT_BUTTON_HOST, '[class.mdc-fab--extended]': 'extended', @@ -142,7 +144,7 @@ export class MatMiniFabButton extends MatButtonBase { selector: `a[mat-fab]`, templateUrl: 'button.html', styleUrls: ['fab.css'], - inputs: [...MAT_ANCHOR_INPUTS, 'extended'], + inputs: buttonInputs, host: { ...MAT_ANCHOR_HOST, '[class.mdc-fab--extended]': 'extended', diff --git a/src/material-experimental/mdc-button/icon-button.html b/src/material/button/icon-button.html similarity index 100% rename from src/material-experimental/mdc-button/icon-button.html rename to src/material/button/icon-button.html diff --git a/src/material-experimental/mdc-button/icon-button.scss b/src/material/button/icon-button.scss similarity index 85% rename from src/material-experimental/mdc-button/icon-button.scss rename to src/material/button/icon-button.scss index 9161fdb9590f..1eaca64d6b0f 100644 --- a/src/material-experimental/mdc-button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -1,16 +1,17 @@ @use 'sass:map'; -@use '@angular/material' as mat; @use '@material/icon-button/icon-button' as mdc-icon-button; @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme; @use './button-base'; +@use '../core/mdc-helpers/mdc-helpers'; +@use '../core/style/private'; -@include mat.private-disable-mdc-fallback-declarations { - @include mdc-icon-button.without-ripple($query: mat.$private-mdc-base-styles-query); +@include mdc-helpers.disable-mdc-fallback-declarations { + @include mdc-icon-button.without-ripple($query: mdc-helpers.$mdc-base-styles-query); } .mat-mdc-icon-button { - @include mat.private-disable-mdc-fallback-declarations { + @include mdc-helpers.disable-mdc-fallback-declarations { $theme-overrides: button-base.mat-private-button-remove-ripple(( icon-color: inherit, // We don't change the color on focus/hover so exclude @@ -38,7 +39,7 @@ @include button-base.mat-private-button-interactive(); @include button-base.mat-private-button-touch-target(true); - @include mat.private-animation-noop(); + @include private.private-animation-noop(); .mat-mdc-button-persistent-ripple { border-radius: 50%; diff --git a/src/material-experimental/mdc-button/icon-button.ts b/src/material/button/icon-button.ts similarity index 100% rename from src/material-experimental/mdc-button/icon-button.ts rename to src/material/button/icon-button.ts diff --git a/src/material-experimental/mdc-button/module.ts b/src/material/button/module.ts similarity index 100% rename from src/material-experimental/mdc-button/module.ts rename to src/material/button/module.ts diff --git a/src/material/button/public-api.ts b/src/material/button/public-api.ts index 58eccdadd24b..bf707709d4e3 100644 --- a/src/material/button/public-api.ts +++ b/src/material/button/public-api.ts @@ -6,5 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './button-module'; export * from './button'; +export * from './fab'; +export * from './icon-button'; +export * from './module'; diff --git a/src/material/button/testing/BUILD.bazel b/src/material/button/testing/BUILD.bazel index 5525c38c0ceb..7d1c60a8358c 100644 --- a/src/material/button/testing/BUILD.bazel +++ b/src/material/button/testing/BUILD.bazel @@ -1,5 +1,4 @@ -load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") -load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_test_library", "ng_web_test_suite", "ts_library") +load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library") package(default_visibility = ["//visibility:public"]) @@ -12,6 +11,7 @@ ts_library( deps = [ "//src/cdk/coercion", "//src/cdk/testing", + "//src/material/legacy-button/testing", ], ) @@ -20,57 +20,19 @@ filegroup( srcs = glob(["**/*.ts"]), ) -ng_test_library( - name = "harness_tests_lib", - srcs = ["shared.spec.ts"], - deps = [ - ":testing", - "//src/cdk/platform", - "//src/cdk/testing", - "//src/cdk/testing/testbed", - "//src/material/button", - "//src/material/icon", - "//src/material/icon/testing", - "@npm//@angular/forms", - "@npm//@angular/platform-browser", - ], -) - ng_test_library( name = "unit_tests_lib", - srcs = glob( - ["**/*.spec.ts"], - exclude = [ - "**/*.e2e.spec.ts", - "shared.spec.ts", - ], - ), + srcs = glob(["**/*.spec.ts"]), deps = [ - ":harness_tests_lib", ":testing", "//src/material/button", + "//src/material/legacy-button/testing:harness_tests_lib", ], ) ng_web_test_suite( name = "unit_tests", - deps = [":unit_tests_lib"], -) - -ng_e2e_test_library( - name = "e2e_test_sources", - srcs = glob(["**/*.e2e.spec.ts"]), - deps = [ - "//src/cdk/testing/private/e2e", - "//src/cdk/testing/protractor", - "//src/material/button/testing", - ], -) - -e2e_test_suite( - name = "e2e_tests", deps = [ - ":e2e_test_sources", - "//src/cdk/testing/private/e2e", + ":unit_tests_lib", ], ) diff --git a/src/material/button/testing/button-harness.spec.ts b/src/material/button/testing/button-harness.spec.ts index 8b261712b8a2..ad3af5d1c07c 100644 --- a/src/material/button/testing/button-harness.spec.ts +++ b/src/material/button/testing/button-harness.spec.ts @@ -1,7 +1,7 @@ -import {MatButtonModule} from '@angular/material/button'; -import {runHarnessTests} from '@angular/material/button/testing/shared.spec'; +import {runHarnessTests} from '@angular/material/legacy-button/testing/shared.spec'; +import {MatButtonModule} from '../index'; import {MatButtonHarness} from './button-harness'; -describe('Non-MDC-based MatButtonHarness', () => { +describe('MDC-based MatButtonHarness', () => { runHarnessTests(MatButtonModule, MatButtonHarness); }); diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts index b102f11bb8ff..fde909742c87 100644 --- a/src/material/button/testing/button-harness.ts +++ b/src/material/button/testing/button-harness.ts @@ -6,28 +6,33 @@ * found in the LICENSE file at https://angular.io/license */ -import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; +import { + ComponentHarnessConstructor, + ContentContainerComponentHarness, + HarnessPredicate, +} from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {ButtonHarnessFilters} from './button-harness-filters'; +import {LegacyButtonHarnessFilters} from '@angular/material/legacy-button/testing'; -/** Harness for interacting with a standard mat-button in tests. */ +/** Harness for interacting with a MDC-based mat-button in tests. */ export class MatButtonHarness extends ContentContainerComponentHarness { // TODO(jelbourn) use a single class, like `.mat-button-base` - /** The selector for the host element of a `MatButton` instance. */ - static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button], [mat-icon-button], - [mat-stroked-button], [mat-fab], [mat-mini-fab]`; + static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button], + [mat-icon-button], [mat-stroked-button], [mat-fab], [mat-mini-fab]`; /** - * Gets a `HarnessPredicate` that can be used to search for a `MatButtonHarness` that meets - * certain criteria. - * @param options Options for filtering which button instances are considered a match. + * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes. + * @param options Options for narrowing the search: + * - `selector` finds a button whose host element matches the given selector. + * - `text` finds a button with specific text content. * @return a `HarnessPredicate` configured with the given options. */ - static with(options: ButtonHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatButtonHarness, options).addOption( - 'text', - options.text, - (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text), + static with( + this: ComponentHarnessConstructor, + options: LegacyButtonHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options).addOption('text', options.text, (harness, text) => + HarnessPredicate.stringMatches(harness.getText(), text), ); } @@ -45,23 +50,23 @@ export class MatButtonHarness extends ContentContainerComponentHarness { return (await this.host()).click(...(args as [])); } - /** Whether the button is disabled. */ + /** Gets a boolean promise indicating if the button is disabled. */ async isDisabled(): Promise { const disabled = (await this.host()).getAttribute('disabled'); return coerceBooleanProperty(await disabled); } - /** Gets the button's label text. */ + /** Gets a promise for the button's label text. */ async getText(): Promise { return (await this.host()).text(); } - /** Focuses the button. */ + /** Focuses the button and returns a void promise that indicates when the action is complete. */ async focus(): Promise { return (await this.host()).focus(); } - /** Blurs the button. */ + /** Blurs the button and returns a void promise that indicates when the action is complete. */ async blur(): Promise { return (await this.host()).blur(); } diff --git a/src/material/button/testing/public-api.ts b/src/material/button/testing/public-api.ts index bdb6d150e3c3..8c2b2df20444 100644 --- a/src/material/button/testing/public-api.ts +++ b/src/material/button/testing/public-api.ts @@ -7,4 +7,4 @@ */ export * from './button-harness'; -export * from './button-harness-filters'; +export {LegacyButtonHarnessFilters} from '@angular/material/legacy-button/testing'; diff --git a/src/material/config.bzl b/src/material/config.bzl index f8861907aa54..2c55708e7abf 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -7,6 +7,8 @@ entryPoints = [ "badge/testing", "bottom-sheet", "bottom-sheet/testing", + "legacy-button", + "legacy-button/testing", "button", "button/testing", "button-toggle", diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index ed2778e56081..3867c4c8daa0 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -1,4 +1,5 @@ @use '../../theming/theming'; +@use '../../../button/button-theme'; @use '../../../expansion/expansion-theme'; @use '../../../stepper/stepper-theme'; @use '../../../toolbar/toolbar-theme'; @@ -24,6 +25,7 @@ @use '../../../list/list-theme'; @mixin private-all-unmigrated-component-densities($config) { + @include button-theme.density($config); @include expansion-theme.density($config); @include stepper-theme.density($config); @include toolbar-theme.density($config); diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 52389581fb6c..3340d02c3be4 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -5,7 +5,6 @@ @use '../theming'; @use '../../../badge/badge-theme'; @use '../../../bottom-sheet/bottom-sheet-theme'; -@use '../../../button/button-theme'; @use '../../../button-toggle/button-toggle-theme'; @use '../../../table/table-theme'; @use '../../../datepicker/datepicker-theme'; @@ -54,7 +53,6 @@ $css-var-theme: replace-all-values($theme, var(--test-var)); @include badge-theme.theme($css-var-theme); @include bottom-sheet-theme.theme($css-var-theme); - @include button-theme.theme($css-var-theme); @include button-toggle-theme.theme($css-var-theme); @include table-theme.theme($css-var-theme); @include datepicker-theme.theme($css-var-theme); diff --git a/src/material/core/theming/tests/test-legacy-theming-bundle.scss b/src/material/core/theming/tests/test-legacy-theming-bundle.scss index bfd708c04bdd..db031aa6ad77 100644 --- a/src/material/core/theming/tests/test-legacy-theming-bundle.scss +++ b/src/material/core/theming/tests/test-legacy-theming-bundle.scss @@ -25,4 +25,4 @@ $theme: mat-light-theme(( @include angular-material-color($theme); @include angular-material-density($theme); @include mat-core-theme($theme); -@include mat-button-theme($theme); +@include mat-legacy-button-theme($theme); diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel index 16489c2bb528..d50de7583c8f 100644 --- a/src/material/datepicker/BUILD.bazel +++ b/src/material/datepicker/BUILD.bazel @@ -33,8 +33,8 @@ ng_module( "//src/cdk/overlay", "//src/cdk/platform", "//src/cdk/portal", - "//src/material/button", "//src/material/core", + "//src/material/legacy-button", "//src/material/legacy-form-field", "//src/material/legacy-input", "@npm//@angular/animations", diff --git a/src/material/datepicker/datepicker-module.ts b/src/material/datepicker/datepicker-module.ts index 4732992723eb..43cb7fd66ac1 100644 --- a/src/material/datepicker/datepicker-module.ts +++ b/src/material/datepicker/datepicker-module.ts @@ -11,7 +11,7 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PortalModule} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {CdkScrollableModule} from '@angular/cdk/scrolling'; import {MatCommonModule} from '@angular/material/core'; import {MatCalendar, MatCalendarHeader} from './calendar'; @@ -35,7 +35,7 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, OverlayModule, A11yModule, PortalModule, diff --git a/src/material/datepicker/datepicker-toggle.ts b/src/material/datepicker/datepicker-toggle.ts index 61913c703be9..e2f0a69bfd1d 100644 --- a/src/material/datepicker/datepicker-toggle.ts +++ b/src/material/datepicker/datepicker-toggle.ts @@ -22,7 +22,7 @@ import { ViewEncapsulation, ViewChild, } from '@angular/core'; -import {MatButton} from '@angular/material/button'; +import {MatLegacyButton} from '@angular/material/legacy-button'; import {merge, Observable, of as observableOf, Subscription} from 'rxjs'; import {MatDatepickerIntl} from './datepicker-intl'; import {MatDatepickerControl, MatDatepickerPanel} from './datepicker-base'; @@ -87,7 +87,7 @@ export class MatDatepickerToggle implements AfterContentInit, OnChanges, OnDe @ContentChild(MatDatepickerToggleIcon) _customIcon: MatDatepickerToggleIcon; /** Underlying button element. */ - @ViewChild('button') _button: MatButton; + @ViewChild('button') _button: MatLegacyButton; constructor( public _intl: MatDatepickerIntl, diff --git a/src/material/divider/testing/divider-harness.spec.ts b/src/material/divider/testing/divider-harness.spec.ts index 4e245913ddbf..28b7018ef4f5 100644 --- a/src/material/divider/testing/divider-harness.spec.ts +++ b/src/material/divider/testing/divider-harness.spec.ts @@ -2,6 +2,6 @@ import {MatDividerModule} from '@angular/material/divider'; import {MatDividerHarness} from './divider-harness'; import {runHarnessTests} from './shared.spec'; -describe('Non-MDC-based MatButtonHarness', () => { +describe('Non-MDC-based MatLegacyButtonHarness', () => { runHarnessTests(MatDividerModule, MatDividerHarness); }); diff --git a/src/material/legacy-button/BUILD.bazel b/src/material/legacy-button/BUILD.bazel new file mode 100644 index 000000000000..0a1e72712706 --- /dev/null +++ b/src/material/legacy-button/BUILD.bazel @@ -0,0 +1,90 @@ +load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") +load( + "//tools:defaults.bzl", + "markdown_to_html", + "ng_e2e_test_library", + "ng_module", + "ng_test_library", + "ng_web_test_suite", + "sass_binary", + "sass_library", +) + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "legacy-button", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + assets = [":button.css"] + glob(["**/*.html"]), + deps = [ + "//src/cdk/a11y", + "//src/material/core", + "@npm//@angular/animations", + "@npm//@angular/core", + "@npm//@angular/platform-browser", + ], +) + +sass_library( + name = "legacy_button_scss_lib", + srcs = glob(["**/_*.scss"]), + deps = ["//src/material/core:core_scss_lib"], +) + +sass_binary( + name = "button_scss", + src = "button.scss", + deps = [ + ":legacy_button_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core:core_scss_lib", + ], +) + +ng_test_library( + name = "unit_test_sources", + srcs = glob( + ["**/*.spec.ts"], + exclude = ["**/*.e2e.spec.ts"], + ), + deps = [ + ":legacy-button", + "//src/cdk/testing/private", + "//src/material/core", + "@npm//@angular/platform-browser", + ], +) + +ng_web_test_suite( + name = "unit_tests", + deps = [":unit_test_sources"], +) + +ng_e2e_test_library( + name = "e2e_test_sources", + srcs = glob(["**/*.e2e.spec.ts"]), + deps = [ + "//src/cdk/testing/private/e2e", + ], +) + +e2e_test_suite( + name = "e2e_tests", + deps = [ + ":e2e_test_sources", + "//src/cdk/testing/private/e2e", + ], +) + +markdown_to_html( + name = "overview", + srcs = [":button.md"], +) + +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), +) diff --git a/src/material/legacy-button/README.md b/src/material/legacy-button/README.md new file mode 100644 index 000000000000..b83ee6b67b5c --- /dev/null +++ b/src/material/legacy-button/README.md @@ -0,0 +1 @@ +Please see the official documentation at https://material.angular.io/components/component/button \ No newline at end of file diff --git a/src/material/button/_button-legacy-index.scss b/src/material/legacy-button/_button-base.import.scss similarity index 75% rename from src/material/button/_button-legacy-index.scss rename to src/material/legacy-button/_button-base.import.scss index 4b9d85420b31..7da6a0bd1609 100644 --- a/src/material/button/_button-legacy-index.scss +++ b/src/material/legacy-button/_button-base.import.scss @@ -1,12 +1,9 @@ -@forward 'button-theme' hide color, theme, typography; -@forward 'button-theme' as mat-button-* hide $mat-button-ripple-opacity, mat-button-density, -mat-button-focus-overlay-color, mat-button-ripple-background, mat-button-ripple-color, -mat-button-theme-property; - +@forward '../core/style/private.import'; +@forward '../core/style/button-common.import'; @forward 'button-base' as mat-* hide $mat-border-radius, $mat-button-border-radius, $mat-button-line-height, $mat-button-size, $mat-focus-transition, $mat-line-height, $mat-margin, $mat-min-width, $mat-padding, mat-base; -@forward 'button-base' as mat-button-* hide $mat-button-button-border-radius, +@forward 'button-base' as mat-legacy-button-* hide $mat-button-button-border-radius, $mat-button-button-line-height, $mat-button-button-size, $mat-button-fab-border-radius, $mat-button-fab-padding, $mat-button-fab-size, $mat-button-mini-fab-padding, $mat-button-mini-fab-size, $mat-button-stroked-button-border-width, @@ -17,3 +14,8 @@ $mat-icon-fab-padding, $mat-icon-fab-size, $mat-icon-focus-transition, $mat-icon $mat-icon-margin, $mat-icon-min-width, $mat-icon-mini-fab-padding, $mat-icon-mini-fab-size, $mat-icon-padding, $mat-icon-stroked-button-border-width, $mat-icon-stroked-button-line-height, $mat-icon-stroked-button-padding, mat-icon-base, mat-icon-fab, mat-icon-raised-button; + +@import '../core/style/variables'; +@import '../core/style/elevation'; +@import '../core/style/button-common'; +@import '../core/style/private'; diff --git a/src/material/legacy-button/_button-base.scss b/src/material/legacy-button/_button-base.scss new file mode 100644 index 000000000000..c1f2eb7f416d --- /dev/null +++ b/src/material/legacy-button/_button-base.scss @@ -0,0 +1,108 @@ +@use '../core/style/variables'; +@use '../core/style/elevation'; +@use '../core/style/button-common'; +@use '../core/style/private'; + + +// Flat and raised button standards +$padding: 0 16px !default; +$min-width: 64px !default; +$margin: 0 !default; +$line-height: 36px !default; +$border-radius: 4px !default; +$focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function, + background-color 200ms variables.$swift-ease-in-out-timing-function !default; + +// Stroked button padding is 1px less horizontally than default/flat/raised +// button's padding. +$stroked-button-line-height: $line-height - 2; +$stroked-button-padding: 0 15px; +$stroked-button-border-width: 1px; + +// Icon Button standards +$button-size: 40px !default; +$button-border-radius: 50% !default; +$button-line-height: 24px !default; + +// Fab standards +$fab-border-radius: 50% !default; +$fab-size: 56px !default; +$fab-padding: 16px !default; + +$mini-fab-size: 40px !default; +$mini-fab-padding: 8px !default; + +// Applies base styles to all button types. +@mixin base { + box-sizing: border-box; + position: relative; + + // Reset browser - `, }) @@ -380,7 +363,6 @@ class TestApp { rippleDisabled: boolean = false; buttonColor: ThemePalette; tabIndex: number; - extended: boolean = false; increment() { this.clickCount++; diff --git a/src/material/legacy-button/button.ts b/src/material/legacy-button/button.ts new file mode 100644 index 000000000000..915625bad831 --- /dev/null +++ b/src/material/legacy-button/button.ts @@ -0,0 +1,217 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {FocusMonitor, FocusableOption, FocusOrigin} from '@angular/cdk/a11y'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + OnDestroy, + ViewChild, + ViewEncapsulation, + Optional, + Inject, + Input, + AfterViewInit, + NgZone, +} from '@angular/core'; +import { + CanColor, + CanDisable, + CanDisableRipple, + MatRipple, + mixinColor, + mixinDisabled, + mixinDisableRipple, +} from '@angular/material/core'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; + +/** Default color palette for round buttons (mat-fab and mat-mini-fab) */ +const DEFAULT_ROUND_BUTTON_COLOR = 'accent'; + +/** + * List of classes to add to MatLegacyButton instances based on host attributes to + * style as different variants. + */ +const BUTTON_HOST_ATTRIBUTES = [ + 'mat-button', + 'mat-flat-button', + 'mat-icon-button', + 'mat-raised-button', + 'mat-stroked-button', + 'mat-mini-fab', + 'mat-fab', +]; + +// Boilerplate for applying mixins to MatLegacyButton. +const _MatButtonBase = mixinColor( + mixinDisabled( + mixinDisableRipple( + class { + constructor(public _elementRef: ElementRef) {} + }, + ), + ), +); + +/** + * Material design button. + */ +@Component({ + selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button], + button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], + button[mat-flat-button]`, + exportAs: 'matButton', + host: { + '[attr.disabled]': 'disabled || null', + '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', + // Add a class for disabled button styling instead of the using attribute + // selector or pseudo-selector. This allows users to create focusable + // disabled buttons without recreating the styles. + '[class.mat-button-disabled]': 'disabled', + 'class': 'mat-focus-indicator', + }, + templateUrl: 'button.html', + styleUrls: ['button.css'], + inputs: ['disabled', 'disableRipple', 'color'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MatLegacyButton + extends _MatButtonBase + implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption +{ + /** Whether the button is round. */ + readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab'); + + /** Whether the button is icon button. */ + readonly isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); + + /** Reference to the MatRipple instance of the button. */ + @ViewChild(MatRipple) ripple: MatRipple; + + constructor( + elementRef: ElementRef, + private _focusMonitor: FocusMonitor, + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode: string, + ) { + super(elementRef); + + // For each of the variant selectors that is present in the button's host + // attributes, add the correct corresponding class. + for (const attr of BUTTON_HOST_ATTRIBUTES) { + if (this._hasHostAttributes(attr)) { + (this._getHostElement() as HTMLElement).classList.add(attr); + } + } + + // Add a class that applies to all buttons. This makes it easier to target if somebody + // wants to target all Material buttons. We do it here rather than `host` to ensure that + // the class is applied to derived classes. + elementRef.nativeElement.classList.add('mat-button-base'); + + if (this.isRoundButton) { + this.color = DEFAULT_ROUND_BUTTON_COLOR; + } + } + + ngAfterViewInit() { + this._focusMonitor.monitor(this._elementRef, true); + } + + ngOnDestroy() { + this._focusMonitor.stopMonitoring(this._elementRef); + } + + /** Focuses the button. */ + focus(origin?: FocusOrigin, options?: FocusOptions): void { + if (origin) { + this._focusMonitor.focusVia(this._getHostElement(), origin, options); + } else { + this._getHostElement().focus(options); + } + } + + _getHostElement() { + return this._elementRef.nativeElement; + } + + _isRippleDisabled() { + return this.disableRipple || this.disabled; + } + + /** Gets whether the button has one of the given attributes. */ + _hasHostAttributes(...attributes: string[]) { + return attributes.some(attribute => this._getHostElement().hasAttribute(attribute)); + } +} + +/** + * Material design anchor button. + */ +@Component({ + selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], + a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]`, + exportAs: 'matButton, matAnchor', + host: { + // Note that we ignore the user-specified tabindex when it's disabled for + // consistency with the `mat-button` applied on native buttons where even + // though they have an index, they're not tabbable. + '[attr.tabindex]': 'disabled ? -1 : tabIndex', + '[attr.disabled]': 'disabled || null', + '[attr.aria-disabled]': 'disabled.toString()', + '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', + '[class.mat-button-disabled]': 'disabled', + 'class': 'mat-focus-indicator', + }, + inputs: ['disabled', 'disableRipple', 'color'], + templateUrl: 'button.html', + styleUrls: ['button.css'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MatLegacyAnchor extends MatLegacyButton implements AfterViewInit, OnDestroy { + /** Tabindex of the button. */ + @Input() tabIndex: number; + + constructor( + focusMonitor: FocusMonitor, + elementRef: ElementRef, + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string, + /** @breaking-change 14.0.0 _ngZone will be required. */ + @Optional() private _ngZone?: NgZone, + ) { + super(elementRef, focusMonitor, animationMode); + } + + override ngAfterViewInit(): void { + super.ngAfterViewInit(); + + /** @breaking-change 14.0.0 _ngZone will be required. */ + if (this._ngZone) { + this._ngZone.runOutsideAngular(() => { + this._elementRef.nativeElement.addEventListener('click', this._haltDisabledEvents); + }); + } else { + this._elementRef.nativeElement.addEventListener('click', this._haltDisabledEvents); + } + } + + override ngOnDestroy(): void { + super.ngOnDestroy(); + this._elementRef.nativeElement.removeEventListener('click', this._haltDisabledEvents); + } + + _haltDisabledEvents = (event: Event): void => { + // A disabled button shouldn't apply any actions + if (this.disabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + }; +} diff --git a/src/material-experimental/mdc-button/index.ts b/src/material/legacy-button/index.ts similarity index 100% rename from src/material-experimental/mdc-button/index.ts rename to src/material/legacy-button/index.ts diff --git a/src/material-experimental/mdc-button/public-api.ts b/src/material/legacy-button/public-api.ts similarity index 74% rename from src/material-experimental/mdc-button/public-api.ts rename to src/material/legacy-button/public-api.ts index bf707709d4e3..58eccdadd24b 100644 --- a/src/material-experimental/mdc-button/public-api.ts +++ b/src/material/legacy-button/public-api.ts @@ -6,7 +6,5 @@ * found in the LICENSE file at https://angular.io/license */ +export * from './button-module'; export * from './button'; -export * from './fab'; -export * from './icon-button'; -export * from './module'; diff --git a/src/material/legacy-button/testing/BUILD.bazel b/src/material/legacy-button/testing/BUILD.bazel new file mode 100644 index 000000000000..ace3b357807a --- /dev/null +++ b/src/material/legacy-button/testing/BUILD.bazel @@ -0,0 +1,76 @@ +load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") +load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_test_library", "ng_web_test_suite", "ts_library") + +package(default_visibility = ["//visibility:public"]) + +ts_library( + name = "testing", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + deps = [ + "//src/cdk/coercion", + "//src/cdk/testing", + ], +) + +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), +) + +ng_test_library( + name = "harness_tests_lib", + srcs = ["shared.spec.ts"], + deps = [ + ":testing", + "//src/cdk/platform", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/icon", + "//src/material/icon/testing", + "//src/material/legacy-button", + "@npm//@angular/forms", + "@npm//@angular/platform-browser", + ], +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob( + ["**/*.spec.ts"], + exclude = [ + "**/*.e2e.spec.ts", + "shared.spec.ts", + ], + ), + deps = [ + ":harness_tests_lib", + ":testing", + "//src/material/legacy-button", + ], +) + +ng_web_test_suite( + name = "unit_tests", + deps = [":unit_tests_lib"], +) + +ng_e2e_test_library( + name = "e2e_test_sources", + srcs = glob(["**/*.e2e.spec.ts"]), + deps = [ + "//src/cdk/testing/private/e2e", + "//src/cdk/testing/protractor", + "//src/material/legacy-button/testing", + ], +) + +e2e_test_suite( + name = "e2e_tests", + deps = [ + ":e2e_test_sources", + "//src/cdk/testing/private/e2e", + ], +) diff --git a/src/material/button/testing/button-harness-filters.ts b/src/material/legacy-button/testing/button-harness-filters.ts similarity index 67% rename from src/material/button/testing/button-harness-filters.ts rename to src/material/legacy-button/testing/button-harness-filters.ts index 1a87768ead93..d8c904992af7 100644 --- a/src/material/button/testing/button-harness-filters.ts +++ b/src/material/legacy-button/testing/button-harness-filters.ts @@ -8,8 +8,8 @@ import {BaseHarnessFilters} from '@angular/cdk/testing'; -/** A set of criteria that can be used to filter a list of `MatButtonHarness` instances. */ -export interface ButtonHarnessFilters extends BaseHarnessFilters { +/** A set of criteria that can be used to filter a list of `MatLegacyButtonHarness` instances. */ +export interface LegacyButtonHarnessFilters extends BaseHarnessFilters { /** Only find instances whose text matches the given value. */ text?: string | RegExp; } diff --git a/src/material/button/testing/button-harness.e2e.spec.ts b/src/material/legacy-button/testing/button-harness.e2e.spec.ts similarity index 58% rename from src/material/button/testing/button-harness.e2e.spec.ts rename to src/material/legacy-button/testing/button-harness.e2e.spec.ts index 655c4268d59f..a33bfd330344 100644 --- a/src/material/button/testing/button-harness.e2e.spec.ts +++ b/src/material/legacy-button/testing/button-harness.e2e.spec.ts @@ -1,5 +1,5 @@ import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor'; -import {MatButtonHarness} from '@angular/material/button/testing'; +import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing'; import {browser} from 'protractor'; describe('button harness', () => { @@ -7,8 +7,12 @@ describe('button harness', () => { it('can click button', async () => { const loader = ProtractorHarnessEnvironment.loader(); - const disableToggle = await loader.getHarness(MatButtonHarness.with({text: 'Disable buttons'})); - const testButton = await loader.getHarness(MatButtonHarness.with({selector: '#test-button'})); + const disableToggle = await loader.getHarness( + MatLegacyButtonHarness.with({text: 'Disable buttons'}), + ); + const testButton = await loader.getHarness( + MatLegacyButtonHarness.with({selector: '#test-button'}), + ); expect(await testButton.isDisabled()).toBe(false); await disableToggle.click(); diff --git a/src/material/legacy-button/testing/button-harness.spec.ts b/src/material/legacy-button/testing/button-harness.spec.ts new file mode 100644 index 000000000000..05ee78558671 --- /dev/null +++ b/src/material/legacy-button/testing/button-harness.spec.ts @@ -0,0 +1,7 @@ +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {runHarnessTests} from '@angular/material/legacy-button/testing/shared.spec'; +import {MatLegacyButtonHarness} from './button-harness'; + +describe('Non-MDC-based MatLegacyButtonHarness', () => { + runHarnessTests(MatLegacyButtonModule, MatLegacyButtonHarness); +}); diff --git a/src/material-experimental/mdc-button/testing/button-harness.ts b/src/material/legacy-button/testing/button-harness.ts similarity index 55% rename from src/material-experimental/mdc-button/testing/button-harness.ts rename to src/material/legacy-button/testing/button-harness.ts index ea26716de537..4bd95c039641 100644 --- a/src/material-experimental/mdc-button/testing/button-harness.ts +++ b/src/material/legacy-button/testing/button-harness.ts @@ -6,33 +6,28 @@ * found in the LICENSE file at https://angular.io/license */ -import { - ComponentHarnessConstructor, - ContentContainerComponentHarness, - HarnessPredicate, -} from '@angular/cdk/testing'; +import {ContentContainerComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {ButtonHarnessFilters} from '@angular/material/button/testing'; +import {LegacyButtonHarnessFilters} from './button-harness-filters'; -/** Harness for interacting with a MDC-based mat-button in tests. */ -export class MatButtonHarness extends ContentContainerComponentHarness { +/** Harness for interacting with a standard mat-button in tests. */ +export class MatLegacyButtonHarness extends ContentContainerComponentHarness { // TODO(jelbourn) use a single class, like `.mat-button-base` - static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button], - [mat-icon-button], [mat-stroked-button], [mat-fab], [mat-mini-fab]`; + /** The selector for the host element of a `MatLegacyButton` instance. */ + static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button], [mat-icon-button], + [mat-stroked-button], [mat-fab], [mat-mini-fab]`; /** - * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes. - * @param options Options for narrowing the search: - * - `selector` finds a button whose host element matches the given selector. - * - `text` finds a button with specific text content. + * Gets a `HarnessPredicate` that can be used to search for a `MatLegacyButtonHarness` that meets + * certain criteria. + * @param options Options for filtering which button instances are considered a match. * @return a `HarnessPredicate` configured with the given options. */ - static with( - this: ComponentHarnessConstructor, - options: ButtonHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options).addOption('text', options.text, (harness, text) => - HarnessPredicate.stringMatches(harness.getText(), text), + static with(options: LegacyButtonHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyButtonHarness, options).addOption( + 'text', + options.text, + (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text), ); } @@ -50,23 +45,23 @@ export class MatButtonHarness extends ContentContainerComponentHarness { return (await this.host()).click(...(args as [])); } - /** Gets a boolean promise indicating if the button is disabled. */ + /** Whether the button is disabled. */ async isDisabled(): Promise { const disabled = (await this.host()).getAttribute('disabled'); return coerceBooleanProperty(await disabled); } - /** Gets a promise for the button's label text. */ + /** Gets the button's label text. */ async getText(): Promise { return (await this.host()).text(); } - /** Focuses the button and returns a void promise that indicates when the action is complete. */ + /** Focuses the button. */ async focus(): Promise { return (await this.host()).focus(); } - /** Blurs the button and returns a void promise that indicates when the action is complete. */ + /** Blurs the button. */ async blur(): Promise { return (await this.host()).blur(); } diff --git a/src/material-experimental/mdc-button/testing/index.ts b/src/material/legacy-button/testing/index.ts similarity index 100% rename from src/material-experimental/mdc-button/testing/index.ts rename to src/material/legacy-button/testing/index.ts diff --git a/src/material-experimental/mdc-button/testing/public-api.ts b/src/material/legacy-button/testing/public-api.ts similarity index 76% rename from src/material-experimental/mdc-button/testing/public-api.ts rename to src/material/legacy-button/testing/public-api.ts index 87da56118b86..bdb6d150e3c3 100644 --- a/src/material-experimental/mdc-button/testing/public-api.ts +++ b/src/material/legacy-button/testing/public-api.ts @@ -7,4 +7,4 @@ */ export * from './button-harness'; -export {ButtonHarnessFilters} from '@angular/material/button/testing'; +export * from './button-harness-filters'; diff --git a/src/material/button/testing/shared.spec.ts b/src/material/legacy-button/testing/shared.spec.ts similarity index 95% rename from src/material/button/testing/shared.spec.ts rename to src/material/legacy-button/testing/shared.spec.ts index 2a96d2045c3c..3f71ad74a2c0 100644 --- a/src/material/button/testing/shared.spec.ts +++ b/src/material/legacy-button/testing/shared.spec.ts @@ -3,15 +3,15 @@ import {HarnessLoader} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component} from '@angular/core'; import {ComponentFixture, inject, TestBed} from '@angular/core/testing'; -import {MatButtonModule} from '@angular/material/button'; -import {MatButtonHarness} from '@angular/material/button/testing/button-harness'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing/button-harness'; import {MatIconModule} from '@angular/material/icon'; import {MatIconHarness} from '@angular/material/icon/testing/icon-harness'; /** Shared tests to run on both the original and MDC-based buttons. */ export function runHarnessTests( - buttonModule: typeof MatButtonModule, - buttonHarness: typeof MatButtonHarness, + buttonModule: typeof MatLegacyButtonModule, + buttonHarness: typeof MatLegacyButtonHarness, ) { let fixture: ComponentFixture; let loader: HarnessLoader; diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss index b2eb6d0a350b..17542aba495c 100644 --- a/src/material/legacy-core/theming/_all-theme.scss +++ b/src/material/legacy-core/theming/_all-theme.scss @@ -1,6 +1,7 @@ @use '../../core/theming/theming'; @use '../../core/theming/all-theme'; @use '../core-theme'; +@use '../../legacy-button/button-theme'; @use '../../legacy-card/card-theme'; @use '../../legacy-progress-bar/progress-bar-theme'; @use '../../legacy-tooltip/tooltip-theme'; @@ -21,6 +22,7 @@ @mixin all-legacy-component-themes($theme-or-color-config) { $dedupe-key: 'angular-material-legacy-theme'; @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { + @include button-theme.theme($theme-or-color-config); @include core-theme.theme($theme-or-color-config); @include card-theme.theme($theme-or-color-config); @include progress-bar-theme.theme($theme-or-color-config); diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss index 1d4d8d923051..d368a944914e 100644 --- a/src/material/legacy-core/typography/_all-typography.scss +++ b/src/material/legacy-core/typography/_all-typography.scss @@ -3,6 +3,7 @@ @use '../../core/theming/theming'; @use '../option/option-theme'; @use '../option/optgroup-theme'; +@use '../../legacy-button/button-theme'; @use '../../legacy-card/card-theme'; @use '../../legacy-checkbox/checkbox-theme'; @use '../../legacy-progress-bar/progress-bar-theme'; @@ -38,6 +39,7 @@ @include all-typography.private-all-unmigrated-component-typographies($config); @include option-theme.typography($config); @include optgroup-theme.typography($config); + @include button-theme.typography($config); @include card-theme.typography($config); @include progress-bar-theme.typography($config); @include tooltip-theme.typography($config); diff --git a/src/material/menu/testing/menu-harness.ts b/src/material/menu/testing/menu-harness.ts index b4d0f81e40a7..c1130684e719 100644 --- a/src/material/menu/testing/menu-harness.ts +++ b/src/material/menu/testing/menu-harness.ts @@ -32,7 +32,7 @@ export abstract class _MatMenuHarnessBase< private _documentRootLocator = this.documentRootLocatorFactory(); protected abstract _itemClass: ItemType; - // TODO: potentially extend MatButtonHarness + // TODO: potentially extend MatLegacyButtonHarness /** Whether the menu is disabled. */ async isDisabled(): Promise { diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel index f9f3c46fb8d7..b572c592eb9e 100644 --- a/src/material/paginator/BUILD.bazel +++ b/src/material/paginator/BUILD.bazel @@ -19,8 +19,8 @@ ng_module( assets = [":paginator.css"] + glob(["**/*.html"]), deps = [ "//src/cdk/coercion", - "//src/material/button", "//src/material/core", + "//src/material/legacy-button", "//src/material/legacy-select", "//src/material/legacy-tooltip", "@npm//@angular/common", diff --git a/src/material/paginator/paginator-module.ts b/src/material/paginator/paginator-module.ts index 0bcf3a3d8e8e..c073e144b998 100644 --- a/src/material/paginator/paginator-module.ts +++ b/src/material/paginator/paginator-module.ts @@ -9,7 +9,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatCommonModule} from '@angular/material/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; import {MatPaginator} from './paginator'; @@ -18,7 +18,7 @@ import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl'; @NgModule({ imports: [ CommonModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacySelectModule, MatLegacyTooltipModule, MatCommonModule, diff --git a/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 80ffafb8d68d..fa9f0bf29c4d 100644 --- a/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,7 +1,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { MatButtonModule } from '@angular/material/button'; +import { MatLegacyButtonModule } from '@angular/material/legacy-button'; import { MatLegacyCardModule } from '@angular/material/legacy-card'; import { MatLegacyInputModule } from '@angular/material/legacy-input'; import { MatLegacyRadioModule } from '@angular/material/legacy-radio'; @@ -19,7 +19,7 @@ describe('<%= classify(name) %>Component', () => { imports: [ NoopAnimationsModule, ReactiveFormsModule, - MatButtonModule, + MatLegacyButtonModule, MatLegacyCardModule, MatLegacyInputModule, MatLegacyRadioModule, diff --git a/src/material/schematics/ng-generate/address-form/index.spec.ts b/src/material/schematics/ng-generate/address-form/index.spec.ts index ac8781950d10..aa2b50069934 100644 --- a/src/material/schematics/ng-generate/address-form/index.spec.ts +++ b/src/material/schematics/ng-generate/address-form/index.spec.ts @@ -36,7 +36,7 @@ describe('Material address-form schematic', () => { const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts'); expect(moduleContent).toContain('MatLegacyInputModule'); - expect(moduleContent).toContain('MatButtonModule'); + expect(moduleContent).toContain('MatLegacyButtonModule'); expect(moduleContent).toContain('MatLegacySelectModule'); expect(moduleContent).toContain('MatLegacyRadioModule'); expect(moduleContent).toContain('ReactiveFormsModule'); diff --git a/src/material/schematics/ng-generate/address-form/index.ts b/src/material/schematics/ng-generate/address-form/index.ts index 927600c80145..148baf104cf5 100644 --- a/src/material/schematics/ng-generate/address-form/index.ts +++ b/src/material/schematics/ng-generate/address-form/index.ts @@ -45,7 +45,12 @@ function addFormModulesToModule(options: Schema) { 'MatLegacyInputModule', '@angular/material/legacy-input', ); - addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button'); + addModuleImportToModule( + host, + modulePath, + 'MatLegacyButtonModule', + '@angular/material/legacy-button', + ); addModuleImportToModule( host, modulePath, diff --git a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index c8c6e6b9a6e2..df5c7dfe91df 100644 --- a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,7 +1,7 @@ import { LayoutModule } from '@angular/cdk/layout'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MatButtonModule } from '@angular/material/button'; +import { MatLegacyButtonModule } from '@angular/material/legacy-button'; import { MatCardModule } from '@angular/material/legacy-card'; import { MatGridListModule } from '@angular/material/grid-list'; import { MatIconModule } from '@angular/material/icon'; @@ -19,7 +19,7 @@ describe('<%= classify(name) %>Component', () => { imports: [ NoopAnimationsModule, LayoutModule, - MatButtonModule, + MatLegacyButtonModule, MatCardModule, MatGridListModule, MatIconModule, diff --git a/src/material/schematics/ng-generate/dashboard/index.spec.ts b/src/material/schematics/ng-generate/dashboard/index.spec.ts index 85861d15525c..843d97f17bd3 100644 --- a/src/material/schematics/ng-generate/dashboard/index.spec.ts +++ b/src/material/schematics/ng-generate/dashboard/index.spec.ts @@ -39,7 +39,7 @@ describe('material-dashboard-schematic', () => { expect(moduleContent).toContain('MatLegacyCardModule'); expect(moduleContent).toContain('MatLegacyMenuModule'); expect(moduleContent).toContain('MatIconModule'); - expect(moduleContent).toContain('MatButtonModule'); + expect(moduleContent).toContain('MatLegacyButtonModule'); expect(moduleContent).toContain( `import { MatGridListModule } from '@angular/material/grid-list';`, @@ -51,7 +51,9 @@ describe('material-dashboard-schematic', () => { `import { MatLegacyMenuModule } from '@angular/material/legacy-menu';`, ); expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`); - expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`); + expect(moduleContent).toContain( + `import { MatLegacyButtonModule } from '@angular/material/legacy-button';`, + ); }); it('should throw if no name has been specified', async () => { diff --git a/src/material/schematics/ng-generate/dashboard/index.ts b/src/material/schematics/ng-generate/dashboard/index.ts index 2e0b8962e27d..b3365e7d73b0 100644 --- a/src/material/schematics/ng-generate/dashboard/index.ts +++ b/src/material/schematics/ng-generate/dashboard/index.ts @@ -53,7 +53,12 @@ function addNavModulesToModule(options: Schema) { '@angular/material/legacy-menu', ); addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon'); - addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button'); + addModuleImportToModule( + host, + modulePath, + 'MatLegacyButtonModule', + '@angular/material/legacy-button', + ); addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout'); }; } diff --git a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 19bc7a840d89..340a5b02ae08 100644 --- a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,7 +1,7 @@ import { LayoutModule } from '@angular/cdk/layout'; import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { MatButtonModule } from '@angular/material/button'; +import { MatLegacyButtonModule } from '@angular/material/legacy-button'; import { MatIconModule } from '@angular/material/icon'; import { MatLegacyListModule } from '@angular/material/legacy-list'; import { MatSidenavModule } from '@angular/material/sidenav'; @@ -19,7 +19,7 @@ describe('<%= classify(name) %>Component', () => { imports: [ NoopAnimationsModule, LayoutModule, - MatButtonModule, + MatLegacyButtonModule, MatIconModule, MatLegacyListModule, MatSidenavModule, diff --git a/src/material/schematics/ng-generate/navigation/index.spec.ts b/src/material/schematics/ng-generate/navigation/index.spec.ts index 42c489766fcc..bbf4dbffcd79 100644 --- a/src/material/schematics/ng-generate/navigation/index.spec.ts +++ b/src/material/schematics/ng-generate/navigation/index.spec.ts @@ -20,12 +20,14 @@ describe('material-navigation-schematic', () => { const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts'); expect(moduleContent).toMatch(/LayoutModule,\s+/); expect(moduleContent).toMatch(/MatToolbarModule,\s+/); - expect(moduleContent).toMatch(/MatButtonModule,\s+/); + expect(moduleContent).toMatch(/MatLegacyButtonModule,\s+/); expect(moduleContent).toMatch(/MatSidenavModule,\s+/); expect(moduleContent).toMatch(/MatIconModule,\s+/); expect(moduleContent).toMatch(/MatLegacyListModule\s+],/); expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`); - expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`); + expect(moduleContent).toContain( + `import { MatLegacyButtonModule } from '@angular/material/legacy-button';`, + ); expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`); expect(moduleContent).toContain( `import { MatLegacyListModule } from '@angular/material/legacy-list';`, diff --git a/src/material/schematics/ng-generate/navigation/index.ts b/src/material/schematics/ng-generate/navigation/index.ts index 3b5dd5f2e7b5..adb8313f0123 100644 --- a/src/material/schematics/ng-generate/navigation/index.ts +++ b/src/material/schematics/ng-generate/navigation/index.ts @@ -41,7 +41,12 @@ function addNavModulesToModule(options: Schema) { const modulePath = (await findModuleFromOptions(host, options))!; addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout'); addModuleImportToModule(host, modulePath, 'MatToolbarModule', '@angular/material/toolbar'); - addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button'); + addModuleImportToModule( + host, + modulePath, + 'MatLegacyButtonModule', + '@angular/material/legacy-button', + ); addModuleImportToModule(host, modulePath, 'MatSidenavModule', '@angular/material/sidenav'); addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon'); addModuleImportToModule( diff --git a/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 3243a0d9dc05..5b699075f454 100644 --- a/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,5 +1,5 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { MatButtonModule } from '@angular/material/button'; +import { MatLegacyButtonModule } from '@angular/material/legacy-button'; import { MatIconModule } from '@angular/material/icon'; import { MatTreeModule } from '@angular/material/tree'; @@ -13,7 +13,7 @@ describe('<%= classify(name) %>Component', () => { TestBed.configureTestingModule({ declarations: [ <%= classify(name) %>Component ], imports: [ - MatButtonModule, + MatLegacyButtonModule, MatIconModule, MatTreeModule, ] diff --git a/src/material/schematics/ng-generate/tree/index.spec.ts b/src/material/schematics/ng-generate/tree/index.spec.ts index 8234c5f3b439..4a600280e14e 100644 --- a/src/material/schematics/ng-generate/tree/index.spec.ts +++ b/src/material/schematics/ng-generate/tree/index.spec.ts @@ -37,7 +37,7 @@ describe('Material tree schematic', () => { expect(moduleContent).toContain('MatTreeModule'); expect(moduleContent).toContain('MatIconModule'); - expect(moduleContent).toContain('MatButtonModule'); + expect(moduleContent).toContain('MatLegacyButtonModule'); }); it('should throw if no name has been specified', async () => { diff --git a/src/material/schematics/ng-generate/tree/index.ts b/src/material/schematics/ng-generate/tree/index.ts index a45eb4a8930e..eb14e85137dc 100644 --- a/src/material/schematics/ng-generate/tree/index.ts +++ b/src/material/schematics/ng-generate/tree/index.ts @@ -41,6 +41,11 @@ function addTreeModulesToModule(options: Schema) { const modulePath = (await findModuleFromOptions(host, options))!; addModuleImportToModule(host, modulePath, 'MatTreeModule', '@angular/material/tree'); addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon'); - addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button'); + addModuleImportToModule( + host, + modulePath, + 'MatLegacyButtonModule', + '@angular/material/legacy-button', + ); }; } diff --git a/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts b/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts index 9ab6e8fe9da8..1c011a057ee7 100644 --- a/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts +++ b/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts @@ -27,7 +27,7 @@ const ANGULAR_MATERIAL_FILEPATH_REGEX = new RegExp(`${materialModuleSpecifier}/( /** * Migration that updates imports which refer to the primary Angular Material - * entry-point to use the appropriate secondary entry points (e.g. @angular/material/button). + * entry-point to use the appropriate secondary entry points (e.g. @angular/material/legacy-button). */ export class SecondaryEntryPointsMigration extends Migration { printer = ts.createPrinter(); diff --git a/src/material/snack-bar/BUILD.bazel b/src/material/snack-bar/BUILD.bazel index 118395c40301..ee7c587d4f2b 100644 --- a/src/material/snack-bar/BUILD.bazel +++ b/src/material/snack-bar/BUILD.bazel @@ -27,8 +27,8 @@ ng_module( "//src/cdk/layout", "//src/cdk/overlay", "//src/cdk/portal", - "//src/material/button", "//src/material/core", + "//src/material/legacy-button", "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/core", diff --git a/src/material/snack-bar/snack-bar-module.ts b/src/material/snack-bar/snack-bar-module.ts index 881c55389909..65cac7f64e58 100644 --- a/src/material/snack-bar/snack-bar-module.ts +++ b/src/material/snack-bar/snack-bar-module.ts @@ -11,12 +11,12 @@ import {PortalModule} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatCommonModule} from '@angular/material/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {SimpleSnackBar} from './simple-snack-bar'; import {MatSnackBarContainer} from './snack-bar-container'; @NgModule({ - imports: [OverlayModule, PortalModule, CommonModule, MatButtonModule, MatCommonModule], + imports: [OverlayModule, PortalModule, CommonModule, MatLegacyButtonModule, MatCommonModule], exports: [MatSnackBarContainer, MatCommonModule], declarations: [MatSnackBarContainer, SimpleSnackBar], }) diff --git a/src/material/stepper/BUILD.bazel b/src/material/stepper/BUILD.bazel index bcbd6c70ccf5..e7371394d212 100644 --- a/src/material/stepper/BUILD.bazel +++ b/src/material/stepper/BUILD.bazel @@ -28,9 +28,9 @@ ng_module( "//src/cdk/bidi", "//src/cdk/portal", "//src/cdk/stepper", - "//src/material/button", "//src/material/core", "//src/material/icon", + "//src/material/legacy-button", "@npm//@angular/animations", "@npm//@angular/common", "@npm//@angular/core", diff --git a/src/material/stepper/stepper-module.ts b/src/material/stepper/stepper-module.ts index f56f0546d7b2..ae42d5a630d9 100644 --- a/src/material/stepper/stepper-module.ts +++ b/src/material/stepper/stepper-module.ts @@ -10,7 +10,7 @@ import {PortalModule} from '@angular/cdk/portal'; import {CdkStepperModule} from '@angular/cdk/stepper'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from '@angular/material/core'; import {MatIconModule} from '@angular/material/icon'; import {MatStepHeader} from './step-header'; @@ -26,7 +26,7 @@ import {MatStepContent} from './step-content'; MatCommonModule, CommonModule, PortalModule, - MatButtonModule, + MatLegacyButtonModule, CdkStepperModule, MatIconModule, MatRippleModule, diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts index 94af0dc02ed2..9fa16adc01a0 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -1,6 +1,6 @@ import {Component, NgModule, ErrorHandler} from '@angular/core'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatButtonModule} from '@angular/material-experimental/mdc-button'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index b4b2822c7820..7e5a6f3ed0cd 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -5,7 +5,7 @@ import {CdkTableModule, DataSource} from '@angular/cdk/table'; import {Component, ElementRef, NgModule, ErrorHandler} from '@angular/core'; import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; -import {MatButtonModule} from '@angular/material/button'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; @@ -101,7 +101,7 @@ export class KitchenSink { MatLegacyAutocompleteModule, MatBadgeModule, MatBottomSheetModule, - MatButtonModule, + MatLegacyButtonModule, MatButtonToggleModule, MatLegacyCardModule, MatLegacyCheckboxModule, diff --git a/tools/public_api_guard/material/button-testing.md b/tools/public_api_guard/material/button-testing.md index 3c20196ef07f..57c6f99ca8fd 100644 --- a/tools/public_api_guard/material/button-testing.md +++ b/tools/public_api_guard/material/button-testing.md @@ -4,14 +4,12 @@ ```ts -import { BaseHarnessFilters } from '@angular/cdk/testing'; +import { ComponentHarnessConstructor } from '@angular/cdk/testing'; import { ContentContainerComponentHarness } from '@angular/cdk/testing'; import { HarnessPredicate } from '@angular/cdk/testing'; +import { LegacyButtonHarnessFilters } from '@angular/material/legacy-button/testing'; -// @public -export interface ButtonHarnessFilters extends BaseHarnessFilters { - text?: string | RegExp; -} +export { LegacyButtonHarnessFilters } // @public export class MatButtonHarness extends ContentContainerComponentHarness { @@ -21,10 +19,11 @@ export class MatButtonHarness extends ContentContainerComponentHarness { click(): Promise; focus(): Promise; getText(): Promise; + // (undocumented) static hostSelector: string; isDisabled(): Promise; isFocused(): Promise; - static with(options?: ButtonHarnessFilters): HarnessPredicate; + static with(this: ComponentHarnessConstructor, options?: LegacyButtonHarnessFilters): HarnessPredicate; } // (No @packageDocumentation comment for this package) diff --git a/tools/public_api_guard/material/button.md b/tools/public_api_guard/material/button.md index 2b49820f193c..a08c12ac9164 100644 --- a/tools/public_api_guard/material/button.md +++ b/tools/public_api_guard/material/button.md @@ -5,70 +5,129 @@ ```ts import { _AbstractConstructor } from '@angular/material/core'; -import { AfterViewInit } from '@angular/core'; +import { BooleanInput } from '@angular/cdk/coercion'; import { CanColor } from '@angular/material/core'; import { CanDisable } from '@angular/material/core'; import { CanDisableRipple } from '@angular/material/core'; import { _Constructor } from '@angular/material/core'; import { ElementRef } from '@angular/core'; -import { FocusableOption } from '@angular/cdk/a11y'; -import { FocusMonitor } from '@angular/cdk/a11y'; import { FocusOrigin } from '@angular/cdk/a11y'; import * as i0 from '@angular/core'; -import * as i2 from '@angular/material/core'; +import * as i4 from '@angular/material/core'; +import { InjectionToken } from '@angular/core'; import { MatRipple } from '@angular/material/core'; import { NgZone } from '@angular/core'; import { OnDestroy } from '@angular/core'; +import { OnInit } from '@angular/core'; +import { Platform } from '@angular/cdk/platform'; +import { ThemePalette } from '@angular/material/core'; // @public -export class MatAnchor extends MatButton implements AfterViewInit, OnDestroy { - constructor(focusMonitor: FocusMonitor, elementRef: ElementRef, animationMode: string, - _ngZone?: NgZone | undefined); +export const MAT_FAB_DEFAULT_OPTIONS: InjectionToken; + +// @public +export function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions; + +// @public +export class MatAnchor extends MatAnchorBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string); // (undocumented) - _haltDisabledEvents: (event: Event) => void; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) - ngAfterViewInit(): void; + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatButton extends MatButtonBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string); + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export class MatButtonModule { // (undocumented) - ngOnDestroy(): void; - tabIndex: number; + static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public -export class MatButton extends _MatButtonBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption { - constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _animationMode: string); +export class MatFabAnchor extends MatAnchor { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined); // (undocumented) - _animationMode: string; - focus(origin?: FocusOrigin, options?: FocusOptions): void; + get extended(): boolean; + set extended(value: BooleanInput); // (undocumented) - _getHostElement(): any; - _hasHostAttributes(...attributes: string[]): boolean; - readonly isIconButton: boolean; + _isFab: boolean; // (undocumented) - _isRippleDisabled(): boolean; - readonly isRoundButton: boolean; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) - ngAfterViewInit(): void; + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatFabButton extends MatButtonBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined); + // (undocumented) + get extended(): boolean; + set extended(value: BooleanInput); // (undocumented) - ngOnDestroy(): void; - ripple: MatRipple; + _isFab: boolean; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; + static ɵfac: i0.ɵɵFactoryDeclaration; } -// @public (undocumented) -export class MatButtonModule { +// @public +export interface MatFabDefaultOptions { // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; + color?: ThemePalette; +} + +// @public +export class MatIconAnchor extends MatAnchorBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string); // (undocumented) - static ɵinj: i0.ɵɵInjectorDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatIconButton extends MatButtonBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string); + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatMiniFabAnchor extends MatAnchor { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined); + // (undocumented) + _isFab: boolean; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatMiniFabButton extends MatButtonBase { + constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined); + // (undocumented) + _isFab: boolean; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵfac: i0.ɵɵFactoryDeclaration; } // (No @packageDocumentation comment for this package) diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md index 8f9599e243be..3f4c99e31594 100644 --- a/tools/public_api_guard/material/datepicker.md +++ b/tools/public_api_guard/material/datepicker.md @@ -29,7 +29,7 @@ import { FocusOrigin } from '@angular/cdk/a11y'; import { FormGroupDirective } from '@angular/forms'; import * as i0 from '@angular/core'; import * as i14 from '@angular/common'; -import * as i15 from '@angular/material/button'; +import * as i15 from '@angular/material/legacy-button'; import * as i16 from '@angular/cdk/overlay'; import * as i17 from '@angular/cdk/a11y'; import * as i18 from '@angular/cdk/portal'; @@ -37,8 +37,8 @@ import * as i19 from '@angular/material/core'; import * as i20 from '@angular/cdk/scrolling'; import { InjectionToken } from '@angular/core'; import { Injector } from '@angular/core'; -import { MatButton } from '@angular/material/button'; import { MatDateFormats } from '@angular/material/core'; +import { MatLegacyButton } from '@angular/material/legacy-button'; import { MatLegacyFormField } from '@angular/material/legacy-form-field'; import { MatLegacyFormFieldControl } from '@angular/material/legacy-form-field'; import { NgControl } from '@angular/forms'; @@ -552,7 +552,7 @@ export class MatDatepickerModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public @@ -573,7 +573,7 @@ interface MatDatepickerPanel, S, D = ExtractDa export class MatDatepickerToggle implements AfterContentInit, OnChanges, OnDestroy { constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef, defaultTabIndex: string); ariaLabel: string; - _button: MatButton; + _button: MatLegacyButton; _customIcon: MatDatepickerToggleIcon; datepicker: MatDatepickerPanel, D>; get disabled(): boolean; diff --git a/tools/public_api_guard/material/legacy-button-testing.md b/tools/public_api_guard/material/legacy-button-testing.md new file mode 100644 index 000000000000..ff088425861c --- /dev/null +++ b/tools/public_api_guard/material/legacy-button-testing.md @@ -0,0 +1,32 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { BaseHarnessFilters } from '@angular/cdk/testing'; +import { ContentContainerComponentHarness } from '@angular/cdk/testing'; +import { HarnessPredicate } from '@angular/cdk/testing'; + +// @public +export interface LegacyButtonHarnessFilters extends BaseHarnessFilters { + text?: string | RegExp; +} + +// @public +export class MatLegacyButtonHarness extends ContentContainerComponentHarness { + blur(): Promise; + click(relativeX: number, relativeY: number): Promise; + click(location: 'center'): Promise; + click(): Promise; + focus(): Promise; + getText(): Promise; + static hostSelector: string; + isDisabled(): Promise; + isFocused(): Promise; + static with(options?: LegacyButtonHarnessFilters): HarnessPredicate; +} + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/legacy-button.md b/tools/public_api_guard/material/legacy-button.md new file mode 100644 index 000000000000..73e202d2456e --- /dev/null +++ b/tools/public_api_guard/material/legacy-button.md @@ -0,0 +1,76 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { _AbstractConstructor } from '@angular/material/core'; +import { AfterViewInit } from '@angular/core'; +import { CanColor } from '@angular/material/core'; +import { CanDisable } from '@angular/material/core'; +import { CanDisableRipple } from '@angular/material/core'; +import { _Constructor } from '@angular/material/core'; +import { ElementRef } from '@angular/core'; +import { FocusableOption } from '@angular/cdk/a11y'; +import { FocusMonitor } from '@angular/cdk/a11y'; +import { FocusOrigin } from '@angular/cdk/a11y'; +import * as i0 from '@angular/core'; +import * as i2 from '@angular/material/core'; +import { MatRipple } from '@angular/material/core'; +import { NgZone } from '@angular/core'; +import { OnDestroy } from '@angular/core'; + +// @public +export class MatLegacyAnchor extends MatLegacyButton implements AfterViewInit, OnDestroy { + constructor(focusMonitor: FocusMonitor, elementRef: ElementRef, animationMode: string, + _ngZone?: NgZone | undefined); + // (undocumented) + _haltDisabledEvents: (event: Event) => void; + // (undocumented) + ngAfterViewInit(): void; + // (undocumented) + ngOnDestroy(): void; + tabIndex: number; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyButton extends _MatButtonBase implements AfterViewInit, OnDestroy, CanDisable, CanColor, CanDisableRipple, FocusableOption { + constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _animationMode: string); + // (undocumented) + _animationMode: string; + focus(origin?: FocusOrigin, options?: FocusOptions): void; + // (undocumented) + _getHostElement(): any; + _hasHostAttributes(...attributes: string[]): boolean; + readonly isIconButton: boolean; + // (undocumented) + _isRippleDisabled(): boolean; + readonly isRoundButton: boolean; + // (undocumented) + ngAfterViewInit(): void; + // (undocumented) + ngOnDestroy(): void; + ripple: MatRipple; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export class MatLegacyButtonModule { + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; + // (undocumented) + static ɵinj: i0.ɵɵInjectorDeclaration; + // (undocumented) + static ɵmod: i0.ɵɵNgModuleDeclaration; +} + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md index 0d35849dcd46..35bf26908980 100644 --- a/tools/public_api_guard/material/paginator.md +++ b/tools/public_api_guard/material/paginator.md @@ -13,7 +13,7 @@ import { EventEmitter } from '@angular/core'; import { HasInitialized } from '@angular/material/core'; import * as i0 from '@angular/core'; import * as i2 from '@angular/common'; -import * as i3 from '@angular/material/button'; +import * as i3 from '@angular/material/legacy-button'; import * as i4 from '@angular/material/legacy-select'; import * as i5 from '@angular/material/legacy-tooltip'; import * as i6 from '@angular/material/core'; @@ -126,7 +126,7 @@ export class MatPaginatorModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public diff --git a/tools/public_api_guard/material/snack-bar.md b/tools/public_api_guard/material/snack-bar.md index 8c72bc70535a..356c250757e1 100644 --- a/tools/public_api_guard/material/snack-bar.md +++ b/tools/public_api_guard/material/snack-bar.md @@ -22,7 +22,7 @@ import * as i0 from '@angular/core'; import * as i3 from '@angular/cdk/overlay'; import * as i4 from '@angular/cdk/portal'; import * as i5 from '@angular/common'; -import * as i6 from '@angular/material/button'; +import * as i6 from '@angular/material/legacy-button'; import * as i7 from '@angular/material/core'; import { InjectionToken } from '@angular/core'; import { Injector } from '@angular/core'; @@ -155,7 +155,7 @@ export class MatSnackBarModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public diff --git a/tools/public_api_guard/material/stepper.md b/tools/public_api_guard/material/stepper.md index 83c6357d5f07..9c10c49b7f91 100644 --- a/tools/public_api_guard/material/stepper.md +++ b/tools/public_api_guard/material/stepper.md @@ -26,7 +26,7 @@ import { FocusMonitor } from '@angular/cdk/a11y'; import { FocusOrigin } from '@angular/cdk/a11y'; import { FormGroupDirective } from '@angular/forms'; import * as i0 from '@angular/core'; -import * as i10 from '@angular/material/button'; +import * as i10 from '@angular/material/legacy-button'; import * as i11 from '@angular/cdk/stepper'; import * as i12 from '@angular/material/icon'; import * as i7 from '@angular/material/core'; @@ -197,7 +197,7 @@ export class MatStepperModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public