diff --git a/packages/main/src/components/Notification/Notification.jss.ts b/packages/main/src/components/Notification/Notification.jss.ts index 48eb3b3a540..0ce014bf574 100644 --- a/packages/main/src/components/Notification/Notification.jss.ts +++ b/packages/main/src/components/Notification/Notification.jss.ts @@ -105,7 +105,9 @@ const style = ({ parameters }: JSSTheme) => ({ low: { backgroundColor: parameters.sapUiSuccessBorder }, none: { backgroundColor: parameters.sapUiNeutralBorder }, semanticIcon: { - paddingRight: '0.375rem' + paddingRight: '0.375rem', + width: '1rem', + display: 'flex' }, error: { color: parameters.sapUiNegativeElement diff --git a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap index 605e87473bc..e507efef423 100644 --- a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap +++ b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap @@ -237,10 +237,14 @@ exports[`Notification w/ Props 1`] = `
- +
+ +
diff --git a/packages/main/src/components/Notification/demo.stories.tsx b/packages/main/src/components/Notification/demo.stories.tsx index f12e2427c02..a1083e0ee25 100644 --- a/packages/main/src/components/Notification/demo.stories.tsx +++ b/packages/main/src/components/Notification/demo.stories.tsx @@ -34,6 +34,7 @@ export const defaultStory = () => ( hideShowMoreButton={boolean('hideShowMoreButton', false)} truncate={boolean('truncate', true)} showCloseButton={boolean('showCloseButton', true)} + onClose={action('Closed')} /> ); diff --git a/packages/main/src/components/Notification/index.tsx b/packages/main/src/components/Notification/index.tsx index 13dfe23ac22..6857a776db6 100644 --- a/packages/main/src/components/Notification/index.tsx +++ b/packages/main/src/components/Notification/index.tsx @@ -16,6 +16,7 @@ import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { Text } from '@ui5/webcomponents-react/lib/Text'; import { Label } from '@ui5/webcomponents-react/lib/Label'; +import { Event } from '@ui5/webcomponents-react-base/lib/Event'; export interface NotificationProptypes extends CommonProps { footer?: ReactNode | ReactNode[]; @@ -31,6 +32,7 @@ export interface NotificationProptypes extends CommonProps { onClick?: (e: any) => any; hideShowMoreButton?: boolean; truncate?: boolean; + onClose?: (event: Event) => void; children?: React.ReactElement | React.ReactElement[]; collapsed?: boolean; @@ -66,7 +68,8 @@ const Notification: FC = forwardRef( autoPriority, hideShowMoreButton, truncate, - showCloseButton + showCloseButton, + onClose } = props; const classes = useStyles(props); @@ -101,14 +104,18 @@ const Notification: FC = forwardRef( return null; }, [avatar]); - const handleClose = useCallback(() => { - toggleVisible(false); - }, []); + const handleClose = useCallback( + (e) => { + toggleVisible(false); + onClose(Event.of(null, e)); + }, + [toggleVisible, onClose] + ); const handleNotificationClick = useCallback( (e) => { if (e.target.nodeName !== 'UI5-BUTTON' && e.target.nodeName !== 'UI5-ICON' && typeof onClick === 'function') { - onClick(e); + onClick(Event.of(null, e)); } }, [onClick] @@ -169,11 +176,11 @@ const Notification: FC = forwardRef( } switch (prio) { case Priority.High: - return ; + return ; case Priority.Medium: - return ; + return ; case Priority.Low: - return ; + return ; case Priority.None: return null; default: @@ -245,7 +252,9 @@ const Notification: FC = forwardRef(
- {renderSemanticIcon} + {priority && priority !== Priority.None && ( +
{renderSemanticIcon}
+ )}
{title}
{showCloseButton && (