Merge pull request #8585 from surveyjs/bug/8578-progress-transparent

Fixed #8578 - A progress bar which appears below the form header overlaps a page's title and description
surveyjs · Jul 19, 2024 · 8c12272 · 8c12272
2 parents d30f80f + 9afbfae
commit 8c12272
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "test:markup": "npm run test:knockout:single && npm run test:react:single && npm run test:vue:single",
     "visual-regression-tests": "testcafe chrome ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --reporter minimal --selector-timeout 1500",
     "vrt:ko": "testcafe chrome ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --reporter minimal --env=knockout --selector-timeout 1500",
+    "vrt:react": "testcafe chrome ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --reporter minimal --env=react --selector-timeout 1500",
     "visual-regression-tests:ci": "testcafe chrome:headless ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal",
     "visual-regression-tests:ci:knockout": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless ./visualRegressionTests/ --app \"http-server\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=knockout",
     "visual-regression-tests:ci:angular": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless ./visualRegressionTests/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --screenshots ./ --selector-timeout 1500 --reporter minimal --env=angular",

diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -133,7 +133,8 @@ body {
   }
 }
 
-.sv-root--sticky-top.sd-progress--pages {
+.sv-root--sticky-top.sd-progress--pages,
+.sv-root--sticky-top.sd-progress--buttons {
   .sv-components-container-center {
     background-color: $background-dim;
     box-shadow: $shadow-medium, $shadow-small;

diff --git a/...s/tests/defaultV2/etalons/survey-progress-bar-top-buttons-sticky-background.png b/...s/tests/defaultV2/etalons/survey-progress-bar-top-buttons-sticky-background.png
diff --git a/visualRegressionTests/tests/defaultV2/progress.ts b/visualRegressionTests/tests/defaultV2/progress.ts
@@ -440,4 +440,110 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-progress-bar-top-questions-sticky.png", Selector("#surveyElement"), t, comparer);
     });
   });
+
+  test("Check progress top buttons sticky has background", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1400, 800);
+      await initSurvey(framework, {
+        "title": "Sample Survey",
+        "logoPosition": "right",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "boolean",
+                "name": "question1",
+                "title": "Show Page 2?",
+                "defaultValue": "true"
+              },
+              {
+                "type": "radiogroup",
+                "name": "question4",
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                  "Item 3",
+                  "Item 4",
+                  "Item 5",
+                  "Item 6",
+                  "Item 7"
+                ]
+              },
+              {
+                "type": "matrixdropdown",
+                "name": "question5",
+                "columns": [
+                  {
+                    "name": "Column 1"
+                  },
+                  {
+                    "name": "Column 2"
+                  },
+                  {
+                    "name": "Column 3"
+                  }
+                ],
+                "choices": [
+                  1,
+                  2,
+                  3,
+                  4,
+                  5
+                ],
+                "rows": [
+                  "Row 1",
+                  "Row 2",
+                  "Row 3",
+                  "Row 4",
+                  "Row 5",
+                  "Row 6",
+                  "Row 7",
+                  "Row 8",
+                  "Row 9",
+                  "Row 10"
+                ]
+              }
+            ],
+            "title": "Page 1"
+          },
+          {
+            "name": "page2",
+            "elements": [
+              {
+                "type": "boolean",
+                "name": "question2",
+                "title": "Show Page 3?",
+                "defaultValue": "true"
+              }
+            ],
+            "visibleIf": "{question1} = true",
+            "title": "Page 2"
+          },
+          {
+            "name": "page3",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question3"
+              },
+            ],
+            "visibleIf": "{question2} = true",
+            "title": "Page 3"
+          }
+        ],
+        "showProgressBar": "belowheader",
+        "progressBarType": "buttons",
+        "progressBarShowPageTitles": true,
+        "widthMode": "static",
+        "width": "800px"
+      });
+      await ClientFunction(() => {
+        (document.querySelector("#surveyElement") as HTMLElement).style.height = "calc(100vh - 32px)";
+      })();
+      await t.scroll(".sd-root-modern--full-container", 0, 300);
+      await t.wait(1000);
+      await takeElementScreenshot("survey-progress-bar-top-buttons-sticky-background.png", Selector("#surveyElement"), t, comparer);
+    });
+  });
 });