Skip to content

Commit 694386a

Browse files
mmalerbammalerba
committed
fix(material-experimental/mdc-*): rename sass mixins to mat-md… (#18615)
1 parent 6faa30c commit 694386a

File tree

32 files changed

+100
-100
lines changed

32 files changed

+100
-100
lines changed

‎src/dev-app/theme.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
// have to load a single css file for Angular Material in your app.
1414
// **Be sure that you only ever include this mixin once!**
1515
@include mat-core();
16-
@include angular-material-typography-mdc();
16+
@include angular-material-mdc-typography();
1717
@include mat-edit-typography(mat-typography-config());
1818

1919
// Include base styles for strong focus indicators.
@@ -29,9 +29,9 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
2929

3030
// Include the default theme styles.
3131
@include angular-material-theme($candy-app-theme);
32-
@include angular-material-theme-mdc($candy-app-theme);
32+
@include angular-material-mdc-theme($candy-app-theme);
3333
@include mat-column-resize-theme($candy-app-theme);
34-
@include mat-slider-theme-mdc($candy-app-theme);
34+
@include mat-mdc-slider-theme($candy-app-theme);
3535
@include mat-popover-edit-theme($candy-app-theme);
3636

3737
// Define an alternate dark theme.
@@ -52,9 +52,9 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
5252
// default theme.
5353
.demo-unicorn-dark-theme {
5454
@include angular-material-theme($dark-theme);
55-
@include angular-material-theme-mdc($dark-theme);
55+
@include angular-material-mdc-theme($dark-theme);
5656
@include mat-column-resize-theme($dark-theme);
57-
@include mat-slider-theme-mdc($dark-theme);
57+
@include mat-mdc-slider-theme($dark-theme);
5858
@include mat-popover-edit-theme($dark-theme);
5959
}
6060

‎src/e2e-app/theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// have to load a single css file for Angular Material in your app.
99
// **Be sure that you only ever include this mixin once!**
1010
@include mat-core();
11-
@include angular-material-typography-mdc();
11+
@include angular-material-mdc-typography();
1212

1313
// Define the default theme (same as the example above).
1414
$candy-app-primary: mat-palette($mat-indigo);
@@ -17,4 +17,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
1717

1818
// Include the default theme styles.
1919
@include angular-material-theme($candy-app-theme);
20-
@include angular-material-theme-mdc($candy-app-theme);
20+
@include angular-material-mdc-theme($candy-app-theme);

‎src/material-experimental/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@ the experimental components. For example, using the checkbox:
5959
$my-accent: mat-palette($mat-pink, A200, A100, A400);
6060
$my-theme: mat-light-theme($my-primary, $my-accent);
6161

62-
@include mat-checkbox-theme-mdc($my-theme);
63-
@include mat-checkbox-typography-mdc();
62+
@include mat-mdc-checkbox-theme($my-theme);
63+
@include mat-mdc-checkbox-typography();
6464
```

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../mdc-helpers/mdc-helpers';
22

3-
@mixin mat-autocomplete-theme-mdc($theme) {
3+
@mixin mat-mdc-autocomplete-theme($theme) {
44
@include mat-using-mdc-theme($theme) {
55
// TODO: implement MDC-based autocomplete.
66
}
77
}
88

9-
@mixin mat-autocomplete-typography-mdc($config) {
9+
@mixin mat-mdc-autocomplete-typography($config) {
1010
@include mat-using-mdc-typography($config) {
1111
// TODO: implement MDC-based autocomplete.
1212
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ $mat-button-state-target: '.mdc-button__ripple';
4949
}
5050

5151

52-
@mixin mat-button-theme-mdc($theme) {
52+
@mixin mat-mdc-button-theme($theme) {
5353
@include mat-using-mdc-theme($theme) {
5454
// Add state interactions for hover, focus, press, active. Colors are changed based on
5555
// the mixin mdc-states-base-color
@@ -164,13 +164,13 @@ $mat-button-state-target: '.mdc-button__ripple';
164164
}
165165
}
166166

167-
@mixin mat-button-typography-mdc($config) {
167+
@mixin mat-mdc-button-typography($config) {
168168
@include mat-using-mdc-typography($config) {
169169
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
170170
}
171171
}
172172

173-
@mixin mat-fab-theme-mdc($theme) {
173+
@mixin mat-mdc-fab-theme($theme) {
174174
@include mat-using-mdc-theme($theme) {
175175
.mat-mdc-fab, .mat-mdc-mini-fab {
176176
@include mdc-states(
@@ -219,13 +219,13 @@ $mat-button-state-target: '.mdc-button__ripple';
219219
}
220220
}
221221

222-
@mixin mat-fab-typography-mdc($config) {
222+
@mixin mat-mdc-fab-typography($config) {
223223
@include mat-using-mdc-typography($config) {
224224
@include mdc-fab-without-ripple($query: $mat-typography-styles-query);
225225
}
226226
}
227227

228-
@mixin mat-icon-button-theme-mdc($theme) {
228+
@mixin mat-mdc-icon-button-theme($theme) {
229229
@include mat-using-mdc-theme($theme) {
230230
.mat-mdc-icon-button {
231231
@include mdc-states(
@@ -268,7 +268,7 @@ $mat-button-state-target: '.mdc-button__ripple';
268268
}
269269
}
270270

271-
@mixin mat-icon-button-typography-mdc($config) {
271+
@mixin mat-mdc-icon-button-typography($config) {
272272
@include mat-using-mdc-typography($config) {
273273
@include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
274274
}

‎src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '@material/typography/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5-
@mixin mat-card-theme-mdc($theme) {
5+
@mixin mat-mdc-card-theme($theme) {
66
$foreground: map-get($theme, foreground);
77
$is-dark-theme: map-get($theme, is-dark);
88

@@ -17,7 +17,7 @@
1717
}
1818
}
1919

20-
@mixin mat-card-typography-mdc($config) {
20+
@mixin mat-mdc-card-typography($config) {
2121
@include mat-using-mdc-typography($config) {
2222
@include mdc-card-without-ripple($query: $mat-typography-styles-query);
2323

‎src/material-experimental/mdc-checkbox/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ component by following these steps:
6060
$my-accent: mat-palette($mat-pink, A200, A100, A400);
6161
$my-theme: mat-light-theme($my-primary, $my-accent);
6262

63-
@include mat-checkbox-theme-mdc($my-theme);
64-
@include mat-checkbox-typography-mdc();
63+
@include mat-mdc-checkbox-theme($my-theme);
64+
@include mat-mdc-checkbox-typography();
6565
```
6666

6767
## API differences

‎src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import '@material/theme/functions.import';
66
@import '../mdc-helpers/mdc-helpers';
77

8-
@mixin mat-checkbox-theme-mdc($theme) {
8+
@mixin mat-mdc-checkbox-theme($theme) {
99
$primary: mat-color(map-get($theme, primary));
1010
$accent: mat-color(map-get($theme, accent));
1111
$warn: mat-color(map-get($theme, warn));
@@ -70,7 +70,7 @@
7070
$mdc-checkbox-disabled-color: $orig-mdc-checkbox-disabled-color !global;
7171
}
7272

73-
@mixin mat-checkbox-typography-mdc($config) {
73+
@mixin mat-mdc-checkbox-typography($config) {
7474
@include mat-using-mdc-typography($config) {
7575
@include mdc-checkbox-without-ripple($query: $mat-typography-styles-query);
7676
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

‎src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '../mdc-helpers/mdc-helpers';
33
@import '@material/theme/functions.import';
44

5-
@mixin mat-chips-theme-mdc($theme) {
5+
@mixin mat-mdc-chips-theme($theme) {
66
@include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
77
@include mdc-chip-without-ripple($query: $mat-theme-styles-query);
88

@@ -36,7 +36,7 @@
3636
}
3737
}
3838

39-
@mixin mat-chips-typography-mdc($config) {
39+
@mixin mat-mdc-chips-typography($config) {
4040
@include mdc-chip-set-core-styles($query: $mat-typography-styles-query);
4141
@include mat-using-mdc-typography($config) {
4242
@include mdc-chip-without-ripple($query: $mat-typography-styles-query);

‎src/material-experimental/mdc-form-field/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ component by following these steps:
4545
form-field.
4646

4747
5. Ensure color and typography styles for `@angular/material-experimental` are set up. Either
48-
use a custom theme and use the `mat-form-field-theme-mdc` mixin, or use a prebuilt theme
48+
use a custom theme and use the `mat-mdc-form-field-theme` mixin, or use a prebuilt theme
4949
from `@angular/material-experimental/mdc-theming/prebuilt`.
5050

5151
## API differences

‎src/material-experimental/mdc-form-field/_form-field-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
$mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
3232
}
3333

34-
@mixin mat-form-field-theme-mdc($theme) {
34+
@mixin mat-mdc-form-field-theme($theme) {
3535
@include mat-using-mdc-theme($theme) {
3636
@include _mdc-text-field-refresh-theme-variables() {
3737
@include mdc-text-field-without-ripple($query: $mat-theme-styles-query);
@@ -52,7 +52,7 @@
5252
}
5353
}
5454

55-
@mixin mat-form-field-typography-mdc($config) {
55+
@mixin mat-mdc-form-field-typography($config) {
5656
@include mat-using-mdc-typography($config) {
5757
@include mdc-text-field-without-ripple($query: $mat-typography-styles-query);
5858
@include mdc-floating-label-core-styles($query: $mat-typography-styles-query);

‎src/material-experimental/mdc-input/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ component by following these steps:
5454

5555
5. Ensure color and typography styles for `@angular/material-experimental` are set up. The input
5656
itself does not provide any styles. If an input is used inside of the MDC-based
57-
`mat-form-field`, either use a custom theme with the `mat-form-field-theme-mdc` mixin, or use
57+
`mat-mdc-form-field`, either use a custom theme with the `mat-form-field-theme` mixin, or use
5858
a prebuilt theme from `@angular/material-experimental/mdc-theming/prebuilt`.
5959

6060
## API differences

‎src/material-experimental/mdc-input/_input-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@import '../mdc-helpers/mdc-helpers';
22

3-
@mixin mat-input-theme-mdc($theme) {
3+
@mixin mat-mdc-input-theme($theme) {
44
@include mat-using-mdc-theme($theme) {}
55
}
66

7-
@mixin mat-input-typography-mdc($config) {
7+
@mixin mat-mdc-input-typography($config) {
88
@include mat-using-mdc-typography($config) {}
99
}

‎src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
@import '@material/list/mixins.import';
22
@import '../mdc-helpers/mdc-helpers';
33

4-
@mixin mat-list-theme-mdc($theme) {
4+
@mixin mat-mdc-list-theme($theme) {
55
@include mat-using-mdc-theme($theme) {
66
@include mdc-list-without-ripple($query: $mat-theme-styles-query);
77
}
88
}
99

10-
@mixin mat-list-typography-mdc($config) {
10+
@mixin mat-mdc-list-typography($config) {
1111
@include mat-using-mdc-typography($config) {
1212
@include mdc-list-without-ripple($query: $mat-typography-styles-query);
1313
}

‎src/material-experimental/mdc-menu/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ component by following these steps:
6464
$my-accent: mat-palette($mat-pink, A200, A100, A400);
6565
$my-theme: mat-light-theme($my-primary, $my-accent);
6666

67-
@include mat-menu-theme-mdc($my-theme);
68-
@include mat-menu-typography-mdc();
67+
@include mat-mdc-menu-theme($my-theme);
68+
@include mat-mdc-menu-typography();
6969
```
7070

7171
## API differences

‎src/material-experimental/mdc-menu/_menu-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import '@material/theme/functions.import';
66
@import '../mdc-helpers/mdc-helpers';
77

8-
@mixin mat-menu-theme-mdc($theme) {
8+
@mixin mat-mdc-menu-theme($theme) {
99
@include mat-using-mdc-theme($theme) {
1010
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
1111
@include mdc-list-without-ripple($mat-theme-styles-query);
@@ -38,7 +38,7 @@
3838
}
3939
}
4040

41-
@mixin mat-menu-typography-mdc($config) {
41+
@mixin mat-mdc-menu-typography($config) {
4242
@include mat-using-mdc-typography($config) {
4343
@include mdc-menu-surface-core-styles($mat-typography-styles-query);
4444

‎src/material-experimental/mdc-progress-bar/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ component by following these steps:
6161
$my-accent: mat-palette($mat-pink, A200, A100, A400);
6262
$my-theme: mat-light-theme($my-primary, $my-accent);
6363

64-
@include mat-progress-bar-theme-mdc($my-theme);
65-
@include mat-progress-bar-typography-mdc();
64+
@include mat-mdc-progress-bar-theme($my-theme);
65+
@include mat-mdc-progress-bar-typography();
6666
```
6767

6868
## Replacing the standard progress bar in an existing app

‎src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
@include mdc-linear-progress-buffer-color($buffer-color, $query: $mat-theme-styles-query);
1313
}
1414

15-
@mixin mat-progress-bar-theme-mdc($theme) {
15+
@mixin mat-mdc-progress-bar-theme($theme) {
1616
@include mat-using-mdc-theme($theme) {
1717
.mat-mdc-progress-bar {
1818
@include _mat-mdc-progress-bar-color(primary);
@@ -28,6 +28,6 @@
2828
}
2929
}
3030

31-
@mixin mat-progress-bar-typography-mdc($config) {
31+
@mixin mat-mdc-progress-bar-typography($config) {
3232
// No typography for this component.
3333
}

‎src/material-experimental/mdc-radio/_radio-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '@material/radio/mixins';
33
@import '@material/radio/variables';
44

5-
@mixin mat-radio-theme-mdc($theme) {
5+
@mixin mat-mdc-radio-theme($theme) {
66
// Save original values of MDC global variables. We need to save these so we can restore the
77
// variables to their original values and prevent unintended side effects from using this mixin.
88
$orig-mdc-radio-baseline-theme-color: $mdc-radio-baseline-theme-color;
@@ -31,7 +31,7 @@
3131
$mdc-radio-baseline-theme-color: $orig-mdc-radio-baseline-theme-color !global;
3232
}
3333

34-
@mixin mat-radio-typography-mdc($config) {
34+
@mixin mat-mdc-radio-typography($config) {
3535
@include mat-using-mdc-typography($config) {
3636
@include mdc-radio-without-ripple($query: $mat-typography-styles-query);
3737
}

‎src/material-experimental/mdc-select/_select-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../mdc-helpers/mdc-helpers';
22

3-
@mixin mat-select-theme-mdc($theme) {
3+
@mixin mat-mdc-select-theme($theme) {
44
@include mat-using-mdc-theme($theme) {
55
// TODO: implement MDC-based select.
66
}
77
}
88

9-
@mixin mat-select-typography-mdc($config) {
9+
@mixin mat-mdc-select-typography($config) {
1010
@include mat-using-mdc-typography($config) {
1111
// TODO: implement MDC-based select.
1212
}

‎src/material-experimental/mdc-sidenav/_sidenav-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../mdc-helpers/mdc-helpers';
22

3-
@mixin mat-sidenav-theme-mdc($theme) {
3+
@mixin mat-mdc-sidenav-theme($theme) {
44
@include mat-using-mdc-theme($theme) {
55
// TODO: implement MDC-based sidenav.
66
}
77
}
88

9-
@mixin mat-sidenav-typography-mdc($config) {
9+
@mixin mat-mdc-sidenav-typography($config) {
1010
@include mat-using-mdc-typography($config) {
1111
// TODO: implement MDC-based sidenav.
1212
}

‎src/material-experimental/mdc-slide-toggle/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ component by following these steps:
6060
$my-accent: mat-palette($mat-pink, A200, A100, A400);
6161
$my-theme: mat-light-theme($my-primary, $my-accent);
6262

63-
@include mat-slide-toggle-theme-mdc($my-theme);
64-
@include mat-slide-toggle-typography-mdc();
63+
@include mat-mdc-slide-toggle-theme($my-theme);
64+
@include mat-mdc-slide-toggle-typography();
6565
```
6666

6767
## Replacing the standard slide toggle in an existing app

‎src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import '@material/theme/functions.import';
66
@import '../mdc-helpers/mdc-helpers';
77

8-
@mixin mat-slide-toggle-theme-mdc($theme) {
8+
@mixin mat-mdc-slide-toggle-theme($theme) {
99
$primary: mat-color(map-get($theme, primary));
1010
$accent: mat-color(map-get($theme, accent));
1111
$warn: mat-color(map-get($theme, warn));
@@ -65,7 +65,7 @@
6565
$mdc-switch-baseline-theme-color: $orig-mdc-switch-baseline-theme-color !global;
6666
}
6767

68-
@mixin mat-slide-toggle-typography-mdc($config) {
68+
@mixin mat-mdc-slide-toggle-typography($config) {
6969
@include mat-using-mdc-typography($config) {
7070
@include mdc-switch-without-ripple($query: $mat-typography-styles-query);
7171
@include mdc-form-field-core-styles($query: $mat-typography-styles-query);

0 commit comments

Comments
 (0)