Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Oct 9, 2023
Merged

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

merged 2 commits into from
Oct 9, 2023

Conversation

mhuchet
Copy link
Contributor

@mhuchet mhuchet commented Oct 6, 2023

What is the problem this PR is trying to solve?
Collapsible panel does not handle the text overflow for all cases in the header.

For example, when you have a simple header with a label and one action, the whole in a very tiny space, you got a multiline label that exit the panel header.

CleanShot 2023-10-06 at 16 55 09@2x

https://jira.talendforge.org/browse/TFD-16296

What is the chosen solution to this problem?
The goal is to prevent the overflow with a nice ellipsis and the whole text in a tooltip.

CleanShot 2023-10-06 at 16 57 35@2x

A story has been added to show the case in storybook.

CleanShot 2023-10-06 at 16 58 32@2x

Please check if the PR fulfills these requirements

  • The PR have used yarn changeset to a request a release from the CI if wanted.
  • The PR commit message follows our guidelines
  • Tests for the changes have been added (for bug fixes / features) And non reg done before need review
  • Docs have been added / updated (for bug fixes / features)
  • Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

@mhuchet mhuchet self-assigned this Oct 6, 2023
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 6, 2023 14:59 — with GitHub Actions Inactive
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 6, 2023 15:01 — with GitHub Actions Inactive
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 6, 2023 15:01 — with GitHub Actions Inactive
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 6, 2023 15:01 — with GitHub Actions Inactive
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 6, 2023 15:01 — with GitHub Actions Inactive
jmfrancois
jmfrancois requested changes Oct 6, 2023
View reviewed changes
Copy link
Collaborator

@jmfrancois jmfrancois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this make it impossible to read !

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2023

4926

:octocat: Demo is available here

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2023

Title Lines Statements Branches Functions
assets-api Coverage: 28%
 28.4% (25/88) 30.76% (16/52) 21.42% (3/14)
cmf Coverage: 89%
 89.17% (1268/1422) 80.36% (618/769) 88.91% (361/406)
cmf-cqrs Coverage: 87%
 87.43% (160/183) 70.23% (59/84) 84.21% (48/57)
cmf-router Coverage: 70%
 69.23% (135/195) 55.71% (78/140) 56.81% (25/44)
components Coverage: 90%
 89.95% (5609/6235) 81.02% (3212/3964) 86.88% (1418/1632)
containers Coverage: 84%
 83.53% (1385/1658) 74.67% (687/920) 75.17% (327/435)
dataviz Coverage: 85%
 85.6% (321/375) 66.66% (160/240) 75.64% (118/156)
faceted-search Coverage: 85%
 85.03% (693/815) 76.63% (269/351) 81.75% (242/296)
flow-designer Coverage: 70%
 69.95% (652/932) 66.66% (356/534) 70.67% (200/283)
forms Coverage: 86%
 86.91% (1701/1957) 76.46% (916/1198) 85.86% (480/559)
http Coverage: 98%
 98.76% (80/81) 98% (49/50) 96.77% (30/31)
sagas Coverage: 92%
 92.3% (24/26) 66.66% (4/6) 50% (2/4)
stepper Coverage: 80%
 81.52% (150/184) 59.34% (54/91) 80.85% (38/47)
utils Coverage: 100%
 100% (66/66) 90.9% (10/11) 100% (16/16)

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2023

Size Change: +486 B (0%)

Total Size: 13.2 MB

