fix(Checkbox): fix gap styling in RTL

[layershifter]

Fixes #1676.

---

Problem

We need to have a gap between label and icon slots. There are three options to solve this issue.

Flex-like approach

'> *:not(:last-child)': {
  marginRight: v.checkboxGap,
},

CONS: marginRight will be applied in unpredictable way and will override margin provided by user on slots.

Element approach

Create a new element and specify a margin/width on it.

CONS: We will have a useless element in markup.

Grid approach

CSS Grid has a native support for a gap. There are issues with support in IE11, but all of them are resolved via prefixed properties. Approach with a gap support was taken from autoprefixer.

✅ Winner

Look across browsers in RTL

IE11

Firefox

Chrome

Layout fix

Using Grid has more one benefit, it stratches columsn and it is actually fixes the common use case.

const CheckboxExample = () => (
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      margin: 10,
      width: '300px',
      border: '2px dotted orange',
      padding: 10,
    }}
  >
    <Checkbox label="Make my profile visible" labelPosition="start" />
    <Checkbox label="I agree with terms" labelPosition="start" />
  </div>
)

0.34.1

Current PR

[codecov]

Codecov Report

Merging #1683 into master will increase coverage by 0.06%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #1683      +/-   ##
==========================================
+ Coverage    71.2%   71.27%   +0.06%     
==========================================
  Files         857      855       -2     
  Lines        7098     7056      -42     
  Branches     2028     2012      -16     
==========================================
- Hits         5054     5029      -25     
+ Misses       2038     2021      -17     
  Partials        6        6

Impacted Files	Coverage Δ
.../themes/base/components/Checkbox/checkboxStyles.ts	6.25% <0%> (-2.09%)	⬇️
packages/react/src/components/Chat/Chat.tsx	62.5% <0%> (-8.93%)	⬇️
...c/lib/accessibility/Behaviors/Chat/chatBehavior.ts	90% <0%> (ø)	⬆️
packages/react/src/lib/createComponent.tsx	94.44% <0%> (ø)	⬆️
...ccessibility/Behaviors/Chat/chatMessageBehavior.ts	100% <0%> (ø)	⬆️
packages/react/src/lib/isRightClick.ts
...omponents/Popup/createReferenceFromContextClick.ts
packages/react/src/lib/renderComponent.tsx	88.67% <0%> (+0.21%)	⬆️
packages/react/src/components/Popup/Popup.tsx	66.44% <0%> (+0.73%)	⬆️
packages/react/src/lib/positioner/Popper.tsx	89.13% <0%> (+1.37%)	⬆️
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1785e6a...c39e346. Read the comment docs.

[kuzhelov]

could you, please, provide exact version you are implying here?

[layershifter]

I created an issue #1686, so it will be tracked. We use 5.0.3, but it works from 5.1.0: https://github.com/weserio/inline-style-prefixer/blob/master/CHANGELOG.md#510

[kuzhelov]

nit:

IE11: should be forced to be block, as inline-block is not supported