[EuiNotificationEvent] Render icon instead of button if onRead is undefined

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Reverted `z-index: 1` on `EuiPageBody` ([#4892](https://github.com/elastic/eui/pull/4892))
 - Added `updateButtonProps` to `EuiSuperDatePicker` to provide more control over the update/refresh button ([#4895](https://github.com/elastic/eui/pull/4895))
+- Updated `EuiNotificationEvent` to render an icon instead of a button if `onRead` is undefined ([#4881](https://github.com/elastic/eui/pull/4881))
 
 **Bug fixes**
 
@@ -14,7 +15,7 @@
 - Updated styles for `EuiRange` ([#4815](https://github.com/elastic/eui/pull/4815)
 - Fixed more unique focus states using `outline` ([#4876](https://github.com/elastic/eui/pull/4876))
 - Fixed `border-radius` value of `EuiPanel` ([#4876](https://github.com/elastic/eui/pull/4876))
-- Fixed `disabled` background color of `EuiCard` for better visiblity on subdued backgrounds ([#4876](https://github.com/elastic/eui/pull/4876))
+- Fixed `disabled` background color of `EuiCard` for better visibility on subdued backgrounds ([#4876](https://github.com/elastic/eui/pull/4876))
 
 ## [`34.4.0`](https://github.com/elastic/eui/tree/v34.4.0)
 

i18ntokens.json

@@ -2735,6 +2735,70 @@
     },
     "filepath": "src/components/notification/notification_event_read_button.tsx"
   },
+  {
+    "token": "euiNotificationEventReadIcon.readAria",
+    "defString": "{eventName} is read",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 50,
+        "column": 19
+      },
+      "end": {
+        "line": 56,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/notification/notification_event_read_icon.tsx"
+  },
+  {
+    "token": "euiNotificationEventReadIcon.unreadAria",
+    "defString": "{eventName} is unread",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 58,
+        "column": 21
+      },
+      "end": {
+        "line": 64,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/notification/notification_event_read_icon.tsx"
+  },
+  {
+    "token": "euiNotificationEventReadIcon.read",
+    "defString": "Read",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 65,
+        "column": 20
+      },
+      "end": {
+        "line": 65,
+        "column": 75
+      }
+    },
+    "filepath": "src/components/notification/notification_event_read_icon.tsx"
+  },
+  {
+    "token": "euiNotificationEventReadIcon.unread",
+    "defString": "Unread",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 66,
+        "column": 22
+      },
+      "end": {
+        "line": 69,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/notification/notification_event_read_icon.tsx"
+  },
   {
     "token": "euiPaginationButton.longPageString",
     "defString": "Page {page} of {totalPages}",

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

@@ -143,8 +143,8 @@ export const NotificationEventExample = {
           <EuiText>
             <ul style={{ listStyleType: 'upper-alpha' }}>
               <li>
-                <EuiCode>isRead</EuiCode>: Shows a button that indicates the
-                current <EuiCode>isRead</EuiCode> state of the event. Use{' '}
+                <EuiCode>isRead</EuiCode>: Shows a button or icon that indicates
+                the current <EuiCode>isRead</EuiCode> state of the event. Use{' '}
                 <EuiCode>onRead</EuiCode> to allow users to toggle between read
                 and unread states.
               </li>

src/components/notification/_index.scss

@@ -2,3 +2,4 @@
 @import './notification_event_meta';
 @import './notification_event_messages';
 @import './notification_event_read_button';
+@import './notification_event_read_icon';

src/components/notification/_notification_event_read_icon.scss

@@ -0,0 +1,4 @@
+.euiNotificationEventReadIcon {
+  margin-left: $euiSizeXS;
+  margin-right: $euiSizeXS;
+}

src/components/notification/notification_event.test.tsx

@@ -60,6 +60,7 @@ describe('EuiNotificationEvent', () => {
           type="Alert"
           time="1 min ago"
           isRead={true}
+          onRead={() => {}}
           title="title"
           messages={['message']}
         />
@@ -247,6 +248,7 @@ describe('EuiNotificationEvent', () => {
           type="Alert"
           time="1 min ago"
           isRead={true}
+          onRead={() => {}}
           onClickPrimaryAction={onClickPrimaryAction}
           primaryAction="primary action label"
           title="title"

src/components/notification/notification_event.tsx

@@ -35,6 +35,7 @@ import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiLink } from '../link';
 import { EuiContextMenuItem, EuiContextMenuItemProps } from '../context_menu';
 import { htmlIdGenerator } from '../../services';
+import { EuiNotificationEventReadIcon } from './notification_event_read_icon';
 
 export type EuiNotificationHeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
@@ -135,12 +136,20 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
     <article aria-labelledby={randomHeadingId} className={classes} key={id}>
       {typeof isRead === 'boolean' && (
         <div className="euiNotificationEvent__readButton">
-          <EuiNotificationEventReadButton
-            isRead={isRead}
-            onClick={() => onRead?.(id, isRead)}
-            eventName={title}
-            id={id}
-          />
+          {!!onRead ? (
+            <EuiNotificationEventReadButton
+              isRead={isRead}
+              onClick={() => onRead(id, isRead)}
+              eventName={title}
+              id={id}
+            />
+          ) : (
+            <EuiNotificationEventReadIcon
+              id={id}
+              isRead={isRead}
+              eventName={title}
+            />
+          )}
         </div>
       )}
 

src/components/notification/notification_event_read_icon.tsx

@@ -0,0 +1,85 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiButtonIconProps } from '../button';
+import { useEuiI18n } from '../i18n';
+import classNames from 'classnames';
+import { EuiIcon } from '../icon';
+
+export type EuiNotificationEventReadIconProps = Omit<
+  EuiButtonIconProps,
+  'iconType' | 'isDisabled' | 'isSelected' | 'size'
+> & {
+  id: string;
+  /**
+   * Shows an indicator of the read state of the event
+   */
+  isRead: boolean;
+  /**
+   * A unique, human-friendly name for the event to be used in aria attributes (e.g. "alert-critical-01", "cloud-no-severity-12", etc..).
+   */
+  eventName: string;
+};
+
+export const EuiNotificationEventReadIcon: FunctionComponent<EuiNotificationEventReadIconProps> = ({
+  id,
+  isRead,
+  eventName,
+}) => {
+  const classesReadState = classNames('euiNotificationEventReadIcon', {
+    'euiNotificationEventReadButton--isRead': isRead,
+  });
+
+  const readAria = useEuiI18n(
+    'euiNotificationEventReadIcon.readAria',
+    '{eventName} is read',
+    {
+      eventName,
+    }
+  );
+
+  const unreadAria = useEuiI18n(
+    'euiNotificationEventReadIcon.unreadAria',
+    '{eventName} is unread',
+    {
+      eventName,
+    }
+  );
+  const readTitle = useEuiI18n('euiNotificationEventReadIcon.read', 'Read');
+  const unreadTitle = useEuiI18n(
+    'euiNotificationEventReadIcon.unread',
+    'Unread'
+  );
+
+  const iconAriaLabel = isRead ? readAria : unreadAria;
+  const iconTitle = isRead ? readTitle : unreadTitle;
+
+  return (
+    <div className={classesReadState}>
+      <EuiIcon
+        type="dot"
+        aria-label={iconAriaLabel}
+        title={iconTitle}
+        color="primary"
+        data-test-subj={`${id}-notificationEventReadIcon`}
+      />
+    </div>
+  );
+};