feat(Button): support rtl

src/button/main.scss

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

src/button/rtl.scss

@@ -0,0 +1,121 @@
+@mixin next-button-size-rtl(
+    $padding,
+    $icon-margin,
+    $icon-size,
+    $corner
+) {
+    border-radius: $corner;
+    & > #{$btn-prefix}-icon#{$btn-icon-prefix}-first {
+        @include icon-size($icon-size, $icon-margin, 0);
+    }
+    & > #{$btn-prefix}-icon#{$btn-icon-prefix}-last {
+        @include icon-size($icon-size, 0, $icon-margin);
+    }
+
+    &#{$btn-prefix}-loading {
+        padding-left: $padding;
+        padding-right: $padding + $icon-size + $icon-margin;
+
+        &:after {
+            right: $padding;
+            top: 50%;
+            margin-right: 0;
+            margin-left: $icon-margin;
+        }
+    }
+}
+
+/* 组合 */
+/* ---------------------------------------- */
+#{$btn-prefix}-group[dir="rtl"] {
+    > #{$btn-prefix} {
+        float: right;
+    }
+
+    #{$btn-prefix}#{$btn-prefix} {
+        margin: 0 -1px 0 0;
+    }
+
+    > #{$btn-prefix}:first-child:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    > #{$btn-prefix}:last-child:not(:first-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    > #{$btn-prefix}-primary:not(:first-child) {
+        border-right-color: transparentize($color-white, .8);
+
+        &:hover {
+            border-right-color: transparent;
+        }
+        &.disabled,
+        &[disabled] {
+            border-right-color: $color-line1-1;
+        }
+    }
+}
+
+#{$btn-prefix}[dir="rtl"] {
+    &#{$btn-prefix} {
+        /* 尺寸维度 */
+        /* ---------------------------------------- */
+        &.#{$css-prefix} {
+            &small {
+                @include next-button-size-rtl(
+                    $btn-size-s-padding,
+                    $btn-size-s-icon-margin,
+                    $btn-size-s-icon-size,
+                    $btn-size-s-corner
+                );
+            }
+            &medium {
+                @include next-button-size-rtl(
+                    $btn-size-m-padding,
+                    $btn-size-m-icon-margin,
+                    $btn-size-m-icon-size,
+                    $btn-size-m-corner,
+                );
+            }
+            &large {
+                @include next-button-size-rtl(
+                    $btn-size-l-padding,
+                    $btn-size-l-icon-margin,
+                    $btn-size-l-icon-size,
+                    $btn-size-l-corner,
+                );
+            }
+        }
+
+        /* 文本按钮 */
+        &-text {
+            &.#{$css-prefix}large {
+                @include next-button-size-rtl(
+                    0,
+                    $btn-text-icon-l-margin,
+                    $btn-size-l-icon-size,
+                    0
+                );
+            }
+            &.#{$css-prefix}medium {
+                @include next-button-size-rtl(
+                    0,
+                    $btn-text-icon-m-margin,
+                    $btn-size-m-icon-size,
+                    0
+                );
+            }
+            &.#{$css-prefix}small {
+                @include next-button-size-rtl(
+                    0,
+                    $btn-text-icon-s-margin,
+                    $btn-size-s-icon-size,
+                    0
+                );
+            }
+        }
+    }
+}

src/button/view/button.jsx

@@ -14,6 +14,7 @@ function mapIconSize(size) {
 export default class Button extends Component {
     static propTypes = {
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         /**
          * 按钮的类型
          */
@@ -91,7 +92,7 @@ export default class Button extends Component {
     };
 
     render() {
-        const { prefix, className, type, size, htmlType, loading, text, warning, ghost, component, iconSize, children, ...others } = this.props;
+        const { prefix, className, type, size, htmlType, loading, text, warning, ghost, component, iconSize, children, rtl, ...others } = this.props;
         const ghostType = ['light', 'dark'].indexOf(ghost) >= 0 ? ghost : 'dark';
 
         const btnCls = classNames({
@@ -142,7 +143,7 @@ export default class Button extends Component {
         }
 
         return (
-            <TagName {...tagAttrs} onMouseUp={this.onMouseUp} ref={this.buttonRefHandler} role="button">
+            <TagName {...tagAttrs} dir={rtl ? 'rtl' : undefined} onMouseUp={this.onMouseUp} ref={this.buttonRefHandler} role="button">
                 {clonedChildren}
             </TagName>
         );

src/button/view/group.jsx

@@ -8,6 +8,7 @@ import ConfigProvider from '../../config-provider';
  */
 class ButtonGroup extends Component {
     static propTypes = {
+        rtl: PropTypes.bool,
         prefix: PropTypes.string,
         /**
          * 统一设置 Button 组件的按钮大小
@@ -23,7 +24,7 @@ class ButtonGroup extends Component {
     };
 
     render() {
-        const { prefix, className, size, children, ...others } = this.props;
+        const { prefix, className, size, children, rtl, ...others } = this.props;
 
         const groupCls = classNames({
             [`${prefix}btn-group`]: true,
@@ -38,6 +39,10 @@ class ButtonGroup extends Component {
             }
         });
 
+        if (rtl) {
+            others.dir = 'rtl';
+        }
+
         return (
             <div {...others} className={groupCls}>
                 {cloneChildren}