refactor(ui5-label): clean up styles

packages/main/src/Label.hbs

@@ -1,4 +1,4 @@
-<label class="{{classes.main}}" for="{{for}}">
+<label class="ui5-label-root" for="{{for}}">
 	<bdi id="{{_id}}-bdi">
 		<slot></slot>
 	</bdi>

packages/main/src/Label.js

@@ -113,17 +113,6 @@ class Label extends UI5Element {
 		return labelCss;
 	}
 
-	get classes() {
-		return {
-			main: {
-				sapMLabel: true,
-				sapMLabelNoText: !this.textContent.length,
-				sapMLabelWrapped: this.wrap,
-				sapMLabelRequired: this.required,
-			},
-		};
-	}
-
 	onclick() {
 		const elementToFocus = document.getElementById(this.for);
 

packages/main/src/themes/Label.css

@@ -1,25 +1,33 @@
-:host(ui5-label:not([hidden])) {
+:host(:not([hidden])) {
 	display: inline-flex;
-	max-width: 100%;
-	color: var(--sapUiContentLabelColor);
-	font-family: var(--sapUiFontFamily);
-	font-size: var(--sapMFontMediumSize);
-	font-weight: normal;
-	cursor: text;
 }
 
-ui5-label:not([hidden]) {
-	display: inline-block;
+:host {
 	max-width: 100%;
-	overflow: hidden;
 	color: var(--sapUiContentLabelColor);
 	font-family: var(--sapUiFontFamily);
 	font-size: var(--sapMFontMediumSize);
 	font-weight: normal;
 	cursor: text;
 }
 
-.sapMLabel {
+:host([wrap]) .ui5-label-root {
+	white-space: normal;
+	line-height: 1.4rem;
+}
+
+:host([required]) .ui5-label-root:before {
+	position: relative;
+	height: 100%;
+	display: inline-flex;
+	align-items: flex-start;
+	content:"*";
+	color: var(--sapUiFieldRequiredColor);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
+.ui5-label-root {
 	display: inline-block;
 	width: 100%;
 	font-weight: inherit;
@@ -29,12 +37,30 @@ ui5-label:not([hidden]) {
 	cursor: inherit;
 }
 
-.sapMLabel.sapMLabelWrapped {
+/*
+ * IE pair of styles
+ * to be removed later on
+ */
+ui5-label:not([hidden]) {
+	display: inline-block;
+}
+
+ui5-label {
+	max-width: 100%;
+	overflow: hidden;
+	color: var(--sapUiContentLabelColor);
+	font-family: var(--sapUiFontFamily);
+	font-size: var(--sapMFontMediumSize);
+	font-weight: normal;
+	cursor: text;
+}
+
+ui5-label[wrap] .ui5-label-root {
 	white-space: normal;
 	line-height: 1.4rem;
 }
 
-.sapMLabel.sapMLabelRequired:before {
+ui5-label[required] .ui5-label-root:before {
 	position: relative;
 	height: 100%;
 	display: inline-flex;
@@ -43,4 +69,4 @@ ui5-label:not([hidden]) {
 	color: var(--sapUiFieldRequiredColor);
 	font-size: 1.25rem;
 	font-weight: bold;
-}
+}

packages/main/test/sap/ui/webcomponents/main/qunit/Label.qunit.js

@@ -5,13 +5,13 @@ TestHelper.ready(function() {
 	var fixture = window.document.querySelector("#qunit-fixture");
 
 	var getActualText = function(el) {
-		return el.shadowRoot.querySelector('.sapMLabel>bdi>slot').assignedNodes()[0].textContent;
+		return el.shadowRoot.querySelector('.ui5-label-root>bdi>slot').assignedNodes()[0].textContent;
 	};
 
 	QUnit.module("Rendering", function (hooks) {
 		hooks.before(function() {
 			this.getLabelRoot = function() {
-				return this.label.shadowRoot.querySelector(".sapMLabel");
+				return this.label.shadowRoot.querySelector(".ui5-label-root");
 			};
 		});
 		hooks.beforeEach(function () {
@@ -34,19 +34,13 @@ TestHelper.ready(function() {
 		});
 
 		QUnit.test("Default settings", function (assert) {
-			assert.expect(4);
+			assert.expect(1);
 
-			var label = this.getLabelRoot(),
-				existingClasses = ["sapMLabel"],
-				nonExistingClasses = ["sapMLabelWrapped", "sapMLabelRequired", "sapMLabelNoText"];
+			var label = this.getLabelRoot();
 
-			existingClasses.forEach(function(className) {
+			["ui5-label-root"].forEach(function(className) {
 				assert.ok(label.classList.contains(className), "root element does contain " + className);
 			});
-
-			nonExistingClasses.forEach(function(className) {
-				assert.notOk(label.classList.contains(className), "root element does not contain " + className);
-			});
 		});
 	});
 
@@ -57,7 +51,7 @@ TestHelper.ready(function() {
 			};
 
 			this.getLabelRoot = function() {
-				return this.label.shadowRoot.querySelector(".sapMLabel");
+				return this.label.shadowRoot.querySelector(".ui5-label-root");
 			};
 		});
 		hooks.beforeEach(function () {
@@ -73,30 +67,6 @@ TestHelper.ready(function() {
 			this.label = null;
 		});
 
-		QUnit.test("set boolean props", function (assert) {
-			assert.expect(2);
-
-			var done = assert.async(),
-				label = this.getLabel(),
-				labelRoot = this.getLabelRoot(),
-				expectedClassеs = ["sapMLabelWrapped", "sapMLabelRequired"],
-				props = [ 'required', 'wrap'];
-
-			// act
-			props.forEach(function(prop) {
-				label[prop] = true;
-			});
-
-			RenderScheduler.whenFinished().then(function () {
-				expectedClassеs.forEach(function(className) {
-					// assert
-					assert.ok(labelRoot.classList.contains(className), "root element contain " + className);
-				});
-
-				done();
-			});
-		});
-
 		QUnit.test("set text", function (assert) {
 			assert.expect(1);
 

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

@@ -5,7 +5,7 @@ describe("General API", () => {
 
 	it("should show required star", () => {
 		const requiredLabelContent = browser.execute(`
-			return window.getComputedStyle(document.querySelector('#required-label').shadowRoot.querySelector(".sapMLabel"), ':before').content;
+			return window.getComputedStyle(document.querySelector('#required-label').shadowRoot.querySelector(".ui5-label-root"), ':before').content;
 		`);
 
 		assert.strictEqual(requiredLabelContent, '"*"', "before's content should be *");