Rating question. Wrong item's border. (#7413)

* Rating question. Wrong item's border. Fixes #7391 * #7391 - fixed styles * #7391 fix label paddings * #7391 - smiley border revert --------- Co-authored-by: Aleksey Novikov <[email protected]>
surveyjs · Nov 26, 2023 · 69a07ff · 69a07ff
1 parent 0276a90
commit 69a07ff
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -52,7 +52,7 @@
   box-sizing: border-box;
   min-width: calcSize(6);
   text-align: center;
-  border: 2px solid transparent;
+  border: none;
   color: $foreground;
   fill: $foreground;
   font-size: calcFontSize(1);
@@ -72,7 +72,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
 .sd-rating__item--error {
   background-color: $red-light;
   box-shadow: 0px 1px 2px transparent;
-  border-color: transparent;
+  border: none;
 }
 
 .sd-rating__item.sd-rating__item--disabled {
@@ -84,7 +84,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
   color: $primary-foreground;
   fill: $foreground;
   background-color: $background-semitransparent;
-  border-color: transparent;
+  border: none;
 }
 
 .sd-question--disabled .sd-rating__item-text {
@@ -93,16 +93,15 @@ legend+sv-ng-rating-item+.sd-rating__item {
 
 .sd-rating__item--allowhover:hover {
   background-color: $background-dark;
-  border-color: $background-dark;
 }
 
 .sd-rating__item:focus-within {
-  border-color: $primary;
+  border: 2px solid $primary;
 }
 
 .sd-rating__item--selected {
   background-color: $primary;
-  border-color: $primary;
+  border: 2px solid $primary;
   color: $primary-foreground;
   font-weight: 600;
   box-shadow: 0px 1px 2px transparent;
@@ -319,6 +318,9 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   }
 }
 
+.sd-rating__item .sd-rating__item-text {
+  margin: 0 2px;
+}
 .sd-rating__item-text.sd-rating__item-text {
   font-family: $font-editorfont-family;
   font-weight: $font-editorfont-weight;
@@ -354,10 +356,13 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
     min-width: calcSize(3);
   }
 }
-
+.sd-rating__item:focus-within .sd-rating__item-text.sd-rating__item-text {
+  margin: 0;
+}
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: $primary-foreground;
   font-weight: inherit;
+  margin: 0;
 }
 
 .sd-rating-dropdown-item {
@@ -378,4 +383,4 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 }
 .sv-list__item.sv-list__item--selected .sd-rating-dropdown-item_description {
   color: $primary-foreground;
-}
+}
diff --git a/visualRegressionTests/tests/defaultV2/etalons/rating-inner-shadow.png b/visualRegressionTests/tests/defaultV2/etalons/rating-inner-shadow.png
diff --git a/visualRegressionTests/tests/defaultV2/rating.ts b/visualRegressionTests/tests/defaultV2/rating.ts
@@ -519,6 +519,38 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check rating inner shadow", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      const focusBody = ClientFunction(() => { document.body.focus(); });
+
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        width: "900px",
+        questions: [
+          {
+            type: "rating",
+            name: "q1"
+          }
+        ]
+      });
+
+      await ClientFunction(() => {
+        const themeJson = {
+          "cssVariables": {
+            "--sjs-shadow-small": "inset 0px 2px 0px 0px rgba(0, 0, 0, 1)",
+          },
+          "isPanelless": false
+        };
+        window["survey"].applyTheme(themeJson);
+      })();
+
+      const questionRoot = Selector(".sd-rating");
+      await focusBody();
+      await takeElementScreenshot("rating-inner-shadow", questionRoot, t, comparer);
+    });
+  });
+
   test("Check rating smileys disabled question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);