diff --git a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss index d753687b22..83824a057d 100644 --- a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss +++ b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss @@ -52,6 +52,10 @@ background: var(--ctr-toggle-button-thumb-background-color-checked, #ffffff); } + &:hover { + background: var(--ctr-toggle-button-background-color-checked, #19b394); + } + &:focus { background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff); diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png new file mode 100644 index 0000000000..fc7538ce8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked-hover.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png new file mode 100644 index 0000000000..fc7538ce8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-checked.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png new file mode 100644 index 0000000000..61d74acd8d Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-default.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png new file mode 100644 index 0000000000..594bc7cfa7 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-focus.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png new file mode 100644 index 0000000000..145a5427df Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/boolean-switch-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png new file mode 100644 index 0000000000..ed6f753667 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png new file mode 100644 index 0000000000..ed6f753667 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-checked.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png new file mode 100644 index 0000000000..bc69029b17 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-default.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png new file mode 100644 index 0000000000..ae3b814eaf Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-focus.png differ diff --git a/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png b/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png new file mode 100644 index 0000000000..76afb66cb0 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/boolean-switch-hover.png differ diff --git a/visualRegressionTests/tests/designer/side-bar.ts b/visualRegressionTests/tests/designer/side-bar.ts index c58b071995..d1c4ae4cf2 100644 --- a/visualRegressionTests/tests/designer/side-bar.ts +++ b/visualRegressionTests/tests/designer/side-bar.ts @@ -143,6 +143,28 @@ test.page(themeTabUrl)("tabbed mode", async (t) => { }); }); +test.page(themeTabUrl)("boolean switch", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1920, 1200); + await ClientFunction(() => { + window["creator"].showOneCategoryInPropertyGrid = true; + })(); + + await t.click(getTabbedMenuItemByText("Themes")); + + await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4)); + await takeElementScreenshot("boolean-switch-default.png", ".spg-boolean-switch", t, comparer); + await t.hover(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-hover.png", ".spg-boolean-switch", t, comparer); + await t.click(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-focus.png", ".spg-boolean-switch", t, comparer); + await t.pressKey("tab"); + await takeElementScreenshot("boolean-switch-checked.png", ".spg-boolean-switch", t, comparer); + await t.hover(Selector(".spg-boolean-switch__button").filterVisible()); + await takeElementScreenshot("boolean-switch-checked-hover.png", ".spg-boolean-switch", t, comparer); + }); +}); + test("translation tab tabbed property grid", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1200);