Merge branch 'master' of github.com:surveyjs/survey-creator into issu…

…e/6314-3rd-iteration
surveyjs · Dec 24, 2024 · c278f41 · c278f41
2 parents ead8ff6 + 86078d6
commit c278f41
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 0 deletions.
diff --git a/packages/survey-creator-core/src/components/list.scss b/packages/survey-creator-core/src/components/list.scss
@@ -140,6 +140,7 @@
   display: flex;
   width: var(--ctr-list-item-icon-width, calcSize(3));
   height: var(--ctr-list-item-icon-height, calcSize(3));
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
 

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-dropdown.scss
@@ -46,3 +46,13 @@
 .spg-dropdown-popup:not(.sv-popup--dropdown-overlay) {
     height: 0;
 }
+
+.spg-dropdown__clean-button {
+    --thm-ctr-editor-content-margin-top: var(--ctr-editor-content-margin-top, #{calcSize(1)});
+    --thm-ctr-editor-content-margin-bottom: var(--ctr-editor-content-margin-bottom, #{calcSize(1)});
+    margin-top: calc(-1 * var(--thm-ctr-editor-content-margin-top));
+    margin-bottom: calc(-1 * var(--thm-ctr-editor-content-margin-bottom));
+    use {
+        fill: inherit;
+    }
+}
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.ts b/packages/survey-creator-core/src/property-grid-theme/property-grid.ts
@@ -200,6 +200,7 @@ export var propertyGridCss = {
     chevronButton: "sd-dropdown_chevron-button spg-dropdown_chevron-button",
     chevronButtonSvg: "sd-dropdown_chevron-button-svg spg-dropdown_chevron-button-svg",
     chevronButtonIconId: "icon-chevron",
+    cleanButton: "spg-dropdown__clean-button spg-input__edit-button"
   },
   buttongroup: {
     root: "spg-button-group",

diff --git a/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button-hover.png b/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button-hover.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button.png b/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button.png
diff --git a/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button-hover.png b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button-hover.png
diff --git a/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button.png b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button.png
diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts
@@ -741,6 +741,21 @@ test("Dropdown input in property grid", async (t) => {
     await takeElementScreenshot("pg-dropdown-editor-input.png", Selector(".spg-dropdown[aria-label='Select a survey language']"), t, comparer);
   });
 });
+test("Dropdown clean button in property grid", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1240, 870);
+    const dropdownSelector = Selector(".spg-dropdown[aria-label='Select a survey language']");
+    await t
+      .click(surveySettingsButtonSelector)
+      .click(dropdownSelector)
+      .pressKey("I t a l i a n o")
+      .pressKey("enter");
+
+    await takeElementScreenshot("pg-dropdown-clean-button.png", dropdownSelector, t, comparer);
+    await t.hover(Selector(".spg-dropdown__clean-button"));
+    await takeElementScreenshot("pg-dropdown-clean-button-hover.png", dropdownSelector, t, comparer);
+  });
+});
 
 test("Property grid checkbox with description", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {