feat(material/core): move mdc-helpers to material/core

This adds a dependency on MDC from @angular/material and paves the way
for moving the MDC based components out of material-experimental

BUILD.bazel

@@ -4,6 +4,8 @@ load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
 load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
 load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
 load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_ENTRYPOINTS", "MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS")
+load("//tools:defaults.bzl", "npm_sass_library")
+load("//:packages.bzl", "MDC_PACKAGES")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -38,3 +40,8 @@ genrule(
     outs = ["entry_points_manifest.json"],
     cmd = "echo '%s' > $@" % entryPoints,
 )
+
+npm_sass_library(
+    name = "mdc_sass_lib",
+    deps = ["@npm//%s" % pkg for pkg in MDC_PACKAGES],
+)

packages.bzl

@@ -29,8 +29,7 @@ NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS = dict(NPM_PACKAGE_SUBSTITUTIONS, **{
 })
 
 # List of MDC packages (used for package externals and for Sass target deps)
-# *Note*: Keep in sync with `/src/material-experimental/package.json` and `/package.json`.
-# TODO: Potentially auto-insert these into the `material-experimental` `package.json`.
+# *Note*: Keep in sync with `/package.json`.
 MDC_PACKAGES = [
     "@material/animation",
     "@material/auto-init",

scripts/migrate-sass-modules.js

@@ -66,7 +66,6 @@ migrate('material/core/**/_*.scss', materialPrefixes, true);
 commentOutMdc('material-experimental/**/*.scss');
 
 // Migrate all of the MDC partials.
-migrate('material-experimental/mdc-core/mdc-helpers/**/_*.scss', mdcPrefixes, true);
 migrate('material-experimental/mdc-core/**/_*.scss', mdcPrefixes, true, ['**/_core.scss']);
 migrate('material-experimental/**/_*.scss', mdcPrefixes, true);
 

src/dev-app/BUILD.bazel

@@ -127,9 +127,6 @@ devmode_esbuild(
 sass_binary(
     name = "theme",
     src = "theme.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",

src/dev-app/datepicker/BUILD.bazel

@@ -26,7 +26,10 @@ ng_module(
 sass_binary(
     name = "datepicker_demo_scss",
     src = "datepicker-demo.scss",
-    deps = ["//src/material:sass_lib"],
+    deps = [
+        "//:mdc_sass_lib",
+        "//src/material:sass_lib",
+    ],
 )
 
 sass_binary(

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

@@ -24,6 +24,5 @@ ng_module(
 sass_binary(
     name = "mdc_dialog_demo_scss",
     src = "mdc-dialog-demo.scss",
-    include_paths = ["external/npm/node_modules"],
     deps = ["//src/material-experimental:sass_lib"],
 )

src/dev-app/theme.scss

@@ -37,8 +37,6 @@ $candy-app-theme: mat.define-light-theme((
   // Use the theme so we have some coverage over the entire API surface.
   @include mat.strong-focus-indicators();
   @include mat.strong-focus-indicators-theme($candy-app-theme);
-  @include experimental.mdc-strong-focus-indicators();
-  @include experimental.mdc-strong-focus-indicators-theme($candy-app-theme);
 }
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
@@ -62,7 +60,6 @@ $candy-app-theme: mat.define-light-theme((
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
     @include mat.strong-focus-indicators-theme($dark-colors);
-    @include experimental.mdc-strong-focus-indicators-theme($dark-colors);
   }
 }
 

src/dev-app/tsconfig.json

@@ -18,7 +18,8 @@
       "@angular/google-maps": ["../google-maps"],
       "@angular/components-examples": ["../components-examples"],
       "@angular/components-examples/*": ["../components-examples/*"],
-      "@angular/youtube-player": ["../youtube-player"]
+      "@angular/youtube-player": ["../youtube-player"],
+      "@material/*": ["../../node_modules/@material/*/index.d.ts"]
     }
   },
   "include": ["./**/*.ts"]

src/e2e-app/BUILD.bazel

@@ -84,9 +84,6 @@ ng_module(
 sass_binary(
     name = "theme",
     src = "theme.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",

src/material-experimental/BUILD.bazel

@@ -22,7 +22,7 @@ sass_library(
     srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
         "//src/material-experimental/mdc-core/color",
         "//src/material-experimental/mdc-core/density",
-        "//src/material-experimental/mdc-core/mdc-helpers",
+        "//src/material/core:core_scss_lib",
         "//src/material-experimental/mdc-core/theming",
         "//src/material-experimental/mdc-core/typography",
     ],

src/material-experimental/_index.scss

@@ -1,5 +1,4 @@
 // Structural
-@forward './mdc-core/mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
 @forward './mdc-core/elevation' as mdc-* show mdc-elevation, mdc-overridable-elevation;
 
 // Theme bundles
@@ -18,8 +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-core/mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
-  mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
 @forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
   mdc-option-typography, mdc-option-density, mdc-option-theme;
 @forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color,

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

@@ -26,22 +26,19 @@ sass_library(
     name = "mdc_autocomplete_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        "//:mdc_sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 
 sass_binary(
     name = "autocomplete_scss",
     src = "autocomplete.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
+        "//:mdc_sass_lib",
         "//src/cdk:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

src/material-experimental/mdc-autocomplete/_autocomplete-theme.import.scss

@@ -1,5 +1 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @forward 'autocomplete-theme' as mat-mdc-autocomplete-*;
-
-@import '../mdc-core/mdc-helpers/mdc-helpers';

src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

@@ -2,26 +2,24 @@
 @use '@material/menu-surface/mixins' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
+  @include mat.private-using-mdc-theme($config) {
+    @include mdc-menu-surface.core-styles(mat.$private-mdc-theme-styles-query);
+    @include mdc-list.without-ripple(mat.$private-mdc-theme-styles-query);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
+  @include mat.private-using-mdc-typography($config) {
+    @include mdc-menu-surface.core-styles(mat.$private-mdc-typography-styles-query);
 
     .mat-mdc-autocomplete-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
+      @include mdc-list.list-base(mat.$private-mdc-typography-styles-query);
     }
   }
 }

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

@@ -35,9 +35,9 @@ sass_library(
     name = "mdc_button_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        "//:mdc_sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 
@@ -49,21 +49,17 @@ sass_library(
 sass_binary(
     name = "button_scss",
     src = "button.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
         ":button_base_scss_lib",
+        "//:mdc_sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 
 sass_binary(
     name = "button_high_contrast_scss",
     src = "button-high-contrast.scss",
-    include_paths = ["external/npm/node_modules"],
     deps = [
         "//src/cdk:sass_lib",
     ],
@@ -72,28 +68,22 @@ sass_binary(
 sass_binary(
     name = "fab_scss",
     src = "fab.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
         ":button_base_scss_lib",
+        "//:mdc_sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 
 sass_binary(
     name = "icon-button_scss",
     src = "icon-button.scss",
-    include_paths = [
-        "external/npm/node_modules",
-    ],
     deps = [
         ":button_base_scss_lib",
+        "//:mdc_sass_lib",
         "//src/material:sass_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

src/material-experimental/mdc-button/_button-base.scss

@@ -2,8 +2,6 @@
 @use '@angular/material' as mat;
 @use '@material/touch-target' as mdc-touch-target;
 
-@use '../mdc-core/mdc-helpers/mdc-helpers';
-
 // 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
@@ -78,7 +76,7 @@
   .mat-mdc-button-touch-target {
     @include mdc-touch-target.touch-target(
       $set-width: $is-square,
-      $query: mdc-helpers.$mat-base-styles-query);
+      $query: mat.$private-mdc-base-styles-query);
   }
 }
 

src/material-experimental/mdc-button/_button-theme.import.scss

@@ -1,6 +1,4 @@
-@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
 @forward '../../material/core/ripple/ripple.import';
-@forward '../mdc-core/mdc-helpers/mdc-helpers';
 @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,
@@ -13,4 +11,3 @@ mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-c
 @forward 'icon-button-theme' as mat-mdc-icon-button-*;
 
 @import '../../material/core/ripple/ripple';
-@import '../mdc-core/mdc-helpers/mdc-helpers';

src/material-experimental/mdc-button/_button-theme.scss

@@ -8,7 +8,6 @@
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin _button-variant($color) {
@@ -39,7 +38,7 @@
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
+  @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);
@@ -185,8 +184,8 @@
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+  @include mat.private-using-mdc-typography($config) {
+    @include mdc-button.without-ripple($query: mat.$private-mdc-typography-styles-query);
   }
 }
 
@@ -198,7 +197,7 @@
   .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: mdc-helpers.$mat-base-styles-query);
+      @include mdc-button-theme.density($density-scale, $query: mat.$private-mdc-base-styles-query);
       @include button-theme-private.touch-target-density($density-scale);
     }
   }

src/material-experimental/mdc-button/_fab-theme.scss

@@ -4,7 +4,6 @@
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin _fab-variant($foreground, $background) {
@@ -18,7 +17,7 @@
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
+  @include mat.private-using-mdc-theme($config) {
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $is-dark: map.get($config, is-dark);
 
@@ -63,8 +62,8 @@
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+  @include mat.private-using-mdc-typography($config) {
+    @include mdc-fab.without-ripple($query: mat.$private-mdc-typography-styles-query);
   }
 }
 

src/material-experimental/mdc-button/_icon-button-theme.scss

@@ -4,12 +4,11 @@
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 
-@use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './button-theme-private';
 
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
-  @include mdc-helpers.mat-using-mdc-theme($config) {
+  @include mat.private-using-mdc-theme($config) {
     $is-dark: map.get($config, is-dark);
     $on-surface: mdc-theme-color.prop-value(on-surface);
     $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@@ -42,16 +41,16 @@
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
-  @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
+  @include mat.private-using-mdc-typography($config) {
+    @include mdc-icon-button.without-ripple($query: mat.$private-mdc-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: mat.get-density-config($config-or-theme);
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
   .mat-mdc-icon-button.mat-mdc-button-base {
-    @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-icon-button.density($density-scale, $query: mat.$private-mdc-base-styles-query);
     @include button-theme-private.touch-target-density($density-scale);
   }
 }