From a0d3bece0dffc2cc22b6d1631f4da89055b41fda Mon Sep 17 00:00:00 2001
From: Denis Severin <denis.severin@valor-software.com>
Date: Wed, 25 Oct 2023 15:20:40 +0300
Subject: [PATCH] fix(styles): half star unification and doc update [ci visual]

---
 packages/styles/src/rating-indicator.scss     |  76 ++++---
 .../rating-indicator/disabled.example.html    | 194 +++++++++++++++++-
 2 files changed, 238 insertions(+), 32 deletions(-)

diff --git a/packages/styles/src/rating-indicator.scss b/packages/styles/src/rating-indicator.scss
index 962e0a5706..352cd9f8aa 100644
--- a/packages/styles/src/rating-indicator.scss
+++ b/packages/styles/src/rating-indicator.scss
@@ -1,5 +1,5 @@
-@import "./new-settings";
-@import "./mixins";
+@import './new-settings';
+@import './mixins';
 
 $block: #{$fd-namespace}-rating-indicator;
 
@@ -13,7 +13,7 @@ $block: #{$fd-namespace}-rating-indicator;
     &__label {
       margin-right: 0;
 
-      &:nth-child(4n+6) {
+      &:nth-child(4n + 6) {
         margin-right: $spacing-between-icons;
         flex-direction: row-reverse;
 
@@ -46,7 +46,12 @@ $block: #{$fd-namespace}-rating-indicator;
     }
   }
 
-  @include fd-disabled() {
+  &.#{$block}--display-mode,
+  &.#{$block}--non-interactive,
+  // Cannot use disabled mixin due to additional classes.
+  &[aria-disabled="true"],
+  &.is-disabled,
+  &:disabled {
     @include fd-rating-indicator-first-half-label-after-checked() {
       width: calc(var(--fontSize) * 0.5);
 
@@ -67,7 +72,10 @@ $block: #{$fd-namespace}-rating-indicator;
       .#{$block}__label {
         &-unrated {
           &::before {
-            font-size: calc(var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio));
+            font-size:
+              calc(
+                var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio)
+              );
           }
         }
       }
@@ -89,18 +97,41 @@ $block: #{$fd-namespace}-rating-indicator;
 
 .#{$block} {
   $fd-rating-indicator-sizes: (
-    "cozy": ("fontSize": 1.5rem, "spacingBetweenIcons": 0.1875rem, "controlMargin": 0.8125rem 0),
-    "compact": ("fontSize": 1rem, "spacingBetweenIcons": 0.125rem, "controlMargin": 0.5rem 0),
-    "condensed": ("fontSize": 1rem, "spacingBetweenIcons": 0.125rem),
-    "xs": ("fontSize": 0.75rem, "spacingBetweenIcons": 1px),
-    "sm": ("fontSize": 1rem, "spacingBetweenIcons": 0.125rem),
-    "md": ("fontSize": 1.375rem, "spacingBetweenIcons": 0.1875rem),
-    "lg": ("fontSize": 2rem, "spacingBetweenIcons": 0.25rem)
+    'cozy': (
+      'fontSize': 1.5rem,
+      'spacingBetweenIcons': 0.1875rem,
+      'controlMargin': 0.8125rem 0
+    ),
+    'compact': (
+      'fontSize': 1rem,
+      'spacingBetweenIcons': 0.125rem,
+      'controlMargin': 0.5rem 0
+    ),
+    'condensed': (
+      'fontSize': 1rem,
+      'spacingBetweenIcons': 0.125rem
+    ),
+    'xs': (
+      'fontSize': 0.75rem,
+      'spacingBetweenIcons': 1px
+    ),
+    'sm': (
+      'fontSize': 1rem,
+      'spacingBetweenIcons': 0.125rem
+    ),
+    'md': (
+      'fontSize': 1.375rem,
+      'spacingBetweenIcons': 0.1875rem
+    ),
+    'lg': (
+      'fontSize': 2rem,
+      'spacingBetweenIcons': 0.25rem
+    )
   );
   $fd-rating-indicator-default-size: map-get($fd-rating-indicator-sizes, 'md');
 
-  --fontSize: #{map_get($fd-rating-indicator-default-size, "fontSize")};
-  --spacingBetweenIcons: #{map_get($fd-rating-indicator-default-size, "spacingBetweenIcons")};
+  --fontSize: #{map_get($fd-rating-indicator-default-size, 'fontSize')};
+  --spacingBetweenIcons: #{map_get($fd-rating-indicator-default-size, 'spacingBetweenIcons')};
 
   $fd-rating-indicator-dynamic-text-space: 0.5rem;
 
@@ -110,10 +141,10 @@ $block: #{$fd-namespace}-rating-indicator;
 
   @each $set-name, $size-set in $fd-rating-indicator-sizes {
     &--#{$set-name} {
-      --fontSize: #{map_get($size-set, "fontSize")};
-      --spacingBetweenIcons: #{map_get($size-set, "spacingBetweenIcons")};
+      --fontSize: #{map_get($size-set, 'fontSize')};
+      --spacingBetweenIcons: #{map_get($size-set, 'spacingBetweenIcons')};
 
-      $control-margin: map_get($size-set, "controlMargin");
+      $control-margin: map_get($size-set, 'controlMargin');
 
       @if $control-margin {
         margin: $control-margin;
@@ -131,7 +162,8 @@ $block: #{$fd-namespace}-rating-indicator;
     @include fd-fiori-focus-within(var(--fdRating_Indicator_Focus_Outline_Offset, 0)) {
       // do not show outline for each rating item
       // keeping it this way in order to preserve fallback behavior for IE
-      .#{$block}__label, .#{$block}__input {
+      .#{$block}__label,
+      .#{$block}__input {
         outline: none !important;
       }
     }
@@ -167,7 +199,7 @@ $block: #{$fd-namespace}-rating-indicator;
     @include fd-flex-vertical-center();
 
     @include fd-icon-glyph('favorite') {
-      font-family: "SAP-icons";
+      font-family: 'SAP-icons';
       color: var(--sapContent_RatedColor);
       font-size: var(--fontSize);
     }
@@ -273,12 +305,6 @@ $block: #{$fd-namespace}-rating-indicator;
         font-size: calc(var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio));
       }
     }
