[EuiNotificationEvent] Spread className and rest props

src-docs/src/views/notification_event/notification_event_example.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../components';
 import { Link } from 'react-router-dom';
-import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta';
 import {
   EuiNotificationEvent,
   EuiText,
@@ -91,7 +90,6 @@ export const NotificationEventExample = {
       ],
       props: {
         EuiNotificationEvent,
-        EuiNotificationEventMeta,
         EuiContextMenuItem,
         EuiPrimaryActionProps,
       },
@@ -192,7 +190,6 @@ export const NotificationEventExample = {
       ),
       props: {
         EuiNotificationEvent,
-        EuiNotificationEventMeta,
         EuiContextMenuItem,
         EuiPrimaryActionProps,
       },
@@ -219,7 +216,6 @@ export const NotificationEventExample = {
       ),
       props: {
         EuiNotificationEvent,
-        EuiNotificationEventMeta,
         EuiContextMenuItem,
         EuiPrimaryActionProps,
       },

src/components/notification/__snapshots__/notification_event.test.tsx.snap

@@ -2,8 +2,10 @@
 
 exports[`EuiNotificationEvent is rendered 1`] = `
 <article
+  aria-label="aria-label"
   aria-labelledby="generated-id"
-  class="euiNotificationEvent"
+  class="euiNotificationEvent className"
+  data-test-subj="test subject string"
 >
   <div
     class="euiNotificationEvent__content"

src/components/notification/notification_event.test.tsx

@@ -10,7 +10,11 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 import { EuiNotificationEvent } from './notification_event';
 import { EuiContextMenuPanel, EuiContextMenuItem } from '../context_menu';
-import { findTestSubject, takeMountedSnapshot } from '../../test';
+import {
+  findTestSubject,
+  takeMountedSnapshot,
+  requiredProps,
+} from '../../test';
 
 describe('EuiNotificationEvent', () => {
   test('is rendered', () => {
@@ -21,6 +25,7 @@ describe('EuiNotificationEvent', () => {
         time="1 min ago"
         title="title"
         messages={['message']}
+        {...requiredProps}
       />
     );
 

src/components/notification/notification_event.tsx

@@ -6,8 +6,16 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, ReactElement, createElement } from 'react';
+import React, {
+  FunctionComponent,
+  ReactElement,
+  createElement,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
+
+import { CommonProps } from '../common';
+
 import {
   EuiNotificationEventMeta,
   EuiNotificationEventMetaProps,
@@ -35,7 +43,9 @@ export type EuiNotificationEventProps = Omit<
   Omit<
     EuiNotificationEventReadButtonProps,
     'onClick' | 'color' | 'eventName' | 'isRead' | 'id'
-  > & {
+  > &
+  CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     /**
      * A unique identifier
      */
@@ -104,9 +114,12 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
   onClickTitle,
   onClickPrimaryAction,
   headingLevel = 'h2',
+  className,
+  ...rest
 }) => {
   const classes = classNames('euiNotificationEvent', {
     'euiNotificationEvent--withReadState': typeof isRead === 'boolean',
+    className,
   });
 
   const classesTitle = classNames('euiNotificationEvent__title', {
@@ -122,7 +135,12 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
   };
 
   return (
-    <article aria-labelledby={randomHeadingId} className={classes} key={id}>
+    <article
+      aria-labelledby={randomHeadingId}
+      className={classes}
+      key={id}
+      {...rest}
+    >
       {typeof isRead === 'boolean' && (
         <div className="euiNotificationEvent__readButton">
           {!!onRead ? (

upcoming_changelogs/6208.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed bug where `className` and `rest` props were not being passed to the `EuiNotificationEvent`