SAP · fifoosid · Jun 3, 2021 · Jun 2, 2021 · Jun 3, 2021
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-3/PSzZvk10reeCuZDjQUmFqeOI4=
+qIoCWcnUsXXyku4AAXsM1nFtY+s=
diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -19,7 +19,7 @@
 				<div class="icon-container">
 					<ui5-icon name="document"></ui5-icon>
 				</div>
-				<ui5-title level="H2" wrap>{{_noDataText}}</ui5-title>
+				<ui5-title level="H2" wrapping-type="Normal">{{_noDataText}}</ui5-title>
 				<ui5-label class="subtitle" wrap>{{_noDataDescription}}</ui5-label>
 			</div>
 		{{else if _showDndOverlay}}

diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html
@@ -659,23 +659,23 @@
 
 			<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
 				<p>
-					<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 					et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 					aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 					culpa qui officia deserunt mollit anim id est laborum.
 					</ui5-title>
 				</p>
 				<p>
-					<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 					et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 					aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 					culpa qui officia deserunt mollit anim id est laborum.
 					</ui5-title>
 				</p>
 				<p>
-					<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 					et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 					aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

diff --git a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html
@@ -187,23 +187,23 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
 
 				<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
 					<p>
-						<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 						et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 						aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 						culpa qui officia deserunt mollit anim id est laborum.
 						</ui5-title>
 					</p>
 					<p>
-						<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 						et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 						aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 						culpa qui officia deserunt mollit anim id est laborum.
 						</ui5-title>
 					</p>
 					<p>
-						<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
 						et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 						aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

diff --git a/packages/main/src/Title.js b/packages/main/src/Title.js
@@ -1,6 +1,7 @@
 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";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
@@ -16,14 +17,20 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
 
 		/**
-		 * Defines whether the component would wrap.
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
-		*/
-		wrap: {
-			type: Boolean,
+		 */
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
@@ -30,7 +30,7 @@
 	cursor: inherit;
 }
 
-:host([wrap]) .ui5-title-root {
+:host([wrapping-type="Normal"]) .ui5-title-root {
 	white-space: pre-line;
 }
 

diff --git a/packages/main/src/types/WrappingType.js b/packages/main/src/types/WrappingType.js
@@ -0,0 +1,41 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of wrapping.
+ * @lends sap.ui.webcomponents.main.types.WrappingType.prototype
+ * @public
+ */
+const WrappingTypes = {
+	/**
+	 * The text will be truncated with an ellipsis.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+
+	/**
+	 * The text will wrap. The words will not be broken based on hyphenation.
+	 * @public
+	 * @type {Normal}
+	 */
+	Normal: "Normal",
+};
+
+/**
+ * @class
+ * Defines how the text of a component will be displayed when there is not enough space.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.WrappingType
+ * @public
+ * @enum {string}
+ */
+class WrappingType extends DataType {
+	static isValid(value) {
+		return !!WrappingTypes[value];
+	}
+}
+
+WrappingType.generateTypeAccessors(WrappingTypes);
+
+export default WrappingType;
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
@@ -28,12 +28,12 @@
 
 <body style="background-color: var(--sapBackgroundColor);">
 	<section>
-		<ui5-title wrap>DateTimePicker</ui5-title><br>
+		<ui5-title wrapping-type="Normal">DateTimePicker</ui5-title><br>
 		<ui5-datetime-picker id="dt"></ui5-datetime-picker>
 	</section>
 
 	<section>
-		<ui5-title wrap>DateTimePicker format pattern</ui5-title>
+		<ui5-title wrapping-type="Normal">DateTimePicker format pattern</ui5-title>
 
 		<br><ui5-label>Default format pattern</ui5-label><br>
 		<ui5-datetime-picker
@@ -94,7 +94,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrap>Test DateTimePicker change event on submit</ui5-title>
+		<ui5-title wrapping-type="Normal">Test DateTimePicker change event on submit</ui5-title>
 		<br>
 
 		<ui5-datetime-picker id="dt1"></ui5-datetime-picker><br>
@@ -112,7 +112,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrap>Test DateTimePicker change event on cancel</ui5-title>
+		<ui5-title wrapping-type="Normal">Test DateTimePicker change event on cancel</ui5-title>
 		<br/>
 
 		<ui5-datetime-picker id="dt2"></ui5-datetime-picker><br>
@@ -139,7 +139,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrap>DateTimePicker states</ui5-title>
+		<ui5-title wrapping-type="Normal">DateTimePicker states</ui5-title>
 		<ui5-datetime-picker value-state="Error"></ui5-datetime-picker>
 		<ui5-datetime-picker value-state="Warning"></ui5-datetime-picker>
 		<ui5-datetime-picker value-state="Information"></ui5-datetime-picker>
@@ -150,7 +150,7 @@
 	</section>
 
 	<section class="sapUiSizeCompact">
-		<ui5-title wrap>DateTimePicker compact size</ui5-title>
+		<ui5-title wrapping-type="Normal">DateTimePicker compact size</ui5-title>
 		<ui5-datetime-picker
 		></ui5-datetime-picker>
 

diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
@@ -26,5 +26,11 @@
 		<ui5-title id="titleH6" level="H6">Title level 6</ui5-title>
 		<ui5-title level="H2">Very long long long text of title title with level two</ui5-title>
 	</section>
+
+	<section style="width: 200px; border: 1px solid #ccc">
+		<h2>Wrapping</h2>
+		<ui5-title level="H6" id="truncated-title" style="margin-bottom: 1rem;">Truncated title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
+		<ui5-title level="H6" wrapping-type="Normal" id="wrapping-title">Wrapping title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
+	</section>
 </body>
 </html>
diff --git a/packages/main/test/specs/Components.spec.js b/packages/main/test/specs/Components.spec.js
@@ -26,7 +26,6 @@ describe("General assertions", () => {
 		const radiobutton = browser.$("#radioBtn");
 		const sw = browser.$("#sw");
 		const toggleBtn = browser.$("#toggleBtn");
-		const title = browser.$("#title");
 
 		// Button
 		assertBooleanProperty(button, "submits");
@@ -69,9 +68,6 @@ describe("General assertions", () => {
 		assertBooleanProperty(sw, "checked");
 		assertBooleanProperty(sw, "disabled");
 
-		// Title
-		assertBooleanProperty(title, "wrap");
-
 		// ToggleButton
 		assertBooleanProperty(toggleBtn, "pressed");
 	});

diff --git a/packages/main/test/specs/Title.spec.js b/packages/main/test/specs/Title.spec.js
@@ -21,4 +21,13 @@ describe("Rendering", () => {
 		assert.ok(titleH5.startsWith("<h5"), "h5 tag is rendered for level='H5'");
 		assert.ok(titleH6.startsWith("<h6"), "h6 tag is rendered for level='H6'");
 	});
+
+	it("should wrap the text of the title", () => {
+		const wrappingTitle = browser.$("#wrapping-title");
+		const truncatedTitle = browser.$("#truncated-title");
+
+		assert.strictEqual(truncatedTitle.getSize().height, 16, "truncated title should be single line");
+
+		assert.ok(wrappingTitle.getSize().height > truncatedTitle.getSize().height, "wrapping title should span more than a single line");
+	});
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		3/PSzZvk10reeCuZDjQUmFqeOI4=
		qIoCWcnUsXXyku4AAXsM1nFtY+s=