refactor: encapsulate and standardize on RTL within scss (google#4861)

* Create `mdl-rtl` helper package
* Refactor all rtl-aware components to use mdl-rtl
* Fix minor issues relating to RTL in some components
* Reformat mdl-list mixins to use trailing underscore

Resolves google#4749
[#130314041]

Author: traviskaufman

packages/mdl-drawer/_functions.scss

@@ -18,31 +18,10 @@
 @import "mdl-animation/variables";
 @import "mdl-theme/mixins";
 @import "mdl-typography/mixins";
-@import "./functions";
 
 /* All variables are local, so disable pattern checking. */
 /* stylelint-disable scss/dollar-variable-pattern */
 
-@mixin mdl-drawer-dir_($property, $value) {
-  $directions: (
-    ltr: (
-      "start": "left",
-      "end": "right"
-    ),
-    rtl: (
-      "start": "right",
-      "end": "left"
-    )
-  );
-
-  #{mdl-drawer-replace($property, map-get($directions, ltr))}: $value;
-
-  [dir="rtl"] & {
-    #{mdl-drawer-replace($property, map-get($directions, ltr))}: auto;
-    #{mdl-drawer-replace($property, map-get($directions, rtl))}: $value;
-  }
-}
-
 @mixin mdl-drawer-toolbar-spacer_() {
   &__toolbar-spacer {
     display: flex;

packages/mdl-drawer/_mixins.scss

@@ -7,6 +7,7 @@
     "mdl-animation": "^1.0.0",
     "mdl-base": "^1.0.0",
     "mdl-elevation": "^1.0.0",
+    "mdl-rtl": "^1.0.0",
     "mdl-theme": "^1.0.0",
     "mdl-typography": "^1.0.0"
   }

packages/mdl-drawer/package.json

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+@import "mdl-rtl/mixins";
 @import "mdl-theme/mixins";
 @import "../mixins";
 
@@ -22,14 +23,14 @@ $mdl-permanent-drawer-width: 240px;
 .mdl-permanent-drawer {
   @include mdl-drawer-base_;
   @include mdl-theme-prop(background, background);
-  @include mdl-drawer-dir_(border-end, 1px solid #e4e4e4);
-  @include mdl-drawer-dir_(start, 0);
+  @include mdl-rtl-reflexive-box(border, right, 1px solid #e4e4e4);
+  @include mdl-rtl-reflexive-position(left, 0);
 
   @include mdl-theme-dark {
     background: #212121;
 
     @include mdl-theme-prop(color, text-primary-on-dark);
-    @include mdl-drawer-dir_(border-end, 1px solid rgba(255, 255, 255, .12));
+    @include mdl-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
   }
 
   display: inline-flex;
@@ -42,12 +43,12 @@ $mdl-permanent-drawer-width: 240px;
   &--floating {
     background: none;
 
-    @include mdl-drawer-dir_(border-end, none);
+    @include mdl-rtl-reflexive-box(border, right, none);
 
     @include mdl-theme-dark {
       background: none;
 
-      @include mdl-drawer-dir_(border-end, none);
+      @include mdl-rtl-reflexive-box(border, right, none);
     }
   }
 }

packages/mdl-drawer/permanent/mdl-permanent-drawer.scss

@@ -16,6 +16,7 @@
 
 @import "mdl-animation/functions";
 @import "mdl-elevation/mixins";
+@import "mdl-rtl/mixins";
 @import "mdl-theme/mixins";
 @import "../mixins";
 
@@ -51,6 +52,7 @@
   &__drawer {
     @include mdl-theme-prop(background, background);
     @include mdl-elevation(16);
+    @include mdl-rtl-reflexive-position(left, 0);
 
     @include mdl-theme-dark(".mdl-temporary-drawer") {
       background: #303030;
@@ -60,7 +62,6 @@
 
     display: flex;
     position: absolute;
-    left: 0;
     flex-direction: column;
     width: calc(100% - 56px);
     max-width: 280px;
@@ -70,9 +71,7 @@
     box-sizing: border-box;
     overflow: hidden;
 
-    [dir="rtl"] & {
-      right: 0;
-      left: auto;
+    @include mdl-rtl(".mdl-temporary-drawer") {
       transform: translateX(calc(100% + 20px));
     }
 
@@ -122,5 +121,12 @@
     .mdl-temporary-drawer__drawer {
       transform: none;
     }
+
+    // Specificity fix to ensure that mdl-drawer is not translated off-screen within an RTL context
+    @include mdl-rtl {
+      .mdl-temporary-drawer__drawer {
+        transform: none;
+      }
+    }
   }
 }

packages/mdl-drawer/temporary/mdl-temporary-drawer.scss

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+@import "mdl-rtl/mixins";
 @import "mdl-theme/mixins";
 @import "mdl-typography/mixins";
 
@@ -38,20 +39,26 @@ $mdl-form-field-item-spacing: 4px;
     margin-left: $mdl-form-field-item-spacing;
   }
 
-  &--align-end > label {
-    order: -1;
-    margin-right: $mdl-form-field-item-spacing;
-    margin-left: auto;
+  @include mdl-rtl {
+    > label {
+      margin-right: $mdl-form-field-item-spacing;
+      margin-left: auto;
+    }
   }
+}
 
-  [dir="rtl"] & > label,
-  &[dir="rtl"] > label {
+.mdl-form-field--align-end {
+  > label {
     order: -1;
+    margin-right: $mdl-form-field-item-spacing;
+    margin-left: auto;
   }
 
-  [dir="rtl"] &--align-end > label,
-  &--align-end[dir="rtl"] > label {
-    order: 0;
+  @include mdl-rtl {
+    > label {
+      margin-right: auto;
+      margin-left: $mdl-form-field-item-spacing;
+    }
   }
 }
 /* stylelint-enable selector-no-type */

packages/mdl-form-field/mdl-form-field.scss

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "dependencies": {
+    "mdl-rtl": "^1.0.0",
     "mdl-theme": "^1.0.0",
     "mdl-typography": "^1.0.0"
   }

packages/mdl-form-field/package.json

@@ -14,36 +14,15 @@
  * limitations under the License.
  */
 
+@import "mdl-rtl/mixins";
 @import "mdl-theme/mixins";
 @import "mdl-typography/mixins";
 @import "mdl-typography/variables";
 
-/* stylelint-disable scss/dollar-variable-pattern, scss/at-mixin-pattern */
-@mixin _mdl-list-reflexive-margin($default-side, $value, $reset-opposite-margin: true) {
-  @if (index((right, left), $default-side) == null) {
-    @error "Invalid default margin side #{default-side}. Please specifiy either right or left";
-  }
-
-  $rtl-side: left;
-
-  @if ($default-side == left) {
-    $rtl-side: right;
-  }
-
-  margin-#{$default-side}: $value;
-  [dir="rtl"] & {
-    margin-#{$rtl-side}: $value;
-
-    @if ($reset-opposite-margin) {
-      margin-#{$default-side}: 0;
-    }
-  }
-}
-
 /**
  * Sets the width and height of a detail element to the specified dimension.
  */
-@mixin _mdl-list-detail-size($size) {
+@mixin mdl-list-detail-size_($size) {
   width: $size;
   height: $size;
 }
@@ -53,15 +32,18 @@
  * the start detail element such that the text is always offset by 72px, which is defined within
  * the spec.
  */
-@mixin _mdl-list-start-detail-size($size) {
+@mixin mdl-list-start-detail-size_($size) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+
   $text-offset: 72px;
   $side-padding: 16px;
   $margin-value: $text-offset - $side-padding - $size;
 
-  @include _mdl-list-detail-size($size);
-  @include _mdl-list-reflexive-margin(right, $margin-value);
+  @include mdl-list-detail-size_($size);
+  @include mdl-rtl-reflexive-box(margin, right, $margin-value, ".mdl-list-item");
+
+  /* stylelint-enable scss/dollar-variable-pattern */
 }
-/* stylelint-enable scss/dollar-variable-pattern, scss/at-mixin-pattern */
 
 /* postcss-bem-linter: define list */
 
@@ -98,13 +80,12 @@
   height: 48px;
 
   &__start-detail {
-    @include _mdl-list-start-detail-size(24px);
+    @include mdl-list-start-detail-size_(24px);
   }
 
   &__end-detail {
-    @include _mdl-list-detail-size(24px);
-    @include _mdl-list-reflexive-margin(left, auto, false);
-    @include _mdl-list-reflexive-margin(right, 16px, false);
+    @include mdl-list-detail-size_(24px);
+    @include mdl-rtl-reflexive-property(margin, auto, 16px, ".mdl-list-item");
   }
 
   &__text {
@@ -133,19 +114,19 @@
     height: 40px;
 
     &__start-detail {
-      @include _mdl-list-start-detail-size(20px);
+      @include mdl-list-start-detail-size_(20px);
     }
 
     &__end-detail {
-      @include _mdl-list-detail-size(20px);
+      @include mdl-list-detail-size_(20px);
     }
   }
 
   .mdl-list--avatar-list & {
     height: 56px;
 
     &__start-detail {
-      @include _mdl-list-start-detail-size(40px);
+      @include mdl-list-start-detail-size_(40px);
       border-radius: 50%;
     }
   }
@@ -154,7 +135,7 @@
     height: 48px;
 
     &__start-detail {
-      @include _mdl-list-start-detail-size(36px);
+      @include mdl-list-start-detail-size_(36px);
     }
   }
 
@@ -186,7 +167,7 @@
 .mdl-list-divider--inset {
   $mdl-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ 16px;
 
-  @include _mdl-list-reflexive-margin(left, $mdl-list-divider-inset-amt);
+  @include mdl-rtl-reflexive-box(margin, left, $mdl-list-divider-inset-amt, ".mdl-list-group");
   width: calc(100% - #{$mdl-list-divider-inset-amt});
 }
 

packages/mdl-list/mdl-list.scss

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "dependencies": {
+    "mdl-rtl": "^1.0.0",
     "mdl-typography": "^1.0.0",
     "mdl-theme": "^1.0.0"
   }