fix(ui5-rating-indicator): rename maxValue property to max (#3375)

Author: fifoosid

packages/main/src/RatingIndicator.hbs

@@ -3,7 +3,7 @@
 	aria-roledescription="{{_ariaRoleDescription}}"
 	aria-valuemin="0"
 	aria-valuenow="{{value}}"
-	aria-valuemax="{{maxValue}}"
+	aria-valuemax="{{max}}"
 	aria-orientation="horizontal"
 	aria-disabled="{{_ariaDisabled}}"
 	aria-readonly="{{ariaReadonly}}"

packages/main/src/RatingIndicator.js

@@ -51,8 +51,9 @@ const metadata = {
 		 * @type {Integer}
 		 * @defaultvalue 5
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		maxValue: {
+		max: {
 			type: Integer,
 			defaultValue: 5,
 		},
@@ -188,7 +189,7 @@ class RatingIndicator extends UI5Element {
 	calcState() {
 		this._stars = [];
 
-		for (let i = 1; i < this.maxValue + 1; i++) {
+		for (let i = 1; i < this.max + 1; i++) {
 			const remainder = Math.round((this.value - Math.floor(this.value)) * 10);
 			let halfStar = false,
 				tempValue = this.value;
@@ -240,7 +241,7 @@ class RatingIndicator extends UI5Element {
 			if (down && this.value > 0) {
 				this.value = Math.round(this.value - 1);
 				this.fireEvent("change");
-			} else if (up && this.value < this.maxValue) {
+			} else if (up && this.value < this.max) {
 				this.value = Math.round(this.value + 1);
 				this.fireEvent("change");
 			}

packages/main/test/pages/RatingIndicator.html

@@ -24,18 +24,18 @@
 	<br>
 	<br>
 
-	<ui5-rating-indicator id="rating-indicator2" max-value="10" value="6" aria-label="Hello World"></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator2" max="10" value="6" aria-label="Hello World"></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>
 
-	<ui5-rating-indicator id="rating-indicator3" max-value="10" value="6" aria-label="Hello World"></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator3" max="10" value="6" aria-label="Hello World"></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>
 
 	<h3>test change event</h3>
-	<ui5-rating-indicator id="rating-indicator4" max-value="10" value="6"></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator4" max="10" value="6"></ui5-rating-indicator>
 	<ui5-input value="0" id="change-event"></ui5-input>
 	<br>
 	<br>
@@ -47,7 +47,7 @@ <h3>test change event</h3>
 	<br>
 
 	<h3>readonly</h3>
-	<ui5-rating-indicator id="rating-indicator-readonly" value="1" max-value="3" readonly></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator-readonly" value="1" max="3" readonly></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>
@@ -58,7 +58,7 @@ <h3>disabled</h3>
 	<br>
 	<br>
 
-	<ui5-rating-indicator value="3" max-value="3"></ui5-rating-indicator>
+	<ui5-rating-indicator value="3" max="3"></ui5-rating-indicator>
 	<br>
 	<br>
 

packages/main/test/samples/RatingIndicator.sample.html

@@ -32,26 +32,26 @@ <h3>Basic Rating Indicator</h3>
 <section>
 	<h3>Rating Indicator With Different Max Value</h3>
 	<div class="snippet">
-		<ui5-rating-indicator max-value="10" value="5"></ui5-rating-indicator>
-		<ui5-rating-indicator max-value="3" value="3"></ui5-rating-indicator>
+		<ui5-rating-indicator max="10" value="5"></ui5-rating-indicator>
+		<ui5-rating-indicator max="3" value="3"></ui5-rating-indicator>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-rating-indicator max-value="10" value="5"></ui5-rating-indicator>
-<ui5-rating-indicator max-value="3" value="3"></ui5-rating-indicator>
+<ui5-rating-indicator max="10" value="5"></ui5-rating-indicator>
+<ui5-rating-indicator max="3" value="3"></ui5-rating-indicator>
 	</xmp></pre>
 </section>
 
 <section>
 	<h3>Disabled Rating Indicator</h3>
 	<div class="snippet">
 		<ui5-rating-indicator value="4" disabled></ui5-rating-indicator>
-		<ui5-rating-indicator max-value="10" value="5" disabled></ui5-rating-indicator>
-		<ui5-rating-indicator max-value="3" value="3" disabled></ui5-rating-indicator>
+		<ui5-rating-indicator max="10" value="5" disabled></ui5-rating-indicator>
+		<ui5-rating-indicator max="3" value="3" disabled></ui5-rating-indicator>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-rating-indicator value="4" disabled></ui5-rating-indicator>
-<ui5-rating-indicator max-value="10" value="5" disabled></ui5-rating-indicator>
-<ui5-rating-indicator max-value="3" value="3" disabled></ui5-rating-indicator>
+<ui5-rating-indicator max="10" value="5" disabled></ui5-rating-indicator>
+<ui5-rating-indicator max="3" value="3" disabled></ui5-rating-indicator>
 	</xmp></pre>
 </section>
 

packages/main/test/specs/RatingIndicator.spec.js

@@ -13,7 +13,7 @@ describe("Rating Indicator general interaction", () => {
 		assert.strictEqual(ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 5, "Basic rating indicator renders 5 stars");
 	});
 
-	it("Tests max-value property", () => {
+	it("Tests max property", () => {
 		const ratingIndicator = browser.$("#rating-indicator2");
 
 		assert.strictEqual(ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 10, "Basic rating indicator renders 10 stars");