fix(Notification): Add onClose prop, fix semantic-icon size (#220)

Author: Lukas742

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

packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap

@@ -237,10 +237,14 @@ exports[`Notification w/ Props 1`] = `
     <div
       class="Notification--header-"
     >
-      <ui5-icon
-        class="Notification--error- Notification--semanticIcon-"
-        src="message-error"
-      />
+      <div
+        class="Notification--semanticIcon-"
+      >
+        <ui5-icon
+          class="Notification--error-"
+          src="message-error"
+        />
+      </div>
       <div
         class="Notification--title- Notification--titleEllipsised-"
       >

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')}
   />
 );
 

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<NotificationProptypes> | React.ReactElement<NotificationProptypes>[];
   collapsed?: boolean;
@@ -66,7 +68,8 @@ const Notification: FC<NotificationProptypes> = forwardRef(
       autoPriority,
       hideShowMoreButton,
       truncate,
-      showCloseButton
+      showCloseButton,
+      onClose
     } = props;
 
     const classes = useStyles(props);
@@ -101,14 +104,18 @@ const Notification: FC<NotificationProptypes> = 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<NotificationProptypes> = forwardRef(
       }
       switch (prio) {
         case Priority.High:
-          return <Icon src="message-error" className={`${classes.error} ${classes.semanticIcon}`} />;
+          return <Icon src="message-error" className={classes.error} />;
         case Priority.Medium:
-          return <Icon src="message-warning" className={`${classes.warning} ${classes.semanticIcon}`} />;
+          return <Icon src="message-warning" className={classes.warning} />;
         case Priority.Low:
-          return <Icon src="message-success" className={`${classes.success} ${classes.semanticIcon}`} />;
+          return <Icon src="message-success" className={classes.success} />;
         case Priority.None:
           return null;
         default:
@@ -245,7 +252,9 @@ const Notification: FC<NotificationProptypes> = forwardRef(
           <div className={`${classes.priorityIndicator} ${indicatorClass}`} style={indicatorStyles} />
           <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
             <div className={classes.header}>
-              {renderSemanticIcon}
+              {priority && priority !== Priority.None && (
+                <div className={classes.semanticIcon}>{renderSemanticIcon}</div>
+              )}
               <div className={`${classes.title} ${truncate ? classes.titleEllipsised : ''}`}>{title}</div>
               {showCloseButton && (
                 <Button

packages/main/src/components/NotificationGroup/__snapshots__/Notification.test.tsx.snap

@@ -169,10 +169,14 @@ Array [
       <div
         class="Notification--header-"
       >
-        <ui5-icon
-          class="Notification--error- Notification--semanticIcon-"
-          src="message-error"
-        />
+        <div
+          class="Notification--semanticIcon-"
+        >
+          <ui5-icon
+            class="Notification--error-"
+            src="message-error"
+          />
+        </div>
         <div
           class="Notification--title- Notification--titleEllipsised-"
         >
@@ -431,10 +435,14 @@ Array [
       <div
         class="Notification--header-"
       >
-        <ui5-icon
-          class="Notification--error- Notification--semanticIcon-"
-          src="message-error"
-        />
+        <div
+          class="Notification--semanticIcon-"
+        >
+          <ui5-icon
+            class="Notification--error-"
+            src="message-error"
+          />
+        </div>
         <div
           class="Notification--title- Notification--titleEllipsised-"
         >
@@ -832,10 +840,14 @@ Array [
       <div
         class="Notification--header-"
       >
-        <ui5-icon
-          class="Notification--error- Notification--semanticIcon-"
-          src="message-error"
-        />
+        <div
+          class="Notification--semanticIcon-"
+        >
+          <ui5-icon
+            class="Notification--error-"
+            src="message-error"
+          />
+        </div>
         <div
           class="Notification--title- Notification--titleEllipsised-"
         >

packages/main/src/components/NotificationGroup/demo.stories.tsx

@@ -37,6 +37,7 @@ export const defaultStory = () => (
     collapsed={boolean('collapsed', false)}
     showCloseButton={boolean('showCloseButton', true)}
     truncate={boolean('truncate', true)}
+    onClose={action('Group closed')}
   >
     <Notification
       footer={ActionButtons}