#5916 Rating: support default and modern themes (#5917)

* #5916 Rating: support default and modern themes Fixes #5916 * #5916 Rating: support default and modern themes - markup tests Fixes #5916
surveyjs · Apr 4, 2023 · c0b3c84 · c0b3c84
1 parent 9a77774
commit c0b3c84
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 5 deletions.
diff --git a/src/defaultCss/cssmodern.ts b/src/defaultCss/cssmodern.ts
@@ -368,7 +368,11 @@ export var modernCss = {
     cleanButtonSvg: "sv-dropdown_clean-button-svg",
     cleanButtonIconId: "icon-clear_16x16",
     controlValue: "sv-dropdown__value",
-    controlInputFieldComponent: "sv_dropdown_control__input-field-component"
+    controlInputFieldComponent: "sv_dropdown_control__input-field-component",
+    itemSmiley: "sv-rating__item-smiley",
+    itemStar: "sv-rating__item-star",
+    itemSmileySelected: "sv-rating__item-smiley--selected",
+    itemStarSelected: "sv-rating__item-star--selected"
   },
   comment: {
     root: "sv-comment",

diff --git a/src/defaultCss/cssstandard.ts b/src/defaultCss/cssstandard.ts
@@ -309,6 +309,10 @@ export var defaultStandardCss = {
     minText: "sv_q_rating_min_text",
     itemText: "sv_q_rating_item_text",
     maxText: "sv_q_rating_max_text",
+    itemStar: "sv_q_rating__item-star",
+    itemStarSelected: "sv_q_rating__item-star--selected",
+    itemSmiley: "sv_q_rating__item-smiley",
+    itemSmileySelected: "sv_q_rating__item-smiley--selected",
   },
   text: {
     root: "sv_q_text_root",

diff --git a/src/main.scss b/src/main.scss
@@ -328,6 +328,51 @@ body {
     }
   }
 
+.sv_q_rating__item-star>svg {
+  &.sv-star-2 {
+    display: none;
+  }
+
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid transparent;
+
+  &:hover {
+    border: 1px solid var(--main-hover-color, $main-hover-color);
+  }
+
+  fill: var(--text-color, $text-color);
+}
+
+.sv_q_rating__item-star--selected>svg {
+  fill: var(--main-color, $main-color);
+}
+
+.sv_q_rating__item-smiley>svg {
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid var(--border-color, $border-color);
+
+  &>use {
+    display: block;
+  }
+
+  &:hover {
+    border: 1px solid var(--main-hover-color, $main-hover-color);
+  }
+
+  fill: var(--text-color, $text-color);
+}
+
+.sv_q_rating__item-smiley--selected>svg {
+  background-color: var(--main-hover-color, $main-hover-color);
+  fill: var(--body-background-color, $body-background-color);
+}
   .sv_q_imgsel.checked label>div {
     background-color: var(--main-color, $main-color);
   }

diff --git a/src/modern/blocks/sv-rating.scss b/src/modern/blocks/sv-rating.scss
@@ -52,6 +52,55 @@
   }
 }
 
+.sv-rating__item-star>svg {
+  &.sv-star-2 {
+    display: none;
+  }
+
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid transparent;
+
+  &:hover {
+    border: 1px solid var(--main-hover-color, $main-hover-color);
+  }
+
+  fill: var(--text-color, $text-color);
+}
+
+.sv-rating__item-star--selected>svg {
+  fill: var(--main-color, $main-color);
+}
+
+.sv-rating__item-smiley>svg {
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 3px solid var(--border-color, $border-color);
+  margin: 3px 0;
+  margin-right: 0.26em;
+
+  &>use {
+    display: block;
+  }
+
+  &:hover {
+    border: 3px solid var(--main-hover-color, $main-hover-color);
+    background-color: var(--main-hover-color, $main-hover-color);
+  }
+
+  fill: var(--main-hover-color, $main-hover-color);
+}
+
+.sv-rating__item-smiley--selected>svg {
+  background-color: var(--main-color, $main-color);
+  fill: var(--body-background-color, $body-background-color);
+  border: 3px solid var(--main-color, $main-color);
+}
 .sv-rating__min-text {
   font-size: 1em;
   margin-right: 1.25em;

diff --git a/tests/markup/snapshots/rating-smileys.snap.html b/tests/markup/snapshots/rating-smileys.snap.html
@@ -2,15 +2,15 @@
 	<fieldset role="radiogroup">
 		<legend class="sv-hidden" role="presentation">
 		</legend>
-		<label>
+		<label class="sv_q_rating__item-smiley">
 			<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-svg-icon" role="img">
 				<use xlink:href="#icon-not-good" class="">
 				</use>
 				<title class="">1</title>
 			</svg>
 		</label>
-		<label>
+		<label class="sv_q_rating__item-smiley">
 			<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-svg-icon" role="img">
 				<use xlink:href="#icon-very-good" class="">

diff --git a/tests/markup/snapshots/rating-stars.snap.html b/tests/markup/snapshots/rating-stars.snap.html
@@ -2,7 +2,7 @@
 	<fieldset role="radiogroup">
 		<legend class="sv-hidden" role="presentation">
 		</legend>
-		<label>
+		<label class="sv_q_rating__item-star">
 			<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">
 				<use xlink:href="#icon-rating-star" class="">
@@ -15,7 +15,7 @@
 				<title class="">1</title>
 			</svg>
 		</label>
-		<label>
+		<label class="sv_q_rating__item-star">
 			<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">
 				<use xlink:href="#icon-rating-star" class="">