feat(ui5-rating-indicator): provide the possibility to set size of th…

…e icons (#10406)
SAP · Dec 20, 2024 · a01eccb · a01eccb
1 parent 5af40ae
commit a01eccb
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 1 deletion.
diff --git a/packages/main/cypress/specs/RatingIndicator.cy.ts b/packages/main/cypress/specs/RatingIndicator.cy.ts
@@ -36,4 +36,31 @@ describe("RatingIndicator", () => {
 				.should("have.attr", "name", attributeValue);
 		});
 	});
+
+	describe("RatingIndicator Sizes", () => {
+		it("should apply correct size and spacing for size 'S'", () => {
+			cy.mount(html`<ui5-rating-indicator size="S" value="3"></ui5-rating-indicator>`);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should("have.css", "height", "22px")
+				.should("have.css", "margin-right", "3px");
+		});
+		it("should apply correct size and spacing for size 'L' readonly", () => {
+			cy.mount(html`<ui5-rating-indicator size="L" value="3.5" readonly></ui5-rating-indicator>`);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should("have.css", "height", "32px")
+				.should("have.css", "margin-right", "4px");
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel")
+				.find("ui5-icon")
+				.should("have.css", "height", "24px");
+		});
+	});
 });
diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
@@ -27,6 +27,7 @@ import Icon from "./Icon.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
+import type RatingIndicatorSize from "./types/RatingIndicatorSize.js";
 
 type Star = {
 	selected: boolean,
@@ -112,6 +113,15 @@ class RatingIndicator extends UI5Element {
 	@property({ type: Number })
 	max: number = 5;
 
+	/**
+	 * Defines the size of the component.
+	 * @default "M"
+	 * @public
+	 * @since 2.6.0
+	 */
+	@property()
+	size: `${RatingIndicatorSize}` = "M";
+
 	/**
 	 * Defines whether the component is disabled.
 	 *

diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
@@ -32,6 +32,14 @@
 	border-radius: var(--_ui5_rating_indicator_border_radius);
 }
 
+:host([size="S"]) .ui5-rating-indicator-item {
+	font-size: var(--_ui5_rating_indicator_item_size_s);
+}
+
+ :host([size="L"]) .ui5-rating-indicator-item {
+	font-size: var(--_ui5_rating_indicator_item_size_l);
+}
+
 [ui5-icon] {
 	display: flex;
 	text-shadow: var(--sapContent_TextShadow);
@@ -57,6 +65,10 @@
 	height: var(--_ui5_rating_indicator_item_height);
 }
 
+:host([size="L"]) .ui5-rating-indicator-item:not(:last-child) {
+	margin-inline-end: 0.25rem;
+}
+
 .ui5-rating-indicator-item:not(:last-child) {
 	margin-inline-end: 0.1875rem;
 }

diff --git a/packages/main/src/themes/base/RatingIndicator-parameters.css b/packages/main/src/themes/base/RatingIndicator-parameters.css
@@ -8,6 +8,8 @@
 	--_ui5_rating_indicator_readonly_item_spacing: 0px;
 	--_ui5_rating_indicator_component_spacing: 0.5rem 0px;
 	--_ui5_rating_indicator_component_padding: 0.25rem;
+	--_ui5_rating_indicator_item_size_s: 1.375rem;
+	--_ui5_rating_indicator_item_size_l: 2rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/types/RatingIndicatorSize.ts b/packages/main/src/types/RatingIndicatorSize.ts
@@ -0,0 +1,28 @@
+/**
+ * Types of icon sizes used in the RatingIndicator.
+ * Provides predefined size categories to ensure consistent scaling and spacing of icons.
+ * @public
+ * @since 2.6.0
+ */
+enum RatingIndicatorSize {
+	/**
+	 * Small size for compact layouts.
+	 * @public
+	 */
+	S = "S",
+
+	/**
+	 * Medium size, used as the default option.
+	 * Offers a balanced appearance for most scenarios.
+	 * @public
+	 */
+	M = "M",
+
+	/**
+	 * Large size for prominent or spacious layouts.
+	 * @public
+	 */
+	L = "L",
+}
+
+export default RatingIndicatorSize;
diff --git a/packages/main/test/pages/RatingIndicator.html b/packages/main/test/pages/RatingIndicator.html
@@ -44,7 +44,6 @@
 	<ui5-button id="btnToggle">Toggle 'Compact'</ui5-button>
 	<br />
 	<br />
-
 	<ui5-rating-indicator id="rating-indicator1" accessible-name="Hello World"></ui5-rating-indicator>
 	<br />
 	<ui5-rating-indicator id="rating-indicator-test" value="3.7" readonly></ui5-rating-indicator>
@@ -115,6 +114,14 @@ <h3>RatingIndicator with accessibleNameRef</h3>
 	<br>
 	<br>
 
+	<h3>Different sizes due to size property</h3>
+		<ui5-rating-indicator size="S"></ui5-rating-indicator>
+		<br>
+		<ui5-rating-indicator size="M" value="4" disabled></ui5-rating-indicator>
+		<br>
+		<ui5-rating-indicator size="L" value="3.5" readonly></ui5-rating-indicator>
+		<br>
+
 	<h3>sizes</h3>
 	<section>
 		<ui5-rating-indicator class="ratingindicator2auto"></ui5-rating-indicator>

diff --git a/packages/website/docs/_components_pages/main/RatingIndicator.mdx b/packages/website/docs/_components_pages/main/RatingIndicator.mdx
@@ -3,10 +3,18 @@ slug: ../RatingIndicator
 ---
 
 import Basic from "../../_samples/main/RatingIndicator/Basic/Basic.md";
+import Sizes from "../../_samples/main/RatingIndicator/Sizes/Sizes.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
 <%COMPONENT_METADATA%>
+
+## More Samples
+
+### Sizes
+The RatingIndicator supports several sizes of the Icons (S, M and L).
+
+<Sizes />
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/Sizes.md b/packages/website/docs/_samples/main/RatingIndicator/Sizes/Sizes.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js b/packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/RatingIndicator.js";
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html b/packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html
@@ -0,0 +1,21 @@
+<!-- playground-hide -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-hide-end -->
+    <ui5-rating-indicator Size="S" value="2.5" readonly></ui5-rating-indicator></br>
+    <ui5-rating-indicator size="M"></ui5-rating-indicator></br>
+    <ui5-rating-indicator size="L" value="3" disabled></ui5-rating-indicator>
+    <!-- playground-hide -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-hide-end -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import "@ui5/webcomponents/dist/RatingIndicator.js";