refactor(multiple): clean up touch target RTL workaround (#23024)

crisbeto · web-flow · commit cfa9a893be12 · 2021-06-22T16:00:37.000-07:00
We had to make some overrides to MDC's touch target styles in RTL, because they didn't align. The issue has been fixed in MDC (material-components/material-components-web#7169) so the workarounds can be cleaned up.
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "@types/googlemaps": "^3.43.1",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "12.0.0-canary.2952c6a76.0",
+    "material-components-web": "12.0.0-canary.08d791f37.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
@@ -96,53 +96,53 @@
     "@bazel/terser": "3.5.0",
     "@bazel/typescript": "3.5.0",
     "@firebase/app-types": "^0.6.1",
-    "@material/animation": "12.0.0-canary.2952c6a76.0",
-    "@material/auto-init": "12.0.0-canary.2952c6a76.0",
-    "@material/banner": "12.0.0-canary.2952c6a76.0",
-    "@material/base": "12.0.0-canary.2952c6a76.0",
-    "@material/button": "12.0.0-canary.2952c6a76.0",
-    "@material/card": "12.0.0-canary.2952c6a76.0",
-    "@material/checkbox": "12.0.0-canary.2952c6a76.0",
-    "@material/chips": "12.0.0-canary.2952c6a76.0",
-    "@material/circular-progress": "12.0.0-canary.2952c6a76.0",
-    "@material/data-table": "12.0.0-canary.2952c6a76.0",
-    "@material/density": "12.0.0-canary.2952c6a76.0",
-    "@material/dialog": "12.0.0-canary.2952c6a76.0",
-    "@material/dom": "12.0.0-canary.2952c6a76.0",
-    "@material/drawer": "12.0.0-canary.2952c6a76.0",
-    "@material/elevation": "12.0.0-canary.2952c6a76.0",
-    "@material/fab": "12.0.0-canary.2952c6a76.0",
-    "@material/feature-targeting": "12.0.0-canary.2952c6a76.0",
-    "@material/floating-label": "12.0.0-canary.2952c6a76.0",
-    "@material/form-field": "12.0.0-canary.2952c6a76.0",
-    "@material/icon-button": "12.0.0-canary.2952c6a76.0",
-    "@material/image-list": "12.0.0-canary.2952c6a76.0",
-    "@material/layout-grid": "12.0.0-canary.2952c6a76.0",
-    "@material/line-ripple": "12.0.0-canary.2952c6a76.0",
-    "@material/linear-progress": "12.0.0-canary.2952c6a76.0",
-    "@material/list": "12.0.0-canary.2952c6a76.0",
-    "@material/menu": "12.0.0-canary.2952c6a76.0",
-    "@material/menu-surface": "12.0.0-canary.2952c6a76.0",
-    "@material/notched-outline": "12.0.0-canary.2952c6a76.0",
-    "@material/radio": "12.0.0-canary.2952c6a76.0",
-    "@material/ripple": "12.0.0-canary.2952c6a76.0",
-    "@material/rtl": "12.0.0-canary.2952c6a76.0",
-    "@material/segmented-button": "12.0.0-canary.2952c6a76.0",
-    "@material/select": "12.0.0-canary.2952c6a76.0",
-    "@material/shape": "12.0.0-canary.2952c6a76.0",
-    "@material/slider": "12.0.0-canary.2952c6a76.0",
-    "@material/snackbar": "12.0.0-canary.2952c6a76.0",
-    "@material/switch": "12.0.0-canary.2952c6a76.0",
-    "@material/tab": "12.0.0-canary.2952c6a76.0",
-    "@material/tab-bar": "12.0.0-canary.2952c6a76.0",
-    "@material/tab-indicator": "12.0.0-canary.2952c6a76.0",
-    "@material/tab-scroller": "12.0.0-canary.2952c6a76.0",
-    "@material/textfield": "12.0.0-canary.2952c6a76.0",
-    "@material/theme": "12.0.0-canary.2952c6a76.0",
-    "@material/tooltip": "12.0.0-canary.2952c6a76.0",
-    "@material/top-app-bar": "12.0.0-canary.2952c6a76.0",
-    "@material/touch-target": "12.0.0-canary.2952c6a76.0",
-    "@material/typography": "12.0.0-canary.2952c6a76.0",
+    "@material/animation": "12.0.0-canary.08d791f37.0",
+    "@material/auto-init": "12.0.0-canary.08d791f37.0",
+    "@material/banner": "12.0.0-canary.08d791f37.0",
+    "@material/base": "12.0.0-canary.08d791f37.0",
+    "@material/button": "12.0.0-canary.08d791f37.0",
+    "@material/card": "12.0.0-canary.08d791f37.0",
+    "@material/checkbox": "12.0.0-canary.08d791f37.0",
+    "@material/chips": "12.0.0-canary.08d791f37.0",
+    "@material/circular-progress": "12.0.0-canary.08d791f37.0",
+    "@material/data-table": "12.0.0-canary.08d791f37.0",
+    "@material/density": "12.0.0-canary.08d791f37.0",
+    "@material/dialog": "12.0.0-canary.08d791f37.0",
+    "@material/dom": "12.0.0-canary.08d791f37.0",
+    "@material/drawer": "12.0.0-canary.08d791f37.0",
+    "@material/elevation": "12.0.0-canary.08d791f37.0",
+    "@material/fab": "12.0.0-canary.08d791f37.0",
+    "@material/feature-targeting": "12.0.0-canary.08d791f37.0",
+    "@material/floating-label": "12.0.0-canary.08d791f37.0",
+    "@material/form-field": "12.0.0-canary.08d791f37.0",
+    "@material/icon-button": "12.0.0-canary.08d791f37.0",
+    "@material/image-list": "12.0.0-canary.08d791f37.0",
+    "@material/layout-grid": "12.0.0-canary.08d791f37.0",
+    "@material/line-ripple": "12.0.0-canary.08d791f37.0",
+    "@material/linear-progress": "12.0.0-canary.08d791f37.0",
+    "@material/list": "12.0.0-canary.08d791f37.0",
+    "@material/menu": "12.0.0-canary.08d791f37.0",
+    "@material/menu-surface": "12.0.0-canary.08d791f37.0",
+    "@material/notched-outline": "12.0.0-canary.08d791f37.0",
+    "@material/radio": "12.0.0-canary.08d791f37.0",
+    "@material/ripple": "12.0.0-canary.08d791f37.0",
+    "@material/rtl": "12.0.0-canary.08d791f37.0",
+    "@material/segmented-button": "12.0.0-canary.08d791f37.0",
+    "@material/select": "12.0.0-canary.08d791f37.0",
+    "@material/shape": "12.0.0-canary.08d791f37.0",
+    "@material/slider": "12.0.0-canary.08d791f37.0",
+    "@material/snackbar": "12.0.0-canary.08d791f37.0",
+    "@material/switch": "12.0.0-canary.08d791f37.0",
+    "@material/tab": "12.0.0-canary.08d791f37.0",
+    "@material/tab-bar": "12.0.0-canary.08d791f37.0",
+    "@material/tab-indicator": "12.0.0-canary.08d791f37.0",
+    "@material/tab-scroller": "12.0.0-canary.08d791f37.0",
+    "@material/textfield": "12.0.0-canary.08d791f37.0",
+    "@material/theme": "12.0.0-canary.08d791f37.0",
+    "@material/tooltip": "12.0.0-canary.08d791f37.0",
+    "@material/top-app-bar": "12.0.0-canary.08d791f37.0",
+    "@material/touch-target": "12.0.0-canary.08d791f37.0",
+    "@material/typography": "12.0.0-canary.08d791f37.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
diff --git a/packages.bzl b/packages.bzl
@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
-MDC_PACKAGE_VERSION = "12.0.0-canary.2952c6a76.0"
+MDC_PACKAGE_VERSION = "12.0.0-canary.08d791f37.0"
 TSLIB_PACKAGE_VERSION = "^2.2.0"
 RXJS_PACKAGE_VERSION = "^6.5.3"
 
diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss
@@ -73,13 +73,5 @@
     @include mdc-touch-target.touch-target(
       $set-width: $is-square,
       $query: mdc-helpers.$mat-base-styles-query);
-
-      @if ($is-square) {
-        [dir='rtl'] & {
-          left: auto;
-          right: 50%;
-          transform: translate(50%, -50%);
-        }
-      }
   }
 }
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
@@ -92,10 +92,4 @@
   @include mdc-touch-target.touch-target(
     $set-width: true,
     $query: mdc-helpers.$mat-base-styles-query);
-
-  [dir='rtl'] & {
-    left: 0;
-    right: 50%;
-    transform: translate(50%, -50%);
-  }
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -73,13 +73,5 @@`
`73`	`73`	`@include mdc-touch-target.touch-target(`
`74`	`74`	`$set-width: $is-square,`
`75`	`75`	`$query: mdc-helpers.$mat-base-styles-query);`
`76`		`-`
`77`		`- @if ($is-square) {`
`78`		`- [dir='rtl'] & {`
`79`		`- left: auto;`
`80`		`- right: 50%;`
`81`		`- transform: translate(50%, -50%);`
`82`		`- }`
`83`		`- }`
`84`	`76`	`}`
`85`	`77`	`}`