Add EuiTimeline #5730

elizabetdev · 2022-03-17T19:47:36Z

Summary

This PR closes #4492.

There is one implementation in Kibana that is using the EuiComment to create a vertical timeline like the one mentioned in #4492 - a vertical timeline to indicate the life cycle of data.

I could "fix" some props in EuiComment to make the component more open. But IMO the purpose of the component is not meant to be used to create a vertical timeline that indicates the life cycle of data. But to be used to add user/system comments and updates.

EuiTimeline

So this PR adds a EuiTimeline component where consumer just need to pass an array of EuiTimelineItem. Each EuiTimelineItem accepts:

icon: main icon that appears on the left side.
children: event content. You can pass any node.
verticalAlign: vertical aligns the event with the icon

EuiAvatar

Added new color option "subdued" to EuiAvatar

Checklist

kibanamachine · 2022-03-17T20:34:45Z

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

kibanamachine · 2022-03-18T12:30:37Z

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

kibanamachine · 2022-03-21T14:27:05Z

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

kibanamachine · 2022-03-21T17:15:22Z

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

kibanamachine · 2022-03-21T21:38:48Z

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

kibanamachine · 2022-03-22T11:57:30Z

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

kibanamachine · 2022-03-22T13:48:34Z

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

kibanamachine · 2022-03-22T19:38:09Z

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

kibanamachine · 2022-03-22T20:36:46Z

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

Co-authored-by: Caroline Horn <[email protected]>

kibanamachine · 2022-04-07T14:04:58Z

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

kibanamachine · 2022-04-07T15:27:21Z

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

elizabetdev · 2022-04-07T16:04:21Z

@cchaos I went through your review. I also changed a bit the logic of the timeline icon lines in 181da63. The way the timeline was built before was assuming that larger components would always have the alignment "top". Now it works no matter which alignment is passed.

I also added a recommendation for the icon size in 28496cb.

cchaos · 2022-04-07T16:20:28Z

🙌 Nice catch!!! I'll do a final review later today

cchaos

Just some last-minute bugs found from the last round of updates. Also, I'd checkin with @1Copenut to see if he knows of any a11y guidance around timelines.

cchaos · 2022-04-11T19:59:52Z

src/components/timeline/timeline_item_icon.tsx

