fix(ui5-rating-indicator): refactor rating-indicator to use SVG icons (…

…#5191) * fix(ui5-rating-indicator): refactor rating-indicator to use SVG icons * replace custom svg with ui5-icon * import icons and fix rtl styles * fix half star in RTL * apply comments in compact
SAP · May 16, 2022 · 0782cf7 · 0782cf7
1 parent c03d769
commit 0782cf7
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 32 deletions.
diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
@@ -16,20 +16,30 @@
 	title="{{tooltip}}"
 	aria-label="{{accessibleName}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
+	<ul class="ui5-rating-indicator-list"
 		aria-hidden="true"
-	>
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-readonly-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>
diff --git a/packages/main/src/RatingIndicator.js b/packages/main/src/RatingIndicator.js
@@ -18,6 +18,8 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -231,7 +233,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
@@ -1,6 +1,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
-	font-size: 1.5rem;
+	font-size: 24px;
+	margin: var(--_ui5_rating_indicator_component_spacing);
 	cursor: pointer;
 }
 
@@ -14,39 +15,79 @@
 	cursor: initial;
 }
 
-:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+:host([readonly]) .ui5-rating-indicator-readonly-item-unsel {
 	color: var(--sapContent_UnratedColor);
 }
 
+:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover {
+	opacity: .9;
+}
+
 :host([_focused]) {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_rating_indicator_border_radius);
 }
 
+[ui5-icon] {
+	display: flex;
+	text-shadow: var(--sapContent_TextShadow);
+}
+
 .ui5-rating-indicator-root {
 	outline: none;
+	position: relative;
 }
 
