From 1cb4b7b29671313b31f01303bb203dcf3dc5d6bf Mon Sep 17 00:00:00 2001
From: Mathieu Huchet <59565911+tlnd-mhuchet@users.noreply.github.com>
Date: Mon, 9 Oct 2023 14:10:15 +0200
Subject: [PATCH] fix(TFD-16296): Add ellipsis on collapsible panel (#4926)

* fix(TFD-16296): Add ellipsis on collapsible panel

* changeset
---
 .changeset/spotty-cups-judge.md                      |  5 +++++
 .../CollapsiblePanel/CollapsiblePanel.module.scss    |  7 +++++++
 .../src/CollapsiblePanel/CollapsiblePanel.stories.js | 12 ++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 .changeset/spotty-cups-judge.md

diff --git a/.changeset/spotty-cups-judge.md b/.changeset/spotty-cups-judge.md
new file mode 100644
index 00000000000..acfe1887b5b
--- /dev/null
+++ b/.changeset/spotty-cups-judge.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix(TFD-16296): Add ellipsis on collapsible panel header
diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
index 9d5d3bafbfd..e6209d3b2d5 100644
--- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
+++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss
@@ -173,6 +173,13 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
+				min-width: 0; // trick to avoid conflict between flex and overflow
+
+				> * {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 		}
 	}
diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js
index 5f82d512400..192752ac0d5 100644
--- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js
+++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js
@@ -172,6 +172,18 @@ export const Header = () => (
 	<div className="col-lg-offset-1 col-lg-10">
 		<h1>Collapsible Panel Headers</h1>
 		<CollapsiblePanel id="panel-header-1" header={[{ label: 'Simple header' }]} />
+		<CollapsiblePanel
+			id="panel-header-1"
+			header={[
+				{
+					label:
+						'Simple header with a very very very very long label that should not completly appear and not push other element outside the headerSimple header with a very very very very long label that should not completly appear and not push other element outside the header',
+				},
+				buttonDownload,
+			]}
+		>
+			Panel content
+		</CollapsiblePanel>
 		<CollapsiblePanel
 			id="panel-header-2"
 			header={[{ label: 'Header with actions' }, { element }]}