From da4cf29711ba40af1ba4162bac89c888fce7578b Mon Sep 17 00:00:00 2001 From: Gbacc Date: Tue, 24 Oct 2023 08:39:00 +0200 Subject: [PATCH] fix(TDOPS-762): notification can have long words that will not overflow (#4950) --- .changeset/little-suns-reply.md | 5 +++++ .../components/src/Notification/Notification.module.scss | 1 + packages/components/src/Notification/Notification.stories.js | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/little-suns-reply.md diff --git a/.changeset/little-suns-reply.md b/.changeset/little-suns-reply.md new file mode 100644 index 00000000000..0d97ac81b28 --- /dev/null +++ b/.changeset/little-suns-reply.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': patch +--- + +TDOPS-762 - Allow notification message to have long labels with proper overflow diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss index 0832948d62c..d6178da6e2d 100644 --- a/packages/components/src/Notification/Notification.module.scss +++ b/packages/components/src/Notification/Notification.module.scss @@ -85,6 +85,7 @@ $tc-notification-icon-size: $svg-md-size !default; &-message { margin-right: $padding-larger; font-size: $font-size-small; + word-break: break-all; &:last-of-type { margin-bottom: 0; diff --git a/packages/components/src/Notification/Notification.stories.js b/packages/components/src/Notification/Notification.stories.js index 3ac0e76f927..3de4030afb6 100644 --- a/packages/components/src/Notification/Notification.stories.js +++ b/packages/components/src/Notification/Notification.stories.js @@ -15,7 +15,7 @@ class NotificationWrapper extends Component { type: 'info', title: 'Story 1 example title', message: - 'This is a feedback of your operation1, This is a feedback of your operation1, This is a feedback of your operation1', + 'This is a feedback of your operationlongnameverylongnamethatwhillbreakwork1, This is a feedback of your operation1, This is a feedback of your operation1', action: { label: 'Haha', icon: 'talend-undo',