Skip to content

Commit d57eb96

Browse files
mmalerbammalerba
committed
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
1 parent 21087bf commit d57eb96

File tree

140 files changed

+404
-716
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+404
-716
lines changed

‎BUILD.bazel

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
44
load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
55
load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
66
load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_ENTRYPOINTS", "MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS")
7+
load("//tools:defaults.bzl", "npm_sass_library")
8+
load("//:packages.bzl", "MDC_PACKAGES")
79

810
package(default_visibility = ["//visibility:public"])
911

@@ -38,3 +40,8 @@ genrule(
3840
outs = ["entry_points_manifest.json"],
3941
cmd = "echo '%s' > $@" % entryPoints,
4042
)
43+
44+
npm_sass_library(
45+
name = "mdc_sass_lib",
46+
deps = ["@npm//%s" % pkg for pkg in MDC_PACKAGES],
47+
)

‎packages.bzl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS = dict(NPM_PACKAGE_SUBSTITUTIONS, **{
2929
})
3030

3131
# List of MDC packages (used for package externals and for Sass target deps)
32-
# *Note*: Keep in sync with `/src/material-experimental/package.json` and `/package.json`.
33-
# TODO: Potentially auto-insert these into the `material-experimental` `package.json`.
32+
# *Note*: Keep in sync with `/package.json`.
3433
MDC_PACKAGES = [
3534
"@material/animation",
3635
"@material/auto-init",

‎scripts/migrate-sass-modules.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ migrate('material/core/**/_*.scss', materialPrefixes, true);
6666
commentOutMdc('material-experimental/**/*.scss');
6767

6868
// Migrate all of the MDC partials.
69-
migrate('material-experimental/mdc-core/mdc-helpers/**/_*.scss', mdcPrefixes, true);
7069
migrate('material-experimental/mdc-core/**/_*.scss', mdcPrefixes, true, ['**/_core.scss']);
7170
migrate('material-experimental/**/_*.scss', mdcPrefixes, true);
7271

‎src/dev-app/BUILD.bazel

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,6 @@ devmode_esbuild(
127127
sass_binary(
128128
name = "theme",
129129
src = "theme.scss",
130-
include_paths = [
131-
"external/npm/node_modules",
132-
],
133130
deps = [
134131
"//src/material:sass_lib",
135132
"//src/material-experimental:sass_lib",

‎src/dev-app/datepicker/BUILD.bazel

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ ng_module(
2626
sass_binary(
2727
name = "datepicker_demo_scss",
2828
src = "datepicker-demo.scss",
29-
deps = ["//src/material:sass_lib"],
29+
deps = [
30+
"//:mdc_sass_lib",
31+
"//src/material:sass_lib",
32+
],
3033
)
3134

3235
sass_binary(

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,5 @@ ng_module(
2424
sass_binary(
2525
name = "mdc_dialog_demo_scss",
2626
src = "mdc-dialog-demo.scss",
27-
include_paths = ["external/npm/node_modules"],
2827
deps = ["//src/material-experimental:sass_lib"],
2928
)

‎src/dev-app/theme.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@ $candy-app-theme: mat.define-light-theme((
3737
// Use the theme so we have some coverage over the entire API surface.
3838
@include mat.strong-focus-indicators();
3939
@include mat.strong-focus-indicators-theme($candy-app-theme);
40-
@include experimental.mdc-strong-focus-indicators();
41-
@include experimental.mdc-strong-focus-indicators-theme($candy-app-theme);
4240
}
4341

4442
// 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((
6260
// Include the dark theme colors for focus indicators.
6361
&.demo-strong-focus {
6462
@include mat.strong-focus-indicators-theme($dark-colors);
65-
@include experimental.mdc-strong-focus-indicators-theme($dark-colors);
6663
}
6764
}
6865

‎src/dev-app/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"@angular/google-maps": ["../google-maps"],
1919
"@angular/components-examples": ["../components-examples"],
2020
"@angular/components-examples/*": ["../components-examples/*"],
21-
"@angular/youtube-player": ["../youtube-player"]
21+
"@angular/youtube-player": ["../youtube-player"],
22+
"@material/*": ["../../node_modules/@material/*/index.d.ts"]
2223
}
2324
},
2425
"include": ["./**/*.ts"]

‎src/e2e-app/BUILD.bazel

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,6 @@ ng_module(
8484
sass_binary(
8585
name = "theme",
8686
src = "theme.scss",
87-
include_paths = [
88-
"external/npm/node_modules",
89-
],
9087
deps = [
9188
"//src/material:sass_lib",
9289
"//src/material-experimental:sass_lib",

‎src/material-experimental/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ sass_library(
2222
srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
2323
"//src/material-experimental/mdc-core/color",
2424
"//src/material-experimental/mdc-core/density",
25-
"//src/material-experimental/mdc-core/mdc-helpers",
25+
"//src/material/core:core_scss_lib",
2626
"//src/material-experimental/mdc-core/theming",
2727
"//src/material-experimental/mdc-core/typography",
2828
],

‎src/material-experimental/_index.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// Structural
2-
@forward './mdc-core/mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
32
@forward './mdc-core/elevation' as mdc-* show mdc-elevation, mdc-overridable-elevation;
43

54
// Theme bundles
@@ -18,8 +17,6 @@
1817
// MDC-related themes
1918
@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
2019
mdc-core-density, mdc-core-typography;
21-
@forward './mdc-core/mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
22-
mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
2320
@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
2421
mdc-option-typography, mdc-option-density, mdc-option-theme;
2522
@forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color,

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,19 @@ sass_library(
2626
name = "mdc_autocomplete_scss_lib",
2727
srcs = glob(["**/_*.scss"]),
2828
deps = [
29+
"//:mdc_sass_lib",
2930
"//src/material:sass_lib",
30-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
31-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
31+
"//src/material/core:core_scss_lib",
3232
],
3333
)
3434

3535
sass_binary(
3636
name = "autocomplete_scss",
3737
src = "autocomplete.scss",
38-
include_paths = [
39-
"external/npm/node_modules",
40-
],
4138
deps = [
39+
"//:mdc_sass_lib",
4240
"//src/cdk:sass_lib",
43-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
44-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
41+
"//src/material/core:core_scss_lib",
4542
],
4643
)
4744

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
2-
@forward '../mdc-core/mdc-helpers/mdc-helpers';
31
@forward 'autocomplete-theme' as mat-mdc-autocomplete-*;
4-
5-
@import '../mdc-core/mdc-helpers/mdc-helpers';

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,24 @@
22
@use '@material/menu-surface/mixins' as mdc-menu-surface;
33
@use '@material/list/evolution-mixins' as mdc-list;
44

5-
@use '../mdc-core/mdc-helpers/mdc-helpers';
6-
75
@mixin color($config-or-theme) {
86
$config: mat.get-color-config($config-or-theme);
9-
@include mdc-helpers.mat-using-mdc-theme($config) {
10-
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
11-
@include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
7+
@include mat.private-using-mdc-theme($config) {
8+
@include mdc-menu-surface.core-styles(mat.$private-mdc-theme-styles-query);
9+
@include mdc-list.without-ripple(mat.$private-mdc-theme-styles-query);
1210
}
1311
}
1412

1513
@mixin typography($config-or-theme) {
1614
$config: mat.private-typography-to-2018-config(
1715
mat.get-typography-config($config-or-theme));
18-
@include mdc-helpers.mat-using-mdc-typography($config) {
19-
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
16+
@include mat.private-using-mdc-typography($config) {
17+
@include mdc-menu-surface.core-styles(mat.$private-mdc-typography-styles-query);
2018

2119
.mat-mdc-autocomplete-panel {
2220
// Note that we include this private mixin, because the public one adds
2321
// a bunch of styles that we aren't using for the autocomplete panel.
24-
@include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
22+
@include mdc-list.list-base(mat.$private-mdc-typography-styles-query);
2523
}
2624
}
2725
}

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

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ sass_library(
3535
name = "mdc_button_scss_lib",
3636
srcs = glob(["**/_*.scss"]),
3737
deps = [
38+
"//:mdc_sass_lib",
3839
"//src/material:sass_lib",
39-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
40-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
40+
"//src/material/core:core_scss_lib",
4141
],
4242
)
4343

@@ -49,21 +49,17 @@ sass_library(
4949
sass_binary(
5050
name = "button_scss",
5151
src = "button.scss",
52-
include_paths = [
53-
"external/npm/node_modules",
54-
],
5552
deps = [
5653
":button_base_scss_lib",
54+
"//:mdc_sass_lib",
5755
"//src/material:sass_lib",
58-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
59-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
56+
"//src/material/core:core_scss_lib",
6057
],
6158
)
6259

6360
sass_binary(
6461
name = "button_high_contrast_scss",
6562
src = "button-high-contrast.scss",
66-
include_paths = ["external/npm/node_modules"],
6763
deps = [
6864
"//src/cdk:sass_lib",
6965
],
@@ -72,28 +68,22 @@ sass_binary(
7268
sass_binary(
7369
name = "fab_scss",
7470
src = "fab.scss",
75-
include_paths = [
76-
"external/npm/node_modules",
77-
],
7871
deps = [
7972
":button_base_scss_lib",
73+
"//:mdc_sass_lib",
8074
"//src/material:sass_lib",
81-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
82-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
75+
"//src/material/core:core_scss_lib",
8376
],
8477
)
8578

8679
sass_binary(
8780
name = "icon-button_scss",
8881
src = "icon-button.scss",
89-
include_paths = [
90-
"external/npm/node_modules",
91-
],
9282
deps = [
9383
":button_base_scss_lib",
84+
"//:mdc_sass_lib",
9485
"//src/material:sass_lib",
95-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_helpers_scss_lib",
96-
"//src/material-experimental/mdc-core/mdc-helpers:mdc_scss_deps_lib",
86+
"//src/material/core:core_scss_lib",
9787
],
9888
)
9989

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
@use '@angular/material' as mat;
33
@use '@material/touch-target' as mdc-touch-target;
44

5-
@use '../mdc-core/mdc-helpers/mdc-helpers';
6-
75
// Adds styles necessary to provide stateful interactions with the button. This includes providing
86
// content for the state container's ::before and ::after so that they can be given a background
97
// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
@@ -78,7 +76,7 @@
7876
.mat-mdc-button-touch-target {
7977
@include mdc-touch-target.touch-target(
8078
$set-width: $is-square,
81-
$query: mdc-helpers.$mat-base-styles-query);
79+
$query: mat.$private-mdc-base-styles-query);
8280
}
8381
}
8482

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@forward '../mdc-core/mdc-helpers/mdc-helpers.import';
21
@forward '../../material/core/ripple/ripple.import';
3-
@forward '../mdc-core/mdc-helpers/mdc-helpers';
42
@forward 'button-theme' hide color, density, theme, typography;
53
@forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
64
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
1311
@forward 'icon-button-theme' as mat-mdc-icon-button-*;
1412

1513
@import '../../material/core/ripple/ripple';
16-
@import '../mdc-core/mdc-helpers/mdc-helpers';

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
99
@use '@material/theme/theme-color' as mdc-theme-color;
1010

11-
@use '../mdc-core/mdc-helpers/mdc-helpers';
1211
@use './button-theme-private';
1312

1413
@mixin _button-variant($color) {
@@ -39,7 +38,7 @@
3938

4039
@mixin color($config-or-theme) {
4140
$config: mat.get-color-config($config-or-theme);
42-
@include mdc-helpers.mat-using-mdc-theme($config) {
41+
@include mat.private-using-mdc-theme($config) {
4342
$is-dark: map.get($config, is-dark);
4443
$on-surface: mdc-theme-color.prop-value(on-surface);
4544
$surface: mdc-theme-color.prop-value(surface);
@@ -185,8 +184,8 @@
185184
@mixin typography($config-or-theme) {
186185
$config: mat.private-typography-to-2018-config(
187186
mat.get-typography-config($config-or-theme));
188-
@include mdc-helpers.mat-using-mdc-typography($config) {
189-
@include mdc-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
187+
@include mat.private-using-mdc-typography($config) {
188+
@include mdc-button.without-ripple($query: mat.$private-mdc-typography-styles-query);
190189
}
191190
}
192191

@@ -198,7 +197,7 @@
198197
.mat-mdc-outlined-button {
199198
// Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
200199
&.mat-mdc-button-base {
201-
@include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
200+
@include mdc-button-theme.density($density-scale, $query: mat.$private-mdc-base-styles-query);
202201
@include button-theme-private.touch-target-density($density-scale);
203202
}
204203
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use '@material/fab/fab-theme' as mdc-fab-theme;
55
@use '@material/theme/theme-color' as mdc-theme-color;
66

7-
@use '../mdc-core/mdc-helpers/mdc-helpers';
87
@use './button-theme-private';
98

109
@mixin _fab-variant($foreground, $background) {
@@ -18,7 +17,7 @@
1817

1918
@mixin color($config-or-theme) {
2019
$config: mat.get-color-config($config-or-theme);
21-
@include mdc-helpers.mat-using-mdc-theme($config) {
20+
@include mat.private-using-mdc-theme($config) {
2221
$on-surface: mdc-theme-color.prop-value(on-surface);
2322
$is-dark: map.get($config, is-dark);
2423

@@ -63,8 +62,8 @@
6362
@mixin typography($config-or-theme) {
6463
$config: mat.private-typography-to-2018-config(
6564
mat.get-typography-config($config-or-theme));
66-
@include mdc-helpers.mat-using-mdc-typography($config) {
67-
@include mdc-fab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
65+
@include mat.private-using-mdc-typography($config) {
66+
@include mdc-fab.without-ripple($query: mat.$private-mdc-typography-styles-query);
6867
}
6968
}
7069

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
55
@use '@material/theme/theme-color' as mdc-theme-color;
66

7-
@use '../mdc-core/mdc-helpers/mdc-helpers';
87
@use './button-theme-private';
98

109
@mixin color($config-or-theme) {
1110
$config: mat.get-color-config($config-or-theme);
12-
@include mdc-helpers.mat-using-mdc-theme($config) {
11+
@include mat.private-using-mdc-theme($config) {
1312
$is-dark: map.get($config, is-dark);
1413
$on-surface: mdc-theme-color.prop-value(on-surface);
1514
$disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@@ -42,16 +41,16 @@
4241
@mixin typography($config-or-theme) {
4342
$config: mat.private-typography-to-2018-config(
4443
mat.get-typography-config($config-or-theme));
45-
@include mdc-helpers.mat-using-mdc-typography($config) {
46-
@include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
44+
@include mat.private-using-mdc-typography($config) {
45+
@include mdc-icon-button.without-ripple($query: mat.$private-mdc-typography-styles-query);
4746
}
4847
}
4948

5049
@mixin density($config-or-theme) {
5150
$density-scale: mat.get-density-config($config-or-theme);
5251
// Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
5352
.mat-mdc-icon-button.mat-mdc-button-base {
54-
@include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
53+
@include mdc-icon-button.density($density-scale, $query: mat.$private-mdc-base-styles-query);
5554
@include button-theme-private.touch-target-density($density-scale);
5655
}
5756
}

0 commit comments

Comments
 (0)