Skip to content

Commit

Permalink
fix(styles): rating indicator half star display modes [ci visual] (#4924
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@N1XUS
N1XUS committed Oct 25, 2023
1 parent 4d4b395 commit cab9768
Show file tree
Hide file tree
Showing 5 changed files with 405 additions and 38 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,4 +170,4 @@
"fast-deep-equal": "^3.1.3",
"jsdom": "^20.0.1"
}
}
}
6 changes: 6 additions & 0 deletions packages/styles/src/rating-indicator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,12 @@ $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 {
Expand Down
212 changes: 196 additions & 16 deletions packages/styles/stories/Components/rating-indicator/display-mode.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,204 @@
<div class="example-container">
<div class="fd-rating-indicator fd-rating-indicator--display-mode">
<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-display-mode-0" name="rating-display-mode" value="0" disabled>
<label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-display-mode-0" aria-hidden="true"></label>
<p>Default:</p>
<div class="fd-rating-indicator fd-rating-indicator--display-mode">
<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-display-mode-0"
name="rating-display-mode"
value="0"
disabled
/>
<label
class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating"
for="rating-display-mode-0"
aria-hidden="true"
></label>

<input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled>
<label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>
<input
aria-label="1 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-1"
name="rating-display-mode"
value="1"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>

<input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-2" name="rating-display-mode" value="2" disabled checked>
<label class="fd-rating-indicator__label" for="rating-display-mode-2"></label>
<input
aria-label="2 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-2"
name="rating-display-mode"
value="2"
disabled
checked
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-2"></label>

<input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-3" name="rating-display-mode" value="3" disabled>
<label class="fd-rating-indicator__label" for="rating-display-mode-3"></label>
<input
aria-label="3 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-3"
name="rating-display-mode"
value="3"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-3"></label>

<input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-4" name="rating-display-mode" value="4" disabled>
<label class="fd-rating-indicator__label" for="rating-display-mode-4"></label>
<input
aria-label="4 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-4"
name="rating-display-mode"
value="4"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-4"></label>

<input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-5" name="rating-display-mode" value="5" disabled>
<label class="fd-rating-indicator__label" for="rating-display-mode-5"></label>
</div>
<span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
<input
aria-label="5 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-5"
name="rating-display-mode"
value="5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-5"></label>
</div>
<span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
</div>
</div>
<div class="example-container">
<p>Half values:</p>
<div class="fd-rating-indicator fd-rating-indicator--half-star fd-rating-indicator--display-mode">
<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-display-mode-half-0"
name="rating-display-mode-half"
value="0"
disabled
/>
<label
class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating"
for="rating-display-mode-half-0"
aria-hidden="true"
></label>

<input
aria-label="half star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-05"
name="rating-display-mode-half"
value="0.5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-05"></label>

<input
aria-label="1 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-1"
name="rating-display-mode-half"
value="1"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-1"></label>

<input
aria-label="1 and half star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-15"
name="rating-display-mode-half"
value="1.5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-15"></label>

<input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-half-2"
name="rating-display-mode-half" value=2">
<label class="fd-rating-indicator__label" for="rating-display-mode-half-2"></label>

<input
aria-label="2 and half star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-25"
name="rating-display-mode-half"
value="2.5"
checked
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-25"></label>

<input
aria-label="3 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-3"
name="rating-display-mode-half"
value="3"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-3"></label>

<input
aria-label="3 and half star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-35"
name="rating-display-mode-half"
value="3.5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-35"></label>

<input
aria-label="4 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-4"
name="rating-display-mode-half"
value="4"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-4"></label>

<input
aria-label="4 and half star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-45"
name="rating-display-mode-half"
value="4.5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-45"></label>

<input
aria-label="5 star"
type="radio"
class="fd-rating-indicator__input"
id="rating-display-mode-half-5"
name="rating-display-mode-half"
value="5"
disabled
/>
<label class="fd-rating-indicator__label" for="rating-display-mode-half-5"></label>
</div>
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
</div>
</div>

0 comments on commit cab9768

Please sign in to comment.