Issue/5799-rateValues-for-stars-in-rating-question

packages/survey-angular-ui/src/components/rating/rating-item-star.component.html

@@ -5,7 +5,7 @@
       [attr.name]="model.name" [attr.id]="model.getInputId(index)" [value]="item.value" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-describedby]="model.ariaDescribedBy"
       [disabled]="model.isInputReadOnly" [checked]="model.value === item.value" (click)="onClick($event)"
       />
-      <svg [iconName]="'icon-rating-star'" [size]="48" [title]="item.text" [class]="'sv-star'" sv-ng-svg-icon></svg>
-      <svg [iconName]="'icon-rating-star-2'" [size]="48" [title]="item.text" [class]="'sv-star-2'" sv-ng-svg-icon></svg>
+      <svg [iconName]="'icon-rating-star'" [size]="'auto'" [title]="item.text" [class]="'sv-star'" sv-ng-svg-icon></svg>
+      <svg [iconName]="'icon-rating-star-2'" [size]="'auto'" [title]="item.text" [class]="'sv-star-2'" sv-ng-svg-icon></svg>
   </label>
 </ng-template>

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

@@ -87,6 +87,9 @@ legend+sv-ng-rating-item+.sd-rating__item {
   svg {
     stroke: $border;
     fill: none;
+    width: calcSize(6);
+      height: calcSize(6);
+      display: block;
   }
 
   .sv-star-2 {
@@ -96,14 +99,14 @@ legend+sv-ng-rating-item+.sd-rating__item {
 
 .sd-rating__item-star--selected {
   svg {
-    stroke: $primary;
+    stroke: none;
     fill: $primary;
   }
 }
 
 .sd-rating__item-star--error {
   svg {
-    stroke: $red-light;
+    stroke: none;
     fill: $red-light;
   }
 }
@@ -119,7 +122,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
 
 .sd-rating__item-star--selected.sd-rating__item-star--disabled {
   svg {
-    stroke: $border;
+    stroke: none;
     fill: $border;
   }
 }
@@ -133,7 +136,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
 
 .sd-rating__item-star--unhighlighted {
   svg {
-    stroke: $border;
+    stroke: none;
     fill: $border;
   }
 }

src/knockout/components/rating/rating-item-star.html

@@ -4,6 +4,6 @@
   class="sv-visuallyhidden"
   data-bind="attr: { name: question.name, id: question.getInputId(index), value: item.value, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy }, checkedValue: item.value, enable: !question.isInputReadOnly, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
   />
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star', iconName: 'icon-rating-star', size: 48, title: item.text } } --><!-- /ko -->
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star-2', iconName: 'icon-rating-star-2', size: 48, title: item.text } } --><!-- /ko -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star', iconName: 'icon-rating-star', size: 'auto', title: item.text } } --><!-- /ko -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star-2', iconName: 'icon-rating-star-2', size: 'auto', title: item.text } } --><!-- /ko -->
 </label>

src/question_rating.ts

@@ -328,7 +328,14 @@ export class QuestionRatingModel extends Question {
   }
 
   public getItemClass(item: ItemValue, highlight: "none" | "highlighted" | "unhighlighted" = "none") {
-    const isSelected = this.isStar ? this.value >= item.value : this.value == item.value;
+    let isSelected = this.value == item.value;
+    if (this.isStar) {
+      if (this.rateValues.length == 0) {
+        isSelected = this.value >= item.value;
+      } else {
+        isSelected = this.rateValues.indexOf(this.rateValues.filter(i => i.value == this.value)[0]) >= this.rateValues.indexOf(item);
+      }
+    }
     const isDisabled = this.isReadOnly || !item.isEnabled;
     const allowHover = !isDisabled && (this.value != item.value) && !(!!this.survey && this.survey.isDesignMode);
     const renderedItem = this.renderedRateItems.filter(i => i.itemValue == item)[0];

src/react/components/rating/rating-item-star.tsx

@@ -43,13 +43,13 @@ export class RatingItemStar extends SurveyElementBase<IRatingItemProps, any> {
         />
         <SvgIcon
           className={"sv-star"}
-          size={48}
+          size={"auto"}
           iconName={"icon-rating-star"}
           title={this.item.text}
         ></SvgIcon>
         <SvgIcon
           className={"sv-star-2"}
-          size={48}
+          size={"auto"}
           iconName={"icon-rating-star-2"}
           title={this.item.text}
         ></SvgIcon>

src/vue/components/rating/rating-item-star.vue

@@ -1,13 +1,13 @@
 <template>
-        <label :key="item.value" :class="question.getItemClass(item.itemValue)" 
-        @mouseover="(e) => question.onItemMouseIn(item)" 
-        @mouseleave="(e) => question.onItemMouseOut(item)">
+  <label :key="item.value" :class="question.getItemClass(item.itemValue)" 
+  @mouseover="(e) => question.onItemMouseIn(item)" 
+  @mouseleave="(e) => question.onItemMouseOut(item)">
     <input type="radio" class="sv-visuallyhidden" :name="question.name" :id="question.getInputId(index)"
       :value="item.value" :disabled="question.isInputReadOnly" @click="(e) => question.setValueFromClick(e.target.value)"
       :aria-required="question.ariaRequired" :aria-label="question.ariaLabel" :aria-invalid="question.ariaInvalid"
       :aria-describedby="question.ariaDescribedBy" />
-    <sv-svg-icon :class="'sv-star'" :iconName="'icon-rating-star'" :size="48" :title="item.text"></sv-svg-icon>
-    <sv-svg-icon :class="'sv-star-2'" :iconName="'icon-rating-star-2'" :size="48" :title="item.text"></sv-svg-icon>
+    <sv-svg-icon :class="'sv-star'" :iconName="'icon-rating-star'" :size="'auto'" :title="item.text"></sv-svg-icon>
+    <sv-svg-icon :class="'sv-star-2'" :iconName="'icon-rating-star-2'" :size="'auto'" :title="item.text"></sv-svg-icon>
   </label>
 </template>
 

tests/markup/snapshots/rating-stars.snap.html

@@ -4,25 +4,25 @@
 		</legend>
 		<label>
 			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_0" name="name" type="radio" value="1">
-			<svg aria-label="1" class="sv-star sv-svg-icon" role="img" style="height: 48px; width: 48px;">
+			<svg aria-label="1" class="sv-star sv-svg-icon" role="img">
 				<use xlink:href="#icon-rating-star" class="">
 				</use>
 				<title class="">1</title>
 			</svg>
-			<svg aria-label="1" class="sv-star-2 sv-svg-icon" role="img" style="height: 48px; width: 48px;">
+			<svg aria-label="1" class="sv-star-2 sv-svg-icon" role="img">
 				<use xlink:href="#icon-rating-star-2" class="">
 				</use>
 				<title class="">1</title>
 			</svg>
 		</label>
 		<label>
 			<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name" type="radio" value="2">
-			<svg aria-label="2" class="sv-star sv-svg-icon" role="img" style="height: 48px; width: 48px;">
+			<svg aria-label="2" class="sv-star sv-svg-icon" role="img">
 				<use xlink:href="#icon-rating-star" class="">
 				</use>
 				<title class="">2</title>
 			</svg>
-			<svg aria-label="2" class="sv-star-2 sv-svg-icon" role="img" style="height: 48px; width: 48px;">
+			<svg aria-label="2" class="sv-star-2 sv-svg-icon" role="img">
 				<use xlink:href="#icon-rating-star-2" class="">
 				</use>
 				<title class="">2</title>

tests/question_ratingtests.ts

@@ -418,3 +418,41 @@ QUnit.test("check stars styles", (assert) => {
   assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "sv_q_disabled");
   assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "sv_q_disabled");
 });
+
+QUnit.test("check stars for rateValues", (assert) => {
+  var json = {
+    elements: [
+      {
+        "type": "rating",
+        "name": "q1",
+        "rateType": "stars",
+        "rateValues": [
+          "not_much",
+          "a_little_bit",
+          "somewhat",
+          "a_lot",
+          "completely"
+        ],
+      }]
+  };
+  const survey = new SurveyModel(json);
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  q1.cssClasses.itemStar = "";
+  q1.cssClasses.itemStarHighlighted = "sv_q_high";
+  q1.cssClasses.itemStarUnhighlighted = "sv_q_unhigh";
+  q1.cssClasses.itemStarSelected = "sv_q_selected";
+  q1.cssClasses.itemStarDisabled = "sv_q_disabled";
+  q1.value = "a_little_bit";
+  assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "sv_q_selected");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "sv_q_selected");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "", "item[2] is empty");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "", "item[3] is empty");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "", "item[4] is empty");
+
+  survey.mode = "display";
+  assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "sv_q_selected sv_q_disabled");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "sv_q_selected sv_q_disabled");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "sv_q_disabled", "item[2] is disabled not selected");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "sv_q_disabled", "item[3] is disabled not selected");
+  assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "sv_q_disabled", "item[4] is disabled not selected");
+});

visualRegressionTests/tests/defaultV2/rating.ts

@@ -295,5 +295,34 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("question-rating-stars-selected-disabled.png", questionRoot, t, comparer);
     });
   });
+  test("Check rating stars question - baseunit", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      const focusBody = ClientFunction(() => {
+        document.body.focus();
+        document.body.style.setProperty("--base-unit", "4px");
+      });
+
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        questions: [
+          {
+            type: "rating",
+            name: "satisfaction",
+            title: "Rating",
+            rateType: "stars",
+            displayMode: "buttons",
+            rateMax: 5,
+            minRateDescription: "Not Satisfied",
+            maxRateDescription: "Completely satisfied",
+            width: "708px"
+          }
+        ]
+      });
 
+      const questionRoot = Selector(".sd-question");
+      await focusBody();
+      await takeElementScreenshot("question-rating-stars-baseunit.png", questionRoot, t, comparer);
+    });
+  });
 });