refactor(ui5-title): clean up styles (#662)

SAP · Jul 23, 2019 · 535fc47 · 535fc47
1 parent 8e4eb6d
commit 535fc47
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 100 deletions.
diff --git a/packages/main/src/Title.hbs b/packages/main/src/Title.hbs
@@ -1,41 +1,41 @@
 {{#if h1}}
 		<h1
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h1>
 {{/if}}
 
 {{#if h2}}
 		<h2
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h2>
 {{/if}}
 
 {{#if h3}}
 		<h3
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h3>
 {{/if}}
 
 {{#if h4}}
 		<h4
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h4>
 {{/if}}
 
 {{#if h5}}
 		<h5
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h5>
 {{/if}}
 
 {{#if h6}}
 		<h6
-			class="{{classes.main}}">
+			class="ui5-title-root">
 				{{> titleInner}}
 		</h6>
 {{/if}}

diff --git a/packages/main/src/Title.js b/packages/main/src/Title.js
@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import TitleLevel from "./types/TitleLevel.js";
+
+// Template
 import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
 
 // Styles
@@ -115,17 +117,6 @@ class Title extends UI5Element {
 	get h6() {
 		return this.normalizedLevel === "h6";
 	}
-
-	get classes() {
-		return {
-			main: {
-				sapMTitle: true,
-				sapMTitleWrap: this.wrap,
-				sapUiSelectable: true,
-				[`sapMTitleStyle${this.level}`]: true,
-			},
-		};
-	}
 }
 
 Title.define();

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
@@ -1,21 +1,15 @@
-:host(ui5-title:not([hidden])) {
+:host(:not([hidden])) {
 	display: block;
-	max-width: 100%;
-	color: var(--sapUiGroupTitleTextColor);
-	font-family: var(--sapUiFontHeaderFamily);
-	text-shadow: var(--sapUiShadowText);
 }
 
-ui5-title:not([hidden]) {
-	display: block;
-	overflow: hidden;
+:host {
+	max-width: 100%;
 	color: var(--sapUiGroupTitleTextColor);
 	font-family: var(--sapUiFontHeaderFamily);
 	text-shadow: var(--sapUiShadowText);
-	max-width: 100%;
 }
 
-.sapMTitle {
+.ui5-title-root {
 	display: inline-block;
 	position: relative;
 	font-weight: var(--sapUiFontHeaderWeight);
@@ -33,36 +27,86 @@ ui5-title:not([hidden]) {
 	cursor: text;
 }
 
-.sapMTitle.sapMTitleWrap {
+:host([wrap]) .ui5-title-root {
+	white-space: pre-line;
+}
+
+/* Level H1 */
+:host([level="H1"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader1Size);
+}
+
+/* Level H2 */
+:host([level="H2"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader2Size);
+}
+
+/* Level H3 */
+:host([level="H3"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader3Size);
+}
+
+/* Level H4 */
+:host([level="H4"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader4Size);
+}
+
+/* Level H5 */
+:host([level="H5"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader5Size);
+}
+
+/* Level H6 */
+:host([level="H6"]) .ui5-title-root {
+	font-size: var(--sapMFontHeader6Size);
+}
+
+/*
+ * IE pair of styles
+ *
+ */
+ ui5-title:not([hidden]) {
+	display: block;
+}
+
+ui5-title {
+	overflow: hidden;
+	color: var(--sapUiGroupTitleTextColor);
+	font-family: var(--sapUiFontHeaderFamily);
+	text-shadow: var(--sapUiShadowText);
+	max-width: 100%;
+}
+
+ui5-title[wrap] .ui5-title-root {
 	white-space: pre-line;
 }
 
 /* Level H1 */
-.sapMTitleStyleH1 {
+ui5-title[level="H1"] .ui5-title-root {
 	font-size: var(--sapMFontHeader1Size);
 }
 
 /* Level H2 */
-.sapMTitleStyleH2 {
+ui5-title[level="H2"] .ui5-title-root {
 	font-size: var(--sapMFontHeader2Size);
 }
 
 /* Level H3 */
-.sapMTitleStyleH3 {
+ui5-title[level="H3"] .ui5-title-root {
 	font-size: var(--sapMFontHeader3Size);
 }
 
 /* Level H4 */
-.sapMTitleStyleH4 {
+ui5-title[level="H4"] .ui5-title-root {
 	font-size: var(--sapMFontHeader4Size);
 }
 
 /* Level H5 */
-.sapMTitleStyleH5 {
+ui5-title[level="H5"] .ui5-title-root {
 	font-size: var(--sapMFontHeader5Size);
 }
 
 /* Level H6 */
-.sapMTitleStyleH6 {
+ui5-title[level="H6"] .ui5-title-root {
 	font-size: var(--sapMFontHeader6Size);
 }
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/Title.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/Title.qunit.js
@@ -7,7 +7,7 @@ TestHelper.ready(function() {
 	QUnit.module("Rendering", function (hooks) {
 		hooks.before(function() {
 			this.getTitleRoot = function() {
-				return this.title.shadowRoot.querySelector(".sapMTitle");
+				return this.title.shadowRoot.querySelector(".ui5-title-root");
 			};
 		});
 		hooks.beforeEach(function () {
@@ -28,70 +28,5 @@ TestHelper.ready(function() {
 
 			assert.ok(titleRoot, "root element is in the DOM");
 		});
-
-		QUnit.test("Default settings", function (assert) {
-			assert.expect(3);
-
-			var titleRoot = this.getTitleRoot(),
-				existingClasses = ["sapMTitle", "sapUiSelectable", "sapMTitleStyleH2"];
-
-			existingClasses.forEach(function(className) {
-				assert.ok(titleRoot.classList.contains(className), "root element does contain " + className);
-			});
-		});
-	});
-
-	QUnit.module("API", function (hooks) {
-		hooks.before(function() {
-			this.getTitleRoot = function() {
-				return this.title.shadowRoot.querySelector(".sapMTitle");
-			};
-		});
-		hooks.beforeEach(function () {
-			var html = '<ui5-title id="myTitle">label</ui5-title>';
-			fixture.innerHTML = html;
-
-			this.title = document.getElementById("myTitle");
-
-			return RenderScheduler.whenFinished();
-		});
-		hooks.afterEach(function () {
-			fixture.innerHTML = "";
-			this.title = null;
-		});
-
-		QUnit.test("set string props", function (assert) {
-			assert.expect(2);
-
-			var done = assert.async(),
-				title = this.title,
-				titleRoot = this.getTitleRoot(),
-				expectedLevel = 'H2',
-				expectedClass1 = "sapMTitleStyleH2",
-				expectedClass2 = "sapMTitleWrap",
-				expectedWrap = true;
-
-			var props = [{
-					prop: "level",
-					value: expectedLevel
-				}, {
-					prop: "wrap",
-					value: expectedWrap
-				}];
-
-			props.forEach(function(propInfo) {
-				// act
-				title[propInfo.prop] = propInfo.value;
-			});
-
-			RenderScheduler.whenFinished().then(function () {
-				// assert
-				// assert
-				assert.ok(titleRoot.classList.contains(expectedClass1), "root element does contain " + expectedClass1);
-				assert.ok(titleRoot.classList.contains(expectedClass2), "root element does contain " + expectedClass2);
-
-				done();
-			});
-		});
 	});
 });