fix: radio and checkbox button RTL alignments (#753)

src/checkbox.scss

@@ -48,6 +48,10 @@ $block: #{$fd-namespace}-checkbox;
     display: flex;
     align-items: center;
 
+    @include fd-rtl() {
+      padding: $fd-checkbox-margin $fd-checkbox-margin $fd-checkbox-margin 0;
+    }
+
     &::before {
       content: "";
       height: $fd-checkbox-dimensions;
@@ -60,11 +64,19 @@ $block: #{$fd-namespace}-checkbox;
       font-family: "SAP-icons";
       background-color: var(--sapField_Background);
       margin-right: $fd-checkbox-margin;
+      margin-left: 0;
       color: var(--sapSelectedColor);
       border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
       border-radius: var(--sapField_BorderCornerRadius);
     }
 
+    @include fd-rtl() {
+      &::before {
+        margin-left: $fd-checkbox-margin;
+        margin-right: 0;
+      }
+    }
+
     @include fd-hover() {
       &::before {
         background-color: var(--sapField_Hover_Background);
@@ -129,12 +141,24 @@ $block: #{$fd-namespace}-checkbox;
     + .#{$block}__label {
       padding: $fd-checkbox-margin-compact 0 $fd-checkbox-margin-compact $fd-checkbox-margin-compact;
 
+      @include fd-rtl() {
+        padding: $fd-checkbox-margin-compact $fd-checkbox-margin-compact $fd-checkbox-margin-compact 0;
+      }
+
       &::before {
         font-size: 0.625rem;
         height: $fd-checkbox-dimensions-compact;
         width: $fd-checkbox-dimensions-compact;
         min-width: $fd-checkbox-dimensions-compact;
         margin-right: $fd-checkbox-margin-compact;
+        margin-left: 0;
+      }
+
+      @include fd-rtl() {
+        &::before {
+          margin-left: $fd-checkbox-margin-compact;
+          margin-right: 0;
+        }
       }
     }
 

src/mixins/_forms.scss

@@ -149,7 +149,7 @@
 
   @include fd-rtl() {
     &::after {
-      left: $fd-radio-label-padding - $fd-radio-focus-offset;
+      left: $fd-radio-label-padding;
       right: $margin - $fd-radio-focus-offset;
     }
   }

src/radio.scss

@@ -49,6 +49,10 @@ $block: #{$fd-namespace}-radio;
     overflow: hidden;
     padding: $fd-radio-outer-circle-margin 0 $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin;
 
+    @include fd-rtl() {
+      padding: $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin 0;
+    }
+
     &::before {
       content: "";
       height: $fd-radio-inner-circle-diameter;
@@ -72,6 +76,13 @@ $block: #{$fd-namespace}-radio;
         border-color: var(--sapField_Hover_BorderColor);
       }
     }
+
+    @include fd-rtl() {
+      &::before {
+        margin-left: $fd-radio-outer-circle-margin;
+        margin-right: 0;
+      }
+    }
   }
 
   &:checked + .#{$block}__label::before {
@@ -120,12 +131,24 @@ $block: #{$fd-namespace}-radio;
     + .#{$block}__label {
       padding: $fd-radio-outer-circle-margin-compact 0 $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact;
 
+      @include fd-rtl() {
+        padding: $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact 0;
+      }
+
       &::before {
         font-size: 0.4375rem;
         height: $fd-radio-inner-circle-diameter-compact;
         width: $fd-radio-inner-circle-diameter-compact;
         min-width: $fd-radio-inner-circle-diameter-compact;
         margin-right: $fd-radio-outer-circle-margin-compact;
+        margin-left: 0;
+      }
+
+      @include fd-rtl() {
+        &::before {
+          margin-left: $fd-radio-outer-circle-margin-compact;
+          margin-right: 0;
+        }
       }
     }
 

test/templates/checkbox/index.njk

@@ -65,5 +65,17 @@
   {{ checkbox(compact=true, properties='checked') }}
 {% endset %}
 
+{{ format(example) }}
+
+<h2>RTL mode</h2>
+{% set example %}
+  <div dir="RTL">
+  {{ checkbox(compact=true) }}
+  {{ checkbox(compact=true, properties='checked') }}
+  {{ checkbox(compact=false) }}
+  {{ checkbox(compact=false, properties='checked') }}
+  </div>
+{% endset %}
+
 {{ format(example) }}
 {% endblock %}

test/templates/radio/index.njk

@@ -60,5 +60,18 @@
   {{ radio(compact=true, properties='checked') }}
 {% endset %}
 
+{{ format(example) }}
+
+<h2>RTL</h2>
+
+{% set example %}
+  <div dir="RTL">
+  {{ radio(compact=true) }}
+  {{ radio(compact=true, properties='checked') }}
+  {{ radio(compact=false) }}
+  {{ radio(compact=false, properties='checked') }}
+  </div>
+{% endset %}
+
 {{ format(example) }}
 {% endblock %}