fix(TDOPS-1878): Notification container max height and overflow (#4912)

Talend · Sep 29, 2023 · 4f8429b · 4f8429b
1 parent 7c4708e
commit 4f8429b
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 2 deletions.
diff --git a/.changeset/silver-crews-smell.md b/.changeset/silver-crews-smell.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+TDOPS-1878 - Notification container now has a max height to handle long and multiple notifications not overflowing the screen
diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss
@@ -21,9 +21,12 @@ $tc-notification-icon-size: $svg-md-size !default;
 	&-container {
 		position: absolute;
 		top: 48px;
-		right: $padding-normal;
+		right: 0;
+		padding: tokens.$coral-spacing-s tokens.$coral-spacing-m 0 tokens.$coral-spacing-m;
 		z-index: $zindex-notification;
 		left: auto;
+		max-height: calc(100vh - 48px);
+		overflow-y: auto;
 
 		.tc-notification[pin='true'] {
 			.tc-notification-timer-bar {

diff --git a/packages/components/src/Notification/Notification.stories.js b/packages/components/src/Notification/Notification.stories.js
@@ -28,7 +28,122 @@ class NotificationWrapper extends Component {
 		setTimeout(() => {
 			this.notifications = this.notifications.concat([
 				{
-					id: 'story-2',
+					id: 'story-232',
+					type: 'error',
+					title: 'Story 2 example title ',
+					message: [
+						'This is a feedback of your operation2',
+						'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 operation1',
+						'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 operation1',
+						'This is a feedback of your operation1, This is a feedback of your operation1',
+					],
+					action: {
+						label: 'undo',
+						icon: 'talend-undo',
+						onClick: action('click undo'),
+					},
+				},
+			]);
+			this.setState({ counter: this.state.counter + 1 });
+		}, 1000);
+		setTimeout(() => {
+			this.notifications = this.notifications.concat([
+				{
+					id: 'story-234',
+					type: 'error',
+					title: 'Story 2 example title ',
+					message: [
+						'This is a feedback of your operation2',
+						'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 operation1',
+						'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 operation1',
+						'This is a feedback of your operation1, This is a feedback of your operation1',
+					],
+					action: {
+						label: 'undo',
+						icon: 'talend-undo',
+						onClick: action('click undo'),
+					},
+				},
+			]);
+			this.setState({ counter: this.state.counter + 1 });
+		}, 1000);
+		setTimeout(() => {
+			this.notifications = this.notifications.concat([
+				{
+					id: 'story-2444',
+					type: 'error',
+					title: 'Story 2 example title ',
+					message: [
+						'This is a feedback of your operation2',
+						'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 operation1',
+						'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 operation1',
+						'This is a feedback of your operation1, This is a feedback of your operation1',
+					],
+					action: {
+						label: 'undo',
+						icon: 'talend-undo',
+						onClick: action('click undo'),
+					},
+				},
+			]);
+			this.setState({ counter: this.state.counter + 1 });
+		}, 1000);
+		setTimeout(() => {
+			this.notifications = this.notifications.concat([
+				{
+					id: 'story-2333',
+					type: 'error',
+					title: 'Story 2 example title ',
+					message: [
+						'This is a feedback of your operation2',
+						'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 operation1',
+						'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 operation1',
+						'This is a feedback of your operation1, This is a feedback of your operation1',
+					],
+					action: {
+						label: 'undo',
+						icon: 'talend-undo',
+						onClick: action('click undo'),
+					},
+				},
+			]);
+			this.setState({ counter: this.state.counter + 1 });
+		}, 1000);
+		setTimeout(() => {
+			this.notifications = this.notifications.concat([
+				{
+					id: 'story-2222',
+					type: 'error',
+					title: 'Story 2 example title ',
+					message: [
+						'This is a feedback of your operation2',
+						'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 operation1',
+						'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 operation1',
+						'This is a feedback of your operation1, This is a feedback of your operation1',
+					],
+					action: {
+						label: 'undo',
+						icon: 'talend-undo',
+						onClick: action('click undo'),
+					},
+				},
+			]);
+			this.setState({ counter: this.state.counter + 1 });
+		}, 1000);
+		setTimeout(() => {
+			this.notifications = this.notifications.concat([
+				{
+					id: 'story-22',
 					type: 'error',
 					title: 'Story 2 example title ',
 					message: [