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

* fix(TFD-16296): Add ellipsis on collapsible panel * changeset
Talend · Oct 9, 2023 · 1cb4b7b · 1cb4b7b
1 parent 9d137cb
commit 1cb4b7b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/.changeset/spotty-cups-judge.md 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
@@ -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
@@ -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 }]}