Title for panel in-row rendered incorrectly (#8658)

surveyjs/survey-creator#5756
surveyjs · Aug 7, 2024 · 74cd59f · 74cd59f
1 parent 20a39fd
commit 74cd59f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -83,6 +83,7 @@ export var defaultV2Css = {
     footer: "sd-panel__footer",
     requiredText: "sd-panel__required-text",
     header: "sd-panel__header sd-element__header sd-element__header--location-top",
+    headerHidden: "sd-panel__header--hidden",
     collapsed: "sd-element--collapsed",
     expanded: "sd-element--expanded",
     expandable: "sd-element--expandable",

diff --git a/src/panel.ts b/src/panel.ts
@@ -2013,6 +2013,14 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.onIndentChanged();
     this.calcHasTextInTitle();
   }
+  public get cssHeader(): string {
+    return new CssClassBuilder()
+      .append(this.cssClasses.panel.header)
+      .append(this.cssClasses.panel.headerHidden,
+        !this.hasTextInTitle &&
+        !this.hasDescription &&
+        this.isDesignMode).toString();
+  }
   public get isPanel(): boolean {
     return true;
   }

diff --git a/tests/paneltests.ts b/tests/paneltests.ts
@@ -2790,7 +2790,9 @@ QUnit.test("panel check title in design mode", function (assert) {
   var oldCss = survey.css.panel.titleHidden;
   var oldRootCss = survey.css.root;
   survey.css.root = "sd-root-modern";
+  survey.css.panel.header = "sv_p_header";
   survey.css.panel.titleHidden = "sv_p_title--hidden";
+  survey.css.panel.headerHidden = "sv_p_header--hidden";
 
   survey.setJsonObject({
     questions: [
@@ -2809,8 +2811,10 @@ QUnit.test("panel check title in design mode", function (assert) {
   const panel = <PanelModel>survey.getAllPanels()[0];
   assert.equal(panel.hasTitle, false);
   assert.equal(panel.cssTitle, "sv_p_title");
+  assert.equal(panel.cssHeader, "sv_p_header");
   survey.setDesignMode(true);
   assert.equal(panel.hasTitle, true);
+  assert.equal(panel.cssHeader, "sv_p_header sv_p_header--hidden");
   assert.equal(panel.cssTitle, "sv_p_title sv_p_title--hidden");
   survey.css.panel.titleHidden = oldCss;
   survey.css.root = oldRootCss;