fix(Checkbox): fix gap styling in RTL

CHANGELOG.md

@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix `ChatMessage`'s focus border overlays `actionMenu` in Teams theme @mnajdova ([#1637](https://github.com/stardust-ui/react/pull/1637))
+- Fix a gap in `Checkbox` in RTL mode @layershifter ([#1683](https://github.com/stardust-ui/react/pull/1683))
 
 ### Documentation
 - Make sidebar categories collapsible @lucivpav ([#1611](https://github.com/stardust-ui/react/pull/1611))

docs/src/examples/components/Checkbox/Rtl/CheckboxExample.rtl.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Checkbox, Divider, Flex } from '@stardust-ui/react'
+
+const CheckboxExampleRtl = () => (
+  <Flex column hAlign="start">
+    <Checkbox label="لروسية عدد, كلّ لغزو" />
+    <Checkbox label="Lorem ipsum dolor sit amet" />
+    <Divider />
+    <Checkbox label="لروسية عدد, كلّ لغزو" labelPosition="start" />
+    <Checkbox label="Lorem ipsum dolor sit amet" labelPosition="start" />
+  </Flex>
+)
+
+export default CheckboxExampleRtl

docs/src/examples/components/Checkbox/Rtl/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Checkbox/Rtl/CheckboxExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl

docs/src/examples/components/Checkbox/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 
+import Rtl from './Rtl'
 import Slots from './Slots'
 import States from './States'
 import Types from './Types'
@@ -9,6 +10,7 @@ const CheckboxExamples = () => (
     <Types />
     <States />
     <Slots />
+    <Rtl />
   </>
 )
 

packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts

@@ -7,7 +7,14 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     alignItems: 'center',
     position: 'relative',
 
-    display: 'inline-flex',
+    // CSS Grid is polifilled only with latest inline-style-prefixer
+    // @ts-ignore is supported by fallback values plugin
+    display: ['inline-grid', '-ms-inline-grid'],
+    // IE11: Gap is done via virtual column as in autoprefixer
+    '-ms-grid-columns':
+      p.labelPosition === 'start' ? `1fr ${v.checkboxGap} auto` : `auto ${v.checkboxGap} 1fr`,
+    gridTemplateColumns: p.labelPosition === 'start' ? '1fr auto' : 'auto 1fr',
+    gridGap: v.checkboxGap,
     cursor: 'pointer',
     outline: 0,
 
@@ -20,6 +27,9 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
   }),
 
   checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
+    '-ms-grid-row-align': 'center',
+
     borderColor: v.checkboxBorderColor,
     borderStyle: v.checkboxBorderStyle,
     borderRadius: v.checkboxBorderRadius,
@@ -45,15 +55,15 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
     }),
   }),
 
-  label: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    [p.labelPosition === 'start' ? ':after' : ':before']: {
-      content: '" "',
-      display: 'inline-block',
-      width: v.checkboxGap,
-    },
+  label: ({ props: p }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 1 : 3,
+    display: 'block', // IE11: should be forced to be block, as inline-block is not supported
   }),
 
   toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    '-ms-grid-column': p.labelPosition === 'start' ? 3 : 1,
+    '-ms-grid-row-align': 'center',
+
     background: v.toggleBackground,
     borderColor: v.toggleBorderColor,
     borderStyle: v.toggleBorderStyle,