fix(ui5-label): fix truncation when show-colon is set (#1079)

Fixes: #1077

The allocated width for the ":" used to be bigger than the ":" itself causing the ui5-label always to truncate, when show-colon is set to "true".

Author: ilhan007

packages/main/src/themes/Label.css

@@ -28,15 +28,15 @@
 }
 
 :host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100%-0.725rem);
+	max-width: calc(100% - 0.725rem);
 }
 
 :host(:not([wrap])[required]) .ui5-label-text-wrapper {
-	max-width: calc(100%-0.475rem);
+	max-width: calc(100% - 0.475rem);
 }
 
 :host(:not([wrap])[show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100%-0.3rem);
+	max-width: calc(100% - 0.2rem);
 }
 
 :host([show-colon]) .ui5-label-required-colon:before {

packages/main/test/pages/Label.html

@@ -16,6 +16,8 @@
 		}
 	</script>
 
+	<script>delete Document.prototype.adoptedStyleSheets;</script>
+
 	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../resources/bundle.es5.js"></script>
@@ -37,6 +39,21 @@
 	<section class="group">
 		<h2>Basic labels</h2>
 		<ui5-label id="basic-label">Basic Label</ui5-label>
+		<ui5-label show-colon id="basic-label2">Basic Label</ui5-label>
+		<ui5-label required id="basic-label2">Basic Label</ui5-label>
+		<ui5-label show-colon required id="basic-label3">Basic Label</ui5-label>
+
+		<h2>Basic long labels</h2>
+		<ui5-label id="basic-label4">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label show-colon id="basic-label5">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label required id="basic-label6">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label show-colon required id="basic-label6">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+
+		<h2>Basic long labels  with predefined width</h2>
+		<ui5-label style="width: 100px" id="basic-label7">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label style="width: 100px" show-colon id="basic-label8">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label style="width: 100px" required id="basic-label8">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
+		<ui5-label style="width: 100px" show-colon required id="basic-label9">Start The quick brown fox jumps over the lazy sheep End</ui5-label>
 	</section>
 	<section class="group">
 		<h2>Required labels</h2>
@@ -57,6 +74,10 @@ <h2>Wrapping label</h2>
 
 	</section>
 
+	<h2>Test show-colon not forcing truncation</h2>
+	<ui5-label id="showColon-false">Basic Label</ui5-label>
+	<ui5-label show-colon id="showColon-true">Basic Label</ui5-label>
+
 	<section class="group">
 		<h2>label + input</h2>
 		<div style="display: flex; align-items: center">

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

@@ -27,6 +27,18 @@ describe("General API", () => {
 		assert.strictEqual(requiredLabelContent, '"*"', "after's content should be *");
 	});
 
+	it("tests show-colon does not force truncation", () => {
+		const labelWithNoColon = browser.$("#showColon-false").shadow$(".ui5-label-text-wrapper");
+		const labelWithShowColon = browser.$("#showColon-true").shadow$(".ui5-label-text-wrapper");
+
+		const labelWithNoColonSize = labelWithNoColon.getSize();
+		const labelWithShowColonSize = labelWithShowColon.getSize();
+
+		// Comparing ui5-label(s) "Basic Label" and "Basic Label:", but just the "Basic Label" part,
+		// that should be equal if no trunctation and not equal if truncated.
+		assert.strictEqual(labelWithNoColonSize.width, labelWithShowColonSize.width, "Both texts are equal in width");
+	});
+
 	it("should wrap the text of the label", () => {
 		const wrappingLabel = browser.$("#wrapping-label");
 		const truncatingLabel = browser.$("#truncated-label");