From a01eccb150e631cb5609ccef1579b52f2399975e Mon Sep 17 00:00:00 2001
From: Stefan Dimitrov <115184100+StefanDimitrov04@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:52:47 +0200
Subject: [PATCH] feat(ui5-rating-indicator): provide the possibility to set
size of the icons (#10406)
---
.../main/cypress/specs/RatingIndicator.cy.ts | 27 ++++++++++++++++++
packages/main/src/RatingIndicator.ts | 10 +++++++
packages/main/src/themes/RatingIndicator.css | 12 ++++++++
.../base/RatingIndicator-parameters.css | 2 ++
.../main/src/types/RatingIndicatorSize.ts | 28 +++++++++++++++++++
packages/main/test/pages/RatingIndicator.html | 9 +++++-
.../main/RatingIndicator.mdx | 8 ++++++
.../main/RatingIndicator/Sizes/Sizes.md | 4 +++
.../main/RatingIndicator/Sizes/main.js | 1 +
.../main/RatingIndicator/Sizes/sample.html | 21 ++++++++++++++
10 files changed, 121 insertions(+), 1 deletion(-)
create mode 100644 packages/main/src/types/RatingIndicatorSize.ts
create mode 100644 packages/website/docs/_samples/main/RatingIndicator/Sizes/Sizes.md
create mode 100644 packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js
create mode 100644 packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html
diff --git a/packages/main/cypress/specs/RatingIndicator.cy.ts b/packages/main/cypress/specs/RatingIndicator.cy.ts
index 83150cfdd07c..d11fa3f314fb 100644
--- 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``);
+
+ 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``);
+
+ 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
index 9d66cc03b168..997435d355c4 100644
--- 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
index d2763290bdb5..618e21b6a4fb 100644
--- 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
index 151bf5f4d727..294381e34a05 100644
--- 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
new file mode 100644
index 000000000000..dd1a1ffd3090
--- /dev/null
+++ 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
index 786ac941495b..700648e3db52 100644
--- a/packages/main/test/pages/RatingIndicator.html
+++ b/packages/main/test/pages/RatingIndicator.html
@@ -44,7 +44,6 @@
Toggle 'Compact'
-
@@ -115,6 +114,14 @@ RatingIndicator with accessibleNameRef
+ Different sizes due to size property
+
+
+
+
+
+
+
sizes
diff --git a/packages/website/docs/_components_pages/main/RatingIndicator.mdx b/packages/website/docs/_components_pages/main/RatingIndicator.mdx
index 42518087aa74..1750b9c1cdf1 100644
--- a/packages/website/docs/_components_pages/main/RatingIndicator.mdx
+++ b/packages/website/docs/_components_pages/main/RatingIndicator.mdx
@@ -3,6 +3,7 @@ slug: ../RatingIndicator
---
import Basic from "../../_samples/main/RatingIndicator/Basic/Basic.md";
+import Sizes from "../../_samples/main/RatingIndicator/Sizes/Sizes.md";
<%COMPONENT_OVERVIEW%>
@@ -10,3 +11,10 @@ import Basic from "../../_samples/main/RatingIndicator/Basic/Basic.md";
<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Sizes
+The RatingIndicator supports several sizes of the Icons (S, M and L).
+
+
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/Sizes.md b/packages/website/docs/_samples/main/RatingIndicator/Sizes/Sizes.md
new file mode 100644
index 000000000000..66ccdc236d97
--- /dev/null
+++ 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';
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js b/packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js
new file mode 100644
index 000000000000..a4061d2ad8d7
--- /dev/null
+++ b/packages/website/docs/_samples/main/RatingIndicator/Sizes/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/RatingIndicator.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html b/packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html
new file mode 100644
index 000000000000..299889bc068d
--- /dev/null
+++ b/packages/website/docs/_samples/main/RatingIndicator/Sizes/sample.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file