From 2e2af1a0be433d20354476f864739d95095b0f76 Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Fri, 26 Jan 2024 10:17:53 +0300
Subject: [PATCH] #7699 Rating question display mode breaks css classes
 functionality (#7743)

Fixes #7699

Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
---
 src/defaultCss/defaultV2Css.ts |  2 +-
 src/question_rating.ts         |  7 ++++---
 tests/question_ratingtests.ts  | 10 ++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
index a94afbdaea..9d63b94a43 100644
--- a/src/defaultCss/defaultV2Css.ts
+++ b/src/defaultCss/defaultV2Css.ts
@@ -524,7 +524,7 @@ export var defaultV2Css = {
   rating: {
     rootDropdown: "sd-scrollable-container sd-scrollable-container--compact sd-selectbase",
     root: "sd-scrollable-container sd-rating",
-    rootWrappable: "sd-scrollable-container sd-rating sd-rating--wrappable",
+    rootWrappable: "sd-rating--wrappable",
     rootLabelsTop: "sd-rating--labels-top",
     rootLabelsBottom: "sd-rating--labels-bottom",
     rootLabelsDiagonal: "sd-rating--labels-diagonal",
diff --git a/src/question_rating.ts b/src/question_rating.ts
index 57d9b4a244..17cdf19475 100644
--- a/src/question_rating.ts
+++ b/src/question_rating.ts
@@ -619,8 +619,8 @@ export class QuestionRatingModel extends Question {
   }
 
   public get ratingRootCss(): string {
-    const baseClass = ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
-      this.cssClasses.rootWrappable : this.cssClasses.root;
+    const baseClassModifier = ((this.displayMode == "buttons" || (!!this.survey && this.survey.isDesignMode)) && this.cssClasses.rootWrappable) ?
+      this.cssClasses.rootWrappable : "";
     let rootClassModifier = "";
     if(this.hasMaxLabel || this.hasMinLabel) {
       if (this.rateDescriptionLocation == "top") rootClassModifier = this.cssClasses.rootLabelsTop;
@@ -628,7 +628,8 @@ export class QuestionRatingModel extends Question {
       if (this.rateDescriptionLocation == "topBottom") rootClassModifier = this.cssClasses.rootLabelsDiagonal;
     }
     return new CssClassBuilder()
-      .append(baseClass)
+      .append(this.cssClasses.root)
+      .append(baseClassModifier)
       .append(rootClassModifier)
       .append(this.cssClasses.itemSmall, this.itemSmallMode && this.rateType != "labels")
       .toString();
diff --git a/tests/question_ratingtests.ts b/tests/question_ratingtests.ts
index d63927c7d1..ee89619c6e 100644
--- a/tests/question_ratingtests.ts
+++ b/tests/question_ratingtests.ts
@@ -1313,6 +1313,16 @@ QUnit.test("check rating in-matrix mode styles", (assert) => {
   assert.equal(q1.ratingRootCss, "sv_q sv_q__top");
 });
 
+QUnit.test("check rating display-mode styles", (assert) => {
+  const survey = new SurveyModel({ questions: [{ type: "rating", name: "q1" }] });
+  const q1 = survey.getQuestionByName("q1") as QuestionRatingModel;
+  q1.cssClasses.root = "sv_q-root";
+  q1.cssClasses.rootWrappable = "sv_q-root__wrap";
+  assert.equal(q1.ratingRootCss, "sv_q-root");
+  q1.displayMode = "buttons";
+  assert.equal(q1.ratingRootCss, "sv_q-root sv_q-root__wrap");
+});
+
 QUnit.test("check rating triggerResponsiveness method", (assert) => {
   const ResizeObserver = window.ResizeObserver;
   window.ResizeObserver = <any>CustomResizeObserver;