feat(ui5-progress-indicator): implement displayValue property (#3879)

Introducing new property "displayValue" with which we can set a custom text as value for the ProgressIndicator.

Fixes: #3573
Closes: #3573

Author: plamenivanov91

packages/main/src/ProgressIndicator.hbs

@@ -24,6 +24,12 @@
         <ui5-icon name="{{valueStateIcon}}" class="ui5-progress-indicator-icon"></ui5-icon>
     {{/if}}
     {{#unless hideValue}}
-        <span class="ui5-progress-indicator-value">{{validatedValue}}%</span>
+        <span class="ui5-progress-indicator-value">
+            {{#if displayValue}}
+                {{displayValue}}
+            {{else}}
+                {{validatedValue}}%
+            {{/if}}
+        </span>
     {{/unless}}
 {{/inline}}

packages/main/src/ProgressIndicator.js

@@ -55,6 +55,21 @@ const metadata = {
 			type: Integer,
 			defaultValue: 0,
 		},
+		/**
+		 * Specifies the text value to be displayed in the bar.
+		 *
+		 * <b>Note:</b>
+		 * <ul>
+		 * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+		 * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+		 * </ul>
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		displayValue: {
+			type: String,
+		},
 		/**
 		 * Defines the value state of the component.
 		 * <br><br>

packages/main/src/themes/ProgressIndicator.css

@@ -60,10 +60,14 @@
     border-radius: 0 0.5rem 0.5rem 0;
     box-sizing: border-box;
     color: var(--_ui5_progress_indicator_color);
+    overflow: hidden;
 }
 
 .ui5-progress-indicator-value {
     margin: 0 0.375rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .ui5-progress-indicator-icon {

packages/main/test/pages/ProgressIndicator.html

@@ -91,6 +91,10 @@
     <br />
 	<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
     <br />
+    Custom Display Value
+    <br />
+	<ui5-progress-indicator value="25" display-value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."></ui5-progress-indicator>
+    <br />
     Custom Size 1
     <br />
 	<ui5-progress-indicator value="25" style="height: 50px; width: 200px;"></ui5-progress-indicator>

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

@@ -30,6 +30,16 @@ <h3>Basic Progress Indicator</h3>
 	</xmp></pre>
 </section>
 
+<section>
+	<h3>Progress Indicator With Custom Display Value</h3>
+	<div class="snippet">
+        <ui5-progress-indicator value="25" display-value="Custom Display Value"></ui5-progress-indicator>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-progress-indicator value="25" display-value="Custom Display Value"></ui5-progress-indicator>
+	</xmp></pre>
+</section>
+
 <section>
 	<h3>Progress Indicator With Value State</h3>
 	<div class="snippet">

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

@@ -28,4 +28,19 @@ describe("API", () => {
 		largerButton.click();
 		assert.strictEqual(getValidatedValue(progressIndicator), 100, "The value is limited to 100 and it is validated correctly.");
 	});
+
+	it("tests displayValue property", () => {
+		const progressIndicator = $("#test-progress-indicator");
+		const customDisplayValue = "Custom Display Value";
+		const originalPercentageValue = getValidatedValue(progressIndicator);
+		const valueShadowSpan = progressIndicator.shadow$(".ui5-progress-indicator-value");
+
+		progressIndicator.setAttribute("display-value", customDisplayValue);
+		assert.strictEqual(valueShadowSpan.getText(), customDisplayValue,
+			"The value span is showing the custom set text by the display-value attribute.");
+
+		progressIndicator.setAttribute("display-value", "");
+		assert.strictEqual(valueShadowSpan.getText(), originalPercentageValue + "%",
+			"The value is row backed to the originally shown percentage value after the display value is set to empty string.");
+	});
 });