feat(rtl): Make mdc-rtl-reflexive sass mixin public (#2823)

material-components · May 29, 2018 · ca018a7 · ca018a7
1 parent 9e35b1e
commit ca018a7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/packages/mdc-rtl/README.md b/packages/mdc-rtl/README.md
@@ -40,6 +40,7 @@ Both `mdc-rtl-reflexive-property` and `mdc-rtl-reflexive-box` work with one base
 | `mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector)` | Applies the value to the `#{$base-property}-#{$default-direction}` property  in a LTR context, and flips the direction in an RTL context. **This mixin zeros out the original value in an RTL context.**  |
 | `mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector)` | Emits rules that assign `#{$base-property}`-left to `#{left-value}` and `#{base-property}`-right to `#{right-value}` in a LTR context, and vice versa in a RTL context. **Basically it flips values between a LTR and RTL context.** |
 | `mdc-rtl-reflexive-position($position-property, $value, $root-selector)` | Applies the value to the specified position in a LTR context, and flips the direction in an RTL context. `$position-property` is a horizontal position, either "left" or "right". |
+| `mdc-rtl-reflexive($left-property, $left-value, $right-property, $right-value, $root-selector)` | Applies the pair of property values to the specified position in a LTR context, and flips the direction in an RTL context. |
 
 **A note about [dir="rtl"]**: `mdc-rtl($root-selector)` checks for `[dir="rtl"]` on the ancestor element. This works in most cases, it will sometimes lead to false negatives for more complex layouts, e.g.
 

diff --git a/packages/mdc-rtl/_mixins.scss b/packages/mdc-rtl/_mixins.scss
@@ -168,7 +168,7 @@
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
 
-  @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);
 }
 
 // Takes an argument specifying a horizontal position property (either "left" or "right") as well
@@ -209,10 +209,34 @@
     $left-value: initial;
   }
 
-  @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);
 }
 
-@mixin mdc-rtl-reflexive_(
+// Takes pair of properties with values as arguments and flips it in RTL context.
+// For example:
+//
+// ```scss
+// .mdc-foo {
+//   @include mdc-rtl-reflexive(left, 2px, right, 5px);
+//   position: absolute;
+//  }
+//  ```
+//  is equivalent to:
+//
+//  ```scss
+//  .mdc-foo {
+//    position: absolute;
+//    left: 2px;
+//    right: 5px;
+//
+//    @include mdc-rtl {
+//      right: 2px;
+//      left: 5px;
+//    }
+//  }
+//  ```
+// An optional fifth $root-selector argument may also be given, which is passed to `mdc-rtl`.
+@mixin mdc-rtl-reflexive(
   $left-property,
   $left-value,
   $right-property,

diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss
@@ -46,7 +46,7 @@
 }
 
 @mixin mdc-top-app-bar-short-border-radius($border-radius: $mdc-top-app-bar-short-collapsed-border-radius) {
-  @include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius);
+  @include mdc-rtl-reflexive(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius);
 }
 
 @mixin mdc-top-app-bar-mobile-breakpoint_($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {