Merge pull request #330 from bethinkpl/IT-5219_outline_item_alignment…

…_fix IT-5219 OutlineItem has different alignment depending on default slot length
bethinkpl · Jan 11, 2024 · 6bf5a19 · 6bf5a19
2 parents 0a86a9e + 126db6d
commit 6bf5a19
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 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">
+		<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">
+		<div class="outlineItem__rightContent" :class="{ '-centeredContent': $slots.default }">
 			<template v-if="$slots.default">
 				<slot />
 			</template>
@@ -78,9 +78,13 @@
 
 	&__rightContent,
 	&__content {
-		align-items: center;
+		align-items: flex-start;
 		column-gap: $space-xxs;
 		display: flex;
+
+		&.-centeredContent {
+			align-items: center;
+		}
 	}
 
 	&__index {