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 1/5] 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 = () => (