From 9afbfae5b0daae9746c647cfc2b575f9d2a4ffb3 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Fri, 19 Jul 2024 15:03:49 +0300 Subject: [PATCH] Fixed #8578 - A progress bar which appears below the form header overlaps a page's title and description --- package.json | 1 + src/defaultV2-theme/defaultV2.fontless.scss | 3 +- ...ress-bar-top-buttons-sticky-background.png | Bin 0 -> 28214 bytes .../tests/defaultV2/progress.ts | 106 ++++++++++++++++++ 4 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-buttons-sticky-background.png diff --git a/package.json b/package.json index 50282d37a0..9da838bf65 100644 --- 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 index 25d2fa45fa..c54261c885 100644 --- 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/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-buttons-sticky-background.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-top-buttons-sticky-background.png new file mode 100644 index 0000000000000000000000000000000000000000..57fea2383a7ab5f7bbfb9ca71cda2ed8d807cc7b GIT binary patch literal 28214 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

<&tmnpL?jLHO61OpXye0o$|rM20yd|X6_>vi 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 { 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); + }); + }); }); \ No newline at end of file