From c1e9eaf9b4635537ed0328564c65b0bc76e6b07d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Thu, 16 Jan 2025 15:08:41 +0100
Subject: [PATCH 01/10] IT-6082 tooltip is hidden on mobile prop and text group
 supporting text has tooltip

---
 lib/js/components/TextGroup/TextGroup.vue | 34 ++++++++++++++++++++++-
 lib/js/components/Tooltip/Tooltip.vue     | 14 ++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/lib/js/components/TextGroup/TextGroup.vue b/lib/js/components/TextGroup/TextGroup.vue
index a99ab83c1..60529967b 100644
--- a/lib/js/components/TextGroup/TextGroup.vue
+++ b/lib/js/components/TextGroup/TextGroup.vue
@@ -54,7 +54,20 @@
 				<ds-skeleton width="100%" height="100%" />
 			</div>
 			<span v-else-if="supportingText === ''">&nbsp;</span>
-			<span v-else v-html="supportingText" />
+			<template v-else>
+				<ds-tooltip
+					:text="
+						isSupportingTextTooltipAutoFilledWithContent
+							? supportingText
+							: supportingTextTooltipContent
+					"
+					:is-disabled="!isSupportingTextTooltipEnabled"
+					:is-hidden-on-mobile="!isSupportingTextTooltipEnabledOnMobile"
+					inline
+				>
+					<span v-html="supportingText" />
+				</ds-tooltip>
+			</template>
 		</div>
 	</div>
 </template>
@@ -251,11 +264,13 @@ import {
 	TextGroupSize,
 	TextGroupState,
 } from './TextGroup.consts';
