Skip to content

Commit

Permalink
fix(styles): half star unification and doc update [ci visual] (#4926)
Browse files Browse the repository at this point in the history
  • Loading branch information
@N1XUS
N1XUS committed Oct 25, 2023
1 parent 39ce947 commit 216cbcc
Show file tree
Hide file tree
Showing 2 changed files with 238 additions and 32 deletions.
76 changes: 51 additions & 25 deletions packages/styles/src/rating-indicator.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "./new-settings";
@import "./mixins";
@import './new-settings';
@import './mixins';

$block: #{$fd-namespace}-rating-indicator;

Expand All @@ -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;

Expand Down Expand Up @@ -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);

Expand All @@ -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)
);
}
}
}
Expand All @@ -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;

Expand All @@ -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;
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand Down
194 changes: 187 additions & 7 deletions packages/styles/stories/Components/rating-indicator/disabled.example.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 216cbcc

Please sign in to comment.