Skip to content

Commit 3606f74

Browse files
InnaAtanasovaInnaAtanasova
committed
fix(): refactor Rating Indicator [ci visual]
1 parent 53231b3 commit 3606f74

20 files changed

+1334
-2616
lines changed

‎packages/styles/src/rating-indicator.scss

Lines changed: 114 additions & 266 deletions
Large diffs are not rendered by default.

‎packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
@use "sass:map";
22

33
:root {
4-
/* Default mode */
5-
--fdRating_Indicator_Selected_Hover_Opacity: 0.9;
6-
7-
/* Display Only mode */
8-
--fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor);
9-
10-
/* Disabled mode */
11-
--fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor);
12-
--fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor);
13-
--fdRating_Indicator_Disabled_Control_Opacity: 0.4;
14-
--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 1;
4+
--fdRatingIndicator_Container_Border_Radius: 0;
155
}

‎packages/styles/src/theming/common/rating-indicator/_sap_fiori_hc.scss

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
11
@use "sass:map";
22

33
:root {
4-
/* Default mode */
5-
--fdRating_Indicator_Selected_Hover_Opacity: 0.9;
6-
7-
/* Display Only mode */
8-
--fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor);
9-
10-
/* Disabled mode */
11-
--fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor);
12-
--fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor);
13-
--fdRating_Indicator_Disabled_Control_Opacity: 0.4;
14-
--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 0.75;
15-
--fdRating_Indicator_Border_Radius: 0.25rem;
16-
--fdRating_Indicator_Focus_Outline_Offset: 0.125rem;
4+
--fdRatingIndicator_Container_Border_Radius: 0.25rem;
175
}

‎packages/styles/src/theming/common/rating-indicator/_sap_horizon_hc.scss

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/styles/src/theming/sap_fiori_3_hcb.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
@import "./common/radio/sap_fiori_hc";
3131
@import "./common/link/sap_fiori_hc";
3232
@import "./common/vertical-nav/sap_fiori";
33-
@import "./common/rating-indicator/sap_fiori_hc";
3433
@import "./common/select/sap_fiori";
3534
@import "./common/tile/sap_fiori_hc";
3635
@import "./common/progress-indicator/sap_fiori_hc";

‎packages/styles/src/theming/sap_fiori_3_hcw.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
@import "./common/radio/sap_fiori_hc";
2525
@import "./common/link/sap_fiori_hc";
2626
@import "./common/vertical-nav/sap_fiori";
27-
@import "./common/rating-indicator/sap_fiori_hc";
2827
@import "./common/select/sap_fiori";
2928
@import "./common/tile/sap_fiori_hc";
3029
@import "./common/progress-indicator/sap_fiori_hc";

‎packages/styles/src/theming/sap_horizon_hcb.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
@import "./common/radio/sap_horizon_hc";
2525
@import "./common/link/sap_horizon_hc";
2626
@import "./common/vertical-nav/sap_horizon";
27-
@import "./common/rating-indicator/sap_horizon_hc";
2827
@import "./common/select/sap_horizon_hc";
2928
@import "./common/tile/sap_horizon_hc";
3029
@import "./common/progress-indicator/sap_horizon";

‎packages/styles/src/theming/sap_horizon_hcw.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
@import "./common/radio/sap_horizon_hc";
2626
@import "./common/link/sap_horizon_hc";
2727
@import "./common/vertical-nav/sap_horizon";
28-
@import "./common/rating-indicator/sap_horizon_hc";
2928
@import "./common/select/sap_horizon_hc";
3029
@import "./common/tile/sap_horizon_hc";
3130
@import "./common/progress-indicator/sap_horizon";