Filename Size Change
./packages/components/dist/TalendReactComponents.css 403 kB +255 B (0%)
./packages/components/dist/TalendReactComponents.min.css 210 kB +231 B (0%)
ℹ️ View Unchanged
Filename Size Change
./packages/assets-api/dist/TalendAssetsApi.js 7.21 kB 0 B
./packages/assets-api/dist/TalendAssetsApi.js.dependencies.json 2 B 0 B
./packages/assets-api/dist/TalendAssetsApi.min.js 3.34 kB 0 B
./packages/assets-api/dist/TalendAssetsApi.min.js.dependencies.json 2 B 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js 105 kB 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json 672 B 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js 21.9 kB 0 B
./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json 695 B 0 B
./packages/cmf-router/dist/TalendReactCmfRouter.js 163 kB 0 B
./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json 1.25 kB 0 B
./packages/cmf-router/dist/TalendReactCmfRouter.min.js 13.9 kB 0 B
./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json 1.29 kB 0 B
./packages/cmf/dist/TalendReactCmf.js 637 kB 0 B
./packages/cmf/dist/TalendReactCmf.js.dependencies.json 1.31 kB 0 B
./packages/cmf/dist/TalendReactCmf.min.js 122 kB 0 B
./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json 1.35 kB 0 B
./packages/components/dist/TalendReactComponents.js 2.94 MB 0 B
./packages/components/dist/TalendReactComponents.js.dependencies.json 3.47 kB 0 B
./packages/components/dist/TalendReactComponents.min.js 630 kB 0 B
./packages/components/dist/TalendReactComponents.min.js.dependencies.json 3.55 kB 0 B
./packages/containers/dist/TalendReactContainers.css 3.01 kB 0 B
./packages/containers/dist/TalendReactContainers.js 540 kB 0 B
./packages/containers/dist/TalendReactContainers.js.dependencies.json 1.55 kB 0 B
./packages/containers/dist/TalendReactContainers.min.css 1.74 kB 0 B
./packages/containers/dist/TalendReactContainers.min.js 106 kB 0 B
./packages/containers/dist/TalendReactContainers.min.js.dependencies.json 1.6 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.css 28.9 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.js 371 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.js.dependencies.json 1.15 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.min.css 12 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.min.js 64.6 kB 0 B
./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json 1.19 kB 0 B
./packages/design-system/dist/TalendDesignSystem.css 281 kB 0 B
./packages/design-system/dist/TalendDesignSystem.js 1.07 MB 0 B
./packages/design-system/dist/TalendDesignSystem.js.dependencies.json 1.3 kB 0 B
./packages/design-system/dist/TalendDesignSystem.min.css 172 kB 0 B
./packages/design-system/dist/TalendDesignSystem.min.js 211 kB 0 B
./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json 1.33 kB 0 B
./packages/design-tokens/dist/TalendDesignTokens.css 44.6 kB 0 B
./packages/design-tokens/dist/TalendDesignTokens.js 39.6 kB 0 B
./packages/design-tokens/dist/TalendDesignTokens.js.dependencies.json 2 B 0 B
./packages/design-tokens/dist/TalendDesignTokens.min.css 41.5 kB 0 B
./packages/design-tokens/dist/TalendDesignTokens.min.js 33.3 kB 0 B
./packages/design-tokens/dist/TalendDesignTokens.min.js.dependencies.json 2 B 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.css 37.8 kB 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.js 453 kB 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json 1.51 kB 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.min.css 17.1 kB 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.min.js 104 kB 0 B
./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json 1.55 kB 0 B
./packages/flow-designer/dist/TalendReactFlowDesigner.min.js 52.7 kB 0 B
./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json 1.25 kB 0 B
./packages/forms/dist/TalendReactForms.css 39.3 kB 0 B
./packages/forms/dist/TalendReactForms.js 780 kB 0 B
./packages/forms/dist/TalendReactForms.js.dependencies.json 1.5 kB 0 B
./packages/forms/dist/TalendReactForms.min.css 13.4 kB 0 B
./packages/forms/dist/TalendReactForms.min.js 206 kB 0 B
./packages/forms/dist/TalendReactForms.min.js.dependencies.json 1.54 kB 0 B
./packages/http/dist/TalendHttp.js 24.5 kB 0 B
./packages/http/dist/TalendHttp.js.dependencies.json 2 B 0 B
./packages/http/dist/TalendHttp.min.js 5.19 kB 0 B
./packages/http/dist/TalendHttp.min.js.dependencies.json 2 B 0 B
./packages/icons/dist/bundle.js 1.26 kB 0 B
./packages/icons/dist/info.js 26.1 kB 0 B
./packages/icons/dist/react.esm.js 585 kB 0 B
./packages/icons/dist/react.js 623 kB 0 B
./packages/icons/dist/talend-icons-webfont.css 17.4 kB 0 B
./packages/icons/dist/talendicons.css 334 B 0 B
./packages/icons/dist/TalendIcons.js 752 kB 0 B
./packages/icons/dist/TalendIcons.js.dependencies.json 128 B 0 B
./packages/icons/dist/TalendIcons.min.js 607 kB 0 B
./packages/icons/dist/TalendIcons.min.js.dependencies.json 131 B 0 B
./packages/icons/dist/typeUtils.js 14.4 kB 0 B
./packages/jsfc/dist/index.js 86.8 kB 0 B
./packages/jsfc/dist/index.js.dependencies.json 2 B 0 B
./packages/router-bridge/dist/TalendRouterBridge.js 133 kB 0 B
./packages/router-bridge/dist/TalendRouterBridge.js.dependencies.json 1.05 kB 0 B
./packages/router-bridge/dist/TalendRouterBridge.min.js 22 kB 0 B
./packages/router-bridge/dist/TalendRouterBridge.min.js.dependencies.json 1.07 kB 0 B
./packages/sagas/dist/TalendReactSagas.js 10.9 kB 0 B
./packages/sagas/dist/TalendReactSagas.js.dependencies.json 348 B 0 B
./packages/sagas/dist/TalendReactSagas.min.js 1.41 kB 0 B
./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json 360 B 0 B
./packages/stepper/dist/TalendReactStepper.css 2.4 kB 0 B
./packages/stepper/dist/TalendReactStepper.js 96.4 kB 0 B
./packages/stepper/dist/TalendReactStepper.js.dependencies.json 1.27 kB 0 B
./packages/stepper/dist/TalendReactStepper.min.css 1.19 kB 0 B
./packages/stepper/dist/TalendReactStepper.min.js 10.6 kB 0 B
./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json 1.31 kB 0 B
./packages/storybook-docs/dist/globalStyles.js 0 B 0 B 🆕
./packages/storybook-docs/dist/globalStyles.min.css 398 B 0 B
./packages/storybook-docs/dist/managerStyles.js 0 B 0 B 🆕
./packages/storybook-docs/dist/managerStyles.min.css 1.53 kB 0 B
./packages/theme/dist/bootstrap.css 172 kB 0 B
./packages/theme/dist/bootstrap.js 2.51 kB 0 B
./packages/theme/dist/bootstrap.js.dependencies.json 3 B 0 B

compressed-size-action

aamalric-talend
aamalric-talend approved these changes Oct 9, 2023
View reviewed changes
Copy link
Contributor

@aamalric-talend aamalric-talend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

jmfrancois
jmfrancois approved these changes Oct 9, 2023
View reviewed changes
Copy link
Collaborator

@jmfrancois jmfrancois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems there is a tooltip already

@mhuchet mhuchet merged commit 1cb4b7b into master Oct 9, 2023
10 checks passed
@mhuchet mhuchet deleted the mhuchet/fix/TFD-16296 branch October 9, 2023 12:10
@mhuchet mhuchet temporarily deployed to pull_request_unsafe October 9, 2023 12:10 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@itenger-talend itenger-talend itenger-talend approved these changes

@aamalric-talend aamalric-talend aamalric-talend approved these changes

@jmfrancois jmfrancois jmfrancois approved these changes

Assignees

@mhuchet mhuchet

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@mhuchet @jmfrancois @aamalric-talend @itenger-talend