[Feature notification] Add EuiNotificationEvent by elizabetdev · Pull Request #4531 · elastic/eui

elizabetdev · 2021-02-16T19:08:53Z

Summary

This PR adds a EuiNotificationEvent and all the documentation.

Notifications feed

This PR also adds a section in the docs to show how to render multiple EuiNotificationEvent.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
~~[ ] Checked Code Sandbox works for the any docs examples~~
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
~~[ ] A changelog entry exists and is marked appropriately~~

kibanamachine · 2021-02-16T19:29:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-17T17:06:49Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-17T19:31:23Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-18T11:16:50Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-19T16:09:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

src-docs/src/views/notification_events/notification_events.tsx

kibanamachine · 2021-02-22T13:47:47Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-23T15:26:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-02-23T19:33:09Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

…s://github.com/chandlerprall/eui into chandlerprall-notification-events-content-context-menu-items

…s-content-context-menu-items Notification events content context menu items

kibanamachine · 2021-03-04T16:09:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

elizabetdev · 2021-03-04T18:52:15Z

Based on the PR reviews:

Tests and docs usage were updated to reflect the EventName change.
Updated the more messages button. Now it says + 2 more and the link is using the primary color. If there are only 2 messages the button doesn't appear. I think it was weird to add just one message to the accordion. The icon is now properly aligned with the bottom content.

Fixed the demo to make it responsive (badge truncates) and to reflect the meta props that are now spread out:

No more playground for the EuiNotificationEventReadButton component and it is no longer exported.
I did a few structural changes. The EuiNotificationEventReadButton is no longer part of the meta component.
I also tried different usage scenarios. With and without the read button and the context menu.

Split the primaryAction prop into primaryAction and primaryActionProps

kibanamachine · 2021-03-04T18:56:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

cchaos

🎉 Awesome, thank you for those updates @miukimiu !

I'm just seeing a couple more nit-picky design things.

I think because you've pulled the button out of the meta component, which established the overall min height the rest of the meta stuff aligned well vertically. Now not so much. Maybe that container just needs a min-height of 24px (the same as the size of the button).

The only thing about showing the accordion only if there are more than 2 messages is the inconsistency of showing only 1 message when there are 3+. It's much better to have a consistent understanding that only the first message is ever shown, even if it says "+1 more".

The rest of my comments are mainly grammatical. But I really love that the event itself has all the required props at the top level now. It'll be so much easier to implement.

src-docs/src/views/notification_event/notifications_feed.tsx

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

src/components/notification/_notification_event_messages.scss

src/components/notification/notification_event_meta.tsx

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2021-03-05T11:30:30Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-03-05T16:25:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-03-05T18:01:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

kibanamachine · 2021-03-05T18:53:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4531/

cchaos

Looks great to me! Thank you for making all those changes. The docs are really helpful in explaining the correct usages of this component. 🎉

