render panel hidden title in design mode when title is not set

surveyjs/survey-creator#4895
surveyjs · Jul 3, 2024 · 69740a5 · 69740a5
1 parent 089ee97
commit 69740a5
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 5 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -70,6 +70,7 @@ export var defaultV2Css = {
     titleExpanded: "sd-element__title--expanded",
     titleCollapsed: "sd-element__title--collapsed",
     titleDisabled: "sd-element__title--disabled",
+    titleHidden: "sd-element__title--hidden",
     titleOnExpand: "sd-panel__title--expanded",
     titleOnError: "sd-panel__title--error",
     titleBar: "sd-action-title-bar",

diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -11,6 +11,10 @@
   opacity: 0.25;
 }
 
+.sd-element__title--hidden {
+  display: none;
+}
+
 .sd-root--readonly .sd-element__title.sd-element__title--disabled {
   opacity: 1;
 }

diff --git a/src/panel.ts b/src/panel.ts
@@ -1962,7 +1962,7 @@ export class PanelModel extends PanelModelBase implements IElement {
   protected createLocTitleProperty(): LocalizableString {
     const locTitleValue = super.createLocTitleProperty();
     locTitleValue.onGetTextCallback = (text: string): string => {
-      if (!text && (this.state !== "default")) {
+      if (!text && (this.state !== "default" || (this.isDesignMode && this.isDefaultV2Theme))) {
         text = this.name;
       }
       return text;
@@ -2094,7 +2094,10 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.survey.cancelPreviewByPage(this);
   }
   public get cssTitle(): string {
-    return this.getCssTitle(this.cssClasses.panel);
+    return new CssClassBuilder()
+      .append(this.getCssTitle(this.cssClasses.panel))
+      .append(this.cssClasses.panel.titleHidden, !this.title && this.isDesignMode)
+      .toString();
   }
   public get showErrorsAbovePanel(): boolean {
     return this.isDefaultV2Theme && !this.showPanelAsPage;

diff --git a/tests/paneltests.ts b/tests/paneltests.ts
@@ -1968,8 +1968,6 @@ QUnit.test("Render name for collapsed/expanded questions in design-time", functi
   assert.equal(panel.locTitle.renderedHtml, "panel", "Render name, #2");
   panel.state = "default";
   assert.equal(panel.state, "default", "the panel is not collapsed or expanded");
-  assert.equal(panel.hasTitle, false, "We do not render the title");
-  assert.notOk(panel.locTitle.renderedHtml, "Render title is empty, #3");
 });
 
 QUnit.test("Check updateRowsOnElementAdded: insert on empty page", function(assert) {
@@ -2784,4 +2782,36 @@ QUnit.test("Do not expand panels on validation that doesn't have an error Bug#83
   assert.equal(panels[2].isExpanded, true, "The panel should be expanded, it has error inside, #2");
   assert.equal(panels[3].isExpanded, true, "The panel should be expanded, it has error inside, #3");
   assert.equal(panels[4].isExpanded, true, "The panel should be expanded, panel is required, #4");
+});
+
+QUnit.test("panel check title in design mode", function (assert) {
+  StylesManager.applyTheme("default");
+  const survey = new SurveyModel();
+  var oldCss = survey.css.panel.titleHidden;
+  var oldRootCss = survey.css.root;
+  survey.css.root = "sd-root-modern";
+  survey.css.panel.titleHidden = "sv_p_title--hidden";
+
+  survey.setJsonObject({
+    questions: [
+      {
+        type: "panel",
+        name: "p1",
+        elements: [
+          {
+            type: "text",
+            name: "_"
+          }
+        ]
+      }
+    ]
+  });
+  const panel = <PanelModel>survey.getAllPanels()[0];
+  assert.equal(panel.hasTitle, false);
+  assert.equal(panel.cssTitle, "sv_p_title");
+  survey.setDesignMode(true);
+  assert.equal(panel.hasTitle, true);
+  assert.equal(panel.cssTitle, "sv_p_title sv_p_title--hidden");
+  survey.css.panel.titleHidden = oldCss;
+  survey.css.root = oldRootCss;
 });
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-no-title-design.png b/visualRegressionTests/tests/defaultV2/etalons/panel-no-title-design.png
diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts
@@ -940,4 +940,29 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("panel-scroll-on-expand.png", null, t, comparer);
     });
   });
-});
+  test("Check oridinary panel with no title in design mode", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        focusFirstQuestionAutomatic: true,
+        width: "600px",
+        questions: [
+          {
+            type: "panel",
+            name: "delivery_details",
+            elements: [
+              {
+                "type": "html",
+                "name": "question1",
+                "html": "No title in design mode"
+              }
+            ]
+          },
+        ]
+      }, null, true);
+      const panelRoot = Selector(".sd-panel");
+      await t.expect(panelRoot.find(".sd-element__title--hidden").exists).ok();
+      await takeElementScreenshot("panel-no-title-design.png", panelRoot, t, comparer);
+    });
+  });
+});