Fixed #8141 - Buttons progress bar is broken in RTL (#8157)

* Fixed #8141 - Buttons progress bar is broken in RTL * Updated etalon * Removed wrong mask --------- Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
surveyjs · Apr 23, 2024 · ae42939 · ae42939
1 parent eeb55f2
commit ae42939
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-progress-buttons.scss b/src/defaultV2-theme/blocks/sd-progress-buttons.scss
@@ -276,4 +276,29 @@
   box-sizing: border-box;
   width: 100%;
   margin: auto;
+}
+
+[dir="rtl"],
+[style*="direction:rtl"],
+[style*="direction: rtl"] {
+
+  .sd-progress-buttons__list {
+    li {
+      &:not(:first-child)>.sd-progress-buttons__connector {
+        right: unset;
+        left: calc(50% + 4px);
+      }
+    }
+  }
+
+  .sd-progress-buttons--numbered {
+    .sd-progress-buttons__list {
+      li {
+        &:not(:first-child)>.sd-progress-buttons__connector {
+          right: unset;
+          left: calc(50% + 8px);
+        }
+      }
+    }
+  }
 }
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-rtl.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-rtl.png
diff --git a/visualRegressionTests/tests/defaultV2/progress.ts b/visualRegressionTests/tests/defaultV2/progress.ts
@@ -345,4 +345,18 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-progress-bar-top-survey-width-static-1400.png", Selector(".sd-container-modern"), t, comparer);
     });
   });
+  test("Check survey with progress top - RTL", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await ClientFunction(() => {
+        document.body.setAttribute("dir", "rtl");
+      })();
+      await initSurvey(framework, json);
+      await ClientFunction(() => {
+        (<any>window).survey.progressBarType = "pages";
+        (<any>window).survey.currentPageNo = 1;
+      })();
+      await takeElementScreenshot("survey-progress-bar-top-rtl.png", Selector(".sd-container-modern"), t, comparer); // title + progress
+    });
+  });
 });