@arco-design/mobile-react 2.30.4 → 2.30.5

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.4...@arco-design/mobile-react@2.30.5) (2023-12-19)
+
+
+### Bug Fixes
+
+* `ImagePreview` disable duplicate preventDefault ([#212](https://github.com/arco-design/arco-design-mobile/issues/212)) ([d91d251](https://github.com/arco-design/arco-design-mobile/commit/d91d251a64bd64ae914e88c119dda442bd72d722))
+* `Slider` support custom "Popover" element ([#211](https://github.com/arco-design/arco-design-mobile/issues/211)) ([716dda1](https://github.com/arco-design/arco-design-mobile/commit/716dda1d273d3b77aa5072d2b3849776790c01e3))
+* rtl for `Progress`, `Pagination`, `Picker`, `SearchBar`, `Dialog`, `IndexBar` ([#213](https://github.com/arco-design/arco-design-mobile/issues/213)) ([498a777](https://github.com/arco-design/arco-design-mobile/commit/498a777992fc44410944ddc17bd2090c9b06a2f2))
+
+
+
+
+
 ## [2.30.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.3...@arco-design/mobile-react@2.30.4) (2023-12-14)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.4/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/dialog/style/css/index.css

@@ -655,6 +655,10 @@
 .arco-dialog-body.left {
   text-align: left;
 }
+[dir="rtl"] .arco-dialog-header.left,
+[dir="rtl"] .arco-dialog-body.left {
+  text-align: right;
+}
 .arco-dialog-header.center,
 .arco-dialog-body.center {
   text-align: center;
@@ -663,6 +667,10 @@
 .arco-dialog-body.right {
   text-align: right;
 }
+[dir="rtl"] .arco-dialog-header.right,
+[dir="rtl"] .arco-dialog-body.right {
+  text-align: left;
+}
 .arco-dialog-header.android,
 .arco-dialog-body.sub-title.android {
   padding-top:  0.4rem ;
@@ -693,6 +701,9 @@
           justify-content: flex-end;
   text-align: right;
 }
+[dir="rtl"] .arco-dialog-footer.android {
+  text-align: left;
+}
 .arco-dialog-footer.android .dialog-footer-button {
   color:  #1a74ff ;
   font-size:  0.3rem ;
@@ -701,6 +712,10 @@
 .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
   margin-right:  0.56rem ;
 }
+[dir="rtl"] .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.56rem ;
+}
 .arco-dialog-footer.ios {
   overflow: hidden;
 }
@@ -793,6 +808,44 @@
     border-radius: 0;
   }
 }
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  display: none;
+}
 .arco-dialog-footer.ios.collapsed {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -962,6 +1015,41 @@
     border-radius: 0;
   }
 }
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #484849;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
 .arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button {
   position: relative;
   border-width: 0;

package/cjs/dialog/style/index.less

@@ -147,7 +147,7 @@
     &-body {
 
         &.left {
-            text-align: left;
+            .set-value-with-rtl(text-align, left);
         }
 
         &.center {
@@ -155,7 +155,7 @@
         }
 
         &.right {
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
         }
     }
 
@@ -185,7 +185,7 @@
             .use-var(padding-top, dialog-android-body-footer-gutter);
             .use-var(padding-bottom, dialog-android-vertical-padding);
             justify-content: flex-end;
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
 
             .dialog-footer-button {
                 .use-var(color, dialog-footer-android-color);
@@ -193,7 +193,7 @@
                 .use-var(line-height, dialog-footer-android-line-height);
 
                 &:not(:last-child) {
-                    .use-var(margin-right, dialog-footer-android-button-gutter);
+                    .use-var-with-rtl(margin-right, dialog-footer-android-button-gutter);
                 }
             }
         }
@@ -218,6 +218,13 @@
 
                     &:not(:last-child) {
                         .onepx-border-var(right, line-color);
+
+                        [dir='rtl'] & {
+                            .onepx-border-var(left, line-color);
+                            &::after {
+                                display: none;
+                            }
+                        }
                     }
                 }
             }
@@ -332,6 +339,11 @@
               @{arco-dark-mode-selector} & {
                 .onepx-border-var(right, dark-line-color);
               }
+              [dir='rtl'] & {
+                @{arco-dark-mode-selector} & {
+                  .onepx-border-var(left, dark-line-color);
+                }
+              }
             }
           }
         }

