From 97e1b4f6640c1866f994a785db8d4e30aef1431f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 23 Jul 2024 19:18:32 +0200
Subject: [PATCH] fix(NcChip): Remove space of chip icon if not set

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcChip/NcChip.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/NcChip/NcChip.vue b/src/components/NcChip/NcChip.vue
index 69bd018387..89958cd43a 100644
--- a/src/components/NcChip/NcChip.vue
+++ b/src/components/NcChip/NcChip.vue
@@ -8,7 +8,8 @@
 ```vue
 <template>
 	<div style="display: flex; gap: 8px; flex-wrap: wrap;">
-		<NcChip text="Notes.txt" :icon-path="mdiFile" />
+		<NcChip text="Notes.txt" />
+		<NcChip text="Files" :icon-path="mdiFile" />
 		<NcChip text="Color" type="tertiary" :icon-path="mdiPalette" />
 		<NcChip text="Current time" type="primary" :icon-path="mdiClock" no-close />
 	</div>
@@ -33,7 +34,7 @@ export default {
 It is also possible to use custom components for the icon by using the `icon` slot.
 In this example we are using the `NcAvatar` component to render the users avatar as the icon.
 
-*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make then fully fill and align with the the chip*
+*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*
 
 Also it is possible to pass custom actions.
 
@@ -70,7 +71,7 @@ export default {
 
 <template>
 	<div class="nc-chip" :class="{ [`nc-chip--${type}`]: true, 'nc-chip--no-actions': noClose && !hasActions() }">
-		<span class="nc-chip__icon">
+		<span class="nc-chip__icon" :class="{ 'nc-chip__icon--empty': !hasIcon() }">
 			<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->
 			<slot name="icon">
 				<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->
@@ -191,7 +192,6 @@ const onClose = () => {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--default-grid-baseline);
 	border-radius: var(--chip-radius);
 	background-color: var(--color-background-hover);
 
@@ -222,6 +222,7 @@ const onClose = () => {
 	&__icon {
 		// Do neither grow nor shrink, size is fixed
 		flex: 0 0 var(--chip-size);
+		margin-inline-end: var(--default-grid-baseline);
 
 		line-height: 1;
 		display: flex;
@@ -232,6 +233,13 @@ const onClose = () => {
 		overflow: hidden;
 		height: var(--chip-size);
 		width: var(--chip-size);
+
+		&--empty {
+			flex: 1;
+			width: 0;
+			// Add some more space to the border
+			margin-inline-end: calc(2 * var(--default-grid-baseline));
+		}
 	}
 
 	&__actions {