perf(material-experimental/mdc-radio): reduce bundle size (#24267)

Reduces the bundle size of the MDC-based radio button by excluding styles we don't need. This shaves off ~15kb from the dev app bundle, although I believe that the styles are duplicated there so the real reduction is likely ~7.5kb. (cherry picked from commit e6c3379)
angular · Jan 25, 2022 · 152c60b · 152c60b
1 parent 81b6a81
commit 152c60b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss
@@ -10,12 +10,9 @@
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
     selected-focus-icon-color: $color-palette,
-    selected-focus-state-layer-color: $color-palette,
     selected-hover-icon-color: $color-palette,
-    selected-hover-state-layer-color: $color-palette,
     selected-icon-color: $color-palette,
     selected-pressed-icon-color: $color-palette,
-    selected-pressed-state-layer-color: $color-palette,
   ));
 
   // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
@@ -39,12 +36,9 @@
         disabled-selected-icon-color: mdc-theme-color.$on-surface,
         disabled-unselected-icon-color: mdc-theme-color.$on-surface,
         unselected-focus-icon-color: $on-surface,
-        unselected-focus-state-layer-color: $on-surface,
         unselected-hover-icon-color: $on-surface,
-        unselected-hover-state-layer-color: $on-surface,
         unselected-icon-color: $on-surface,
         unselected-pressed-icon-color: $on-surface,
-        unselected-pressed-state-layer-color: $on-surface,
       ));
 
       &.mat-primary {

diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html
@@ -19,7 +19,6 @@
       <div class="mdc-radio__outer-circle"></div>
       <div class="mdc-radio__inner-circle"></div>
     </div>
-    <div class="mdc-radio__ripple"></div>
     <div mat-ripple class="mat-radio-ripple mat-mdc-focus-indicator"
          [matRippleTrigger]="formField"
          [matRippleDisabled]="_isRippleDisabled()"

diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field' as mdc-form-field;
@@ -7,22 +8,31 @@
 @use '../../material/core/style/layout-common';
 
 @include mdc-helpers.disable-fallback-declarations {
-  @include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
+  @include mdc-radio.static-styles($query: mdc-helpers.$mat-base-styles-query);
   @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
 }
 
 .mat-mdc-radio-button {
-  &:not(._mat-animation-noopable) {
-    @include mdc-helpers.disable-fallback-declarations {
-      @include mdc-radio.without-ripple($query: animation);
-    }
-  }
-
   .mdc-radio {
     // MDC theme styles also include structural styles so we have to include the theme at least
     // once here. The values will be overwritten by our own theme file afterwards.
     @include mdc-helpers.disable-fallback-declarations {
-      @include mdc-radio-theme.theme-styles(mdc-radio-theme.$light-theme);
+      @include mdc-radio-theme.theme-styles(map.merge(mdc-radio-theme.$light-theme, (
+        // Exclude the styles we don't need.
+        selected-focus-state-layer-color: null,
+        selected-focus-state-layer-opacity: null,
+        selected-hover-state-layer-color: null,
+        selected-hover-state-layer-opacity: null,
+        selected-pressed-state-layer-color: null,
+        selected-pressed-state-layer-opacity: null,
+        unselected-focus-icon-color: null,
+        unselected-focus-state-layer-color: null,
+        unselected-focus-state-layer-opacity: null,
+        unselected-hover-state-layer-color: null,
+        unselected-hover-state-layer-opacity: null,
+        unselected-pressed-state-layer-color: null,
+        unselected-pressed-state-layer-opacity: null,
+      )));
     }
   }
 
@@ -33,10 +43,19 @@
     pointer-events: none;
     border-radius: 50%;
 
-    .mat-ripple-element:not(.mat-radio-persistent-ripple) {
+    .mat-ripple-element {
       opacity: mdc-radio-theme.$ripple-opacity;
     }
   }
+
+  &._mat-animation-noopable {
+    .mdc-radio__background::before,
+    .mdc-radio__outer-circle,
+    .mdc-radio__inner-circle {
+      // Needs to be `!important`, because MDC's selectors are really specific.
+      transition: none !important;
+    }
+  }
 }
 
 // Element used to provide a larger tap target for users on touch devices.