style: add rtl base (#22857)

* style: add rtl base

* fix: add test snap

components/back-top/style/index.less

@@ -17,6 +17,7 @@
   &-rtl {
     right: auto;
     left: 100px;
+    direction: rtl;
   }
 
   &-content {

components/cascader/style/rtl.less

@@ -16,6 +16,10 @@
   }
 
   &-picker {
+    &-rtl {
+      direction: rtl;
+    }
+
     &-label {
       .@{picker-rtl-cls} & {
         padding: 0 @control-padding-horizontal 0 20px;

components/checkbox/Checkbox.tsx

@@ -92,7 +92,7 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
     this.rcCheckbox.blur();
   }
 
-  renderCheckbox = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderCheckbox = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const { props, context } = this;
     const {
       prefixCls: customizePrefixCls,
@@ -120,6 +120,7 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
     }
     const classString = classNames(className, {
       [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
       [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
     });

components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox rtl render component should be rendered correctly in RTL direction 1`] = `
 <label
-  class="ant-checkbox-wrapper"
+  class="ant-checkbox-wrapper ant-checkbox-rtl"
 >
   <span
     class="ant-checkbox"

components/checkbox/style/rtl.less

@@ -1,6 +1,10 @@
 @import '../../style/mixins/index';
 
 .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
+  .@{checkbox-prefix-cls}-rtl {
+    direction: rtl;
+  }
+
   .@{checkbox-prefix-cls}-group {
     &-item {
       .@{checkbox-prefix-cls}-group-rtl & {

components/input-number/style/rtl.less

@@ -5,6 +5,10 @@
 @input-number-prefix-cls: ~'@{ant-prefix}-input-number';
 
 .@{input-number-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
   &-handler-wrap {
     .@{input-number-prefix-cls}-rtl & {
       right: auto;

components/mentions/__tests__/__snapshots__/index.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Mentions rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-mentions"
+  class="ant-mentions ant-mentions-rtl"
 >
   <textarea
     rows="1"

components/mentions/index.tsx

@@ -138,7 +138,7 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     this.rcMentions.blur();
   }
 
-  renderMentions = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
+  renderMentions = ({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => {
     const { focused } = this.state;
     const { prefixCls: customizePrefixCls, className, disabled, ...restProps } = this.props;
     const prefixCls = getPrefixCls('mentions', customizePrefixCls);
@@ -147,6 +147,7 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     const mergedClassName = classNames(className, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
     });
 
     return (

components/mentions/style/index.less

@@ -165,3 +165,5 @@
     }
   }
 }
+
+@import './rtl';

components/mentions/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@mention-prefix-cls: ~'@{ant-prefix}-mentions';
+
+.@{mention-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}

components/radio/style/rtl.less

@@ -16,6 +16,7 @@
   &&-rtl {
     margin-right: 0;
     margin-left: 8px;
+    direction: rtl;
   }
 }
 

components/table/style/rtl.less

@@ -11,6 +11,10 @@
 }
 
 .@{table-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
   table {
     .@{table-wrapepr-rtl-cls} & {
       text-align: right;

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -11,7 +11,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       class="ant-transfer-list-header"
     >
       <label
-        class="ant-checkbox-wrapper"
+        class="ant-checkbox-wrapper ant-checkbox-rtl"
       >
         <span
           class="ant-checkbox"
@@ -154,7 +154,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       class="ant-transfer-list-header"
     >
       <label
-        class="ant-checkbox-wrapper"
+        class="ant-checkbox-wrapper ant-checkbox-rtl"
       >
         <span
           class="ant-checkbox"

components/upload/style/rtl.less

@@ -19,6 +19,9 @@
 }
 
 .@{upload-prefix-cls}-list {
+  &-rtl {
+    direction: rtl;
+  }
   &-item-list-type-text {
     &:hover {
       .@{upload-prefix-cls}-list-item-name-icon-count-1 {