feat(button): add custom props to outlined button theme-styles

PiperOrigin-RevId: 389006135
material-components · Aug 5, 2021 · bf405d2 · bf405d2
1 parent 5dee37f
commit bf405d2
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 48 deletions.
diff --git a/packages/mdc-button/_button-outlined-theme.scss b/packages/mdc-button/_button-outlined-theme.scss
@@ -26,6 +26,8 @@
 @use 'sass:map';
 @use 'sass:math';
 @use '@material/feature-targeting/feature-targeting';
+@use '@material/theme/custom-properties';
+@use '@material/theme/keys';
 @use '@material/theme/state';
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
@@ -38,10 +40,12 @@
 $outlined-border-width: 1px !default;
 $outline-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;
 
+$_custom-property-prefix: 'outlined-button';
+
 $light-theme: (
   container-disabled-color: transparent,
+  container-height: button-shared-theme.$height,
   container-shape: button-shared-theme.$shape-radius,
-  density: button-shared-theme.$density-scale,
   disabled-label-text-color: button-shared-theme.$disabled-ink-color,
   disabled-outline-color: button-shared-theme.$disabled-container-color,
   focus-label-text-color: null,
@@ -79,6 +83,23 @@ $light-theme: (
   $query: feature-targeting.all()
 ) {
   @include theme.validate-keys($light-theme, $theme);
+  @include _theme($theme, $resolver, $query: $query);
+}
+
+@mixin theme-styles(
+  $theme,
+  $resolver: resolvers.$material,
+  $query: feature-targeting.all()
+) {
+  @include theme.validate-keys($light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+  @include _theme($theme, $resolver, $query: $query);
+}
+
+@mixin _theme($theme, $resolver, $query) {
   @include button-shared-theme.theme($theme, $resolver, $query: $query);
   @include outline-color(
     (
@@ -91,6 +112,28 @@ $light-theme: (
   @include outline-width(map.get($theme, outline-width), $query: $query);
 }
 
+@mixin deprecated-theme-styles($query: feature-targeting.all()) {
+  .mdc-button--outlined {
+    $theme: map.merge(
+      $light-theme,
+      (
+        focus-state-layer-color: null,
+        focus-state-layer-opacity: null,
+        hover-state-layer-color: null,
+        hover-state-layer-opacity: null,
+        pressed-state-layer-color: null,
+        pressed-state-layer-opacity: null,
+        label-text-font: null,
+        label-text-size: null,
+        label-text-tracking: null,
+        label-text-transform: null,
+        label-text-weight: null,
+      )
+    );
+    @include _theme($theme, resolvers.$material, $query: $query);
+  }
+}
+
 ///
 /// Sets the outline color to the given color for an enabled button.
 /// @param {Color} $color-or-map - The desired outline color, specified either
@@ -158,11 +201,18 @@ $light-theme: (
   $padding-icon: button-shared-theme.$contained-horizontal-padding-icon,
   $query: feature-targeting.all()
 ) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
   @if $outline-width != null {
-    $feat-structure: feature-targeting.create-target($query, structure);
+    $outline-width-value: if(
+      custom-properties.is-custom-prop($outline-width),
+      custom-properties.get-fallback($outline-width),
+      $outline-width
+    );
+    // TODO(b/194792044): uncouple padding from outline-width
     // Note: Adjust padding to maintain consistent width with non-outlined buttons
-    $padding-value: math.max($padding - $outline-width, 0);
-    $padding-icon-value: math.max($padding-icon - $outline-width, 0);
+    $padding-value: math.max($padding - $outline-width-value, 0);
+    $padding-icon-value: math.max($padding-icon - $outline-width-value, 0);
 
     @include button-shared-theme.horizontal-padding(
       $padding: $padding-value,
@@ -171,21 +221,36 @@ $light-theme: (
     );
 
     @include feature-targeting.targets($feat-structure) {
-      border-width: $outline-width;
+      @include theme.property(border-width, $outline-width);
     }
 
     #{button-ripple.$ripple-target} {
       @include feature-targeting.targets($feat-structure) {
-        top: -$outline-width;
-        left: -$outline-width;
-        border: $outline-width solid transparent;
+        @include theme.property(
+          top,
+          calc(-1 * outline-width),
+          $replace: (outline-width: $outline-width)
+        );
+        @include theme.property(
+          left,
+          calc(-1 * outline-width),
+          $replace: (outline-width: $outline-width)
+        );
+        @include theme.property(border-width, $outline-width);
       }
     }
-
     .mdc-button__touch {
       @include feature-targeting.targets($feat-structure) {
-        left: -$outline-width;
-        width: calc(100% + 2 * #{$outline-width});
+        @include theme.property(
+          left,
+          calc(-1 * outline-width),
+          $replace: (outline-width: $outline-width)
+        );
+        @include theme.property(
+          width,
+          calc(100% + 2 * outline-width),
+          $replace: (outline-width: $outline-width)
+        );
       }
     }
   }

diff --git a/packages/mdc-button/_button-outlined.scss b/packages/mdc-button/_button-outlined.scss
@@ -27,23 +27,18 @@
 @use '@material/feature-targeting/feature-targeting';
 @use './button-base';
 @use './button-outlined-theme';
+@use './button-ripple';
 @use './button-shared-theme';
 
 @mixin styles(
   $theme: button-outlined-theme.$light-theme,
+  $resolver: resolvers.$material,
   $query: feature-targeting.all()
 ) {
   @include button-base.static-styles($query: $query);
   @include static-styles($query: $query);
-  @include theme-styles($theme, $query: $query);
-}
-
-@mixin theme-styles(
-  $theme: button-outlined-theme.$light-theme,
-  $query: feature-targeting.all()
-) {
   .mdc-button--outlined {
-    @include _theme-styles($theme, $query: $query);
+    @include theme-styles($theme, $resolver, $query: $query);
   }
 }
 
@@ -53,43 +48,27 @@
   }
 }
 
-@mixin deprecated-theme-styles($query: feature-targeting.all()) {
-  .mdc-button--outlined {
-    $theme: map.merge(
-      button-outlined-theme.$light-theme,
-      (
-        focus-state-layer-color: null,
-        focus-state-layer-opacity: null,
-        hover-state-layer-color: null,
-        hover-state-layer-opacity: null,
-        pressed-state-layer-color: null,
-        pressed-state-layer-opacity: null,
-        label-text-font: null,
-        label-text-size: null,
-        label-text-tracking: null,
-        label-text-transform: null,
-        label-text-weight: null,
-      )
-    );
-    @include _theme-styles($theme, $query: $query);
-  }
-}
-
-@mixin _theme-styles($theme, $query: feature-targeting.all()) {
-  @include button-outlined-theme.theme($theme, $query: $query);
-}
-
 @mixin _static-styles($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include feature-targeting.targets($feat-structure) {
     border-style: solid;
   }
+
+  #{button-ripple.$ripple-target} {
+    @include feature-targeting.targets($feat-structure) {
+      border-style: solid;
+      border-color: transparent;
+    }
+  }
 }
 
 @mixin outlined($query: feature-targeting.all()) {
   @include _static-styles($query: $query);
-  @include _theme-styles(button-outlined-theme.$light-theme, $query: $query);
+  @include button-outlined-theme.theme-styles(
+    button-outlined-theme.$light-theme,
+    $query: $query
+  );
 }
 
 /// @deprecated Private style mixin for partners; not available for public use.

diff --git a/packages/mdc-button/_button.scss b/packages/mdc-button/_button.scss
@@ -61,7 +61,12 @@
     );
   }
   @include button-protected.theme-styles($query: $query);
-  @include button-outlined.theme-styles($query: $query);
+  .mdc-button--outlined {
+    @include button-outlined-theme.theme-styles(
+      button-outlined-theme.$light-theme,
+      $query: $query
+    );
+  }
 }
 
 @mixin static-styles($query: feature-targeting.all()) {
@@ -86,7 +91,7 @@
 @mixin _theme-styles-without-ripple($query: feature-targeting.all()) {
   @include button-text-theme.deprecated-theme-styles($query: $query);
   @include button-filled-theme.deprecated-theme-styles($query: $query);
-  @include button-outlined.deprecated-theme-styles($query: $query);
+  @include button-outlined-theme.deprecated-theme-styles($query: $query);
   // Elevation has been recategorized into theme styles. Keeping old elevation
   // styles here for backwards compatibility.
   .mdc-button--raised {