From bc30e1c6713a9d26b46e76f6ba3821ffdd7c3417 Mon Sep 17 00:00:00 2001
From: DavidSCChen <54974983+DavidSCChen@users.noreply.github.com>
Date: Fri, 15 Jan 2021 22:55:15 +0800
Subject: [PATCH] fix(checkbox): fixed the checkbox component bidi layout
 issue. (#7524) (#7564)

Fixed the tick orientation for checkbox component in bidi(RTL) layout by adding the RTLCSS value directives. (#7524)
---
 .all-contributorsrc                                      | 9 +++++++++
 README.md                                                | 3 +++
 packages/components/docs/sass.md                         | 8 ++++----
 .../components/src/components/checkbox/_checkbox.scss    | 8 ++++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 6f68dd2a621c..120a3bf13b05 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -637,6 +637,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "DavidSCChen",
+      "name": "DavidSCChen",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/54974983?v=4",
+      "profile": "https://github.com/DavidSCChen",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 5204930ef77e..49d72eaf5a85 100644
--- a/README.md
+++ b/README.md
@@ -164,6 +164,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/asfordmatt"><img src="https://avatars2.githubusercontent.com/u/14233261?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matt Chapman</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=asfordmatt" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/munkurious"><img src="https://avatars0.githubusercontent.com/u/2187109?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Boston Cartwright</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=munkurious" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/DavidSCChen"><img src="https://avatars1.githubusercontent.com/u/54974983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DavidSCChen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=DavidSCChen" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 5e27e891ed87..4d881dc9926d 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -17031,12 +17031,12 @@ Checkbox styles
     left: rem(6px);
     width: rem(9px);
     height: rem(5px);
-    margin-top: rem(-3px);
+    margin-top: rem(-3px) /* rtl: 0rem  */;
     background: none;
     border-bottom: 2px solid $inverse-01;
     border-left: 2px solid $inverse-01;
-    transform: scale(0) rotate(-45deg);
-    transform-origin: bottom right;
+    transform: scale(0) rotate(-45deg) /* rtl: scale(0) rotate(45deg) */;
+    transform-origin: bottom right /* rtl: center */;
     content: '';
   }
 
@@ -17057,7 +17057,7 @@ Checkbox styles
   // Display the check
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg);
+    transform: scale(1) rotate(-45deg) /* rtl: scale(-1,1) rotate(45deg) */;
   }
 
   // Indeterminate symbol
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
index 2430c6e1b4c6..8f4420ada376 100644
--- a/packages/components/src/components/checkbox/_checkbox.scss
+++ b/packages/components/src/components/checkbox/_checkbox.scss
@@ -101,12 +101,12 @@
     left: rem(6px);
     width: rem(9px);
     height: rem(5px);
-    margin-top: rem(-3px);
+    margin-top: rem(-3px) /* rtl: 0rem  */;
     background: none;
     border-bottom: 2px solid $inverse-01;
     border-left: 2px solid $inverse-01;
-    transform: scale(0) rotate(-45deg);
-    transform-origin: bottom right;
+    transform: scale(0) rotate(-45deg) /* rtl: scale(0) rotate(45deg) */;
+    transform-origin: bottom right /* rtl: center */;
     content: '';
   }
 
@@ -127,7 +127,7 @@
   // Display the check
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after {
-    transform: scale(1) rotate(-45deg);
+    transform: scale(1) rotate(-45deg) /* rtl: scale(-1,1) rotate(45deg) */;
   }
 
   // Indeterminate symbol