feat(material-experimental/mdc-radio): support for density scaling

Author: devversion

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

@@ -37,7 +37,11 @@
   }
 }
 
-@mixin mat-radio-density-mdc($density-scale) {}
+@mixin mat-radio-density-mdc($density-scale) {
+  .mat-mdc-radio-button .mdc-radio {
+    @include mdc-radio-density($density-scale);
+  }
+}
 
 @mixin mat-radio-theme-mdc($theme) {
   $color: mat-get-color-config($theme);

src/material-experimental/mdc-radio/radio.html

@@ -23,7 +23,6 @@
          [matRippleTrigger]="formField"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
-         [matRippleRadius]="20"
          [matRippleAnimation]="_rippleAnimation">
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>

src/material-experimental/mdc-radio/radio.scss

@@ -2,20 +2,18 @@
 @import '@material/radio/variables.import';
 @import '@material/form-field/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/style/layout-common';
 
 @include mdc-radio-without-ripple($query: $mat-base-styles-query);
 @include mdc-form-field-core-styles($query: $mat-base-styles-query);
 
 // This is necessary because we do not depend on MDC's ripple, but have our own that should be
 // positioned correctly. This can be removed once we start using MDC's ripple implementation.
 .mat-mdc-radio-button .mat-radio-ripple {
-  position: absolute;
-  left: calc(50% - #{$mdc-radio-icon-size});
-  top: calc(50% - #{$mdc-radio-icon-size});
-  height: $mdc-radio-icon-size * 2;
-  width: $mdc-radio-icon-size * 2;
-  z-index: 1;
+  @include mat-fill;
+
   pointer-events: none;
+  border-radius: 50%;
 
   .mat-ripple-element:not(.mat-radio-persistent-ripple) {
     opacity: $mdc-radio-ripple-opacity;