Work for #5686: show number inline if it is too long

src/defaultCss/defaultV2Css.ts

@@ -51,6 +51,7 @@ export var defaultV2Css = {
     number: "sd-element__num",
     title: "sd-title sd-element__title sd-panel__title",
     titleExpandable: "sd-element__title--expandable",
+    titleNumInline: "sd-element__title--num-inline",
     titleExpanded: "sd-element__title--expanded",
     titleCollapsed: "sd-element__title--collapsed",
     titleDisabled: "sd-element__title--disabled",
@@ -141,6 +142,7 @@ export var defaultV2Css = {
     headerBottom: "sd-question__header--location--bottom",
     content: "sd-question__content",
     contentLeft: "sd-question__content--left",
+    titleNumInline: "sd-element__title--num-inline",
     titleLeftRoot: "sd-question--left",
     titleOnAnswer: "sd-question__title--answer",
     titleOnError: "sd-question__title--error",

src/defaultV2-theme/blocks/sd-element.scss

@@ -10,10 +10,12 @@
     width: auto;
   }
 }
+
 .sd-element {
   padding-left: var(--sv-element-add-padding-left, 0px);
   padding-right: var(--sv-element-add-padding-right, 0px);
 }
+
 .svc-logic-question-value,
 .sd-element--with-frame:not(.sd-element--collapsed) {
   border-radius: calcSize(0.5);
@@ -133,9 +135,11 @@
       }
     }
   }
+
   &.sd-question--image {
     padding-top: var(--sd-base-vertical-padding);
   }
+
   &.sd-panel,
   &.sd-question--paneldynamic {
     border: 1px solid $border-light;
@@ -232,12 +236,12 @@
 
 .sd-element__num {
   float: left;
-  padding: calcSize(0.625) calcSize(1) calcSize(0.375);
-  width: calcSize(4);
+  padding: calcSize(0.625) calcSize(1) calcSize(0.375) 0;
+  width: calcSize(5);
   font-size: calcSize(1.5);
   line-height: calcSize(2);
   color: $foreground-light;
-  margin-inline-start: calcSize(-4); // margin-left
+  margin-inline-start: calcSize(-5); // margin-left
   text-align: right;
   box-sizing: border-box;
   white-space: nowrap;
@@ -257,7 +261,7 @@
   }
 }
 
-.sd-element__title--expandable {
+.sd-element__title--num-inline {
   .sd-element__num {
     @include num_inline();
   }

src/panel.ts

@@ -1932,9 +1932,11 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.survey.cancelPreviewByPage(this);
   }
   public get cssTitle(): string {
+    const isExpandable = this.state !== "default";
     return new CssClassBuilder()
       .append(this.cssClasses.panel.title)
-      .append(this.cssClasses.panel.titleExpandable, this.state !== "default")
+      .append(this.cssClasses.panel.titleNumInline, (this.no || "").length > 3 || isExpandable)
+      .append(this.cssClasses.panel.titleExpandable, isExpandable)
       .append(this.cssClasses.panel.titleExpanded, this.isExpanded)
       .append(this.cssClasses.panel.titleCollapsed, this.isCollapsed)
       .append(this.cssClasses.panel.titleDisabled, this.isReadOnly)

src/question.ts

@@ -143,6 +143,9 @@ export class Question extends SurveyElement<Question>
         this.initCommentFromSurvey();
       }
     );
+    this.registerFunctionOnPropertiesValueChanged(["no"], () => {
+      this.updateQuestionCss();
+    });
     this.registerPropertyChangedHandlers(["isMobile"], () => { this.onMobileChanged(); });
   }
   protected createLocTitleProperty(): LocalizableString {
@@ -795,9 +798,11 @@ export class Question extends SurveyElement<Question>
     this.setPropertyValue("cssTitle", val);
   }
   protected getCssTitle(cssClasses: any): string {
+    const isExpandable = this.state !== "default";
     return new CssClassBuilder()
       .append(cssClasses.title)
-      .append(cssClasses.titleExpandable, this.state !== "default")
+      .append(cssClasses.titleNumInline, (this.no || "").length > 3 || isExpandable)
+      .append(cssClasses.titleExpandable, isExpandable)
       .append(cssClasses.titleExpanded, this.isExpanded)
       .append(cssClasses.titleCollapsed, this.isCollapsed)
       .append(cssClasses.titleDisabled, this.isReadOnly)

tests/surveytests.ts

@@ -16581,4 +16581,43 @@ QUnit.test("setStructuredData function", function (assert) {
   assert.deepEqual(survey.data, { q1: 103, q2: 202, q3: 302, q21: 2102, q22: 2202 }, "#4");
   survey.setStructuredData({ page1: { q1: 104 } }),
   assert.deepEqual(survey.data, { q1: 104 }, "#5");
+});
+
+QUnit.test("check titleNumInline cssClass", function (assert) {
+  const survey = new SurveyModel({
+    questionStartIndex: "1.1.1",
+    elements: [{
+      type: "panel",
+      name: "p1",
+      title: "panel",
+      showNumber: true,
+      elements: [
+        {
+          type: "html",
+          name: "html"
+        },
+      ]
+    },
+    {
+      type: "text",
+      name: "q1"
+    }
+    ]
+  });
+  const customInlineClass = "custom_inline_class";
+  survey.css = {
+    question: {
+      titleNumInline: customInlineClass
+    },
+    panel: {
+      titleNumInline: customInlineClass
+    }
+  };
+  const question = survey.getQuestionByName("q1");
+  const panel = survey.getPanelByName("p1");
+  assert.ok(question.cssTitle.includes(customInlineClass));
+  assert.ok(panel.cssTitle.includes(customInlineClass));
+  survey.questionStartIndex = "1.1";
+  assert.notOk(question.cssTitle.includes(customInlineClass));
+  assert.notOk(panel.cssTitle.includes(customInlineClass));
 });

visualRegressionTests/tests/defaultV2/question.ts

@@ -424,4 +424,18 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("question-with-indent.png", Selector(".sd-question"), t, comparer);
     });
   });
+  test("Check question with big number", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await initSurvey(framework, {
+        questionStartIndex: "1.1.1",
+        questions: [
+          {
+            name: "name",
+            type: "text",
+          }]
+      });
+      await t.pressKey("tab");
+      await takeElementScreenshot("question-with-big-number.png", Selector(".sd-question"), t, comparer);
+    });
+  });
 });