Merge pull request #5508 from surveyjs/bug/5420

Fix styles for panel number
surveyjs · Jan 16, 2023 · 53b9b19 · 53b9b19
2 parents 01476c8 + 06f51d6
commit 53b9b19
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 6 deletions.
diff --git a/packages/survey-angular-ui/src/components/element-title/title-actions.component.html b/packages/survey-angular-ui/src/components/element-title/title-actions.component.html
@@ -21,7 +21,7 @@
       <span
         *ngIf="element.no"
         style="position: static"
-        [class]="element.cssClasses.number"
+        [class]="element.cssClasses.number || element.cssClasses.panel.number"
         [attr.aria-hidden]="true"
         >{{ element.no }}</span>
       <span *ngIf="element.no">&nbsp;</span>

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -47,6 +47,7 @@ export var defaultV2Css = {
     edit: "",
   },
   panel: {
+    number: "sd-element__num",
     title: "sd-title sd-element__title sd-panel__title",
     titleExpandable: "sd-element__title--expandable",
     titleExpanded: "sd-element__title--expanded",

diff --git a/src/knockout/components/title/title-content.html b/src/knockout/components/title/title-content.html
@@ -10,7 +10,7 @@
   <!-- ko if: element.no -->
   <span
     style="position: static;"
-    data-bind="css: element.koCss().number, text: element.no, attr: { 'aria-hidden': true }"
+    data-bind="css: element.koCss().number || (element.koCss().panel && element.koCss().panel.number), text: element.no, attr: { 'aria-hidden': true }"
   ></span>
   <span>&nbsp</span>
   <!-- /ko -->

diff --git a/src/knockout/templates/questiontitle.html b/src/knockout/templates/questiontitle.html
@@ -1,9 +1,9 @@
 <script type="text/html" id="survey-question-title">
   <div data-bind="css: question.cssHeader, click: question.clickTitleFunction">
     <!-- ko component: { name: 'survey-element-title', params: { element: $data } } --><!-- /ko -->
-    <!-- ko v-if: $data.hasDescriptionUnderTitle -->
+    <!-- ko if: $data.hasDescriptionUnderTitle -->
     <div
-      data-bind="visible: question.hasDescriptionUnderTitle, css: $data.cssDescription"
+      data-bind="css: $data.cssDescription"
     >
       <!-- ko template: { name: 'survey-string', data: $data.locDescription } --><!-- /ko -->
     </div>

diff --git a/src/react/components/title/title-content.tsx b/src/react/components/title/title-content.tsx
@@ -39,7 +39,7 @@ export class TitleContent extends React.Component<any, any> {
         <span
           data-key={"q_num"}
           key={"q_num"}
-          className={cssClasses.number}
+          className={cssClasses.number || cssClasses.panel.number}
           style={{ position: "static" }}
           aria-hidden={true}
         >

diff --git a/src/vue/components/title/title-content.vue b/src/vue/components/title/title-content.vue
@@ -10,7 +10,7 @@
     <span
       v-if="!element.isTitleRenderedAsString && element.no"
       style="position: static"
-      :class="element.cssClasses.number"
+      :class="element.cssClasses.number || element.cssClasses.panel.number"
       :aria-hidden="true"
       >{{ element.no }}</span
     >

diff --git a/tests/markup/etalon_page_panel.ts b/tests/markup/etalon_page_panel.ts
@@ -248,4 +248,30 @@ registerMarkupTest(
     after: () => StylesManager.applyTheme("default"),
     event: "onAfterRenderPage",
     snapshot: "panel-question-headers",
+  });
+registerMarkupTest(
+  {
+    name: "Test Panel - Panel title with number",
+    json: {
+      "elements": [
+        {
+          type: "panel",
+          name: "name",
+          title: "panel_title",
+          showNumber: true,
+          startWithNewLine: false,
+          elements: [
+            {
+              type: "html",
+              name: "question1",
+              description: "<div></div>"
+            }
+          ]
+        }
+      ]
+    },
+    before: () => StylesManager.applyTheme("defaultV2"),
+    after: () => StylesManager.applyTheme("default"),
+    event: "onAfterRenderPanel",
+    snapshot: "panel-number",
   });
diff --git a/tests/markup/snapshots/panel-number.snap.html b/tests/markup/snapshots/panel-number.snap.html
@@ -0,0 +1,5 @@
+<h4 aria-label="panel_title" class="sd-element__title sd-panel__title sd-title" role="columnheader">
+	<span aria-hidden="true" class="sd-element__num" style="position: static;">1.</span>
+	<span>&nbsp;</span>
+	<span class="sv-string-viewer">panel_title</span>
+</h4>
diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-with-number.png b/visualRegressionTests/tests/defaultV2/etalons/panel-with-number.png
diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts
@@ -369,4 +369,31 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("panel-with-question-errors-below.png", panelRoot, t, comparer);
     });
   });
+  test("Check panel with number", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        questions: [
+          {
+            type: "panel",
+            name: "delivery_details",
+            title: "Please, specify the delivery details.",
+            width: "708px",
+            showNumber: true,
+            elements: [
+              {
+                type: "text",
+                name: "delivery_agent",
+                isRequired: true,
+                title: "Delivery agent",
+              },
+            ]
+          },
+        ]
+      });
+      const panelRoot = Selector(".sd-panel");
+      await resetFocusToBody();
+      await takeElementScreenshot("panel-with-number.png", panelRoot, t, comparer);
+    });
+  });
 });