4. Move src/material-experimental/mdc-dialog to src/material/dialog

Perform the following steps to complete the move and fix all references:
1. Look at `src/material-experimental/mdc-dialog/BUILD` to see if this component has dependencies on other MDC components that need to be moved out of experimental first. Note: all MDC components depend on `@angular/material-experimental/mdc-core` for `MatCommonModule`. However, this is a direct re-export from `@angular/material/core`, so the import can simply be updated to `import {MatCommonModule} from '@angular/material/core';`. More generally, the import can just be switched for anything that's a direct re-export from `@angular/material/*`
2. Move directory `src/material-experimental/mdc-dialog` to `src/material/dialog`
3. Global find & replace `@angular/material-experimental/mdc-dialog` with `@angular/material/dialog`
4. Global find & replace `src/material-experimental/mdc-dialog` with `src/material/dialog`
5. Global find & replace `mdc_dialog_scss_lib` with `dialog_scss_lib`
6. Under `src/material-experimental` regex replace `@(use|forward|import) '(.?./)+mdc-dialog[^;]*;.*\n` with ``
7. Under `src/material/dialog` search for "material-experimental" and fix any occurrences
8. Under `src/material/dialog` clean up sass references to `@use '@angular/material'`
   Some common symbols that need to be updated include:
     - mat.get-color-config -> theming.get-color-config
     - mat.get-density-config -> theming.get-density-config
     - mat.get-typography-config -> theming.get-typography-config
     - mat.private-legacy-get-theme -> theming.private-legacy-get-theme
     - mat.private-check-duplicate-theme-styles -> theming.private-check-duplicate-theme-styles
     - mat.private-using-mdc-theme -> mdc-helpers.using-mdc-theme