-.ui5-rating-indicator-icon {
+.ui5-rating-indicator-list {
+	list-style-type: none;
+	display: flex;
+	margin: 0;
+	padding: 0;
+}
+
+.ui5-rating-indicator-item {
 	position: relative;
-	color: var(--sapContent_UnratedColor);
-	user-select: none;
+	width: var(--_ui5_rating_indicator_item_width);
+	height: var(--_ui5_rating_indicator_item_height);
+	min-width: var(--_ui5_rating_indicator_item_width);
+    min-height: var(--_ui5_rating_indicator_item_height);
 }
 
-.ui5-rating-indicator-icon.ui5-rating-indicator-active-icon {
-	color: var(--sapContent_RatedColor);
+.ui5-rating-indicator-item:not(:last-child) {
+	margin-inline-end: 0.1875rem;
 }
 
-.ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
-	content: "\2605";
-	position: absolute;
-	top: 0;
-	width: 50%;
+.ui5-rating-indicator-item [ui5-icon] {
+	width: 100%;
 	height: 100%;
+	color: inherit;
+	user-select: none;
+}
+
+.ui5-rating-indicator-item.ui5-rating-indicator-item-sel {
 	color: var(--sapContent_RatedColor);
-	overflow: hidden;
 }
 
-.ui5-rating-indicator-stars-wrapper {
-	display: flex;
+.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel {
+	color: var(--sapContent_UnratedColor);
+}
+
+.ui5-rating-indicator-item.ui5-rating-indicator-item-half {
+	color: var(--sapContent_UnratedColor);
+}
+
+.ui5-rating-indicator-item [ui5-icon].ui5-rating-indicator-half-icon {
+	position: absolute;
+    inset-inline-start: 50%;
+    color: var(--sapContent_RatedColor);
 }
+
+.ui5-rating-indicator-half-icon-wrapper {
+	width: 100%;
+    height: 100%;
+    position: absolute;
+    inset-inline-start: -50%;
+    top: 0;
+    z-index: 32;
+    overflow: hidden;
+}
diff --git a/packages/main/src/themes/base/RatingIndicator-parameters.css b/packages/main/src/themes/base/RatingIndicator-parameters.css
@@ -1,3 +1,14 @@
 :root {
 	--_ui5_rating_indicator_border_radius: 0px;
+	--_ui5_rating_indicator_item_height: 1em;
+	--_ui5_rating_indicator_item_width: 1em;
+	--_ui5_rating_indicator_component_spacing: 0.5rem 0px;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_rating_indicator_item_height: 0.67em;
+	--_ui5_rating_indicator_item_width: 0.67em;
+	--_ui5_rating_indicator_component_spacing: 0.8125rem 0px;
 }
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -29,6 +29,7 @@
 @import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "../base/Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -29,6 +29,7 @@
 @import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -29,6 +29,7 @@
 @import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -28,6 +28,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "../base/Select-parameters.css";
 @import "../base/SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -28,6 +28,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "../base/Select-parameters.css";
 @import "../base/SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -30,6 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -30,6 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -32,6 +32,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "./RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./RadioButton-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -33,6 +33,7 @@
 @import "../sap_horizon/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "./Switch-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -26,6 +26,7 @@
 @import "./Popover-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "./Select-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -30,6 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -30,6 +30,7 @@
 @import "../base/PopupsCommon-parameters.css";
 @import "../sap_horizon_hcb/ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
+@import "../base/RatingIndicator-parameters.css";
 @import "./SegmentedButtton-parameters.css";
 @import "./Select-parameters.css";
 @import "./SplitButton-parameters.css";

diff --git a/packages/main/test/specs/RatingIndicator.spec.js b/packages/main/test/specs/RatingIndicator.spec.js
@@ -10,18 +10,18 @@ describe("Rating Indicator general interaction", () => {
 	it("Tests basic rating indicator rendering", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator1");
 
-		assert.strictEqual(await ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 5, "Basic rating indicator renders 5 stars");
+		assert.strictEqual(await ratingIndicator.shadow$$(".ui5-rating-indicator-item").length, 5, "Basic rating indicator renders 5 stars");
 	});
 
 	it("Tests max property", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator2");
 
-		assert.strictEqual(await ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 10, "Basic rating indicator renders 10 stars");
+		assert.strictEqual(await ratingIndicator.shadow$$(".ui5-rating-indicator-item").length, 10, "Basic rating indicator renders 10 stars");
 	});
 
 	it("Tests clicking on star", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator3");
-		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-icon")[2];
+		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-item")[2];
 
 		assert.strictEqual(await ratingIndicator.getProperty("value"), 6, "Initial value is applied");
 
@@ -32,7 +32,7 @@ describe("Rating Indicator general interaction", () => {
 
 	it("Tests change event", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator4");
-		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-icon")[2];
+		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-item")[2];
 		const input = await browser.$("#change-event");
 
 		assert.strictEqual(await ratingIndicator.getProperty("value"), 6, "Initial value is applied");
@@ -90,8 +90,8 @@ describe("Rating Indicator general interaction", () => {
 	it("Tests ACC attrs", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator1");
 		const ratingIndicatorRoot = ratingIndicator.shadow$(".ui5-rating-indicator-root");
-		const ratingIndicatorWrapper = ratingIndicator.shadow$(".ui5-rating-indicator-stars-wrapper");
-		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-icon")[2];
+		const ratingIndicatorList = ratingIndicator.shadow$(".ui5-rating-indicator-list");
+		const thirdStar = await ratingIndicator.shadow$$(".ui5-rating-indicator-item")[2];
 		const ratingIndicatorReadOnly = await browser.$("#rating-indicator-readonly").shadow$(".ui5-rating-indicator-root");
 
 		const TOOLTIP = "Rating";
@@ -105,7 +105,7 @@ describe("Rating Indicator general interaction", () => {
 
 		assert.notOk(await ratingIndicatorRoot.getAttribute("aria-readonly"), "The aria-readonly attribute is not presented");
 		assert.strictEqual(await ratingIndicatorReadOnly.getAttribute("aria-readonly"), 'true', "The aria-readonly attribute is presented");
-		
+
 		assert.strictEqual(await ratingIndicatorRoot.getAttribute("aria-valuetext"),
 			`${await ratingIndicator.getProperty("value")} of ${await ratingIndicator.getProperty("max")}`, "aria-valuetext is set correctly");
 
@@ -114,7 +114,7 @@ describe("Rating Indicator general interaction", () => {
 		assert.strictEqual(await ratingIndicatorRoot.getAttribute("aria-valuetext"),
 			"3 of 5", "aria-valuetext is updated correctly");
 
-		assert.strictEqual(await ratingIndicatorWrapper.getAttribute("aria-hidden"), "true", "aria-hidden is set");
+		assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set");
 	});
 
 	it("Tests ACC attrs - title attribute provided", async () => {