From d3bf1318cff205592452455b8a962be7e6beff63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <piotr.ziolkowski@bethink.pl>
Date: Thu, 4 Jan 2024 12:19:59 +0100
Subject: [PATCH 1/5] IT-5219 OutlineItem has different alignment depending on
 default slot length

---
 .../Outline/OutlineItem/OutlineItem.vue       | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index 51e8f42ee..402004a1c 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -9,7 +9,7 @@
 			'-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
 		}"
 	>
-		<div class="outlineItem__content">
+		<div class="outlineItem__content" :class="{ '--centerContent': slotIsNotEmpty }">
 			<span
 				v-if="index !== null"
 				class="outlineItem__index"
@@ -35,10 +35,10 @@
 				</span>
 			</span>
 		</div>
-		<div class="outlineItem__rightContent">
-			<template v-if="$slots.default">
+		<div class="outlineItem__rightContent" :class="{ '--centerContent': slotIsNotEmpty }">
+			<div v-if="$slots.default" ref="defaultSlotWrapper" class="outlineItem__slotWrapper">
 				<slot />
-			</template>
+			</div>
 			<ds-icon
 				v-if="isDone"
 				class="outlineItem__icon -active"
@@ -78,9 +78,18 @@
 
 	&__rightContent,
 	&__content {
-		align-items: center;
+		align-items: flex-start;
 		column-gap: $space-xxs;
 		display: flex;
+
+		&.--centerContent {
+			align-items: center;
+		}
+	}
+
+	&__slotWrapper {
+		// this rule is needed because div's block display is making whole component height bigger
+		display: flex;
 	}
 
 	&__index {
@@ -283,6 +292,7 @@ export default {
 	},
 	data() {
 		return {
+			slotIsNotEmpty: false,
 			ICONS: Object.freeze(ICONS),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 			OUTLINE_ITEM_BACKGROUND_COLORS: Object.freeze(OUTLINE_ITEM_BACKGROUND_COLORS),
@@ -294,5 +304,9 @@ export default {
 			return this.state === OUTLINE_ITEM_STATES.DISABLED;
 		},
 	},
+	mounted() {
+		console.debug(this.$refs.defaultSlotWrapper);
+		this.slotIsNotEmpty = this.$refs.defaultSlotWrapper?.textContent.length > 0;
+	},
 };
 </script>

From 9926988ebc8c2e5a37f7197627b04cf61b00ce14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <piotr.ziolkowski@bethink.pl>
Date: Thu, 4 Jan 2024 14:17:18 +0100
Subject: [PATCH 2/5] IT-5219 remove console.log

---
 lib/js/components/Outline/OutlineItem/OutlineItem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index 402004a1c..ccde882e3 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -305,7 +305,6 @@ export default {
 		},
 	},
 	mounted() {
-		console.debug(this.$refs.defaultSlotWrapper);
 		this.slotIsNotEmpty = this.$refs.defaultSlotWrapper?.textContent.length > 0;
 	},
 };

From 5ba73b26475cc3cd027d1555b54f9405a0a59364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <piotr.ziolkowski@bethink.pl>
Date: Fri, 5 Jan 2024 11:35:41 +0100
Subject: [PATCH 3/5] IT-5219 better OutlineItem content centering condition

---
 .../Outline/OutlineItem/OutlineItem.stories.ts | 18 ++++++++++--------
 .../Outline/OutlineItem/OutlineItem.vue        | 12 ++++--------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts b/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts
