fix (form-elements): right to left formatting (#5027)

Co-authored-by: Sang Kyung Suh <[email protected]>

Author: laurensuh

RELEASENOTES.md

@@ -14,6 +14,15 @@
 #### Changed
 - Removed `vertical-align` from button non-base variants to create vertical alignment consistency among all the buttons.
 
+### [Checkbox](https://www.lightningdesignsystem.com/components/checkbox)
+#### Fixed
+- Right to left legend to be right aligned and match the alignment of content.
+- Checkbox margin to properly support RTL.
+
+### [Form Element](https://www.lightningdesignsystem.com/components/form-element)
+#### Fixed
+- Fixed form element label to support RTL layout by removing left aligned spacing and placing it back on the opposite side. 
+
 ### [Modals](https://www.lightningdesignsystem.com/components/modals)
 #### Changed
 - Added `slds-modal__content_footless` class to example for clarity.

ui/components/checkbox/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.18.0
+
+### Fixed
+- Right to left legend to be right aligned and match the alignment of content.
+- Checkbox margin to properly support RTL.
+
 ## 2.17.5
 
 ### Fixed

ui/components/checkbox/base/_index.scss

@@ -209,4 +209,12 @@
 .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
 .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox--faux {
   margin-right: $spacing-x-small;
+
+  @include rtl() {
+    /*! @noflip */
+    margin-right: 0;
+
+    /*! @noflip */
+    margin-left: $spacing-x-small;
+  }
 }

ui/components/form-element/RELEASENOTES.md

@@ -3,6 +3,12 @@
 # Form Element Release Notes
 
 <!-- ## [Unreleased] -->
+
+## 2.18.0
+
+### Fixed
+- Fixed form element label to support RTL layout by removing left aligned spacing and placing it back on the opposite side. 
+
 ## 2.16.0
 
 ### Fixed

ui/components/form-element/base/_index.scss

@@ -29,6 +29,9 @@
   margin-bottom: $spacing-xxx-small;
 
   @include rtl() {
+    /*! @noflip */
+    padding-right: 0;
+
     /*! @noflip */
     padding-left: $spacing-x-small;
   }

ui/components/form-element/stacked/_index.scss

@@ -52,6 +52,11 @@
     width: 100%;
     flex-basis: 100%;
     clear: left;
+
+    @include rtl() {
+      /*! @noflip */
+      clear: right;
+    }
   }
 
   .slds-form-element__icon {

ui/components/radio-group/base/_index.scss

@@ -158,10 +158,3 @@
     margin-left: $spacing-x-small;
   }
 }
-
-.slds-radio .slds-form-element__label {
-  @include rtl() {
-    /*! @noflip */
-    padding-right: 0;
-  }
-}