tagbox has wrong style into text preview (#5838)

surveyjs · Aug 31, 2024 · 968a761 · 968a761
1 parent 0f73bbc
commit 968a761
Show file tree

Hide file tree

Showing 20 changed files with 72 additions and 30 deletions.
diff --git a/packages/survey-creator-core/src/components/matrix-cell.ts b/packages/survey-creator-core/src/components/matrix-cell.ts
@@ -98,7 +98,7 @@ export class MatrixCellWrapperViewModel extends Base {
           editSurvey.apply();
           return true;
         },
-        cssClass: "svc-matrix-cell__popup",
+        cssClass: "svc-matrix-cell__popup svc-creator-popup",
         title: model.question.name,
         displayMode: this.creator.isMobileView ? "overlay" : "popup"
       }, model.creator.rootElement

diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts b/packages/survey-creator-core/src/components/page-navigator/page-navigator.ts
@@ -40,7 +40,7 @@ export class PageNavigatorViewModel extends Base {
       },
       allowSelection: true
     });
-    this.popupModel = new PopupModel("sv-list", { model: this.pageListModel });
+    this.popupModel = new PopupModel("sv-list", { model: this.pageListModel }, { cssClass: "svc-creator-popup" });
     !!this.pagesController && (this.popupModel.horizontalPosition = this.pagesController.creator["toolboxLocation"]);
     this.popupModel.onShow = () => {
       this.pageListModel.selectedItem = this.getActionBarByPage(this.pagesController.currentPage);

diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
@@ -1,6 +1,5 @@
-survey-creator:not(.svd-simulator-content),
-.svc-creator:not(.svd-simulator-content) {
-  .sv-popup {
+.svc-creator-popup {
+  &.sv-popup {
     .sd-btn {
       background: var(--ctr-button-background-color, $background);
       color: var(--ctr-button-text-color, $primary);
@@ -20,19 +19,19 @@ survey-creator:not(.svd-simulator-content),
     }
   }
 
-  .sv-popup--modal {
+  &.sv-popup--modal {
     background-color: var(--ctr-popup-haze-background-color, $background-semitransparent);
   }
 
-  .sv-popup--modal>.sv-popup__container {
+  &.sv-popup--modal > .sv-popup__container {
     background-color: var(--ctr-popup-background-color, $background-dim-light);
 
-    &>.sv-popup__shadow>.sv-popup__body-content {
+    & > .sv-popup__shadow > .sv-popup__body-content {
       background-color: var(--ctr-popup-background-color, $background-dim-light);
     }
   }
 
-  .sv-popup--overlay:not(.sv-popup--dropdown-overlay) {
+  &.sv-popup--overlay:not(.sv-popup--dropdown-overlay) {
     .sv-popup__container {
       background: var(--ctr-popup-haze-background-color, $background-semitransparent);
     }
@@ -59,13 +58,13 @@ survey-creator:not(.svd-simulator-content),
     color: var(--ctr-popup-title-color, $foreground);
   }
 
-  .sv-popup--dropdown {
+  &.sv-popup--dropdown {
     .sv-popup__body-content {
       background-color: var(--ctr-contextual-menu-background-color, $background);
     }
   }
 
-  .sv-popup--dropdown.svc-toolbox-subtypes {
+  &.sv-popup--dropdown.svc-toolbox-subtypes {
     .sv-popup__body-content {
       background: unset;
     }
@@ -97,7 +96,7 @@ survey-creator:not(.svd-simulator-content),
     fill: var(--ctr-list-item-icon-color, $foreground-light);
   }
 
-  .sv-list__item--hovered>.sv-list__item-body {
+  .sv-list__item--hovered > .sv-list__item-body {
     color: var(--ctr-list-item-text-color-hovered, $foreground);
     background: var(--ctr-list-item-background-color-hovered, $background-dark);
 
@@ -108,7 +107,7 @@ survey-creator:not(.svd-simulator-content),
 
   .sv-list__item--selected,
   .sv-list__item.sv-list__item--selected:hover {
-    &>.sv-list__item-body {
+    & > .sv-list__item-body {
       color: var(--ctr-list-item-text-color-selected, $primary-foreground);
       background: var(--ctr-list-item-background-color-selected, $primary);
     }
@@ -118,7 +117,7 @@ survey-creator:not(.svd-simulator-content),
     }
 
     &.sv-list__item--group {
-      &>.sv-list__item-body {
+      & > .sv-list__item-body {
         background: var(--ctr-list-item-background-color-selected, $primary-light);
         color: var(--ctr-list-item-text-color-selected, $foreground);
         font-weight: 400;
@@ -131,7 +130,7 @@ survey-creator:not(.svd-simulator-content),
   }
 
   //styles for dropdown overlay
-  .sv-popup--dropdown-overlay {
+  &.sv-popup--dropdown-overlay {
     .sv-popup__button.sv-popup__button {
       color: var(--ctr-actionbar-button-text-color, $primary);
     }
@@ -181,7 +180,7 @@ survey-creator:not(.svd-simulator-content),
       }
 
       &.sv-list__item--selected.sv-list__item--group {
-        &>.sv-list__item-body {
+        & > .sv-list__item-body {
           background: var(--ctr-list-item-background-color-selected, $primary-light);
           color: var(--ctr-list-item-text-color-selected, $foreground);
           font-weight: 400;
@@ -196,10 +195,9 @@ survey-creator:not(.svd-simulator-content),
     .sd-btn {
       background: var(--ctr-button-background-color, rgba(0, 0, 0, 0));
     }
-
   }
 
-  .sv-dropdown-popup.sv-popup--dropdown-overlay {
+  &.sv-dropdown-popup.sv-popup--dropdown-overlay {
     .sv-popup__body-footer {
       background-color: var(--ctr-contextual-menu-footer-background-color, $background-dim);
     }
@@ -208,4 +206,4 @@ survey-creator:not(.svd-simulator-content),
   .sv-popup__content {
     color: var(--ctr-popup-message-color, #404040);
   }
-}
+}
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
@@ -536,6 +536,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       items: options.items,
       allowSelection: true,
       horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
       onShow: () => {
         const listModel = newAction.popupModel.contentComponentData.model;
         options.updateListModel(listModel);

diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -102,7 +102,6 @@ export class TabLogicPlugin implements ICreatorPlugin {
     this.filterQuestionAction = createDropdownActionModelAdvanced({
       id: "svc-logic-filter-question",
       visible: false,
-      component: "sv-action-bar-item-dropdown",
     }, {
       items: [{ id: null, title: this.showAllQuestionsText }],
       onSelectionChanged: (item: IAction) => {
@@ -113,6 +112,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
     }, {
       verticalPosition: "bottom",
       horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
       onShow: onQuestionPopupShow
     });
     items.push(this.filterQuestionAction);
@@ -127,7 +127,6 @@ export class TabLogicPlugin implements ICreatorPlugin {
     this.filterActionTypeAction = createDropdownActionModelAdvanced({
       id: "svc-logic-filter-actiontype",
       visible: false,
-      component: "sv-action-bar-item-dropdown",
     }, {
       items: [{ id: null, title: this.showAllActionTypesText }],
       onSelectionChanged: (item: IAction) => {
@@ -138,6 +137,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
     }, {
       verticalPosition: "bottom",
       horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
       onShow: onActionTypesPopupShow
     });
     items.push(this.filterActionTypeAction);

diff --git a/packages/survey-creator-core/src/components/tabs/logic-theme.ts b/packages/survey-creator-core/src/components/tabs/logic-theme.ts
@@ -171,7 +171,7 @@ export var logicCss = {
   },
   dropdown: {
     root: "",
-    popup: "",
+    popup: "svc-creator-popup",
     small: "",
     control: "sl-dropdown",
     selectWrapper: "",

diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.ts b/packages/survey-creator-core/src/components/tabs/logic-ui.ts
@@ -196,6 +196,7 @@ export class SurveyLogicUI extends SurveyLogic {
         onStaying();
         return true;
       },
+      cssClass: "svc-creator-popup",
       title: this.getLocString("ed.lg.uncompletedRule_title"),
       displayMode: "popup"
     }, this.options.rootElement);

diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -261,6 +261,7 @@ export class PreviewViewModel extends Base {
           this.survey.pages[i].passed = true;
         }
       },
+      cssClass: "svc-creator-popup",
       verticalPosition: "top",
       horizontalPosition: "center"
     });

diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -158,6 +158,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         allowSelection: true,
         onSelectionChanged: (item: any) => { this.setDevice(item.id); },
         horizontalPosition: "center",
+        cssClass: "svc-creator-popup",
         onHide: () => { this.deviceSelectorAction.enabled = true; },
         onShow: () => { this.deviceSelectorAction.enabled = false; }
       });
@@ -221,8 +222,11 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.changeThemePopupModel = new PopupModel(
         "sv-list",
         { model: this.changeThemeModel },
-        "bottom",
-        "center"
+        {
+          verticalPosition: "bottom",
+          horizontalPosition: "center",
+          cssClass: "svc-creator-popup",
+        }
       );
       const getStartThemeName = (): string => {
         const availableThemes = themeMapper.filter(item => item.theme.root === this.simulatorTheme.root);
@@ -262,6 +266,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         this.languageSelectorAction.title = editorLocalization.getLocaleName(item.id);
       },
       horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
       onHide: () => { this.languageSelectorAction.enabled = true; },
       onShow: () => { this.languageSelectorAction.enabled = false; }
     });

diff --git a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts
@@ -175,7 +175,8 @@ export class TabTranslationPlugin implements ICreatorPlugin {
       onSelectionChanged: (item: IAction) => {
         this.model.filteredPage = !!item.id ? this.creator.survey.getPageByName(item.id) : null;
       },
-      horizontalPosition: "center"
+      horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
     });
   }
   private createFilterStringsAction() {
@@ -190,7 +191,8 @@ export class TabTranslationPlugin implements ICreatorPlugin {
       onSelectionChanged: (item: IAction) => {
         this.model.showAllStrings = item.id === "show-all-strings";
       },
-      horizontalPosition: "center"
+      horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
     });
   }
   private updateFilterStrigsAction(updateSelectedItem: boolean = false) {

diff --git a/packages/survey-creator-core/src/components/tabs/translation-theme.ts b/packages/survey-creator-core/src/components/tabs/translation-theme.ts
@@ -167,6 +167,7 @@ export var translationCss = {
   },
   dropdown: {
     root: "st-selectbase",
+    popup: "st-dropdown-popup svc-creator-popup",
     small: "st-row__question--small",
     control: "st-input st-dropdown",
     other: "st-comment st-question__other",

diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -1052,6 +1052,7 @@ export class Translation extends Base implements ITranslationLocales {
     }, {
       items: this.chooseLanguageActions,
       allowSelection: false,
+      cssClass: "svc-creator-popup",
       onSelectionChanged: (item: IAction) => {
         this.addLocale(item.id);
       }
@@ -1412,6 +1413,7 @@ export class TranslationEditor {
         componentName: "sv-string-viewer",
         data: { locStr: locStr, locString: locStr, model: locStr },
         onApply: (): boolean => { return true; },
+        cssClass: "svc-creator-popup",
         title: dialogTitle,
         displayMode: "popup"
       }, this.options.rootElement);
@@ -1433,7 +1435,7 @@ export class TranslationEditor {
         onHide: () => {
           this.dispose();
         },
-        cssClass: "sv-property-editor st-translation-dialog",
+        cssClass: "sv-property-editor st-translation-dialog svc-creator-popup",
         title: dialogTitle,
         displayMode: this.options.isMobileView ? "overlay" : "popup"
       }, this.options.rootElement);
@@ -1584,6 +1586,7 @@ export class TranslationEditor {
     }, {
       verticalPosition: "bottom",
       horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
       onShow: onActionTypesPopupShow
     });
 

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -3629,6 +3629,7 @@ export class SurveyCreatorModel extends Base
         listModel.setItems(getActions());
       },
       allowSelection: false,
+      cssClass: "svc-creator-popup",
       verticalPosition: "bottom",
       horizontalPosition: "center",
       displayMode: this.isTouch ? "overlay" : "popup"

diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -133,7 +133,8 @@ export class QuestionColorModel extends QuestionTextModel {
     }, {
       showPointer: false,
       verticalPosition: "bottom",
-      horizontalPosition: "center"
+      horizontalPosition: "center",
+      cssClass: "svc-creator-popup",
     });
     action.disableTabStop = true;
     const popupModel = <PopupModel>action.popupModel;

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
@@ -177,7 +177,7 @@ export var propertyGridCss = {
   },
   dropdown: {
     root: "",
-    popup: "spg-dropdown-popup",
+    popup: "spg-dropdown-popup svc-creator-popup",
     small: "spg-row__question--small sd-row__question--small",
     control: "spg-input spg-dropdown sd-input sd-dropdown",
     filterStringInput: "sd-dropdown__filter-string-input spg-dropdown__filter-string-input",

diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts
@@ -1363,7 +1363,7 @@ export abstract class PropertyGridEditor implements IPropertyGridEditor {
           this.onModalPropertyEditorClosed(editor, property, question, options, "cancel");
           onClose && onClose("cancel");
         },
-        cssClass: "sv-property-editor",
+        cssClass: "sv-property-editor svc-creator-popup",
         title: question.title,
         displayMode: options.isMobileView ? "overlay" : "popup"
       }, options.rootElement);

diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
@@ -131,6 +131,7 @@ export class PropertyGridViewModel extends Base {
       {
         verticalPosition: "bottom",
         horizontalPosition: "center",
+        cssClass: "svc-creator-popup",
       }
     );
     this.selectorPopupModel.cssClass += " svc-object-selector";

diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png b/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png
diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-tagbox-style.png b/visualRegressionTests/tests/designer/etalons/test-tab-tagbox-style.png
diff --git a/visualRegressionTests/tests/designer/test-tab.ts b/visualRegressionTests/tests/designer/test-tab.ts
@@ -485,4 +485,31 @@ test("Page selector with invisible page", async t => {
       .click(pageSelectorButton);
     await takeElementScreenshot("test-tab-page-selector-witn-invisible-page.png", ".svc-page-selector .sv-popup__container", t, comparer);
   });
+});
+
+test("Tagbox has wrong style on preview tab", async t => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1024, 768);
+    await setJSON({
+      "pages": [
+        {
+          "name": "page1",
+          "elements": [
+            {
+              "type": "tagbox",
+              "name": "question1",
+              "defaultValue": ["Item 2", "Item 3"],
+              "choices": ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
+            }
+          ]
+        }
+      ]
+    });
+
+    const questionTagbox = Selector(".sd-input.sd-tagbox");
+    await t
+      .click(getTabbedMenuItemByText(creatorTabPreviewName))
+      .click(questionTagbox);
+    await takeElementScreenshot("test-tab-tagbox-style.png", Selector(".sv-popup__container").filterVisible(), t, comparer);
+  });
 });