fix(ui5-li): correct truncation behaviour of info text (#2330)

Fixes: #2317

Author: nnaydenow

packages/main/src/StandardListItem.hbs

@@ -1,18 +1,26 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-title-wrapper">
+	<div class="ui5-li-text-wrapper">
 		<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{#if description}}
-			<span part="description" class="ui5-li-desc">{{description}}</span>
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">{{description}}</span>
+
+				{{#if info}}
+					<span part="info" class="ui5-li-info">{{info}}</span>
+				{{/if}}
+			</div>
 		{{/if}}
 		{{#unless typeActive}}
 			<span class="ui5-hidden-text">{{type}}</span>
 		{{/unless}}
 	</div>
-	{{#if info}}
-		<span part="info" class="ui5-li-info">{{info}}</span>
-	{{/if}}
+	{{#unless description}}
+		{{#if info}}
+			<span part="info" class="ui5-li-info">{{info}}</span>
+		{{/if}}
+	{{/unless}}
 {{/inline}}
 
 {{#*inline "imageBegin"}}

packages/main/src/SuggestionListItem.hbs

@@ -1,25 +1,33 @@
 {{>include "./StandardListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-title-wrapper">
+	<div class="ui5-li-text-wrapper">
 		{{#if hasTitle}}
 			<span part="title" class="ui5-li-title"><slot></slot></span>
 		{{/if}}
 		{{#if hasDescription}}
-			<span part="description" class="ui5-li-desc">
-				{{#if richDescription.length}}
-					<slot name="richDescription"></slot>
-				{{else}}
-					{{description}}
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">
+					{{#if richDescription.length}}
+						<slot name="richDescription"></slot>
+					{{else}}
+						{{description}}
+					{{/if}}
+				</span>
+
+				{{#if info}}
+					<span part="info" class="ui5-li-info">{{info}}</span>
 				{{/if}}
-			</span>
+			</div>
 		{{/if}}
 		{{#unless typeActive}}
 			<span class="ui5-hidden-text">{{type}}</span>
 		{{/unless}}
 	</div>
-	{{#if info}}
-		<span part="info" class="ui5-li-info">{{info}}</span>
-	{{/if}}
+	{{#unless hasDescription}}
+		{{#if info}}
+			<span part="info" class="ui5-li-info">{{info}}</span>
+		{{/if}}
+	{{/unless}}
 {{/inline}}
 

packages/main/src/themes/ListItem.css

@@ -81,25 +81,31 @@
 	padding-bottom: 0.375rem;
 }
 
-.ui5-li-title-wrapper {
+.ui5-li-text-wrapper {
 	display: flex;
 	flex-direction: column;
 	flex: auto;
 	min-width: 1px;
 	line-height: normal;
 }
 
-:host([description]) .ui5-li-title-wrapper {
+:host([description]) .ui5-li-text-wrapper {
 	height: 100%;
 	justify-content: space-between;
 	padding: 0.125rem 0;
 }
 
+.ui5-li-description-info-wrapper {
+	display: flex;
+	justify-content: space-between;
+}
+
 .ui5-li-title {
 	color: var(--sapTextColor);
 	font-size: var(--_ui5_list_item_title_size);
 }
 
+.ui5-li-info,
 .ui5-li-title,
 .ui5-li-desc {
 	white-space: nowrap;
@@ -116,10 +122,9 @@
 	margin: 0 0.25rem;
 	color: var(--sapNeutralTextColor);
 	font-size: 0.875rem;
-	flex-shrink: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	min-width: 6rem;
+	text-align: right;
+	max-width: 40%;
 }
 
 :host([description]) .ui5-li-info {
@@ -201,6 +206,10 @@
 	margin: .5rem 0 .5rem 0.75rem;
 }
 
+[dir="rtl"] .ui5-li-info {
+	text-align: left;
+}
+
 :host([_mode="SingleSelectBegin"]) [dir="rtl"].ui5-li-root {
 	padding-right: 0;
 	padding-left: 1rem;