* [Feature Notification] Add EuiNotificationEventMeta (#4433) * Add notification event meta * WIP * adding i18n * Fixing axe error in docs example * Adding context menus items * contetx menu item anchor position * Adding tests * Update src/components/notification/notification_event_meta.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Improving code based on PR review * More PR review * Better description * Update src/components/notification/notification_event_meta.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_events/notification_events.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Badge 100% width * ES lint * Read and unread states * Make sure overflow menu stays in the top right * Improving a11y * Adding playground for event read button * Removing EuiNotificationEventMeta from exported on index * Add a behavior unit test, update context menu test to snapshot the menu items * Update src/components/notification/notification_event_meta.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src/components/notification/notification_event_read_button.tsx Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * [Feature Notification] Adding animation prop to EuiHeaderSectionItemButton (#4424) * Adding animation and hasBackground props to EuiHeaderSectionItemButton * A few improvements * Docs props * Removing hasBackground prop * Using JS do hide and show on xs breakpoints * Adding a snippet * refactor animation prop into a ref method * Snapshots. Trigger animation comments. * Deleting unused css animation * triggerAnimation explanation * Cleaned up some logic and created a docs example specifically for the notifications * re-enable the animation test * Update src-docs/src/views/header/header_animate.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/header/header_example.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/header/header_alert.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/header/header_alert.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/header/header_animate.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/header/header_example.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * renaming animate methods to euiAnimate * euiAnimate into header example * simplifying onClick closeFlyout * Update src-docs/src/views/header/header_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * [Feature notification] Add EuiNotificationEvent (#4531) * Notification events * Looping through EuiNotificationEvent * Adding props table and more methods * wip * Renaming event notifications to event messages * onClickNoNewsTitles * Toggle mark as read/unread * Initial documentation * Improving examples * Fixing TS error * Refactored EuiEventNotification context menu item creation * improving data * Notifications data * Primary example buttons * Reset data * More docs * snippets * Adding tests * Better messages explanation * Better snippets * Small fixes * Missing prop explanation * Adding heading level * Adding flexible comp section * More a11y * Update src/components/notification/notification_event_messages.tsx Co-authored-by: Michail Yasonik <michail@yasonik.com> * Button messages ay11 * test * Better descriptions * Tests * Adding icon arial label into notifications feed example * i18n token * i18n token * i18 token again * primaryAction description * More description * Update src/components/notification/notification_event_messages.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/notification/notification_event_messages.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Addressing PR review * More improvements * Adding comment * Excluding `eventName` at top level and changing title vs aria-label on read button * Fix title * Fixing tests and removing evenName from docs usage * Fixing icon margin * More tests and small fixes * Moving read button from event meta comp to event comp * Split primaryAction and primaryActionProps * Exposing EuiPrimaryActionProps in props table * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/notification_event/notification_event_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Messages length and more * Fixing data test subj * Renaming tsx examples to js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Michail Yasonik <michail@yasonik.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co> * Adding CL * Fixing CL a11y issue * Reverse logic in the ternary operator * Removed unecessary optional types in EuiNotificationEventMeta Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Michail Yasonik <michail@yasonik.com>

Notification events

2243a51

Looping through EuiNotificationEvent

d651459

Adding props table and more methods

a424dab

wip

772012c

elizabetdev added 3 commits February 19, 2021 15:37

Renaming event notifications to event messages

aed40dc

onClickNoNewsTitles

cbd4c0a

Toggle mark as read/unread

49630c1

elizabetdev commented Feb 19, 2021

View reviewed changes

src-docs/src/views/notification_events/notification_events.tsx Outdated Show resolved Hide resolved

elizabetdev commented Feb 19, 2021

View reviewed changes

src-docs/src/views/notification_events/notification_events.tsx Outdated Show resolved Hide resolved

elizabetdev and others added 8 commits February 19, 2021 20:03

Initial documentation

6c0efac

Improving examples

7a2e13e

Fixing TS error

afee6bb

Refactored EuiEventNotification context menu item creation

6daed5b

improving data

cdad6f8

Notifications data

6f57571

Primary example buttons

e142a1a

Reset data

09868a3

More docs

89c7f79

snippets

8cb9958

elizabetdev added 2 commits February 24, 2021 16:04

Merge branch 'notification-events-content-context-menu-items' of http…

7ea4356

…s://github.com/chandlerprall/eui into chandlerprall-notification-events-content-context-menu-items

Merge pull request #15 from miukimiu/chandlerprall-notification-event…

0e94d78

…s-content-context-menu-items Notification events content context menu items

elizabetdev changed the title ~~[Feature notification] Add EuiNotificationEvents~~ [Feature notification] Add EuiNotificationEvent Feb 24, 2021

elizabetdev added 3 commits March 4, 2021 13:05

Fixing icon margin

4b3a095

More tests and small fixes

f73f685

Moving read button from event meta comp to event comp

62e2a31

elizabetdev added 2 commits March 4, 2021 18:22

Split primaryAction and primaryActionProps

17f8c60

Exposing EuiPrimaryActionProps in props table

aa19641

cchaos reviewed Mar 4, 2021

View reviewed changes

elizabetdev and others added 7 commits March 5, 2021 11:04

Update src-docs/src/views/notification_event/notification_event_examp…

355131b

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

b6ee7e2

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

79576d6

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

23d2d7f

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

06b56bf

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

d876039

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/notification_event/notification_event_examp…

190ab23

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Messages length and more

9bcb214

Fixing data test subj

6a1732e

Renaming tsx examples to js

890f8c4

elizabetdev requested a review from cchaos March 8, 2021 12:52

cchaos reviewed Mar 8, 2021

View reviewed changes

cchaos approved these changes Mar 8, 2021

View reviewed changes

elizabetdev merged commit 917d59a into elastic:feature/notification Mar 9, 2021

elizabetdev mentioned this pull request Mar 9, 2021

[Feature branch] Notification #4513

Merged

10 tasks

clintandrewhall mentioned this pull request Apr 11, 2025

🌅 [Horizon] Notification Center elastic/kibana#217082

Open

Conversation

elizabetdev commented Feb 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notifications feed

Checklist

Uh oh!

kibanamachine commented Feb 16, 2021

Uh oh!

kibanamachine commented Feb 17, 2021

Uh oh!

kibanamachine commented Feb 17, 2021

Uh oh!

kibanamachine commented Feb 18, 2021

Uh oh!

kibanamachine commented Feb 19, 2021

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Feb 22, 2021

Uh oh!

kibanamachine commented Feb 23, 2021

Uh oh!

kibanamachine commented Feb 23, 2021

Uh oh!

kibanamachine commented Mar 4, 2021

Uh oh!

elizabetdev commented Mar 4, 2021

Uh oh!

kibanamachine commented Mar 4, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Mar 5, 2021

Uh oh!

kibanamachine commented Mar 5, 2021

Uh oh!

kibanamachine commented Mar 5, 2021

Uh oh!

kibanamachine commented Mar 5, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

elizabetdev commented Feb 16, 2021 •

edited

Loading