+
+  const iconRender =
+    typeof icon === 'string' ? (
+      <EuiAvatar color="subdued" name={icon} iconType={icon} />


Since consumer's can now pass simply the iconType as the icon and it you're just passing that on as the name of the EuiAvatar, I think we should do one of two things:

Require an event aria-label (or something) like we require for EuiButtonIcon's which in this case would just pass down as the avatar name.

See if an empty string is valid as an EuiAvatar name instead of passing down the icon name.

Just passing the icon name doesn't really present the user with useful information. They care more what the icon represents not what it is.

And if it's purely decorative, then this extra tooltip is just more noise.

@cchaos, this was fixed in 2c9c667. I added an iconAriaLabel prop that only works when the icon is passed as an IconType. The prop is not required. If not passed we assume the icon is decorative.

Thank you for the heads up @cchaos. I looked over the code before our team sync and didn't see anything that would be an a11y issue on first pass.

I have an idea about exploring this component as an ordered list with list items to provide contextual cues for screen readers. That idea is a pure enhancement, so I'll add it as a research ticket and reference this PR.

src/components/timeline/timeline_item.styles.ts

kibanamachine · 2022-04-12T13:39:28Z

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

kibanamachine · 2022-04-12T16:07:56Z

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

kibanamachine · 2022-04-12T19:02:36Z

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

cchaos

🙌 LGTM! Let's get it in the hands of a consumer. We can follow up with proper a11y since we're labelling it "Beta". But be sure to do so.

src-docs/src/views/timeline/timeline_example.js

thompsongl

Code changes LGTM!

Co-authored-by: Caroline Horn <[email protected]>

kibanamachine · 2022-04-13T12:26:47Z

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

elizabetdev added 2 commits March 17, 2022 13:27

Adding new component

4ad1377

WIP

cd601f7

elizabetdev added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Mar 17, 2022

elizabetdev force-pushed the add-timeline-component branch from b72f0b1 to 35702ac Compare March 17, 2022 19:49

WIP

28e5452

elizabetdev force-pushed the add-timeline-component branch from 35702ac to 28e5452 Compare March 17, 2022 19:58

WIP

8ef5d79

elizabetdev added 2 commits March 18, 2022 23:04

WIP event props

3e8b794

isFigure

42890a4

Simplifying props structure to avoid objects

b9a059e

elizabetdev force-pushed the add-timeline-component branch from d3562f3 to b9a059e Compare March 21, 2022 16:06

Updated textSize in markdown editor example

c3fd70e

elizabetdev added 2 commits March 21, 2022 17:47

Small fixes

74217da

panelProps as object

f0a0927

Better text

4133d83

Fixing rest props

6867384

elizabetdev added 3 commits March 22, 2022 17:04

Updating shade color to subdued in EuiAvatar

d8347d1

No more panelProps

29982a1

Adding isCenterAligned prop

c666cd4

Snippets

a6a1fc3

Adding verticalAlign prop

e1ebaef

elizabetdev and others added 9 commits April 7, 2022 11:21

Update src-docs/src/views/timeline/timeline_example.js

19aa16a

Co-authored-by: Caroline Horn <[email protected]>

Update src-docs/src/views/timeline/timeline_example.js

7d472b6

Co-authored-by: Caroline Horn <[email protected]>

Update src-docs/src/views/timeline/timeline_example.js

cf1dc53

Co-authored-by: Caroline Horn <[email protected]>

Update src-docs/src/views/timeline/timeline_example.js

5f3eada

Co-authored-by: Caroline Horn <[email protected]>

Update src-docs/src/views/timeline/timeline_example.js

a50eebf

Co-authored-by: Caroline Horn <[email protected]>

Prettier 🤩

b75a931

Adjusting the timeline icon line

181da63

Removing verticalAlign="center" from examples

391b5b5

Fixing path to type

8c91017

Recommendation for icon size

28496cb

cchaos reviewed Apr 11, 2022

View reviewed changes

Adding iconAriaLabel to EuiTimelineItem

2c9c667

Fixing issue with center vertical alignment

16a506e

Adding dot into prop description.

9172994

cchaos approved these changes Apr 12, 2022

View reviewed changes

src-docs/src/views/timeline/timeline_example.js Outdated Show resolved Hide resolved

1Copenut mentioned this pull request Apr 12, 2022

[EuiTimeline][COGNITION]: Could we refine the HTML to make this an ordered list with list items? #5782

Closed

thompsongl approved these changes Apr 12, 2022

View reviewed changes

Update src-docs/src/views/timeline/timeline_example.js

c25b3d4

Co-authored-by: Caroline Horn <[email protected]>

elizabetdev merged commit 86c69a6 into elastic:main Apr 13, 2022

yuliacech mentioned this pull request Apr 14, 2022

[ILM] Update edit policy form to use EuiTimeline instead of EuiComment elastic/kibana#130302

Closed

thompsongl mentioned this pull request Apr 19, 2022

Upgrade EUI to v55.0.1 elastic/kibana#130593

Merged

elizabetdev mentioned this pull request Apr 28, 2022

[EuiComment] Add "custom" option to EuiComment.type and more enhancements #5692

Closed

13 tasks

Add EuiTimeline #5730

Add EuiTimeline #5730

Uh oh!

Conversation

elizabetdev commented Mar 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

EuiTimeline

EuiAvatar

Checklist

Uh oh!

kibanamachine commented Mar 17, 2022

Uh oh!

kibanamachine commented Mar 18, 2022

Uh oh!

kibanamachine commented Mar 21, 2022

Uh oh!

kibanamachine commented Mar 21, 2022

Uh oh!

kibanamachine commented Mar 21, 2022

Uh oh!

kibanamachine commented Mar 22, 2022

Uh oh!

kibanamachine commented Mar 22, 2022

Uh oh!

kibanamachine commented Mar 22, 2022

Uh oh!

kibanamachine commented Mar 22, 2022

Uh oh!

kibanamachine commented Apr 7, 2022

Uh oh!

kibanamachine commented Apr 7, 2022

Uh oh!

elizabetdev commented Apr 7, 2022

Uh oh!

cchaos commented Apr 7, 2022

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos Apr 11, 2022

Choose a reason for hiding this comment

Uh oh!

elizabetdev Apr 12, 2022

Choose a reason for hiding this comment

Uh oh!

1Copenut Apr 12, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Apr 12, 2022

Uh oh!

kibanamachine commented Apr 12, 2022

Uh oh!

kibanamachine commented Apr 12, 2022

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Apr 13, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

elizabetdev commented Mar 17, 2022 •

edited

Loading