‎packages/styles/stories/Components/rating-indicator/basic.example.html

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<h4>Default</h4>
2+
<div class="fd-rating-indicator">
3+
<div
4+
class="fd-rating-indicator__container"
5+
title="Rating"
6+
tabindex="0"
7+
role="slider"
8+
aria-orientation="horizontal"
9+
aria-roledescription="Rating Indicator"
10+
aria-valuemin="0"
11+
aria-valuenow="2.5"
12+
aria-valuemax="5"
13+
aria-valuetext="2.5 of 5"
14+
>
15+
<ul class="fd-rating-indicator__list" aria-hidden="true">
16+
<li class="fd-rating-indicator__item">
17+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
18+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
19+
</li>
20+
<li class="fd-rating-indicator__item">
21+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
22+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
23+
</li>
24+
<li class="fd-rating-indicator__item">
25+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
26+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
27+
</li>
28+
<li class="fd-rating-indicator__item">
29+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
30+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
31+
</li>
32+
<li class="fd-rating-indicator__item">
33+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
34+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
35+
</li>
36+
</ul>
37+
</div>
38+
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
39+
</div>
40+
41+
<br>
42+
<h4>Hover</h4>
43+
<div class="fd-rating-indicator is-hover">
44+
<div
45+
class="fd-rating-indicator__container"
46+
title="Rating"
47+
tabindex="0"
48+
role="slider"
49+
aria-orientation="horizontal"
50+
aria-roledescription="Rating Indicator"
51+
aria-valuemin="0"
52+
aria-valuenow="2.5"
53+
aria-valuemax="5"
54+
aria-valuetext="2.5 of 5"
55+
>
56+
<ul class="fd-rating-indicator__list" aria-hidden="true">
57+
<li class="fd-rating-indicator__item">
58+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
59+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
60+
</li>
61+
<li class="fd-rating-indicator__item">
62+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
63+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
64+
</li>
65+
<li class="fd-rating-indicator__item">
66+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
67+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
68+
</li>
69+
<li class="fd-rating-indicator__item">
70+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
71+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
72+
</li>
73+
<li class="fd-rating-indicator__item">
74+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
75+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
76+
</li>
77+
</ul>
78+
</div>
79+
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
80+
</div>
81+
82+
<br>
83+
<h4>Focus</h4>
84+
<div class="fd-rating-indicator">
85+
<div
86+
class="fd-rating-indicator__container is-focus"
87+
title="Rating"
88+
tabindex="0"
89+
role="slider"
90+
aria-orientation="horizontal"
91+
aria-roledescription="Rating Indicator"
92+
aria-valuemin="0"
93+
aria-valuenow="2.5"
94+
aria-valuemax="5"
95+
aria-valuetext="2.5 of 5"
96+
>
97+
<ul class="fd-rating-indicator__list" aria-hidden="true">
98+
<li class="fd-rating-indicator__item">
99+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
100+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
101+
</li>
102+
<li class="fd-rating-indicator__item">
103+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
104+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
105+
</li>
106+
<li class="fd-rating-indicator__item">
107+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
108+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
109+
</li>
110+
<li class="fd-rating-indicator__item">
111+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
112+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
113+
</li>
114+
<li class="fd-rating-indicator__item">
115+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
116+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
117+
</li>
118+
</ul>
119+
</div>
120+
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
121+
</div>
122+
123+
<br>
124+
<h4>Read Only</h4>
125+
<div class="fd-rating-indicator is-readonly">
126+
<div
127+
class="fd-rating-indicator__container"
128+
title="Rating"
129+
tabindex="0"
130+
role="slider"
131+
aria-orientation="horizontal"
132+
aria-roledescription="Rating Indicator"
133+
aria-valuemin="0"
134+
aria-valuenow="2.5"
135+
aria-valuemax="5"
136+
aria-valuetext="2.5 of 5"
137+
>
138+
<ul class="fd-rating-indicator__list" aria-hidden="true">
139+
<li class="fd-rating-indicator__item">
140+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
141+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
142+
</li>
143+
<li class="fd-rating-indicator__item">
144+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
145+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
146+
</li>
147+
<li class="fd-rating-indicator__item">
148+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
149+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
150+
</li>
151+
<li class="fd-rating-indicator__item">
152+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
153+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
154+
</li>
155+
<li class="fd-rating-indicator__item">
156+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
157+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
158+
</li>
159+
</ul>
160+
</div>
161+
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
162+
</div>
163+
164+
<br>
165+
<h4>Disabled</h4>
166+
<div class="fd-rating-indicator is-disabled">
167+
<div
168+
class="fd-rating-indicator__container"
169+
title="Rating"
170+
tabindex="0"
171+
role="slider"
172+
aria-orientation="horizontal"
173+
aria-roledescription="Rating Indicator"
174+
aria-valuemin="0"
175+
aria-valuenow="2.5"
176+
aria-valuemax="5"
177+
aria-valuetext="2.5 of 5"
178+
>
179+
<ul class="fd-rating-indicator__list" aria-hidden="true">
180+
<li class="fd-rating-indicator__item">
181+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
182+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
183+
</li>
184+
<li class="fd-rating-indicator__item">
185+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
186+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
187+
</li>
188+
<li class="fd-rating-indicator__item">
189+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
190+
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
191+
</li>
192+
<li class="fd-rating-indicator__item">
193+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
194+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
195+
</li>
196+
<li class="fd-rating-indicator__item">
197+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
198+
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
199+
</li>
200+
</ul>
201+
</div>
202+
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
203+
</div>

‎packages/styles/stories/Components/rating-indicator/custom-icons.example.html

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)