IT-5219 better OutlineItem content centering condition

bethinkpl · Jan 5, 2024 · 5ba73b2 · 5ba73b2
1 parent 9926988
commit 5ba73b2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git 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
@@ -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>