index 78144f695..0ef3f9fed 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.stories.ts
@@ -24,14 +24,16 @@ const StoryTemplate: StoryFn<typeof OutlineItem> = (args) => ({
 		};
 	},
 	template: `
-      <outline-item :label="label" :additional-text="additionalText" :size="size" :state="state"
-                    :icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
-                    :is-selected="isSelected" :background-color="backgroundColor" :index="index"
-                    :is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation"
-                    :has-selected-icons-color-primary="hasSelectedIconsColorPrimary"
-                    :is-selected-interactive="isSelectedInteractive">
-      <ds-pill v-if="defaultSlot.length > 0" :label="defaultSlot" />
-      </outline-item>`,
+		<outline-item :label="label" :additional-text="additionalText" :size="size" :state="state"
+									:icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
+									:is-selected="isSelected" :background-color="backgroundColor" :index="index"
+									:is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation"
+									:has-selected-icons-color-primary="hasSelectedIconsColorPrimary"
+									:is-selected-interactive="isSelectedInteractive">
+			<template #default v-if="defaultSlot.length > 0">
+				<ds-pill :label="defaultSlot" />
+			</template>
+		</outline-item>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index ccde882e3..69f31e44f 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -9,7 +9,7 @@
 			'-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
 		}"
 	>
-		<div class="outlineItem__content" :class="{ '--centerContent': slotIsNotEmpty }">
+		<div class="outlineItem__content" :class="{ '--centerContent': $slots.default }">
 			<span
 				v-if="index !== null"
 				class="outlineItem__index"
@@ -35,10 +35,10 @@
 				</span>
 			</span>
 		</div>
-		<div class="outlineItem__rightContent" :class="{ '--centerContent': slotIsNotEmpty }">
-			<div v-if="$slots.default" ref="defaultSlotWrapper" class="outlineItem__slotWrapper">
+		<div class="outlineItem__rightContent" :class="{ '--centerContent': $slots.default }">
+			<template v-if="$slots.default">
 				<slot />
-			</div>
+			</template>
 			<ds-icon
 				v-if="isDone"
 				class="outlineItem__icon -active"
@@ -292,7 +292,6 @@ export default {
 	},
 	data() {
 		return {
-			slotIsNotEmpty: false,
 			ICONS: Object.freeze(ICONS),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 			OUTLINE_ITEM_BACKGROUND_COLORS: Object.freeze(OUTLINE_ITEM_BACKGROUND_COLORS),
@@ -304,8 +303,5 @@ export default {
 			return this.state === OUTLINE_ITEM_STATES.DISABLED;
 		},
 	},
-	mounted() {
-		this.slotIsNotEmpty = this.$refs.defaultSlotWrapper?.textContent.length > 0;
-	},
 };
 </script>

From 2d1cbbe5d3f44fb75567d3595e8821544358eaca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <piotr.ziolkowski@bethink.pl>
Date: Fri, 5 Jan 2024 11:36:34 +0100
Subject: [PATCH 4/5] IT-5219 remove unused css class

---
 lib/js/components/Outline/OutlineItem/OutlineItem.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index 69f31e44f..7c7dd70eb 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -87,11 +87,6 @@
 		}
 	}
 
-	&__slotWrapper {
-		// this rule is needed because div's block display is making whole component height bigger
-		display: flex;
-	}
-
 	&__index {
 		@include label-l-default-bold;
 

From 126db6db518c4493965b5ea86f4427f5ced915f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?=
 <kvas-damian@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:37:44 +0100
Subject: [PATCH 5/5] --centerContent => -centeredContent

---
 lib/js/components/Outline/OutlineItem/OutlineItem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index 7c7dd70eb..8ce9c13e9 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -9,7 +9,7 @@
 			'-backgroundNeutral': backgroundColor === OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL,
 		}"
 	>
-		<div class="outlineItem__content" :class="{ '--centerContent': $slots.default }">
+		<div class="outlineItem__content" :class="{ '-centeredContent': $slots.default }">
 			<span
 				v-if="index !== null"
 				class="outlineItem__index"
@@ -35,7 +35,7 @@
 				</span>
 			</span>
 		</div>
-		<div class="outlineItem__rightContent" :class="{ '--centerContent': $slots.default }">
+		<div class="outlineItem__rightContent" :class="{ '-centeredContent': $slots.default }">
 			<template v-if="$slots.default">
 				<slot />
 			</template>
@@ -82,7 +82,7 @@
 		column-gap: $space-xxs;
 		display: flex;
 
-		&.--centerContent {
+		&.-centeredContent {
 			align-items: center;
 		}
 	}