move sass rules out of theme; cleanup typography styles

Author: andrewseguin

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

@@ -38,16 +38,6 @@ sass_binary(
     ],
 )
 
-sass_library(
-    name = "fab_scss_lib",
-    srcs = glob(["**/_*.scss"]),
-    deps = [
-        "//src/material/core:core_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-    ],
-)
-
 sass_binary(
     name = "fab_scss",
     src = "fab.scss",
@@ -61,16 +51,6 @@ sass_binary(
     ],
 )
 
-sass_library(
-    name = "icon-button_scss_lib",
-    srcs = glob(["**/_*.scss"]),
-    deps = [
-        "//src/material/core:core_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
-        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
-    ],
-)
-
 sass_binary(
     name = "icon-button_scss",
     src = "icon-button.scss",

src/material-experimental/mdc-button/README.md

@@ -7,6 +7,9 @@
 
 ### TODO
 - Write README - looks like lot of overlap with checkbox README. Create common readme for setup
-- Move tests over
+- Move tests over (both unit and e2e)
 - JSDoc comments on all classes, consts
 - Consider supporting button[mat-outlined-button]
+- Add to universal app
+- Should each button type have a unique top level class? e.g. mdc-mat-icon-button
+- Consider if we want to add a "appearance/type" input to button, similar to form field (outline/stroked, flat, raised)

src/material-experimental/mdc-button/_mdc-button.scss

@@ -1,8 +1,6 @@
 @import '@material/button/mixins';
 @import '../mdc-helpers/mdc-helpers';
 
-$_mat-button-ripple-opacity: 0.1;
-
 @mixin mat-button-theme-mdc($theme) {
   $primary: mat-color(map-get($theme, primary));
   $accent: mat-color(map-get($theme, accent));
@@ -11,24 +9,10 @@ $_mat-button-ripple-opacity: 0.1;
   @include mat-using-mdc-theme($theme) {
     @include mdc-button-without-ripple($query: $mat-theme-styles-query);
   }
-
-  .mat-mdc-button {
-    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
-    // necessary to provide the color and opacity styling manually.
-    .mat-ripple-element {
-      opacity: $_mat-button-ripple-opacity;
-      background-color: currentColor;
-    }
-  }
 }
 
 @mixin mat-button-typography-mdc($config) {
-  @if config {
-    @include mat-using-mdc-typography($config) {
-      @include mdc-button-without-ripple($query: $mat-typography-styles-query);
-    }
-  }
-  @else {
+  @include mat-using-mdc-typography($config) {
     @include mdc-button-without-ripple($query: $mat-typography-styles-query);
   }
 }
@@ -37,24 +21,10 @@ $_mat-button-ripple-opacity: 0.1;
   @include mat-using-mdc-theme($theme) {
     @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
   }
-
-  .mat-mdc-button {
-    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
-    // necessary to provide the color and opacity styling manually.
-    .mat-ripple-element {
-      opacity: $_mat-button-ripple-opacity;
-      background-color: currentColor;
-    }
-  }
 }
 
 @mixin mat-fab-typography-mdc($config) {
-  @if config {
-    @include mat-using-mdc-typography($config) {
-      @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
-    }
-  }
-  @else {
+  @include mat-using-mdc-typography($config) {
     @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
   }
 }
@@ -63,24 +33,10 @@ $_mat-button-ripple-opacity: 0.1;
   @include mat-using-mdc-theme($theme) {
     @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);
   }
-
-  .mat-mdc-button {
-    // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
-    // necessary to provide the color and opacity styling manually.
-    .mat-ripple-element {
-      opacity: $_mat-button-ripple-opacity;
-      background-color: currentColor;
-    }
-  }
 }
 
 @mixin mat-icon-button-typography-mdc($config) {
-  @if config {
-    @include mat-using-mdc-typography($config) {
-      @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
-    }
-  }
-  @else {
-    @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
+  @include mat-using-mdc-typography($config) {
+    @include mdc-icon-without-ripple($query: $mat-typography-styles-query);
   }
 }

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

@@ -2,3 +2,14 @@
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-button-without-ripple($query: $mat-base-styles-query);
+
+$_mat-button-ripple-opacity: 0.1;
+
+.mat-mdc-button {
+  // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
+  // necessary to provide the color and opacity styling manually.
+  .mat-ripple-element {
+    opacity: $_mat-button-ripple-opacity;
+    background-color: currentColor;
+  }
+}

src/material-experimental/mdc-button/fab.scss

@@ -3,6 +3,17 @@
 
 @include mdc-fab-without-ripple($query: $mat-base-styles-query);
 
+$_mat-button-ripple-opacity: 0.1;
+
+.mat-mdc-button {
+  // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
+  // necessary to provide the color and opacity styling manually.
+  .mat-ripple-element {
+    opacity: $_mat-button-ripple-opacity;
+    background-color: currentColor;
+  }
+}
+
 // MDC expects the fab icon to contain this HTML content:
 // ```html
 //   <span class="mdc-fab__icon material-icons">favorite</span>

src/material-experimental/mdc-button/icon-button.scss

@@ -2,3 +2,14 @@
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-icon-button-without-ripple($query: $mat-base-styles-query);
+
+$_mat-button-ripple-opacity: 0.1;
+
+.mat-mdc-button {
+  // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
+  // necessary to provide the color and opacity styling manually.
+  .mat-ripple-element {
+    opacity: $_mat-button-ripple-opacity;
+    background-color: currentColor;
+  }
+}