-
-    &.#{$block}--half-star {
-      @include fd-rating-indicator-labels-after-checked() {
-        width: calc(var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio) * 0.5);
-      }
-    }
   }
 
   &--icon {
diff --git a/packages/styles/stories/Components/rating-indicator/disabled.example.html b/packages/styles/stories/Components/rating-indicator/disabled.example.html
index 396cee59df..8911b7f9f8 100644
--- a/packages/styles/stories/Components/rating-indicator/disabled.example.html
+++ b/packages/styles/stories/Components/rating-indicator/disabled.example.html
@@ -1,24 +1,204 @@
 <div class="example-container">
+    <p>Default:</p>
     <div class="fd-rating-indicator" aria-disabled="true">
         <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
-            <input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-disabled-0" name="rating-disabled" value="0" disabled>
-            <label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-disabled-0" aria-hidden="true"></label>
+            <input
+                aria-label="0 star"
+                type="radio"
+                class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating"
+                id="rating-disabled-0"
+                name="rating-disabled"
+                value="0"
+                disabled
+            />
+            <label
+                class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating"
+                for="rating-disabled-0"
+                aria-hidden="true"
+            ></label>
 
-            <input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-1" name="rating-disabled" value="1" disabled>
+            <input
+                aria-label="1 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-1"
+                name="rating-disabled"
+                value="1"
+                disabled
+            />
             <label class="fd-rating-indicator__label" for="rating-disabled-1"></label>
 
-            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-2" name="rating-disabled" value="2" disabled checked>
+            <input
+                aria-label="2 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-2"
+                name="rating-disabled"
+                value="2"
+                disabled
+                checked
+            />
             <label class="fd-rating-indicator__label" for="rating-disabled-2"></label>
 
-            <input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-3" name="rating-disabled" value="3" disabled>
+            <input
+                aria-label="3 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-3"
+                name="rating-disabled"
+                value="3"
+                disabled
+            />
             <label class="fd-rating-indicator__label" for="rating-disabled-3"></label>
 
-            <input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-4" name="rating-disabled" value="4" disabled>
+            <input
+                aria-label="4 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-4"
+                name="rating-disabled"
+                value="4"
+                disabled
+            />
             <label class="fd-rating-indicator__label" for="rating-disabled-4"></label>
 
-            <input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-5" name="rating-disabled" value="5" disabled>
+            <input
+                aria-label="5 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-5"
+                name="rating-disabled"
+                value="5"
+                disabled
+            />
             <label class="fd-rating-indicator__label" for="rating-disabled-5"></label>
         </div>
         <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
     </div>
 </div>
+<div class="example-container">
+    <p>Default:</p>
+    <div class="fd-rating-indicator fd-rating-indicator--half-star" aria-disabled="true">
+        <div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
+            <input
+                aria-label="0 star"
+                type="radio"
+                class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating"
+                id="rating-disabled-half-0"
+                name="rating-disabled-half"
+                value="0"
+                disabled
+            />
+            <label
+                class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating"
+                for="rating-disabled-half-0"
+                aria-hidden="true"
+            ></label>
+
+            <input
+                aria-label="half star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-05"
+                name="rating-disabled-half"
+                value="0.5"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-05"></label>
+
+            <input
+                aria-label="1 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-1"
+                name="rating-disabled-half"
+                value="1"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-1"></label>
+
+            <input
+                aria-label="1 and half star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-15"
+                name="rating-disabled-half"
+                value="1.5"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-15"></label>
+
+            <input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-disabled-half-2"
+            name="rating-disabled-half" value=2">
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-2"></label>
+
+            <input
+                aria-label="2 and half star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-25"
+                name="rating-disabled-half"
+                value="2.5"
+                checked
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-25"></label>
+
+            <input
+                aria-label="3 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-3"
+                name="rating-disabled-half"
+                value="3"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-3"></label>
+
+            <input
+                aria-label="3 and half star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-35"
+                name="rating-disabled-half"
+                value="3.5"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-35"></label>
+
+            <input
+                aria-label="4 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-4"
+                name="rating-disabled-half"
+                value="4"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-4"></label>
+
+            <input
+                aria-label="4 and half star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-45"
+                name="rating-disabled-half"
+                value="4.5"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-45"></label>
+
+            <input
+                aria-label="5 star"
+                type="radio"
+                class="fd-rating-indicator__input"
+                id="rating-disabled-half-5"
+                name="rating-disabled-half"
+                value="5"
+                disabled
+            />
+            <label class="fd-rating-indicator__label" for="rating-disabled-half-5"></label>
+        </div>
+        <span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
+    </div>
+</div>