refactor(ui5-title): wrap text by default (#8916)

The text of ui5-title now wraps by default. BREAKING CHANGE: wrapping-type property default value has changed from `None` to `Normal`. Previously long texts would truncate if there is not enough space. Now, long texts would wrap. Related to: #8461
SAP · May 9, 2024 · f267f50 · f267f50
1 parent 9fb21bf
commit f267f50
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 37 deletions.
diff --git a/packages/fiori/src/IllustratedMessage.hbs b/packages/fiori/src/IllustratedMessage.hbs
@@ -9,7 +9,7 @@
 					{{#if hasFormattedTitle}}
 						<slot name="title"></slot>
 					{{else}}
-						<ui5-title wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+						<ui5-title>{{effectiveTitleText}}</ui5-title>
 					{{/if}}
 				</div>
 			{{/if}}

diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -17,8 +17,8 @@
 		{{#if _showNoData}}
 			<div class="{{classes.noFiles}}">
 				<ui5-illustrated-message name="Tent">
-					<ui5-title slot="title" class="title" level="H2">{{_noDataText}}</ui5-title>
-					<span slot="subtitle" class="subtitle">{{_noDataDescription}}</span>
+					<ui5-title slot="title" wrapping-type="None" level="H2">{{_noDataText}}</ui5-title>
+					<span slot="subtitle">{{_noDataDescription}}</span>
 				</ui5-illustrated-message>
 			</div>
 		{{/if}}

diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -16,7 +16,7 @@
 						@click="{{_navigateToFilters}}"
 					></ui5-button>
 				{{/if}}
-				<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
+				<ui5-title wrapping-type="None" class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
 			</div>
 			<div class="ui5-vsd-header-end">
 				<ui5-button

diff --git a/packages/fiori/test/pages/F6TestPage.html b/packages/fiori/test/pages/F6TestPage.html
@@ -283,23 +283,23 @@
 
 				<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
 					<p>
-						<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5">"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" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5">"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" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+						<ui5-title level="H5">"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/pages/FCL.html b/packages/fiori/test/pages/FCL.html
@@ -55,7 +55,7 @@
 							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
 						</ui5-message-strip><br>
 
-						<ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
+						<ui5-label>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
 						</ui5-label>
 						<ui5-button id="btnOpenDialog" class="fcl8auto">Open Wizard Dialog</ui5-button>
 					</div>
@@ -644,23 +644,23 @@
 
 			<section class="fcl21auto">
 				<p>
-					<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5">"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" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5">"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" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+					<ui5-title level="H5">"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/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs
@@ -9,6 +9,7 @@
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
 			level="H5"
+			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
 	<div>

diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -20,7 +20,13 @@
 			{{else}}
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
-						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
+						<ui5-title 
+							level="H2"
+							wrapping-type="None"
+							class="ui5-popup-header-text ui5-responsive-popover-header-text"
+						>
+							{{headerText}}
+						</ui5-title>
 					{{/if}}
 					{{#unless _hideCloseButton}}
 						<ui5-button

diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
@@ -41,10 +41,10 @@ class Title extends UI5Element {
 	 * Defines how the text of a component will be displayed when there is not enough space.
 	 *
 	 * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
-	 * @default "None"
+	 * @default "Normal"
 	 * @public
 	 */
-	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	@property({ type: WrappingType, defaultValue: WrappingType.Normal })
 	wrappingType!: `${WrappingType}`
 
 	/**

diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
@@ -15,7 +15,13 @@
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header">
 			<div class="row">
-				<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{morePopoverTitle}}</ui5-title>
+				<ui5-title
+					level="H5"
+					wrapping-type="None"
+					class="ui5-responsive-popover-header-text"
+				>
+					{{morePopoverTitle}}
+				</ui5-title>
 			</div>
 		</div>
 	{{/if}}

diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -36,6 +36,10 @@
 	user-select: text;
 }
 
+::slotted([slot="header"]) {
+	max-width: 100%;
+}
+
 .ui5-popup-root {
 	display: flex;
 	flex-direction: column;

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
@@ -19,7 +19,6 @@
 	box-sizing: border-box;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	white-space: nowrap;
 	max-width: 100%;
 	vertical-align: bottom;
 	-webkit-margin-before: 0;
@@ -30,11 +29,19 @@
 	cursor: inherit;
 }
 
-:host([wrapping-type="Normal"]) .ui5-title-root,
-:host([wrapping-type="Normal"]) ::slotted(*) {
+:host {
 	white-space: pre-line;
 }
 
+:host([wrapping-type="None"]) {
+	white-space: nowrap;
+}
+
+.ui5-title-root,
+:host ::slotted(*) {
+	white-space: inherit;
+}
+
 ::slotted(*) {
 	font-size: inherit;
 	font-family: inherit;

diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
@@ -19,12 +19,12 @@
 
 <body class="datetimepicker1auto">
 	<section>
-		<ui5-title wrapping-type="Normal">DateTimePicker</ui5-title><br>
+		<ui5-title>DateTimePicker</ui5-title><br>
 		<ui5-datetime-picker id="dt"></ui5-datetime-picker>
 	</section>
 
 	<section>
-		<ui5-title wrapping-type="Normal">DateTimePicker format pattern</ui5-title>
+		<ui5-title>DateTimePicker format pattern</ui5-title>
 
 		<br><ui5-label>Default format pattern</ui5-label><br>
 		<ui5-datetime-picker
@@ -85,7 +85,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrapping-type="Normal">DateTimePicker with no format pattern & min-max dates in ISO format</ui5-title><br>
+		<ui5-title>DateTimePicker with no format pattern & min-max dates in ISO format</ui5-title><br>
 		<ui5-datetime-picker
 				id="dtMinMaxDatesISO"
 				min-date="2023-05-01"
@@ -94,7 +94,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrapping-type="Normal">Test DateTimePicker change event on submit</ui5-title>
+		<ui5-title>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 wrapping-type="Normal">Test DateTimePicker change event on cancel</ui5-title>
+		<ui5-title>Test DateTimePicker change event on cancel</ui5-title>
 		<br/>
 
 		<ui5-datetime-picker id="dt2"></ui5-datetime-picker><br>
@@ -138,7 +138,7 @@
 		</ui5-datetime-picker>
 
 	<section>
-		<ui5-title wrapping-type="Normal">DateTimePicker states</ui5-title>
+		<ui5-title>DateTimePicker states</ui5-title>
 		<ui5-datetime-picker value-state="Negative"></ui5-datetime-picker>
 		<ui5-datetime-picker value-state="Critical"></ui5-datetime-picker>
 		<ui5-datetime-picker value-state="Information"></ui5-datetime-picker>
@@ -149,7 +149,7 @@
 	</section>
 
 	<section class="sapUiSizeCompact">
-		<ui5-title wrapping-type="Normal">DateTimePicker compact size</ui5-title>
+		<ui5-title>DateTimePicker compact size</ui5-title>
 		<ui5-datetime-picker
 		></ui5-datetime-picker>
 
@@ -161,7 +161,7 @@
 	</section>
 
 	<section>
-		<ui5-title wrapping-type="Normal">DateTimePicker with secondary calendar type</ui5-title>
+		<ui5-title>DateTimePicker with secondary calendar type</ui5-title>
 		<ui5-datetime-picker
 			id="secondaryCalendar"
 			value="Sha. 24, 1443 AH, 10:27:26 AM"

diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
@@ -29,8 +29,8 @@
 
 	<section class="wrapping">
 		<h2>Wrapping</h2>
-		<ui5-title level="H6" id="truncated-title">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>
+		<ui5-title level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
 	</section>
 
 	<section>
@@ -47,10 +47,10 @@ <h2>Usage With ui5-link</h2>
 		<div class="wrapping">
 			<h2>Wrapping With Link</h2>
 			<ui5-title level="H6">
-				<ui5-link design="Default">Truncated With Link (60) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
+				<ui5-link design="Default">Wrapping With Link (60) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
 			</ui5-title>
-			<ui5-title level="H6" wrapping-type="Normal">
-				<ui5-link design="Default">Wrapping With Link (61) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
+			<ui5-title level="H6" wrapping-type="None">
+				<ui5-link design="Default">Truncated With Link (61) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
 			</ui5-title>
 		</div>
 	</section>

diff --git a/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts b/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts
@@ -471,7 +471,7 @@ Basic.args = {
           style="padding: 1rem 1rem; background: var(--sapList_Background);"
         >
           <p>
-            <ui5-title level="H5" wrapping-type="Normal"
+            <ui5-title level="H5"
               >"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
@@ -482,7 +482,7 @@ Basic.args = {
             </ui5-title>
           </p>
           <p>
-            <ui5-title level="H5" wrapping-type="Normal"
+            <ui5-title level="H5"
               >"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
@@ -493,7 +493,7 @@ Basic.args = {
             </ui5-title>
           </p>
           <p>
-            <ui5-title level="H5" wrapping-type="Normal"
+            <ui5-title level="H5"
               >"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

diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/sample.html
@@ -144,7 +144,7 @@
             </ui5-tabcontainer>
             <section style="padding: 1rem 1rem; background: var(--sapList_Background);">
                 <p>
-                    <ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing
+                    <ui5-title level="H5">"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
@@ -155,7 +155,7 @@
                     </ui5-title>
                 </p>
                 <p>
-                    <ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing
+                    <ui5-title level="H5">"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
@@ -166,7 +166,7 @@
                     </ui5-title>
                 </p>
                 <p>
-                    <ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing
+                    <ui5-title level="H5">"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