diff --git a/packages/survey-creator-core/src/components/list.scss b/packages/survey-creator-core/src/components/list.scss index e0f3dcdac5..9d4ac8afcc 100644 --- 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 index 4a0099ccae..15ffc72db9 100644 --- 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; + } +} \ No newline at end of file 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 index 6916717cd0..f321ad303c 100644 --- 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 new file mode 100644 index 0000000000..8de43c9cd3 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button-hover.png differ diff --git a/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button.png b/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button.png new file mode 100644 index 0000000000..a8dfc9fb12 Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/pg-dropdown-clean-button.png differ diff --git a/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button-hover.png b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button-hover.png new file mode 100644 index 0000000000..6ca6839bf5 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button-hover.png differ diff --git a/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button.png b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button.png new file mode 100644 index 0000000000..a5c1be0a25 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/pg-dropdown-clean-button.png differ diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts index 2344b937b7..6bd21e732a 100644 --- 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) => {