From bc1645c3faf178982e68ec2c4f8a739182f6c974 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Mon, 18 Jul 2022 22:40:39 +0200
Subject: [PATCH 1/2] Allow oneLine ListItem

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/ListItem/ListItem.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
index b6a4e46d3a..975f7f7706 100644
--- a/src/components/ListItem/ListItem.vue
+++ b/src/components/ListItem/ListItem.vue
@@ -145,7 +145,8 @@
 
 				<!-- Main content -->
 				<div class="list-item-content">
-					<div class="list-item-content__main">
+					<div class="list-item-content__main"
+						:class="{ 'list-item-content__main--oneline': oneLine }">
 
 						<!-- First line, title and details -->
 						<div class="line-one"
@@ -360,6 +361,10 @@ export default {
 			}
 		},
 
+		oneLine() {
+			return !this.hasSubtitle && !this.showDetails
+		},
+
 		showCounter() {
 			return !this.displayActionsOnHoverFocus || this.forceDisplayActions
 		},
@@ -500,6 +505,7 @@ export default {
 	&-content__wrapper {
 		display: flex;
 		align-items: center;
+		height: 48px;
 	}
 
 	&-content {
@@ -510,16 +516,19 @@ export default {
 
 		&__main {
 			flex: 1 1 auto;
-			flex-direction: column;
 			width: 0;
 			margin: auto 0;
+
+			&--oneline {
+				display: flex;
+			}
 		}
 
 		&__actions {
 			flex: 0 0 auto;
 			align-self: center;
 			justify-content: center;
-
+			margin-left: 4px;
 		}
 	}
 
@@ -533,7 +542,8 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	white-space: nowrap;
-	margin: 0 auto;
+	margin: 0 auto 0 0;
+	overflow: hidden;
 	&--bold {
 		font-weight: bold;
 	}
@@ -565,7 +575,6 @@ export default {
 	&__subtitle {
 		overflow: hidden;
 		flex-grow: 1;
-		padding-right: 4px;
 		cursor: pointer;
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -573,7 +582,7 @@ export default {
 	}
 
 	&__counter {
-		margin: 2px 4px 0 0;
+		margin: 2px 4px 0 4px;
 	}
 }
 

From d60ccfaa7a8718cfa7a830be73c56ce040da4e4e Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Mon, 18 Jul 2022 23:08:56 +0200
Subject: [PATCH 2/2] Introduce compact mode

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/ListItem/ListItem.vue | 81 +++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 2 deletions(-)

diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
index 975f7f7706..04da527e36 100644
--- a/src/components/ListItem/ListItem.vue
+++ b/src/components/ListItem/ListItem.vue
@@ -20,7 +20,7 @@
 -->
 <docs>
 
-# Usage
+### Default Usage
 ```
 <ul>
 	<listItem
@@ -118,6 +118,65 @@
 	</listItem>
 </ul>
 
+```
+
+### ListItem compact mode
+```
+<ul style="width: 350px;">
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=1
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+		<template #subtitle>
+			This one is with subtitle
+		</template>
+		<template #actions>
+			<ActionButton>
+				Button one
+			</ActionButton>
+			<ActionButton>
+				Button two
+			</ActionButton>
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=3
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+		<template #subtitle>
+			This one is with subtitle
+		</template>
+		<template #actions>
+			<ActionButton>
+				Button one
+			</ActionButton>
+			<ActionButton>
+				Button two
+			</ActionButton>
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=4
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+	</listItem>
+</ul>
 ```
 </docs>
 
@@ -139,7 +198,8 @@
 			@click="onClick"
 			@keydown.esc="hideActions">
 
-			<div class="list-item-content__wrapper">
+			<div class="list-item-content__wrapper"
+				:class="{ 'list-item-content__wrapper--compact': compact }">
 				<!-- @slot This slot is used for the avatar or icon -->
 				<slot name="icon" />
 
@@ -275,6 +335,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Show the ListItem in compact design
+		 */
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Toggle the active state of the component
 		 */
@@ -506,6 +574,15 @@ export default {
 		display: flex;
 		align-items: center;
 		height: 48px;
+
+		&--compact {
+			height: 36px;
+
+			.line-one, .line-two {
+				margin-top: -4px;
+				margin-bottom: -4px;
+			}
+		}
 	}
 
 	&-content {