9. In `src/material/dialog/BUILD`, change the rule named `mdc-dialog` to `dialog`
10. In `src/material-experimental/mdc-core/theming/_all-theme.scss`, change `dialog-theme.theme` to `mat.dialog-theme`
11. In `src/material/_index.scss`, find the line that says `@forward './legacy-dialog/dialog-theme'`, duplicate it, and remove the `legacy-`.
12. In `.ng-dev/commit-message.mts` change `material-experimental/mdc-dialog` to `material/dialog`
13. In `src/material-experimental/config.bzl`, remove `mdc-dialog` and `mdc-dialog/testing` from the `entryPoints` list
14. In `src/material/config.bzl`, add `dialog` and `dialog/testing` to the `entryPoints` list.
15. Copy the `overview` and `source-files` rules from `src/material/legacy-dialog/BUILD` to `src/material/dialog/BUILD` (you'll need to add `markdown_to_html` to the list of rules loaded from `//tools:defaults.bzl`)
16. Copy `src/material/legacy-dialog/dialog.md` to `src/material/dialog/dialog.md`
17. Approve new api golds: `touch tools/public_api_guard/material/dialog.md tools/public_api_guard/material/dialog-testing.md; yarn approve-api dialog; yarn approve-api dialog/testing`
18. Run `yarn format`

Author: mmalerba

.github/CODEOWNERS

@@ -115,7 +115,7 @@
 /src/material-experimental/mdc-checkbox/**             @mmalerba
 /src/material-experimental/mdc-chips/**                @mmalerba
 /src/material-experimental/mdc-core/**                 @crisbeto
-/src/material-experimental/mdc-dialog/**               @devversion
+/src/material/dialog/**               @devversion
 /src/material/form-field/**                            @devversion @mmalerba
 /src/material-experimental/mdc-list/**                 @mmalerba @devversion
 /src/material-experimental/mdc-menu/**                 @crisbeto

.ng-dev/commit-message.mts

@@ -46,7 +46,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-checkbox',
     'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
-    'material-experimental/mdc-dialog',
+    'material/dialog',
     'material/form-field',
     'material/input',
     'material-experimental/mdc-list',

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

@@ -13,9 +13,9 @@ ng_module(
         "//src/cdk/drag-drop",
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-checkbox",
-        "//src/material-experimental/mdc-dialog",
         "//src/material-experimental/mdc-select",
         "//src/material/card",
+        "//src/material/dialog",
         "//src/material/form-field",
         "//src/material/input",
     ],

src/dev-app/mdc-dialog/mdc-dialog-demo.scss

@@ -1,4 +1,4 @@
-@use '@angular/material-experimental' as experimental;
+@use '@angular/material' as mat;
 
 .demo-dialog-card {
   max-width: 600px;
@@ -24,5 +24,5 @@
 }
 
 .demo-dialog-legacy-padding {
-  @include experimental.mdc-dialog-legacy-padding();
+  @include mat.dialog-legacy-padding();
 }

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

@@ -14,7 +14,7 @@ import {
   MatLegacyDialogConfig,
   MatDialogRef,
   MatDialogModule,
-} from '@angular/material-experimental/mdc-dialog';
+} from '@angular/material/dialog';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCardModule} from '@angular/material/card';

src/e2e-app/BUILD.bazel

@@ -45,7 +45,6 @@ ng_module(
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-chips",
-        "//src/material-experimental/mdc-dialog",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
@@ -57,6 +56,7 @@ ng_module(
         "//src/material/card",
         "//src/material/checkbox",
         "//src/material/core",
+        "//src/material/dialog",
         "//src/material/grid-list",
         "//src/material/icon",
         "//src/material/input",

src/e2e-app/mdc-dialog/mdc-dialog-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatDialogModule} from '@angular/material-experimental/mdc-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MdcDialogE2E, TestDialog} from './mdc-dialog-e2e';
 
 @NgModule({

src/e2e-app/mdc-dialog/mdc-dialog-e2e.ts

@@ -1,9 +1,5 @@
 import {Component, ViewChild, TemplateRef} from '@angular/core';
-import {
-  MatDialog,
-  MatDialogRef,
-  MatLegacyDialogConfig,
-} from '@angular/material-experimental/mdc-dialog';
+import {MatDialog, MatDialogRef, MatLegacyDialogConfig} from '@angular/material/dialog';
 
 @Component({
   selector: 'mdc-dialog-e2e',

src/material-experimental/_index.scss

@@ -29,8 +29,6 @@
   mdc-checkbox-typography, mdc-checkbox-density, mdc-checkbox-theme;
 @forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography,
   mdc-chips-density, mdc-chips-theme;
-@forward './mdc-dialog/dialog-theme' as mdc-dialog-* show mdc-dialog-color, mdc-dialog-typography,
-  mdc-dialog-density, mdc-dialog-theme;
 @forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
   mdc-list-density, mdc-list-theme;
 @forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,
@@ -56,4 +54,3 @@
   mdc-tabs-density, mdc-tabs-theme;
 
 // Additional public APIs for individual components
-@forward './mdc-dialog/dialog-legacy-padding' as mdc-dialog-* show mdc-dialog-legacy-padding;

src/material-experimental/config.bzl

@@ -9,8 +9,6 @@ entryPoints = [
     "mdc-chips",
     "mdc-chips/testing",
     "mdc-core",
-    "mdc-dialog",
-    "mdc-dialog/testing",
     "mdc-list",
     "mdc-list/testing",
     "mdc-menu",

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

@@ -52,7 +52,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
-@forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;

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

@@ -52,7 +52,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
-@forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;

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

@@ -25,7 +25,6 @@ sass_library(
         "//src/material-experimental/mdc-checkbox:mdc_checkbox_scss_lib",
         "//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
         "//src/material-experimental/mdc-core:mdc_core_scss_lib",
-        "//src/material-experimental/mdc-dialog:mdc_dialog_scss_lib",
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",
@@ -38,6 +37,7 @@ sass_library(
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
         "//src/material/card:card_scss_lib",
+        "//src/material/dialog:dialog_scss_lib",
         "//src/material/form-field:form_field_scss_lib",
         "//src/material/input:input_scss_lib",
         "//src/material/progress-bar:progress_bar_scss_lib",

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

@@ -52,7 +52,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
-@forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
@@ -66,7 +65,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @import '../../mdc-button/button-theme';
 @import '../../mdc-checkbox/checkbox-theme';
 @import '../../mdc-chips/chips-theme';
-@import '../../mdc-dialog/dialog-theme';
 @import '../../mdc-list/list-theme';
 @import '../../mdc-menu/menu-theme';
 @import '../../mdc-radio/radio-theme';

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

@@ -7,7 +7,6 @@
 @use '../../mdc-button/icon-button-theme';
 @use '../../mdc-checkbox/checkbox-theme';
 @use '../../mdc-chips/chips-theme';
-@use '../../mdc-dialog/dialog-theme';
 @use '../../mdc-list/list-theme';
 @use '../../mdc-menu/menu-theme';
 @use '../../mdc-radio/radio-theme';
@@ -26,7 +25,7 @@
     @include core-theme.theme($theme-or-color-config);
     @include autocomplete-theme.theme($theme-or-color-config);
     @include button-theme.theme($theme-or-color-config);
-    @include dialog-theme.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.card-theme($theme-or-color-config);

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

@@ -52,7 +52,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-
 @forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*;
 @forward '../core-theme.import';
 @forward '../../mdc-autocomplete/autocomplete-theme' as mat-mdc-autocomplete-*;
-@forward '../../mdc-dialog/dialog-theme' as mat-mdc-dialog-*;
 @forward '../../mdc-list/interactive-list-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-option-theme' as mat-mdc-*;
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;

src/material/_index.scss

@@ -89,6 +89,8 @@
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
   datepicker-typography, datepicker-date-range-colors;
 @forward './legacy-dialog/dialog-theme' as legacy-dialog-* show legacy-dialog-theme, legacy-dialog-color, legacy-dialog-typography;
+@forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography;
+@forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
   divider-typography;
 @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,

src/material/config.bzl

@@ -25,6 +25,8 @@ entryPoints = [
     "datepicker/testing",
     "legacy-dialog",
     "legacy-dialog/testing",
+    "dialog",
+    "dialog/testing",
     "divider",
     "divider/testing",
     "expansion",

src/material-experimental/mdc-dialog/BUILD.bazel renamed to src/material/dialog/BUILD.bazel

@@ -1,6 +1,7 @@
 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",
@@ -12,7 +13,7 @@ load(
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "mdc-dialog",
+    name = "dialog",
     srcs = glob(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
@@ -28,11 +29,10 @@ ng_module(
 )
 
 sass_library(
-    name = "mdc_dialog_scss_lib",
+    name = "dialog_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//:mdc_sass_lib",
-        "//src/material:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -41,9 +41,8 @@ sass_binary(
     name = "dialog_scss",
     src = "dialog.scss",
     deps = [
-        ":mdc_dialog_scss_lib",
+        ":dialog_scss_lib",
         "//:mdc_sass_lib",
-        "//src/material:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -97,3 +96,13 @@ e2e_test_suite(
         "//src/cdk/testing/private/e2e",
     ],
 )
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":dialog.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/material-experimental/mdc-dialog/README.md renamed to src/material/dialog/README.md

@@ -7,10 +7,10 @@ experimental and should not be used in production.
 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:
+1. Install `@angular/material` and MDC Web:
 
    ```bash
-   npm i material-components-web @angular/material-experimental
+   npm i material-components-web @angular/material
    ```
 
 2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
@@ -33,7 +33,7 @@ component by following these steps:
    component:
 
    ```ts
-   import {MatDialogModule} from '@angular/material-experimental/mdc-dialog';
+   import {MatDialogModule} from '@angular/material/dialog';
 
    @NgModule({
      declarations: [MyComponent],
@@ -45,9 +45,9 @@ component by following these steps:
 4. Use the `MatDialog` service in your components by injecting the service, just like you would
    use the normal dialog.
 
-5. Ensure color and typography styles for `@angular/material-experimental` are set up. Either
-   use a custom theme and use the `mat-mdc-dialog-theme` mixin, or use a prebuilt theme
-   from `@angular/material/core/theming/prebuilt`.
+5. Ensure color and typography styles for `@angular/material` are set up. Either
+   use a custom theme and use the `mat-dialog-theme` mixin, or use a prebuilt theme
+   from `@angular/material/mdc-core/theming/prebuilt`.
 
 ## API differences
 
@@ -68,7 +68,7 @@ directly through CSS, or move them into one of the defined sections the Angular
 provides.
 
 ```scss
-@use '@angular/material-experimental' as experimental;
+@use '@angular/material' as mat;
 
-@include experimental.mdc-dialog-legacy-padding();
+@include mat.dialog-legacy-padding();
 ```

src/material-experimental/mdc-dialog/_dialog-legacy-padding.import.scss renamed to src/material/dialog/_dialog-legacy-padding.import.scss

@@ -1,14 +1,16 @@
 @use 'sass:map';
-@use '@angular/material' as mat;
 @use '@material/dialog' as mdc-dialog;
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/typography' as mdc-typography;
+@use '../core/theming/theming';
+@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/typography/typography';
 
 @mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
+  $config: theming.get-color-config($config-or-theme);
 
-  @include mat.private-using-mdc-theme($config) {
+  @include mdc-helpers.using-mdc-theme($config) {
     .mat-mdc-dialog-container {
       $surface: mdc-theme-color.$surface;
       $on-surface: mdc-theme-color.$on-surface;
@@ -28,9 +30,9 @@
 }
 
 @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) {
+  $config: typography.private-typography-to-2018-config(
+      theming.get-typography-config($config-or-theme));
+  @include mdc-helpers.using-mdc-typography($config) {
     .mat-mdc-dialog-container {
       $styles: mdc-typography.$styles;
       $headline6: map.get($styles, headline6);
@@ -53,15 +55,15 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: mat.get-density-config($config-or-theme);
+  $density-scale: theming.get-density-config($config-or-theme);
 }
 
 @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-dialog') {
-    $color: mat.get-color-config($theme);
-    $density: mat.get-density-config($theme);
-    $typography: mat.get-typography-config($theme);
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-dialog') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);