Skip to content

Commit 8e3698b

Browse files
devversionandrewseguin
devversion
authored and
andrewseguin
committed
refactor: add all-density mixin to material (#18761)
Similarly to `mdc-density`, we add a mixin for all of the density styles that will exist in `src/material`. This mixin will be left private until the new density API is public. Additionally, mdc-typography and mdc-theming mixins are simplified now that the `all-theme` mixins can control individual theming system parts. This does not work for `@angular/material` typography due to a cyclic dependency which we could eliminate if we require people to _explicitly_ import the file where the `mat-core` mixin originates from.
1 parent 473696a commit 8e3698b

File tree

8 files changed

+36
-99
lines changed

8 files changed

+36
-99
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
/src/material/core/animation/** @jelbourn
4545
/src/material/core/common-behaviors/** @jelbourn @devversion
4646
/src/material/core/datetime/** @mmalerba
47+
/src/material/core/density/** @devversion
4748
/src/material/core/error/** @crisbeto @mmalerba
4849
/src/material/core/focus-indicators/** @jelbourn @zelliott
4950
/src/material/core/gestures/** @jelbourn

‎src/dev-app/theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
@import '../material/core/theming/all-theme';
1+
@import '../material/core/density/all-density';
22
@import '../material/core/focus-indicators/focus-indicators';
3+
@import '../material/core/theming/all-theme';
34
@import '../material-experimental/column-resize/column-resize';
45
@import '../material-experimental/mdc-helpers/mdc-helpers';
56
@import '../material-experimental/mdc-helpers/focus-indicator';
@@ -80,6 +81,7 @@ $dark-theme: mat-dark-theme((
8081
$density-scales: (-1, -2, minimum, maximum);
8182
@each $density in$density-scales {
8283
.demo-density-#{$density} {
84+
@include _angular-material-density($density);
8385
@include angular-material-density-mdc($density);
8486
}
8587
}

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,6 @@ load("//tools:defaults.bzl", "sass_library")
44

55
sass_library(
66
name = "all_density",
7-
srcs = [
8-
"_all-density.scss",
9-
],
10-
deps = [
11-
"//src/material-experimental/mdc-button:mdc_button_scss_lib",
12-
"//src/material-experimental/mdc-card:mdc_card_scss_lib",
13-
"//src/material-experimental/mdc-checkbox:mdc_checkbox_scss_lib",
14-
"//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
15-
"//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
16-
"//src/material-experimental/mdc-input:mdc_input_scss_lib",
17-
"//src/material-experimental/mdc-list:mdc_list_scss_lib",
18-
"//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
19-
"//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
20-
"//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
21-
"//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
22-
"//src/material-experimental/mdc-slider:mdc_slider_scss_lib",
23-
"//src/material-experimental/mdc-table:mdc_table_scss_lib",
24-
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
25-
],
7+
srcs = ["_all-density.scss"],
8+
deps = ["//src/material-experimental/mdc-theming:all_themes"],
269
)

‎src/material-experimental/mdc-density/_all-density.scss

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,9 @@
1-
@import '../mdc-button/button-theme';
2-
@import '../mdc-card/card-theme';
3-
@import '../mdc-checkbox/checkbox-theme';
4-
@import '../mdc-chips/chips-theme';
5-
@import '../mdc-list/list-theme';
6-
@import '../mdc-menu/menu-theme';
7-
@import '../mdc-radio/radio-theme';
8-
@import '../mdc-slide-toggle/slide-toggle-theme';
9-
@import '../mdc-slider/slider-theme';
10-
@import '../mdc-tabs/tabs-theme';
11-
@import '../mdc-table/table-theme';
12-
@import '../mdc-progress-bar/progress-bar-theme';
13-
@import '../mdc-input/input-theme';
14-
@import '../mdc-form-field/form-field-theme';
1+
@import '../mdc-theming/all-theme';
152

163
@mixin angular-material-density-mdc($config: null) {
17-
@include mat-button-density-mdc($config);
18-
@include mat-fab-density-mdc($config);
19-
@include mat-icon-button-density-mdc($config);
20-
@include mat-card-density-mdc($config);
21-
@include mat-checkbox-density-mdc($config);
22-
@include mat-chips-density-mdc($config);
23-
@include mat-list-density-mdc($config);
24-
@include mat-menu-density-mdc($config);
25-
@include mat-radio-density-mdc($config);
26-
@include mat-slide-toggle-density-mdc($config);
27-
@include mat-slider-density-mdc($config);
28-
@include mat-tabs-density-mdc($config);
29-
@include mat-table-density-mdc($config);
30-
@include mat-progress-bar-density-mdc($config);
31-
@include mat-input-density-mdc($config);
32-
@include mat-form-field-density-mdc($config);
4+
@include angular-material-mdc-theme((
5+
color: null,
6+
typography: null,
7+
density: $config,
8+
));
339
}

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

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,6 @@ filegroup(
99

1010
sass_library(
1111
name = "all_typography",
12-
srcs = [
13-
"_all-typography.scss",
14-
],
15-
deps = [
16-
"//src/material-experimental/mdc-button:mdc_button_scss_lib",
17-
"//src/material-experimental/mdc-card:mdc_card_scss_lib",
18-
"//src/material-experimental/mdc-checkbox:mdc_checkbox_scss_lib",
19-
"//src/material-experimental/mdc-chips:mdc_chips_scss_lib",
20-
"//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
21-
"//src/material-experimental/mdc-input:mdc_input_scss_lib",
22-
"//src/material-experimental/mdc-list:mdc_list_scss_lib",
23-
"//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
24-
"//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
25-
"//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
26-
"//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
27-
"//src/material-experimental/mdc-slider:mdc_slider_scss_lib",
28-
"//src/material-experimental/mdc-table:mdc_table_scss_lib",
29-
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
30-
],
12+
srcs = ["_all-typography.scss"],
13+
deps = ["//src/material-experimental/mdc-theming:all_themes"],
3114
)

‎src/material-experimental/mdc-typography/_all-typography.scss

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,13 @@
1-
@import '../mdc-button/button-theme';
2-
@import '../mdc-card/card-theme';
3-
@import '../mdc-checkbox/checkbox-theme';
4-
@import '../mdc-chips/chips-theme';
5-
@import '../mdc-list/list-theme';
6-
@import '../mdc-menu/menu-theme';
7-
@import '../mdc-radio/radio-theme';
8-
@import '../mdc-slide-toggle/slide-toggle-theme';
9-
@import '../mdc-slider/slider-theme';
10-
@import '../mdc-tabs/tabs-theme';
11-
@import '../mdc-table/table-theme';
12-
@import '../mdc-progress-bar/progress-bar-theme';
13-
@import '../mdc-input/input-theme';
14-
@import '../mdc-form-field/form-field-theme';
1+
@import '../mdc-theming/all-theme';
152

163
@mixin angular-material-mdc-typography($config: null) {
174
@if $config == null {
185
$config: mat-typography-config();
196
}
207

21-
@include mat-mdc-button-typography($config);
22-
@include mat-mdc-fab-typography($config);
23-
@include mat-mdc-icon-button-typography($config);
24-
@include mat-mdc-card-typography($config);
25-
@include mat-mdc-checkbox-typography($config);
26-
@include mat-mdc-chips-typography($config);
27-
@include mat-mdc-list-typography($config);
28-
@include mat-mdc-menu-typography($config);
29-
@include mat-mdc-radio-typography($config);
30-
@include mat-mdc-slide-toggle-typography($config);
31-
@include mat-mdc-slider-typography($config);
32-
@include mat-mdc-tabs-typography($config);
33-
@include mat-mdc-table-typography($config);
34-
@include mat-mdc-progress-bar-typography($config);
35-
@include mat-mdc-input-typography($config);
36-
@include mat-mdc-form-field-typography($config);
8+
@include angular-material-mdc-theme((
9+
color: null,
10+
density: null,
11+
typography: $config,
12+
));
3713
}

‎src/material/core/density/_all-density.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import '../theming/all-theme';
2+
3+
// Includes all of the density styles.
4+
@mixin _angular-material-density($config) {
5+
@include angular-material-theme((
6+
color: null,
7+
typography: null,
8+
density: $config,
9+
));
10+
}

‎src/material/core/typography/_all-typography.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@
4343
$config: mat-typography-config();
4444
}
4545

46+
// TODO: Do not use individual mixins. Instead, use the all-theme mixin and only specify a
47+
// `typography` config while setting `color` and `density` to `null`. This is currently
48+
// not possible as it would introduce a circular dependency for typography because the
49+
// `mat-core` mixin that is transitively loaded by the `all-theme` file, imports
50+
// `all-typography` which would then load `all-theme` again. This causes a cycle.
51+
4652
@include mat-badge-typography($config);
4753
@include mat-base-typography($config);
4854
@include mat-autocomplete-typography($config);

0 commit comments

Comments
 (0)