diff --git a/src-docs/src/views/notification_event/notification_event_example.js b/src-docs/src/views/notification_event/notification_event_example.js index 421e271866e..cb952dd5bef 100644 --- a/src-docs/src/views/notification_event/notification_event_example.js +++ b/src-docs/src/views/notification_event/notification_event_example.js @@ -1,225 +1,34 @@ import React from 'react'; -import { GuideSectionTypes } from '../../components'; -import { Link } from 'react-router-dom'; -import { - EuiNotificationEvent, - EuiText, - EuiContextMenuItem, - EuiSpacer, - EuiCode, - EuiAccordion, - EuiCodeBlock, - EuiButtonEmpty as EuiPrimaryActionProps, -} from '../../../../src/components'; -import NotificationEventPropsMethods from './notification_event_props_methods'; -import NotificationEvent from './notification_event'; -const notificationEventSource = require('!!raw-loader!./notification_event'); - -import NotificationEventFlexible from './notification_event_flexible'; -const notificationEventFlexibleSource = require('!!raw-loader!./notification_event_flexible'); - -import NotificationsFeed from './notifications_feed'; -const notificationsFeedSource = require('!!raw-loader!./notifications_feed'); - -const notificationEventSnippet = ``; - -const notificationEventFeedSnippet = `// we're looping through an array of objects to render multiple EuiNotificationEvent -const notificationEvents = events.map((event) => ( - -)); - -// the multiple EuiNotificationEvent should live inside the same container -
- {notificationEvents} -
-`; +import { EuiCallOut, EuiLink } from '../../../../src/components'; export const NotificationEventExample = { title: 'Notification event', - intro: ( - -

- Use EuiNotificationEvent to display notifications about - new events in your product like alerts, support, or news. This component - is meant to live inside a{' '} - - EuiFlyout - {' '} - so that users can quickly be informed or take action. -

- - ), + isDeprecated: true, sections: [ { - source: [ - { - type: GuideSectionTypes.JS, - code: notificationEventSource, - }, - ], - props: { - EuiNotificationEvent, - EuiContextMenuItem, - EuiPrimaryActionProps, - }, - snippet: notificationEventSnippet, - demo: , - }, - { - source: [ - { - type: GuideSectionTypes.JS, - code: notificationEventFlexibleSource, - }, - ], - title: 'A flexible component', - text: ( - <> - -

- The EuiNotificationEvent takes into account that - an event can be purely informative or actionable. It is flexible - and adapts the design according to the props passed. -

- - - - - Code snippet} - > - - - {notificationEventSnippet} - - - - -
    -
  • - isRead: Shows a button or icon that indicates - the current isRead state of the event. Use{' '} - onRead to allow users to toggle between read - and unread states. -
    • -
  • - iconType: Display an icon or logo to help - users quickly identify where the event originated. -
    • -
  • - type (required): Shows inside a badge - denoting what type of event it is. Use in conjunction with{' '} - severity and badgeColor to - indicate the level of urgency. -
    • -
  • - time (required): Indicates the time the event - was received. It is recommended to display a relative time - format like '2 hours ago'. -
    • -
  • - onContextMenu: Use this prop when you have - multiple events and you need to add individual actions to each - event. You can add filters based on the event type or a more - descriptive read/unread actions as an alternative to the read - indicator. -
    • -
  • - title (required): The title of the - notification event. It should be descriptive enough so that - users don't need to navigate away. But use it in - conjunction with an onClickTitle to direct - users to the respective app in case they need more information - about the notification. -
    • -
  • - messages: Provides more details about the - event. You can provide a single message or multiple messages if - the event executes in various steps. -
    • -
  • - primaryAction: Use this prop in conjunction - with onClickPrimaryAction to provide a call - to action, like download a report or link to a page where an - action is required. Most of the time, the clickable title is - enough. -
    • -
- - - -

- The following demo shows how you can combine different props to - create different types of events like a report, alert, or simply - news. -

- - - ), - props: { - EuiNotificationEvent, - EuiContextMenuItem, - EuiPrimaryActionProps, - }, - snippet: notificationEventSnippet, - demo: , - }, - { - source: [ - { - type: GuideSectionTypes.JS, - code: notificationsFeedSource, - }, - ], - title: 'Notifications feed', text: ( -

- You can create a notifications feed by rendering multiple{' '} - EuiNotificationEvent. These components should live - inside a container without other components on the same level. This - way, we ensure that feed styles are applied correctly. Consuming - applications should implement all the logic to filter and save - read/unread states. -

+ +

+ EuiNotificationEvent is being deprecated due to low + usage and high maintenance requirements. +

+

+ If necessary, we recommend{' '} + + copying the component to your application + + . The component will be permanently removed in December 2023. +

+ ), - props: { - EuiNotificationEvent, - EuiContextMenuItem, - EuiPrimaryActionProps, - }, - snippet: notificationEventFeedSnippet, - demo: , }, ], }; diff --git a/src/components/notification/notification_event.tsx b/src/components/notification/notification_event.tsx index 3ca54867ce0..3ec68e37535 100644 --- a/src/components/notification/notification_event.tsx +++ b/src/components/notification/notification_event.tsx @@ -36,6 +36,9 @@ import { EuiNotificationEventReadIcon } from './notification_event_read_icon'; export type EuiNotificationHeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; +/** + * @deprecated + */ export type EuiNotificationEventProps = Omit< EuiNotificationEventMetaProps, 'onOpenContextMenu' | 'onRead' | 'eventName' | 'id' @@ -96,6 +99,12 @@ export type EuiNotificationEventProps = Omit< >; }; +/** + * @deprecated - EuiNotificationEvent is scheduled for deprecation due to low internal usage and high + * maintenance requirements. If necessary, we recommend copying this component into your own application. + * + * The component will be permanently removed in December 2023. + */ export const EuiNotificationEvent: FunctionComponent< EuiNotificationEventProps > = ({