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 = () => (

Collapsible Panel Headers

+ + Panel content +