package/cjs/ellipsis/index.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { EllipsisProps, EllipsisRef } from './type';
 export * from './type';
 /**
- * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
- * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+ * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+ * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
  * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略

package/cjs/ellipsis/index.js

@@ -32,8 +32,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
- * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
- * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+ * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+ * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
  * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略

package/cjs/image-preview/index.js

@@ -264,6 +264,7 @@ var ImagePreview = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         dragMode: 'always',
         transformMode: 'matrix',
         useDomBoundary: false,
+        preventScroll: false,
         cubic: {
           scroll: scrollBezier
         },

package/cjs/index-bar/style/css/index.css

@@ -522,6 +522,10 @@
   -webkit-align-items: center;
           align-items: center;
 }
+[dir="rtl"] .arco-index-bar-group-title {
+  padding-left: initial;
+  padding-right:  0.32rem ;
+}
 .arco-index-bar-group-item {
   height:  1.08rem ;
   display: -webkit-box;
@@ -533,6 +537,10 @@
   margin-left:  0.32rem ;
   font-size:  0.32rem ;
 }
+[dir="rtl"] .arco-index-bar-group-item {
+  margin-left: initial;
+  margin-right:  0.32rem ;
+}
 .arco-index-bar-group-item:not(:last-child) {
   position: relative;
   border-width: 0;
@@ -578,9 +586,13 @@
   -webkit-user-select: none;
           user-select: none;
 }
-.arco-index-bar-sidebar-touching {
+[dir="rtl"] .arco-index-bar-sidebar {
+  right: initial;
   left: 0;
 }
+.arco-index-bar-sidebar-touching {
+  width: 100%;
+}
 .arco-index-bar-sidebar-item {
   display: -webkit-box;
   display: -webkit-flex;
@@ -623,25 +635,36 @@
   border-radius: 9999px;
   text-align: center;
   padding:  0 0.16rem ;
-  background:  rgba(0, 0, 0, 0.8) ;
+  background:  #333333 ;
   right:  0.72rem ;
   font-size:  0.48rem ;
   color:  #FFFFFF ;
 }
+[dir="rtl"] .arco-index-bar-sidebar-sweat {
+  right: initial;
+  left:  0.72rem ;
+}
 .arco-index-bar-sidebar-sweat::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
-  right:  -0.54rem ;
+  right:  -0.56rem ;
   width: 0;
   height: 0;
   border:  0.36rem solid transparent ;
-  border: 18px solid transparent;
-  border-left-color:  rgba(0, 0, 0, 0.8) ;
+  border-left-color:  #333333 ;
   border-radius: 4px;
 }
+[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
+  right: initial;
+  left:  -0.56rem ;
+}
+[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
+  border-left-color: initial;
+  border-right-color:  #333333 ;
+}
 .arco-index-bar-sidebar-toast {
   position: absolute;
   background:  rgba(0, 0, 0, 0.8) ;

package/cjs/index-bar/style/index.less

@@ -18,7 +18,7 @@
             .use-var(color, index-bar-group-active-color);
         }
         &-title {
-            .use-var(padding-left, index-bar-group-left-spacing);
+            .use-var-with-rtl(padding-left, index-bar-group-left-spacing);
             .use-var(height, index-bar-group-title-height);
             .use-var(background, index-bar-group-title-background);
             .use-var(font-size, index-bar-group-title-font-size);
@@ -30,7 +30,7 @@
             .use-var(height, index-bar-group-item-height);
             display: flex;
             align-items: center;
-            .use-var(margin-left, index-bar-group-left-spacing);
+            .use-var-with-rtl(margin-left, index-bar-group-left-spacing);
             .use-var(font-size, index-bar-group-item-font-size);
 
             &:not(:last-child) {
@@ -40,16 +40,17 @@
     }
 
     &-sidebar {
-        &-touching {
-            left: 0;
-        }
         position: absolute;
         z-index: 2;
-        right: 0;
+        .set-prop-with-rtl(right, 0);
         top: 50%;
         transform: translateY(-50%) translateZ(0);
         user-select: none;
 
+        &-touching {
+            width: 100%;
+        }
+
         &-item {
             display: flex;
             justify-content: flex-end;
@@ -84,7 +85,7 @@
             text-align: center;
             .use-var(padding, index-bar-sidebar-sweat-padding);
             .use-var(background, index-bar-sidebar-sweat-background);
-            .use-var(right, index-bar-sidebar-sweat-right);
+            .use-var-with-rtl(right, index-bar-sidebar-sweat-right);
             .use-var(font-size, index-bar-sidebar-sweat-font-size);
             .use-var(color, index-bar-sidebar-sweat-color);
             &::before {
@@ -93,12 +94,11 @@
                 top: 0;
                 bottom: 0;
                 margin: auto;
-                .use-var(right, index-bar-sidebar-sweat-triangle-position);
+                .use-var-with-rtl(right, index-bar-sidebar-sweat-triangle-position);
                 width: 0;
                 height: 0;
                 .use-var(border, index-bar-sidebar-sweat-triangle-border);
-                border: 18px solid transparent;
-                .use-var(border-left-color, index-bar-sidebar-sweat-background);
+                .use-var-with-rtl(border-left-color, index-bar-sidebar-sweat-background);
                 border-radius: 4px;
             }
         }

package/cjs/pagination/arrow.js

@@ -9,10 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 function Arrow() {
   return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "8",
+    width: "2",
     height: "14",
-    viewBox: "0 0 8 14",
-    fill: "none"
+    viewBox: "3 0 2 14",
+    fill: "none",
+    style: {
+      overflow: 'visible'
+    }
   }, /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/cjs/pagination/style/css/index.css

@@ -527,6 +527,10 @@
           justify-content: flex-end;
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-prev-field.flex-center {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-pagination-next-field {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
@@ -538,6 +542,10 @@
           justify-content: flex-start;
   margin-left:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-next-field.flex-center {
+  margin-left: initial;
+  margin-right:  0.48rem ;
+}
 .arco-pagination-field {
   cursor: pointer;
   text-align: center;
@@ -572,10 +580,18 @@
   -webkit-align-items: center;
           align-items: center;
 }
+[dir="rtl"] .arco-pagination-field .btn-icon {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
 .arco-pagination-field .btn-icon.next {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
+[dir="rtl"] .arco-pagination-field .btn-icon.next {
+  -webkit-transform: none;
+          transform: none;
+}
 .arco-pagination-field.button {
   padding:  0.12rem 0.32rem ;
   border-radius:  0.04rem ;
@@ -592,13 +608,12 @@
 }
 .arco-pagination-field.button .btn-icon + .btn-text,
 .arco-pagination-field.button .btn-text + .btn-icon {
-  margin-left:  0.16rem ;
-}
-.arco-pagination-field.button .btn-icon:first-child {
-  margin-left:  -0.06rem ;
+  margin-left:  0.22rem ;
 }
-.arco-pagination-field.button .btn-icon:last-child {
-  margin-right:  -0.06rem ;
+[dir="rtl"] .arco-pagination-field.button .btn-icon + .btn-text,
+[dir="rtl"] .arco-pagination-field.button .btn-text + .btn-icon {
+  margin-left: initial;
+  margin-right:  0.22rem ;
 }
 .arco-pagination.android .arco-pagination-field.button .btn-text {
   padding-top: 0.04rem;

package/cjs/pagination/style/index.less

@@ -16,14 +16,14 @@
         justify-content: flex-start;
         &.flex-center {
             justify-content: flex-end;
-            .use-var(margin-right, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
         }
     }
     &-next-field {
         justify-content: flex-end;
         &.flex-center {
             justify-content: flex-start;
-            .use-var(margin-left, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
         }
     }
 
@@ -41,8 +41,14 @@
         .btn-icon {
             display: inline-flex;
             align-items: center;
+            [dir="rtl"] & {
+                transform: scaleX(-1);
+            }
             &.next {
                 transform: rotateY(180deg);
+                [dir="rtl"] & {
+                    transform: none;
+                }
             }
         }
     }
@@ -61,13 +67,7 @@
         }
         .btn-icon + .btn-text,
         .btn-text + .btn-icon {
-            .use-var(margin-left, pagination-field-btn-icon-text-gutter);
-        }
-        .btn-icon:first-child {
-            .use-var(margin-left, pagination-field-btn-icon-side-margin);
-        }
-        .btn-icon:last-child {
-            .use-var(margin-right, pagination-field-btn-icon-side-margin);
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
         }
     }
     &.android &-field.button {

package/cjs/picker/style/css/index.css

@@ -536,10 +536,18 @@
   left: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.left {
+  left: initial;
+  right: 0;
+}
 .arco-picker-header-btn.right {
   right: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.right {
+  right: initial;
+  left: 0;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/cjs/picker/style/index.less

@@ -33,12 +33,12 @@
             .use-var(padding, picker-button-padding);
 
             &.left {
-                left: 0;
+                .set-prop-with-rtl(left, 0);
                 .use-var(color, picker-left-btn-color);
             }
 
             &.right {
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 .use-var(color, picker-right-btn-color);
             }
         }

package/cjs/progress/style/css/index.css

@@ -500,6 +500,10 @@
   left: 0;
   z-index: 1001;
 }
+[dir="rtl"] .arco-progress.progress-fixed {
+  left: initial;
+  right: 0;
+}
 .arco-progress .progress-wrapper {
   position: relative;
   width: 100%;
@@ -540,6 +544,10 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+[dir="rtl"] .arco-progress .progress-wrapper .progress-bar .wrapper {
+  right: initial;
+  left: 0;
+}
 .arco-progress .progress-wrapper .filleted {
   border-radius: 100PX;
 }
@@ -548,10 +556,22 @@
   margin-left:  0.16rem ;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-left {
   margin-left: 0;
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-left: initial;
+  margin-right: 0;
+}
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-innerLeft {
   position: absolute;
   z-index: 1;

package/cjs/progress/style/index.less

@@ -5,7 +5,7 @@
     &.progress-fixed {
         position: fixed;
         width: 100%;
-        left: 0;
+        .set-prop-with-rtl(left, 0);
         z-index: @full-screen-z-index + 1;;
     }
 
@@ -39,7 +39,7 @@
 
             .wrapper {
                 position: absolute;
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 top: 50%;
                 transform: translateY(-50%);
             }
@@ -51,13 +51,13 @@
 
         .text {
             .use-var(font-size, progress-text-font-size);
-            .use-var(margin-left, progress-text-gutter);
+            .use-var-with-rtl(margin-left, progress-text-gutter);
             .use-var(color, progress-primary-color);
         }
 
         .text-left {
-            margin-left: 0;
-            .use-var(margin-right, progress-text-gutter);
+            .set-prop-with-rtl(margin-left, 0);
+            .use-var-with-rtl(margin-right, progress-text-gutter);
         }
 
         .text-innerLeft {