+import DsTooltip, { TOOLTIP_PLACEMENTS } from '../Tooltip';
 
 export default defineComponent({
 	name: 'TextGroup',
 	components: {
 		DsSkeleton,
+		DsTooltip,
 	},
 	props: {
 		size: {
@@ -310,11 +325,28 @@ export default defineComponent({
 			type: String as PropType<TextGroupState>,
 			default: TEXT_GROUP_STATES.DEFAULT,
 		},
+		isSupportingTextTooltipEnabled: {
+			type: Boolean,
+			default: true,
+		},
+		isSupportingTextTooltipEnabledOnMobile: {
+			type: Boolean,
+			default: false,
+		},
+		isSupportingTextTooltipAutoFilledWithContent: {
+			type: Boolean,
+			default: true,
+		},
+		supportingTextTooltipContent: {
+			type: [String, null],
+			default: null,
+		},
 	},
 	data() {
 		return {
 			TEXT_GROUP_SIZES: Object.freeze(TEXT_GROUP_SIZES),
 			TEXT_GROUP_STATES: Object.freeze(TEXT_GROUP_STATES),
+			TOOLTIP_PLACEMENTS: Object.freeze(TOOLTIP_PLACEMENTS),
 		};
 	},
 	computed: {
diff --git a/lib/js/components/Tooltip/Tooltip.vue b/lib/js/components/Tooltip/Tooltip.vue
index 37ac0f245..01981203f 100644
--- a/lib/js/components/Tooltip/Tooltip.vue
+++ b/lib/js/components/Tooltip/Tooltip.vue
@@ -9,6 +9,7 @@
 
 <style lang="scss">
 @import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/media-queries';
 
 .ds-tooltip-text {
 	@include text-s-compact-bold;
@@ -17,6 +18,14 @@
 .ds-tooltip-arrow-hide {
 	display: none;
 }
+
+.ds-tooltip-hide-on-mobile {
+	display: none !important;
+
+	@media #{breakpoint-l()} {
+		display: inline-block !important;
+	}
+}
 </style>
 
 <script lang="ts">
@@ -50,6 +59,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		tooltipParams() {
@@ -70,6 +83,7 @@ export default defineComponent({
 					borderRadius: '4px',
 					maxWidth: '240px',
 				},
+				class: this.isHiddenOnMobile ? 'ds-tooltip-hide-on-mobile' : null,
 				ptOptions: {
 					mergeProps: true,
 				},

From 19aeb474d292cf0f32c5761189a4a0fc2ad5389a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Mon, 20 Jan 2025 09:53:27 +0100
Subject: [PATCH 02/10] IT-6082 proper props default values

---
 lib/js/components/TextGroup/TextGroup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/js/components/TextGroup/TextGroup.vue b/lib/js/components/TextGroup/TextGroup.vue
index 60529967b..32ee5ef7b 100644
--- a/lib/js/components/TextGroup/TextGroup.vue
+++ b/lib/js/components/TextGroup/TextGroup.vue
@@ -327,11 +327,11 @@ export default defineComponent({
 		},
 		isSupportingTextTooltipEnabled: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 		isSupportingTextTooltipEnabledOnMobile: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		isSupportingTextTooltipAutoFilledWithContent: {
 			type: Boolean,

From 7e7b8ae19db316f72f9af6ad079296718325da5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Mon, 20 Jan 2025 11:08:59 +0100
Subject: [PATCH 03/10] IT-6082 enable text group supporting text tooltip in
 basic RLI

---
 .../components/RichList/BasicRichListItem/BasicRichListItem.vue  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
index f4dde71e1..5e68c97d0 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
@@ -44,6 +44,7 @@
 					:supporting-text-ellipsis="supportingTextEllipsis"
 					:size="textGroupSize"
 					:state="textGroupState"
+					is-supporting-text-tooltip-enabled
 				/>
 			</div>
 		</template>

From dbbbddad2f700cb962ada5aca8c7d589c0d4c1b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Mon, 20 Jan 2025 12:01:24 +0100
Subject: [PATCH 04/10] IT-6082 temporarily change max-width in tooltip

---
 lib/js/components/Tooltip/Tooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/js/components/Tooltip/Tooltip.vue b/lib/js/components/Tooltip/Tooltip.vue
index 01981203f..d5f38f96f 100644
--- a/lib/js/components/Tooltip/Tooltip.vue
+++ b/lib/js/components/Tooltip/Tooltip.vue
@@ -81,7 +81,7 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
-					maxWidth: '240px',
+					maxWidth: '100%',
 				},
 				class: this.isHiddenOnMobile ? 'ds-tooltip-hide-on-mobile' : null,
 				ptOptions: {

From b105a2e305e00b03eb0f66b5be6975e8424b73ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Mon, 20 Jan 2025 12:26:15 +0100
Subject: [PATCH 05/10] Revert "IT-6082 temporarily change max-width in
 tooltip"

This reverts commit dbbbddad2f700cb962ada5aca8c7d589c0d4c1b6.
---
 lib/js/components/Tooltip/Tooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/js/components/Tooltip/Tooltip.vue b/lib/js/components/Tooltip/Tooltip.vue
index d5f38f96f..01981203f 100644
--- a/lib/js/components/Tooltip/Tooltip.vue
+++ b/lib/js/components/Tooltip/Tooltip.vue
@@ -81,7 +81,7 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
-					maxWidth: '100%',
+					maxWidth: '240px',
 				},
 				class: this.isHiddenOnMobile ? 'ds-tooltip-hide-on-mobile' : null,
 				ptOptions: {

From 41a78d829fcc6e8daf590656648878f2c24c89ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Mon, 20 Jan 2025 14:35:27 +0100
Subject: [PATCH 06/10] IT-6082 change max-width of a tooltip from 240px to
 900px

---
 lib/js/components/Tooltip/Tooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/js/components/Tooltip/Tooltip.vue b/lib/js/components/Tooltip/Tooltip.vue
index 01981203f..4f43c200b 100644
--- a/lib/js/components/Tooltip/Tooltip.vue
+++ b/lib/js/components/Tooltip/Tooltip.vue
@@ -81,7 +81,7 @@ export default defineComponent({
 					background: 'var(--neutral-background-medium, #E5E7ED)',
 					color: 'var(--neutral-text-heavy, #343C50)',
 					borderRadius: '4px',
-					maxWidth: '240px',
+					maxWidth: '900px',
 				},
 				class: this.isHiddenOnMobile ? 'ds-tooltip-hide-on-mobile' : null,
 				ptOptions: {

From f13c060ab396c5255f60aa082cb877864a14bf39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Fri, 24 Jan 2025 15:35:30 +0100
Subject: [PATCH 07/10] IT-6082 add props to storybook

---
 .../components/TextGroup/TextGroup.stories.ts | 20 +++++++++++++++++++
 lib/js/components/TextGroup/TextGroup.vue     |  3 +--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/lib/js/components/TextGroup/TextGroup.stories.ts b/lib/js/components/TextGroup/TextGroup.stories.ts
index 5079febc7..1e2b4275a 100644
--- a/lib/js/components/TextGroup/TextGroup.stories.ts
+++ b/lib/js/components/TextGroup/TextGroup.stories.ts
@@ -33,6 +33,10 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 			:skeleton-loading-size="skeletonLoadingSize"
 			:is-selected="isSelected"
 			:state="state"
+			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
+			:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
+			:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
+			:supporting-text-tooltip-content="supportingTextTooltipContent"
 		/>
 		<div style="margin-top: 100px; color: #888">
 			<ds-divider />
@@ -57,6 +61,10 @@ Interactive.args = {
 	skeletonLoadingSize: TEXT_GROUP_LOADING_SIZES.LARGE,
 	isSelected: false,
 	state: TEXT_GROUP_STATES.DEFAULT,
+	isSupportingTextTooltipEnabled: false,
+	isSupportingTextTooltipEnabledOnMobile: true,
+	isSupportingTextTooltipAutoFilledWithContent: true,
+	supportingTextTooltipContent: '',
 } as Args;
 
 Interactive.argTypes = {
@@ -103,6 +111,18 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_STATES),
 	},
+	isSupportingTextTooltipEnabled: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipEnabledOnMobile: {
+		control: 'boolean',
+	},
+	isSupportingTextTooltipAutoFilledWithContent: {
+		control: 'boolean',
+	},
+	supportingTextTooltipContent: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.parameters = {
diff --git a/lib/js/components/TextGroup/TextGroup.vue b/lib/js/components/TextGroup/TextGroup.vue
index 32ee5ef7b..450ff4d7a 100644
--- a/lib/js/components/TextGroup/TextGroup.vue
+++ b/lib/js/components/TextGroup/TextGroup.vue
@@ -264,7 +264,7 @@ import {
 	TextGroupSize,
 	TextGroupState,
 } from './TextGroup.consts';
-import DsTooltip, { TOOLTIP_PLACEMENTS } from '../Tooltip';
+import DsTooltip from '../Tooltip';
 
 export default defineComponent({
 	name: 'TextGroup',
@@ -346,7 +346,6 @@ export default defineComponent({
 		return {
 			TEXT_GROUP_SIZES: Object.freeze(TEXT_GROUP_SIZES),
 			TEXT_GROUP_STATES: Object.freeze(TEXT_GROUP_STATES),
-			TOOLTIP_PLACEMENTS: Object.freeze(TOOLTIP_PLACEMENTS),
 		};
 	},
 	computed: {

From be61de611bc45488ff5c70fcbb3d8069e9805805 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Fri, 24 Jan 2025 15:40:16 +0100
Subject: [PATCH 08/10] IT-6082 add props for enabling tooltip in BasicRLI

---
 .../RichList/BasicRichListItem/BasicRichListItem.stories.ts | 6 ++++++
 .../RichList/BasicRichListItem/BasicRichListItem.vue        | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
index d7d0cba9a..ea69b3d13 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
@@ -84,6 +84,9 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		supportingTextEllipsis: {
 			control: 'boolean',
 		},
+		isSupportingTextTooltipEnabled: {
+			control: 'boolean',
+		},
 		metadata: {
 			control: 'text',
 		},
@@ -131,6 +134,7 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		textEllipsis: false,
 		supportingText: 'null',
 		supportingTextEllipsis: false,
+		isSupportingTextTooltipEnabled: false,
 
 		metadata: 'Metadata Slot',
 		actions: 'ACS',
@@ -191,6 +195,7 @@ const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 			:text-ellipsis="textEllipsis"
 			:supporting-text="supportingText === 'null' ? null : supportingText"
 			:supporting-text-ellipsis="supportingTextEllipsis"
+			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 			:background-color="backgroundColor"
 			:elevation="elevation"
 			:has-draggable-handler="hasDraggableHandler"
@@ -251,6 +256,7 @@ const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
 				:text-ellipsis="textEllipsis"
 				:supporting-text="supportingText === 'null' ? null : supportingText"
 				:supporting-text-ellipsis="supportingTextEllipsis"
+				:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 				:background-color="backgroundColor"
 				:elevation="elevation"
 				:has-draggable-handler="hasDraggableHandler"
diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
index 5e68c97d0..461941fe1 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
@@ -44,7 +44,7 @@
 					:supporting-text-ellipsis="supportingTextEllipsis"
 					:size="textGroupSize"
 					:state="textGroupState"
-					is-supporting-text-tooltip-enabled
+					is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 				/>
 			</div>
 		</template>
@@ -219,6 +219,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		isSupportingTextTooltipEnabled: {
+			type: Boolean,
+			default: false,
+		},
 		backgroundColor: {
 			type: String as PropType<RichListItemBackgroundColor>,
 			default: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,

From f638ba0495b90d1a8795b50c7b7e5fd6eef9e776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Zi=C3=B3=C5=82kowski?= <pioziol@gmail.com>
Date: Fri, 24 Jan 2025 15:41:29 +0100
Subject: [PATCH 09/10] IT-6082 fix prop passing

---
 .../components/RichList/BasicRichListItem/BasicRichListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
index 461941fe1..d093ce556 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
@@ -44,7 +44,7 @@
 					:supporting-text-ellipsis="supportingTextEllipsis"
 					:size="textGroupSize"
 					:state="textGroupState"
-					is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
+					:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 				/>
 			</div>
 		</template>

From 6ce4bf15fe245da53e0c798438f0ef75b145fe8b Mon Sep 17 00:00:00 2001
From: Sebastian Dawidziak <sebastian@tweetgeek.pl>
Date: Fri, 31 Jan 2025 11:46:24 +0100
Subject: [PATCH 10/10] fix tooltip positioning

---
 lib/js/components/TextGroup/TextGroup.vue | 28 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/lib/js/components/TextGroup/TextGroup.vue b/lib/js/components/TextGroup/TextGroup.vue
index 450ff4d7a..c914c7437 100644
--- a/lib/js/components/TextGroup/TextGroup.vue
+++ b/lib/js/components/TextGroup/TextGroup.vue
@@ -43,19 +43,14 @@
 			<span v-else-if="mainText === ''">&nbsp;</span>
 			<span v-else>{{ mainText }}</span>
 		</div>
-		<div
-			v-if="supportingText !== null"
-			class="ds-textGroup__supporting"
-			:class="{
-				'-ds-ellipsis': supportingTextEllipsis,
-			}"
-		>
+		<div v-if="supportingText !== null" class="ds-textGroup__supportingWrapper">
 			<div v-if="isLoading" class="ds-textGroup__skeletonWrapper">
 				<ds-skeleton width="100%" height="100%" />
 			</div>
 			<span v-else-if="supportingText === ''">&nbsp;</span>
 			<template v-else>
 				<ds-tooltip
+					class="ds-textGroup__supportingTooltip"
 					:text="
 						isSupportingTextTooltipAutoFilledWithContent
 							? supportingText
@@ -65,7 +60,14 @@
 					:is-hidden-on-mobile="!isSupportingTextTooltipEnabledOnMobile"
 					inline
 				>
-					<span v-html="supportingText" />
+					<div
+						class="ds-textGroup__supporting"
+						:class="{
+							'-ds-ellipsis': supportingTextEllipsis,
+						}"
+					>
+						<span v-html="supportingText" />
+					</div>
 				</ds-tooltip>
 			</template>
 		</div>
@@ -185,6 +187,16 @@ $text-group-colors: (
 		@include text-m-compact-bold;
 	}
 
+	&__supportingWrapper {
+		display: flex;
+	}
+
+	&__supportingTooltip {
+		display: inline-flex;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
 	&__supporting {
 		@include text-s-compact-regular;
 	}