diff --git a/.changeset/silver-crews-smell.md b/.changeset/silver-crews-smell.md new file mode 100644 index 00000000000..7ef4c54ed78 --- /dev/null +++ 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 index 3018415249e..0832948d62c 100644 --- 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 index 8e06a86ee0e..3ac0e76f927 100644 --- 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: [