From 4ad13778649e4451f2a0d8339f41d4cb6ee3676e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 17 Mar 2022 13:27:32 +0000 Subject: [PATCH 01/59] Adding new component --- src-docs/src/routes.js | 3 + src-docs/src/views/timeline/timeline.tsx | 25 +++++ .../src/views/timeline/timeline_example.js | 98 +++++++++++++++++++ src-docs/src/views/timeline/timeline_item.tsx | 13 +++ .../views/timeline/timeline_item_panel.tsx | 31 ++++++ .../avatar/__snapshots__/avatar.test.tsx.snap | 15 +++ src/components/avatar/_avatar.scss | 5 + src/components/avatar/avatar.test.tsx | 6 ++ src/components/avatar/avatar.tsx | 10 +- src/components/index.scss | 1 + src/components/index.ts | 2 + src/components/timeline/_index.scss | 4 + src/components/timeline/_timeline_item.scss | 34 +++++++ .../timeline/_timeline_item_event.scss | 3 + .../timeline/_timeline_item_icon.scss | 18 ++++ .../timeline/_timeline_item_panel.scss | 3 + src/components/timeline/index.ts | 19 ++++ src/components/timeline/timeline.tsx | 42 ++++++++ src/components/timeline/timeline_item.tsx | 43 ++++++++ .../timeline/timeline_item_event.tsx | 21 ++++ .../timeline/timeline_item_icon.tsx | 38 +++++++ .../timeline/timeline_item_panel.tsx | 47 +++++++++ 22 files changed, 477 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/timeline/timeline.tsx create mode 100644 src-docs/src/views/timeline/timeline_example.js create mode 100644 src-docs/src/views/timeline/timeline_item.tsx create mode 100644 src-docs/src/views/timeline/timeline_item_panel.tsx create mode 100644 src/components/timeline/_index.scss create mode 100644 src/components/timeline/_timeline_item.scss create mode 100644 src/components/timeline/_timeline_item_event.scss create mode 100644 src/components/timeline/_timeline_item_icon.scss create mode 100644 src/components/timeline/_timeline_item_panel.scss create mode 100644 src/components/timeline/index.ts create mode 100644 src/components/timeline/timeline.tsx create mode 100644 src/components/timeline/timeline_item.tsx create mode 100644 src/components/timeline/timeline_item_event.tsx create mode 100644 src/components/timeline/timeline_item_icon.tsx create mode 100644 src/components/timeline/timeline_item_panel.tsx diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index f6fd11d5e54..870dbb8fd34 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -215,6 +215,8 @@ import { TextDiffExample } from './views/text_diff/text_diff_example'; import { TextExample } from './views/text/text_example'; +import { TimelineExample } from './views/timeline/timeline_example'; + import { TitleExample } from './views/title/title_example'; import { ToastExample } from './views/toast/toast_example'; @@ -496,6 +498,7 @@ const navigation = [ ProgressExample, StatExample, TextExample, + TimelineExample, TitleExample, ToastExample, ToolTipExample, diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx new file mode 100644 index 00000000000..60b08dd36f7 --- /dev/null +++ b/src-docs/src/views/timeline/timeline.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { + EuiTimeline, + EuiTimelineProps, +} from '../../../../src/components/timeline'; +import { EuiPanel } from '../../../../src/components/'; + +const body = Lorem; + +const items: EuiTimelineProps['items'] = [ + { + icon: 'user', + children: body, + }, + { + icon: 'user', + children: body, + }, + { + icon: 'user', + children: body, + }, +]; + +export default () => ; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js new file mode 100644 index 00000000000..742d0d044fa --- /dev/null +++ b/src-docs/src/views/timeline/timeline_example.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; + +import { EuiCode, EuiTimeline } from '../../../../src/components'; + +import Timeline from './timeline'; +const timelineSource = require('!!raw-loader!./timeline'); +const timelineSnippet = ``; + +import TimelineItem from './timeline_item'; +const timelineItemSource = require('!!raw-loader!./timeline_item'); +const timelineItemSnippet = ` + {body} +`; + +import TimelineItemPanel from './timeline_item_panel'; +const timelineItemPanelSource = require('!!raw-loader!./timeline_item_panel'); +const timelineItemPanelSnippet = ` + {body} +`; + +export const TimelineExample = { + title: 'Timeline', + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: timelineSource, + }, + ], + text: ( +
+ Use EuiTimeline to display a list of{' '} + EuiTimelines. Pass an array of{' '} + EuiTimeline objects and EuiTimeline{' '} + will generate a timeline thread. +
+ ), + props: { EuiTimeline, EuiTimeline }, + snippet: timelineSnippet, + demo: , + }, + { + title: 'Timeline item', + source: [ + { + type: GuideSectionTypes.JS, + code: timelineItemSource, + }, + ], + text: ( +
+

+ Use EuiTimeline to display timelines. Each{' '} + EuiTimeline has two parts: a{' '} + timelineIcon on the left and content on the + right. +

+
+ ), + props: { EuiTimeline }, + snippet: timelineItemSnippet, + demo: , + }, + { + title: 'Timeline item panel', + source: [ + { + type: GuideSectionTypes.JS, + code: timelineItemPanelSource, + }, + ], + text: ( +
+

+ Use EuiTimeline to display timelines. Each{' '} + EuiTimeline has two parts: a{' '} + timelineIcon on the left and content on the + right. +

+
+ ), + props: { EuiTimeline }, + snippet: timelineItemPanelSnippet, + demo: , + }, + ], +}; diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx new file mode 100644 index 00000000000..c83fe8f9e5c --- /dev/null +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { + EuiTimelineItem, + EuiTimelineItemPanel, +} from '../../../../src/components'; + +export default () => ( +
+ + Lorem + +
+); diff --git a/src-docs/src/views/timeline/timeline_item_panel.tsx b/src-docs/src/views/timeline/timeline_item_panel.tsx new file mode 100644 index 00000000000..60a9d950562 --- /dev/null +++ b/src-docs/src/views/timeline/timeline_item_panel.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { + EuiTimelineItem, + EuiTimelineItemPanel, + EuiAvatar, +} from '../../../../src/components'; + +export default () => ( +
+ }> + +

Lorem ipsum

+ + + } + > + +

No header just a panel

+ + + + } + > + +

No header just a panel

+ + +
+); diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap index 1559166b8fa..71fed329935 100644 --- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap +++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap @@ -64,6 +64,21 @@ exports[`EuiAvatar props color as plain is rendered 1`] = ` `; +exports[`EuiAvatar props color as shade is rendered 1`] = ` + +`; + exports[`EuiAvatar props color as string is rendered 1`] = `
{ expect(component).toMatchSnapshot(); }); + + it('as shade is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); describe('isDisabled', () => { diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index e526f626759..75abe838c38 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -84,9 +84,9 @@ export type EuiAvatarProps = Omit, 'color'> & /** * Accepts hex values like `#FFFFFF`, `#000` otherwise a viz palette color will be assigned. - * Or pass `'plain'` for an empty shade or `null` to remove entirely and the text/icon color will `inherit` + * Or pass `'plain'` for an empty shade, `'shade'` for an light shade or `null` to remove entirely and the text/icon color will `inherit` */ - color?: string | 'plain' | null; + color?: string | 'plain' | 'shade' | null; /** * The type of avatar mainly controlling the shape. @@ -127,6 +127,7 @@ export const EuiAvatar: FunctionComponent = ({ { 'euiAvatar-isDisabled': isDisabled, 'euiAvatar--plain': color === 'plain', + 'euiAvatar--shade': color === 'shade', }, className ); @@ -136,7 +137,7 @@ export const EuiAvatar: FunctionComponent = ({ const avatarStyle: CSSProperties = style || {}; let iconCustomColor = iconColor; - const isNamedColor = color === 'plain' || color === null; + const isNamedColor = color === 'plain' || color === 'shade' || color === null; if (!isNamedColor) { checkValidColor(color); @@ -191,7 +192,8 @@ export const EuiAvatar: FunctionComponent = ({ // TODO: Migrate to a service export const checkValidColor = (color: EuiAvatarProps['color']) => { - const validHex = (color && isValidHex(color)) || color === 'plain'; + const validHex = + (color && isValidHex(color)) || color === 'plain' || color === 'shade'; if (color && !validHex) { throw new Error( 'EuiAvatar needs to pass a valid color. This can either be a three ' + diff --git a/src/components/index.scss b/src/components/index.scss index a42e85b124e..0d26b622c2e 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -62,6 +62,7 @@ @import 'table/index'; @import 'tabs/index'; @import 'text_diff/index'; +@import 'timeline/index'; @import 'title/index'; @import 'toast/index'; @import 'token/index'; diff --git a/src/components/index.ts b/src/components/index.ts index 54167a1415a..b689a113de5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -161,6 +161,8 @@ export * from './text'; export * from './text_diff'; +export * from './timeline'; + export * from './title'; export * from './toast'; diff --git a/src/components/timeline/_index.scss b/src/components/timeline/_index.scss new file mode 100644 index 00000000000..82bd7da27a8 --- /dev/null +++ b/src/components/timeline/_index.scss @@ -0,0 +1,4 @@ +@import 'timeline_item'; +@import 'timeline_item_event'; +@import 'timeline_item_icon'; +@import 'timeline_item_panel'; \ No newline at end of file diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss new file mode 100644 index 00000000000..2b361aebbf2 --- /dev/null +++ b/src/components/timeline/_timeline_item.scss @@ -0,0 +1,34 @@ +.euiTimelineItem { + font-size: $euiFontSizeS; + display: flex; + padding-bottom: $euiSize; + min-height: $euiSize * 3.5; + + .euiTimelineItemEvent { + flex-grow: 1; + } + + .euiTimelineItemIcon { + position: relative; + flex-grow: 0; + margin-right: $euiSize; + + &::before { + content: ''; + position: absolute; + left: $euiSizeXXL / 2; + top: $euiSize; + width: $euiSizeXS / 2; + background-color: $euiColorLightShade; + height: calc(100% + #{$euiSize}); + } + } +} + +.euiTimelineItem:last-of-type { + .euiTimelineItemIcon { + &::before { + display: none; + } + } +} diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss new file mode 100644 index 00000000000..a31445da8c5 --- /dev/null +++ b/src/components/timeline/_timeline_item_event.scss @@ -0,0 +1,3 @@ +.euiTimelineItemEvent { + overflow: hidden; +} diff --git a/src/components/timeline/_timeline_item_icon.scss b/src/components/timeline/_timeline_item_icon.scss new file mode 100644 index 00000000000..c2440f45ddb --- /dev/null +++ b/src/components/timeline/_timeline_item_icon.scss @@ -0,0 +1,18 @@ +.euiTimelineItemIcon__content { + min-width: $euiSizeXXL; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.euiTimelineItemIcon__iconBackground { + display: flex; + justify-content: center; + align-items: center; + overflow-x: hidden; + border-radius: 50%; + background-color: $euiColorLightestShade; + width: $euiSizeXL; + height: $euiSizeXL; +} \ No newline at end of file diff --git a/src/components/timeline/_timeline_item_panel.scss b/src/components/timeline/_timeline_item_panel.scss new file mode 100644 index 00000000000..15bb95ea1ca --- /dev/null +++ b/src/components/timeline/_timeline_item_panel.scss @@ -0,0 +1,3 @@ +.euiTimelineItemPanel__header { + border-bottom: $euiBorderThin; +} diff --git a/src/components/timeline/index.ts b/src/components/timeline/index.ts new file mode 100644 index 00000000000..b7a2bc0d0ba --- /dev/null +++ b/src/components/timeline/index.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export type { EuiTimelineItemProps } from './timeline_item'; +export { EuiTimelineItem } from './timeline_item'; + +export { EuiTimelineItemEvent } from './timeline_item_event'; + +export { EuiTimelineItemIcon } from './timeline_item_icon'; + +export { EuiTimelineItemPanel } from './timeline_item_panel'; + +export type { EuiTimelineProps } from './timeline'; +export { EuiTimeline } from './timeline'; diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx new file mode 100644 index 00000000000..6e1e14f98d9 --- /dev/null +++ b/src/components/timeline/timeline.tsx @@ -0,0 +1,42 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; +import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item'; + +export type EuiTimelineProps = HTMLAttributes & + CommonProps & { + /** + * List of timelines to render. See #EuiTimeline + */ + items?: EuiTimelineItemProps[]; + }; + +export const EuiTimeline: FunctionComponent = ({ + className, + items, + ...rest +}) => { + const classes = classNames('euiTimeline', className); + + let timelineElements = null; + + if (items) { + timelineElements = items.map((item, index) => ( + + )); + } + + return ( +
+ {timelineElements} +
+ ); +}; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx new file mode 100644 index 00000000000..0048638483a --- /dev/null +++ b/src/components/timeline/timeline_item.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import classNames from 'classnames'; +import { keysOf } from '../common'; +import { EuiTimelineItemEvent } from './timeline_item_event'; +import { + EuiTimelineItemIcon, + EuiTimelineItemIconProps, +} from './timeline_item_icon'; + +export type EuiTimelineItemProps = HTMLAttributes & + EuiTimelineItemIconProps; + +const typeToClassNameMap = { + regular: '', + update: 'euiTimeline--update', + custom: '', +}; + +export const TYPES = keysOf(typeToClassNameMap); + +export const EuiTimelineItem: FunctionComponent = ({ + children, + className, + icon, + ...rest +}) => { + const classes = classNames('euiTimelineItem', className); + + return ( +
+ + {children} +
+ ); +}; diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx new file mode 100644 index 00000000000..fe9e7762a80 --- /dev/null +++ b/src/components/timeline/timeline_item_event.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; +export interface EuiTimelineItemEventProps extends CommonProps {} + +export const EuiTimelineItemEvent: FunctionComponent = ({ + children, + className, +}) => { + const classes = classNames('euiTimelineItemEvent', className); + + return
{children}
; +}; diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx new file mode 100644 index 00000000000..b4669dd57ae --- /dev/null +++ b/src/components/timeline/timeline_item_icon.tsx @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent, ReactNode } from 'react'; +import classNames from 'classnames'; +import { CommonProps } from '../common'; +import { EuiIcon, IconType } from '../icon'; + +export interface EuiTimelineItemIconProps extends CommonProps { + /** + * Main icon. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. + */ + icon?: ReactNode | IconType; +} + +export const EuiTimelineItemIcon: FunctionComponent = ({ + icon, + className, +}) => { + const iconRender = typeof icon === 'string' ? : icon; + const classes = classNames('euiTimelineItemIcon', className); + const iconClasses = classNames({ + euiTimelineItemIcon__iconBackground: typeof icon === 'string', + }); + + return ( +
+
+
{iconRender}
+
+
+ ); +}; diff --git a/src/components/timeline/timeline_item_panel.tsx b/src/components/timeline/timeline_item_panel.tsx new file mode 100644 index 00000000000..01acfc25b95 --- /dev/null +++ b/src/components/timeline/timeline_item_panel.tsx @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React, { FunctionComponent, ReactNode } from 'react'; +import classNames from 'classnames'; +import { EuiSplitPanel } from '../panel'; +import { + _EuiSplitPanelOuterProps, + _EuiSplitPanelInnerProps, +} from '../panel/split_panel'; + +export type EuiTimelineItemPanelProps = { + header?: ReactNode; + paddingSize?: _EuiSplitPanelInnerProps['paddingSize']; +} & Omit<_EuiSplitPanelOuterProps, 'hasBorder'>; + +export const EuiTimelineItemPanel: FunctionComponent = ({ + children, + className, + header, + paddingSize, +}) => { + const classes = classNames('euiTimelineItemPanel', className); + + return ( + + {header && ( + + {header} + + )} + + + {children} + + + ); +}; From cd601f711fa7f253ed0baf54bd7eedf1809d6b0b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 17 Mar 2022 19:25:58 +0000 Subject: [PATCH 02/59] WIP --- src-docs/src/views/timeline/timeline.tsx | 4 +- .../src/views/timeline/timeline_complex.tsx | 139 ++++++++++++++++++ .../src/views/timeline/timeline_example.js | 79 +++++++--- .../views/timeline/timeline_item_panel.tsx | 86 +++++++++-- .../timeline/_timeline_item_panel.scss | 45 +++++- .../timeline/timeline_item_panel.tsx | 89 ++++++++--- 6 files changed, 384 insertions(+), 58 deletions(-) create mode 100644 src-docs/src/views/timeline/timeline_complex.tsx diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 60b08dd36f7..6950f522220 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { EuiTimeline, EuiTimelineProps, + EuiTimelineItemPanel, } from '../../../../src/components/timeline'; -import { EuiPanel } from '../../../../src/components/'; -const body = Lorem; +const body = Lorem; const items: EuiTimelineProps['items'] = [ { diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx new file mode 100644 index 00000000000..46d0162fad1 --- /dev/null +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -0,0 +1,139 @@ +import React, { useState } from 'react'; +import { + EuiTimelineItem, + EuiTimelineItemPanel, + EuiAvatar, + EuiText, + EuiSwitch, + EuiAccordion, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiLink, + EuiMarkdownEditor, + EuiPanel, + EuiBadge, + EuiTitle, +} from '../../../../src/components'; + +import { useGeneratedHtmlId } from '../../../../src/services'; + +export default () => { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + const toggleTextSwitchId = useGeneratedHtmlId({ prefix: 'toggleTextSwitch' }); + const buttonElementAccordionId = useGeneratedHtmlId({ + prefix: 'buttonElementAccordion', + }); + + const onChange1 = (e: { + target: { checked: React.SetStateAction }; + }) => { + setChecked1(e.target.checked); + }; + + const onChange2 = (e: { + target: { checked: React.SetStateAction }; + }) => { + setChecked2(e.target.checked); + }; + + const onChange3 = (e: { + target: { checked: React.SetStateAction }; + }) => { + setChecked3(e.target.checked); + }; + + const phase = (title: string, checked: boolean, onChange: any) => ( + + ) : ( + + ) + } + > + + + + + + +

{title}

+ + + + } + > + +

+ Move data to the cold tier when you are searching it less often and + don’t need to update it. The cold tier is optimized for cost savings + over search performance. +

+ + + {checked && ( + <> + + + + Any content inside of EuiAccordion will appear + here. + + + + )} + + + ); + + return ( +
+ } + > + +

+ Hot phase Required +

+ + } + > +

+ Store your most recent, most frequently-searched data in the hot + tier. The hot tier provides the best indexing and search performance + by using the most powerful, expensive hardware. +

+ + + + {phase('Warm phase', checked1, onChange1)} + + {phase('Cold phase', checked2, onChange2)} + + {phase('Frozen phase', checked3, onChange3)} +
+ ); +}; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 742d0d044fa..f542bc7c15b 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -1,16 +1,20 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiTimeline } from '../../../../src/components'; +import { + EuiCode, + EuiTimeline, + EuiTimelineItem, + EuiTimelineItemPanel, +} from '../../../../src/components'; import Timeline from './timeline'; const timelineSource = require('!!raw-loader!./timeline'); const timelineSnippet = ` +const timelineItemSnippet = ` {body} `; import TimelineItemPanel from './timeline_item_panel'; const timelineItemPanelSource = require('!!raw-loader!./timeline_item_panel'); -const timelineItemPanelSnippet = ` +const timelineItemPanelSnippet = ` {body} -`; +`; + +import TimelineComplex from './timeline_complex'; +const TimelineComplexSource = require('!!raw-loader!./timeline_complex'); export const TimelineExample = { title: 'Timeline', @@ -40,10 +47,11 @@ export const TimelineExample = { ], text: (
- Use EuiTimeline to display a list of{' '} - EuiTimelines. Pass an array of{' '} - EuiTimeline objects and EuiTimeline{' '} - will generate a timeline thread. + The EuiTimeline component is somehow an opinionated + component that standardizes the way a timeline thread is displayed. + But it gives the ability to add custom components and icons. Pass an + array of EuiTimelineItem objects and{' '} + EuiTimeline will generate a timeline thread.
), props: { EuiTimeline, EuiTimeline }, @@ -61,14 +69,21 @@ export const TimelineExample = { text: (

- Use EuiTimeline to display timelines. Each{' '} - EuiTimeline has two parts: a{' '} - timelineIcon on the left and content on the - right. + Use EuiTimelineItemto display timeline items. Each + EuiTimelineItem accepts two props: iconicon and{' '} + children. For the children, we recommend the + usage of a{' '} + + EuiPanel + {' '} + with hasBorder set to true or with color{' '} + {'"transparent"'}. Try to avoid passing the color{' '} + {'"plain"'}. This color adds a shadow that is not + suitable for this component.

), - props: { EuiTimeline }, + props: { EuiTimelineItem }, snippet: timelineItemSnippet, demo: , }, @@ -83,10 +98,14 @@ export const TimelineExample = { text: (

- Use EuiTimeline to display timelines. Each{' '} - EuiTimeline has two parts: a{' '} - timelineIcon on the left and content on the - right. + The EuiTimelineItemPanel is an opinionated + component whose purpose is to display a panel that can have a header + and body. It's built on top of the{' '} + + EuiPanel + {' '} + and it's the perfect building block to create any type os + timelines.

), @@ -94,5 +113,25 @@ export const TimelineExample = { snippet: timelineItemPanelSnippet, demo: , }, + { + title: 'Complex example', + source: [ + { + type: GuideSectionTypes.JS, + code: TimelineComplexSource, + }, + ], + text: ( +
+

+ This is an example of how to combine multiple{' '} + EuiTimelineItem with{' '} + EuiTimelinePanel. +

+
+ ), + props: { EuiTimelineItemPanel }, + demo: , + }, ], }; diff --git a/src-docs/src/views/timeline/timeline_item_panel.tsx b/src-docs/src/views/timeline/timeline_item_panel.tsx index 60a9d950562..f6a30819ced 100644 --- a/src-docs/src/views/timeline/timeline_item_panel.tsx +++ b/src-docs/src/views/timeline/timeline_item_panel.tsx @@ -3,28 +3,92 @@ import { EuiTimelineItem, EuiTimelineItemPanel, EuiAvatar, + EuiText, + EuiCodeBlock, } from '../../../../src/components'; export default () => (
- }> - -

Lorem ipsum

- + } + > + +

+ Janet edited the dashboard 2 days +

+ + } + /> } + icon={} > - -

No header just a panel

- + +

+ Pedro changed permissions +

+ + } + /> + + + } + > + +

+ Nicole mentioned this dashboard in comment#021 +

+ + } + /> + + + } + > + +

Error detected in dashboard

+ + } + headerColor="danger" + /> } + icon={ + + } > - -

No header just a panel

+ +

A new iframe was generated

+ + } + > + + {` +

Hello world!

+

Lorem ipsum dolor sit amet.

`} +
diff --git a/src/components/timeline/_timeline_item_panel.scss b/src/components/timeline/_timeline_item_panel.scss index 15bb95ea1ca..474b851398a 100644 --- a/src/components/timeline/_timeline_item_panel.scss +++ b/src/components/timeline/_timeline_item_panel.scss @@ -1,3 +1,46 @@ +.euiTimelineItemPanel { + display: flex; + align-items: center; + flex-grow: 1; +} + .euiTimelineItemPanel__header { - border-bottom: $euiBorderThin; + border-radius: $euiBorderRadius $euiBorderRadius 0 0; +} + +.euiTimelineItemPanel__footer { + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; +} + +.euiPanel--hasBorder { + > .euiTimelineItemPanel__header { + border-bottom: $euiBorderThin; + } +} + +.euiTimelineItemPanel--noBody { + .euiTimelineItemPanel__header { + border-radius: $euiBorderRadius; + } +} + +// Background colors +@each $modifier, $color in $euiPanelBackgroundColorModifiers { + .euiTimelineItemPanel__header--#{$modifier} { + background-color: $color; + } + + .euiTimelineItemPanel__body-#{$modifier} { + background-color: $color; + } +} + +// Padding +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiTimelineItemPanel--#{$modifier} { + .euiTimelineItemPanel__header, + .euiTimelineItemPanel__body { + padding: $amount; + } + } } diff --git a/src/components/timeline/timeline_item_panel.tsx b/src/components/timeline/timeline_item_panel.tsx index 01acfc25b95..2f8f5d29dd1 100644 --- a/src/components/timeline/timeline_item_panel.tsx +++ b/src/components/timeline/timeline_item_panel.tsx @@ -8,40 +8,81 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; -import { EuiSplitPanel } from '../panel'; -import { - _EuiSplitPanelOuterProps, - _EuiSplitPanelInnerProps, -} from '../panel/split_panel'; +import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; +import { CommonProps, keysOf } from '../common'; + +const paddingSizeToClassNameMap = { + none: null, + s: 'euiTimelineItemPanel--paddingSmall', + m: 'euiTimelineItemPanel--paddingMedium', + l: 'euiTimelineItemPanel--paddingLarge', +}; + +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); + +export type PaddingSize = typeof PADDING_SIZES[number]; export type EuiTimelineItemPanelProps = { header?: ReactNode; - paddingSize?: _EuiSplitPanelInnerProps['paddingSize']; -} & Omit<_EuiSplitPanelOuterProps, 'hasBorder'>; + paddingSize?: PaddingSize; + color?: _EuiPanelDivlike['color']; + headerColor?: _EuiPanelDivlike['color']; + /** + * Adds a border around the panel. When a `header` is passed adds a border separating the header and body. + */ + hasBorder?: _EuiPanelDivlike['hasBorder']; + /** + * Should match the icon size to make the content get vertically center aligned with the icon. + */ + minHeight?: number; +} & CommonProps & + Omit< + _EuiPanelDivlike, + 'hasBorder' | 'color' | 'paddingSize' | 'borderRadius' + >; export const EuiTimelineItemPanel: FunctionComponent = ({ children, className, header, - paddingSize, + paddingSize = 's', + color = 'transparent', + headerColor = 'transparent', + minHeight, + hasBorder, + grow = true, + ...rest }) => { - const classes = classNames('euiTimelineItemPanel', className); + const classes = classNames( + 'euiTimelineItemPanel', + { 'euiTimelineItemPanel--noBody': !children }, + paddingSizeToClassNameMap[paddingSize], + className + ); + + const headerClasses = classNames( + 'euiTimelineItemPanel__header', + `euiTimelineItemPanel__header--${headerColor}` + ); + + const bodyClasses = classNames( + 'euiTimelineItemPanel__body', + `euiTimelineItemPanel__body--${color}` + ); return ( - - {header && ( - - {header} - - )} - - - {children} - - +
+ + {header &&
{header}
} + +
{children}
+ +
); }; From 28e545265a1b83a21d0e60e069f9f2b8c3d3f645 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 17 Mar 2022 19:41:49 +0000 Subject: [PATCH 03/59] WIP --- src-docs/src/views/timeline/timeline.tsx | 2 +- .../src/views/timeline/timeline_complex.tsx | 3 -- .../src/views/timeline/timeline_example.js | 28 +++++++++---------- src/components/timeline/timeline_item.tsx | 9 ------ .../timeline/timeline_item_panel.tsx | 2 +- 5 files changed, 16 insertions(+), 28 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 6950f522220..bc8a976d481 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -5,7 +5,7 @@ import { EuiTimelineItemPanel, } from '../../../../src/components/timeline'; -const body = Lorem; +const body = Lorem; const items: EuiTimelineProps['items'] = [ { diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index 46d0162fad1..ce26f89e3f1 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -9,8 +9,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, - EuiLink, - EuiMarkdownEditor, EuiPanel, EuiBadge, EuiTitle, @@ -22,7 +20,6 @@ export default () => { const [checked1, setChecked1] = useState(false); const [checked2, setChecked2] = useState(false); const [checked3, setChecked3] = useState(false); - const toggleTextSwitchId = useGeneratedHtmlId({ prefix: 'toggleTextSwitch' }); const buttonElementAccordionId = useGeneratedHtmlId({ prefix: 'buttonElementAccordion', }); diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index f542bc7c15b..275ee89baf4 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -54,7 +54,7 @@ export const TimelineExample = { EuiTimeline will generate a timeline thread.
), - props: { EuiTimeline, EuiTimeline }, + props: { EuiTimeline, EuiTimelineItem }, snippet: timelineSnippet, demo: , }, @@ -69,17 +69,17 @@ export const TimelineExample = { text: (

- Use EuiTimelineItemto display timeline items. Each - EuiTimelineItem accepts two props: iconicon and{' '} - children. For the children, we recommend the - usage of a{' '} + Use EuiTimelineItem to display timeline items. Each{' '} + EuiTimelineItem accepts two props:{' '} + icon and children. For the{' '} + children, we recommend the usage of a{' '} + EuiTimelineItemPanel but you can use any other + component. If you use a{' '} EuiPanel - {' '} - with hasBorder set to true or with color{' '} - {'"transparent"'}. Try to avoid passing the color{' '} - {'"plain"'}. This color adds a shadow that is not - suitable for this component. + + , try to avoid passing the color {'"plain"'}. + This color adds a shadow that is not suitable for this component.

), @@ -104,12 +104,12 @@ export const TimelineExample = { EuiPanel {' '} - and it's the perfect building block to create any type os - timelines. + and it's the recommended component to use in{' '} + EuiTimelineItem.children.

), - props: { EuiTimeline }, + props: { EuiTimelineItemPanel }, snippet: timelineItemPanelSnippet, demo: , }, @@ -130,7 +130,7 @@ export const TimelineExample = {

), - props: { EuiTimelineItemPanel }, + props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemPanel }, demo: , }, ], diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 0048638483a..1b3c9460318 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -8,7 +8,6 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { keysOf } from '../common'; import { EuiTimelineItemEvent } from './timeline_item_event'; import { EuiTimelineItemIcon, @@ -18,14 +17,6 @@ import { export type EuiTimelineItemProps = HTMLAttributes & EuiTimelineItemIconProps; -const typeToClassNameMap = { - regular: '', - update: 'euiTimeline--update', - custom: '', -}; - -export const TYPES = keysOf(typeToClassNameMap); - export const EuiTimelineItem: FunctionComponent = ({ children, className, diff --git a/src/components/timeline/timeline_item_panel.tsx b/src/components/timeline/timeline_item_panel.tsx index 2f8f5d29dd1..b3cac2a6d32 100644 --- a/src/components/timeline/timeline_item_panel.tsx +++ b/src/components/timeline/timeline_item_panel.tsx @@ -28,7 +28,7 @@ export type EuiTimelineItemPanelProps = { color?: _EuiPanelDivlike['color']; headerColor?: _EuiPanelDivlike['color']; /** - * Adds a border around the panel. When a `header` is passed adds a border separating the header and body. + * Adds a border around the panel and a line separating the header and body. */ hasBorder?: _EuiPanelDivlike['hasBorder']; /** From 8ef5d799940d633ffd2e2bf49cfffc5ac06d278c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 18 Mar 2022 11:47:42 +0000 Subject: [PATCH 04/59] WIP --- src-docs/src/views/timeline/timeline_complex.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index ce26f89e3f1..f87c94031f5 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -118,11 +118,13 @@ export default () => { } > -

- Store your most recent, most frequently-searched data in the hot - tier. The hot tier provides the best indexing and search performance - by using the most powerful, expensive hardware. -

+ +

+ Store your most recent, most frequently-searched data in the hot + tier. The hot tier provides the best indexing and search + performance by using the most powerful, expensive hardware. +

+ From 3e8b794ffc345afbfe35cd263475240d31c5adb2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 18 Mar 2022 22:51:09 +0000 Subject: [PATCH 05/59] WIP event props --- src-docs/src/views/timeline/timeline.tsx | 34 ++-- .../src/views/timeline/timeline_complex.tsx | 163 ++++++++++-------- .../src/views/timeline/timeline_example.js | 74 ++++---- src-docs/src/views/timeline/timeline_item.tsx | 29 +++- .../views/timeline/timeline_item_event.tsx | 77 +++++++++ .../views/timeline/timeline_item_panel.tsx | 95 ---------- src/components/timeline/_timeline_item.scss | 4 + .../timeline/_timeline_item_event.scss | 44 +++++ src/components/timeline/index.ts | 3 +- src/components/timeline/timeline_item.tsx | 28 ++- .../timeline/timeline_item_event.tsx | 82 ++++++++- .../timeline/timeline_item_panel.tsx | 88 ---------- 12 files changed, 407 insertions(+), 314 deletions(-) create mode 100644 src-docs/src/views/timeline/timeline_item_event.tsx delete mode 100644 src-docs/src/views/timeline/timeline_item_panel.tsx delete mode 100644 src/components/timeline/timeline_item_panel.tsx diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index bc8a976d481..029819f4249 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -2,23 +2,37 @@ import React from 'react'; import { EuiTimeline, EuiTimelineProps, - EuiTimelineItemPanel, -} from '../../../../src/components/timeline'; - -const body = Lorem; + EuiText, +} from '../../../../src/components'; const items: EuiTimelineProps['items'] = [ { - icon: 'user', - children: body, + icon: 'email', + eventHeader: ( + +

+ janet@elastic.co was invited to the project +

+ + ), }, { - icon: 'user', - children: body, + icon: 'pencil', + eventHeader: ( + +

+ The project was renamed to Revenue Dashboard +

+ + ), }, { - icon: 'user', - children: body, + icon: 'folderClosed', + eventHeader: ( + +

The project was archived

+ + ), }, ]; diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index f87c94031f5..c87bb7fac6e 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { EuiTimelineItem, - EuiTimelineItemPanel, EuiAvatar, EuiText, EuiSwitch, @@ -14,7 +13,10 @@ import { EuiTitle, } from '../../../../src/components'; -import { useGeneratedHtmlId } from '../../../../src/services'; +import { + useGeneratedHtmlId, + euiPaletteColorBlind, +} from '../../../../src/services'; export default () => { const [checked1, setChecked1] = useState(false); @@ -42,97 +44,116 @@ export default () => { setChecked3(e.target.checked); }; - const phase = (title: string, checked: boolean, onChange: any) => ( + const phase = ( + title: string, + checked: boolean, + onChange: any, + avatarColor: string + ) => ( + ) : ( ) } - > - - - - - - -

{title}

- - - - } - > - -

- Move data to the cold tier when you are searching it less often and - don’t need to update it. The cold tier is optimized for cost savings - over search performance. -

- + eventProps={{ + hasBorder: true, + headerColor: 'subdued', + paddingSize: 'm', + }} + eventHeader={ + + + + + + +

{title}

+ + + + } + eventBody={ + <> + +

+ Move data to the cold tier when you are searching it less often + and don’t need to update it. The cold tier is optimized for cost + savings over search performance. +

+ - {checked && ( - <> - - - - Any content inside of EuiAccordion will appear - here. - - - - )} - - + {checked && ( + <> + + + + Any content inside of EuiAccordion will + appear here. + + + + )} + + } + /> ); return (
} - > - -

- Hot phase Required -

- - } - > - + icon={ + + } + eventProps={{ + hasBorder: true, + headerColor: 'subdued', + paddingSize: 'm', + }} + eventHeader={ + +

+ Hot phase Required +

+ + } + eventBody={ +

Store your most recent, most frequently-searched data in the hot tier. The hot tier provides the best indexing and search performance by using the most powerful, expensive hardware.

- - + } + /> - {phase('Warm phase', checked1, onChange1)} + {phase('Warm phase', checked1, onChange1, euiPaletteColorBlind()[1])} - {phase('Cold phase', checked2, onChange2)} + {phase('Cold phase', checked2, onChange2, euiPaletteColorBlind()[2])} - {phase('Frozen phase', checked3, onChange3)} + {phase('Frozen phase', checked3, onChange3, euiPaletteColorBlind()[3])}
); }; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 275ee89baf4..ed697540471 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -6,7 +6,7 @@ import { EuiCode, EuiTimeline, EuiTimelineItem, - EuiTimelineItemPanel, + EuiTimelineItemEvent, } from '../../../../src/components'; import Timeline from './timeline'; @@ -26,11 +26,11 @@ const timelineItemSnippet = ` {body} `; -import TimelineItemPanel from './timeline_item_panel'; -const timelineItemPanelSource = require('!!raw-loader!./timeline_item_panel'); -const timelineItemPanelSnippet = ` +import TimelineItemEvent from './timeline_item_event'; +const timelineItemEventSource = require('!!raw-loader!./timeline_item_event'); +const timelineItemEventSnippet = ` {body} -`; +`; import TimelineComplex from './timeline_complex'; const TimelineComplexSource = require('!!raw-loader!./timeline_complex'); @@ -47,14 +47,14 @@ export const TimelineExample = { ], text: (
- The EuiTimeline component is somehow an opinionated - component that standardizes the way a timeline thread is displayed. - But it gives the ability to add custom components and icons. Pass an - array of EuiTimelineItem objects and{' '} + The EuiTimeline is a component that standardizes the + way a timeline thread is displayed. But it gives the ability to add + custom components and icons. Pass an array of{' '} + EuiTimelineItem objects and{' '} EuiTimeline will generate a timeline thread.
), - props: { EuiTimeline, EuiTimelineItem }, + props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemEvent }, snippet: timelineSnippet, demo: , }, @@ -70,16 +70,9 @@ export const TimelineExample = {

Use EuiTimelineItem to display timeline items. Each{' '} - EuiTimelineItem accepts two props:{' '} - icon and children. For the{' '} - children, we recommend the usage of a{' '} - EuiTimelineItemPanel but you can use any other - component. If you use a{' '} - - EuiPanel - - , try to avoid passing the color {'"plain"'}. - This color adds a shadow that is not suitable for this component. + EuiTimelineItem accepts two parts:{' '} + icon on the left side and an{' '} + event on the right side.

), @@ -88,30 +81,44 @@ export const TimelineExample = { demo: , }, { - title: 'Timeline item panel', + title: 'Item event', source: [ { type: GuideSectionTypes.JS, - code: timelineItemPanelSource, + code: timelineItemEventSource, }, ], text: (

- The EuiTimelineItemPanel is an opinionated - component whose purpose is to display a panel that can have a header - and body. It's built on top of the{' '} + An event is built on top of the{' '} EuiPanel {' '} - and it's the recommended component to use in{' '} - EuiTimelineItem.children. + and it's made of a header and a body. To create an event you + just need to use the following props:

+
    +
  • + eventHeader: the most important part of the + event (e.g. a title, username, metadata). +
    • +
  • + eventBody: additional content. You can also use + this prop to pass more complex components like editors, code + blocks or any custom component. +
    • +
  • + eventProps: additional props to customize the + event panel. You can change the color, header color, and adjust + the padding. +
    • +
), - props: { EuiTimelineItemPanel }, - snippet: timelineItemPanelSnippet, - demo: , + props: { EuiTimelineItemEvent }, + snippet: timelineItemEventSnippet, + demo: , }, { title: 'Complex example', @@ -124,13 +131,12 @@ export const TimelineExample = { text: (

- This is an example of how to combine multiple{' '} - EuiTimelineItem with{' '} - EuiTimelinePanel. + This is an example of how you can customize and display multiple{' '} + EuiTimelineItem.

), - props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemPanel }, + props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemEvent }, demo: , }, ], diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index c83fe8f9e5c..eb47aff0535 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -1,13 +1,34 @@ import React from 'react'; import { EuiTimelineItem, - EuiTimelineItemPanel, + EuiText, + EuiBadge, + EuiTextArea, } from '../../../../src/components'; export default () => (
- - Lorem - + +

+ The icon is on the left side and I'm an{' '} + eventHeader +

+ + } + /> + + {}} + /> + } + />
); diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx new file mode 100644 index 00000000000..c1431d2e1b1 --- /dev/null +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { + EuiTimelineItem, + EuiAvatar, + EuiText, + EuiCodeBlock, + EuiLink, +} from '../../../../src/components'; + +export default () => ( +
+ } + eventHeader={ + +

+ Janet edited the dashboard 4 days ago +

+ + } + /> + + } + eventHeader={ + +

+ Nicole mentioned this dashboard in{' '} + case/comment#021 2 days ago +

+ + } + /> + + } + eventHeader={ + +

Error detected in dashboard 5 minutes ago

+ + } + eventProps={{ + paddingSize: 's', + color: 'danger', + }} + /> + + + } + eventHeader={ + +

+ Nicole generated a new iframe 2 minutes ago +

+ + } + eventBody={ + + {` +`} + + } + eventProps={{ + hasBorder: true, + paddingSize: 's', + headerColor: 'subdued', + }} + /> +
+); diff --git a/src-docs/src/views/timeline/timeline_item_panel.tsx b/src-docs/src/views/timeline/timeline_item_panel.tsx deleted file mode 100644 index f6a30819ced..00000000000 --- a/src-docs/src/views/timeline/timeline_item_panel.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { - EuiTimelineItem, - EuiTimelineItemPanel, - EuiAvatar, - EuiText, - EuiCodeBlock, -} from '../../../../src/components'; - -export default () => ( -
- } - > - -

- Janet edited the dashboard 2 days -

- - } - /> - - } - > - -

- Pedro changed permissions -

- - } - /> - - - } - > - -

- Nicole mentioned this dashboard in comment#021 -

- - } - /> - - - } - > - -

Error detected in dashboard

- - } - headerColor="danger" - /> - - - - } - > - -

A new iframe was generated

- - } - > - - {` -

Hello world!

-

Lorem ipsum dolor sit amet.

`} - - - -
-); diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss index 2b361aebbf2..7b289579a1e 100644 --- a/src/components/timeline/_timeline_item.scss +++ b/src/components/timeline/_timeline_item.scss @@ -25,6 +25,10 @@ } } +.euiTimelineItem--update:not(.euiTimelineItem--hasBody) { + align-items: center; +} + .euiTimelineItem:last-of-type { .euiTimelineItemIcon { &::before { diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss index a31445da8c5..64a40820c6a 100644 --- a/src/components/timeline/_timeline_item_event.scss +++ b/src/components/timeline/_timeline_item_event.scss @@ -1,3 +1,47 @@ .euiTimelineItemEvent { + display: flex; + align-items: center; + flex-grow: 1; overflow: hidden; } + +.euiTimelineItemEvent__header { + border-radius: $euiBorderRadius $euiBorderRadius 0 0; +} + +.euiTimelineItemEvent__footer { + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; +} + +.euiPanel--hasBorder { + > .euiTimelineItemEvent__header { + border-bottom: $euiBorderThin; + } +} + +.euiTimelineItemEvent--noBody { + .euiTimelineItemEvent__header { + border-radius: $euiBorderRadius; + } +} + +// Background colors +@each $modifier, $color in $euiPanelBackgroundColorModifiers { + .euiTimelineItemEvent__header--#{$modifier} { + background-color: $color; + } + + .euiTimelineItemEvent__body-#{$modifier} { + background-color: $color; + } +} + +// Padding +@each $modifier, $amount in $euiPanelPaddingModifiers { + .euiTimelineItemEvent--#{$modifier} { + .euiTimelineItemEvent__header, + .euiTimelineItemEvent__body { + padding: $amount; + } + } +} diff --git a/src/components/timeline/index.ts b/src/components/timeline/index.ts index b7a2bc0d0ba..3f4f9ffbbf2 100644 --- a/src/components/timeline/index.ts +++ b/src/components/timeline/index.ts @@ -9,11 +9,10 @@ export type { EuiTimelineItemProps } from './timeline_item'; export { EuiTimelineItem } from './timeline_item'; +export type { EuiTimelineItemEventProps } from './timeline_item_event'; export { EuiTimelineItemEvent } from './timeline_item_event'; export { EuiTimelineItemIcon } from './timeline_item_icon'; -export { EuiTimelineItemPanel } from './timeline_item_panel'; - export type { EuiTimelineProps } from './timeline'; export { EuiTimeline } from './timeline'; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 1b3c9460318..2df3c6b631c 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -8,27 +8,45 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { EuiTimelineItemEvent } from './timeline_item_event'; +import { + EuiTimelineItemEvent, + EuiTimelineItemEventProps, +} from './timeline_item_event'; import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; -export type EuiTimelineItemProps = HTMLAttributes & - EuiTimelineItemIconProps; +export type EuiTimelineItemProps = HTMLAttributes & { + eventHeader?: EuiTimelineItemEventProps['header']; + eventBody?: EuiTimelineItemEventProps['body']; + eventProps?: EuiTimelineItemEventProps; +} & EuiTimelineItemIconProps; export const EuiTimelineItem: FunctionComponent = ({ children, className, icon, + eventHeader, + eventBody, + eventProps, ...rest }) => { - const classes = classNames('euiTimelineItem', className); + const classes = classNames( + 'euiTimelineItem', + { 'euiTimelineItem--update': eventHeader }, + { 'euiTimelineItem--hasBody': eventBody }, + className + ); return (
- {children} +
); }; diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index fe9e7762a80..586c804db31 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -6,16 +6,88 @@ * Side Public License, v 1. */ -import React, { FunctionComponent } from 'react'; -import { CommonProps } from '../common'; +import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; -export interface EuiTimelineItemEventProps extends CommonProps {} +import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; +import { CommonProps, keysOf } from '../common'; + +const paddingSizeToClassNameMap = { + none: null, + s: 'euiTimelineItemEvent--paddingSmall', + m: 'euiTimelineItemEvent--paddingMedium', + l: 'euiTimelineItemEvent--paddingLarge', +}; + +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); + +export type PaddingSize = typeof PADDING_SIZES[number]; + +export type EuiTimelineItemEventProps = { + /** + * The most important part of the event. Normally where tags in metadata should live. + */ + header?: ReactNode; + /** + * Use the body for aditional content. + */ + body?: ReactNode; + paddingSize?: PaddingSize; + /** + * Sets the color of the panel + */ + color?: _EuiPanelDivlike['color']; + /** + * Sets the color of the header color + */ + headerColor?: _EuiPanelDivlike['color']; + /** + * Adds a border around the panel and a line separating the header and body. + */ + hasBorder?: _EuiPanelDivlike['hasBorder']; +} & CommonProps & + Omit< + _EuiPanelDivlike, + 'hasBorder' | 'color' | 'paddingSize' | 'borderRadius' | 'hasShadow' + >; export const EuiTimelineItemEvent: FunctionComponent = ({ children, className, + header, + body, + paddingSize = 'none', + color = 'transparent', + headerColor = 'transparent', + hasBorder, + grow = true, + ...rest }) => { - const classes = classNames('euiTimelineItemEvent', className); + const classes = classNames( + 'euiTimelineItemEvent', + paddingSizeToClassNameMap[paddingSize], + className + ); + + const headerClasses = classNames( + 'euiTimelineItemEvent__header', + `euiTimelineItemEvent__header--${headerColor}` + ); + + const bodyClasses = classNames('euiTimelineItemEvent__body'); + + return ( +
+ + {header &&
{header}
} - return
{children}
; + {body &&
{body}
} + +
+ ); }; diff --git a/src/components/timeline/timeline_item_panel.tsx b/src/components/timeline/timeline_item_panel.tsx deleted file mode 100644 index b3cac2a6d32..00000000000 --- a/src/components/timeline/timeline_item_panel.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; -import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; -import { CommonProps, keysOf } from '../common'; - -const paddingSizeToClassNameMap = { - none: null, - s: 'euiTimelineItemPanel--paddingSmall', - m: 'euiTimelineItemPanel--paddingMedium', - l: 'euiTimelineItemPanel--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - -export type PaddingSize = typeof PADDING_SIZES[number]; - -export type EuiTimelineItemPanelProps = { - header?: ReactNode; - paddingSize?: PaddingSize; - color?: _EuiPanelDivlike['color']; - headerColor?: _EuiPanelDivlike['color']; - /** - * Adds a border around the panel and a line separating the header and body. - */ - hasBorder?: _EuiPanelDivlike['hasBorder']; - /** - * Should match the icon size to make the content get vertically center aligned with the icon. - */ - minHeight?: number; -} & CommonProps & - Omit< - _EuiPanelDivlike, - 'hasBorder' | 'color' | 'paddingSize' | 'borderRadius' - >; - -export const EuiTimelineItemPanel: FunctionComponent = ({ - children, - className, - header, - paddingSize = 's', - color = 'transparent', - headerColor = 'transparent', - minHeight, - hasBorder, - grow = true, - ...rest -}) => { - const classes = classNames( - 'euiTimelineItemPanel', - { 'euiTimelineItemPanel--noBody': !children }, - paddingSizeToClassNameMap[paddingSize], - className - ); - - const headerClasses = classNames( - 'euiTimelineItemPanel__header', - `euiTimelineItemPanel__header--${headerColor}` - ); - - const bodyClasses = classNames( - 'euiTimelineItemPanel__body', - `euiTimelineItemPanel__body--${color}` - ); - - return ( -
- - {header &&
{header}
} - -
{children}
- -
- ); -}; From 42890a4fec32e72ea806122ae10f2ec03e576009 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 21 Mar 2022 13:51:41 +0000 Subject: [PATCH 06/59] `isFigure` --- .../src/views/timeline/timeline_example.js | 19 ++++---- src-docs/src/views/timeline/timeline_item.tsx | 29 ++++++------ src/components/timeline/_timeline_item.scss | 2 +- .../timeline/_timeline_item_event.scss | 4 ++ src/components/timeline/timeline_item.tsx | 4 +- .../timeline/timeline_item_event.tsx | 46 +++++++++++++------ 6 files changed, 62 insertions(+), 42 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index ed697540471..a711f526578 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -81,7 +81,7 @@ export const TimelineExample = { demo: , }, { - title: 'Item event', + title: 'Timeline item event', source: [ { type: GuideSectionTypes.JS, @@ -91,22 +91,25 @@ export const TimelineExample = { text: (

- An event is built on top of the{' '} + An event is basically the right side of the{' '} + EuiTimelineItem and it's built on top of the{' '} - EuiPanel + EuiPanel. {' '} - and it's made of a header and a body. To create an event you - just need to use the following props: + Each event can have a eventHeader, a{' '} + eventBody and eventProps:

  • eventHeader: the most important part of the - event (e.g. a title, username, metadata). + event (e.g. a title, username, metadata). All the content should + be in one line. When no body is present the header vertically + center aligns with the left side icon.
  • eventBody: additional content. You can also use - this prop to pass more complex components like editors, code - blocks or any custom component. + this prop to pass more complex components (e.g. editors, code + blocks or any custom component).
  • eventProps: additional props to customize the diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index eb47aff0535..37dc2796894 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -1,15 +1,10 @@ import React from 'react'; -import { - EuiTimelineItem, - EuiText, - EuiBadge, - EuiTextArea, -} from '../../../../src/components'; +import { EuiTimelineItem, EuiText, EuiBadge } from '../../../../src/components'; export default () => (

    @@ -18,17 +13,19 @@ export default () => (

    } - /> - - {}} - /> + +

    + The icon is on the left side and I'm an{' '} + eventBody +

    +     } + eventProps={{ + paddingSize: 's', + hasBorder: true, + headerColor: 'subdued', + }} />
    ); diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss index 7b289579a1e..3ddf1c7ca83 100644 --- a/src/components/timeline/_timeline_item.scss +++ b/src/components/timeline/_timeline_item.scss @@ -25,7 +25,7 @@ } } -.euiTimelineItem--update:not(.euiTimelineItem--hasBody) { +.euiTimelineItem--hasHeader:not(.euiTimelineItem--hasBody) { align-items: center; } diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss index 64a40820c6a..36bcd0eb52c 100644 --- a/src/components/timeline/_timeline_item_event.scss +++ b/src/components/timeline/_timeline_item_event.scss @@ -5,6 +5,10 @@ overflow: hidden; } +.euiTimelineItemEvent__inner { + flex: 1; +} + .euiTimelineItemEvent__header { border-radius: $euiBorderRadius $euiBorderRadius 0 0; } diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 2df3c6b631c..4a3a4cd3d99 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -20,7 +20,7 @@ import { export type EuiTimelineItemProps = HTMLAttributes & { eventHeader?: EuiTimelineItemEventProps['header']; eventBody?: EuiTimelineItemEventProps['body']; - eventProps?: EuiTimelineItemEventProps; + eventProps?: Omit; } & EuiTimelineItemIconProps; export const EuiTimelineItem: FunctionComponent = ({ @@ -34,7 +34,7 @@ export const EuiTimelineItem: FunctionComponent = ({ }) => { const classes = classNames( 'euiTimelineItem', - { 'euiTimelineItem--update': eventHeader }, + { 'euiTimelineItem--hasHeader': eventHeader }, { 'euiTimelineItem--hasBody': eventBody }, className ); diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 586c804db31..10d18ea3feb 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -24,26 +24,35 @@ export type PaddingSize = typeof PADDING_SIZES[number]; export type EuiTimelineItemEventProps = { /** - * The most important part of the event. Normally where tags in metadata should live. + * The most important part of the event (e.g. a title, username, metadata). + * It should be one line. When no body is passed it vertically center aligns with the icon. */ header?: ReactNode; /** - * Use the body for aditional content. + * Use the body for aditional content. You can also use this prop + * to pass more complex components (e.g. editors, code blocks or any custom component). */ body?: ReactNode; + /** + * Padding applied around the event header and/or event body. + */ paddingSize?: PaddingSize; /** - * Sets the color of the panel + * Sets the color of all the panel. */ color?: _EuiPanelDivlike['color']; /** - * Sets the color of the header color + * Sets the color of the header color. */ headerColor?: _EuiPanelDivlike['color']; /** * Adds a border around the panel and a line separating the header and body. */ hasBorder?: _EuiPanelDivlike['hasBorder']; + /** + * Changes the event wrapper element to `figure` and the the header element to `figcaption`. + */ + isFigure?: boolean; } & CommonProps & Omit< _EuiPanelDivlike, @@ -60,6 +69,7 @@ export const EuiTimelineItemEvent: FunctionComponent headerColor = 'transparent', hasBorder, grow = true, + isFigure = false, ...rest }) => { const classes = classNames( @@ -75,19 +85,25 @@ export const EuiTimelineItemEvent: FunctionComponent const bodyClasses = classNames('euiTimelineItemEvent__body'); + const Element = isFigure ? 'figure' : 'div'; + const HeaderElement = isFigure ? 'figcaption' : 'div'; + return ( -
    - - {header &&
    {header}
    } + + + {header && ( + {header} + )} {body &&
    {body}
    } -     -
    + + ); }; From b9a059e216fe445f711c83d94f19de2d3ebb3e85 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 21 Mar 2022 15:56:48 +0000 Subject: [PATCH 07/59] Simplifying props structure to avoid objects --- src-docs/src/views/timeline/timeline.tsx | 6 +- .../src/views/timeline/timeline_complex.tsx | 24 ++++---- .../src/views/timeline/timeline_example.js | 59 +++++++++---------- src-docs/src/views/timeline/timeline_item.tsx | 31 +++++----- .../views/timeline/timeline_item_event.tsx | 39 +++++++----- src/components/timeline/timeline_item.tsx | 27 +++------ .../timeline/timeline_item_event.tsx | 53 ++++++++--------- .../timeline/timeline_item_icon.tsx | 6 +- 8 files changed, 118 insertions(+), 127 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 029819f4249..d7ad0c42d20 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -8,7 +8,7 @@ import { const items: EuiTimelineProps['items'] = [ { icon: 'email', - eventHeader: ( + header: (

    janet@elastic.co was invited to the project @@ -18,7 +18,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'pencil', - eventHeader: ( + header: (

    The project was renamed to Revenue Dashboard @@ -28,7 +28,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'folderClosed', - eventHeader: ( + header: (

    The project was archived

     diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index c87bb7fac6e..cfabf27c4ac 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -51,6 +51,9 @@ export default () => { avatarColor: string ) => ( { ) } - eventProps={{ - hasBorder: true, - headerColor: 'subdued', - paddingSize: 'm', - }} - eventHeader={ + header={ { } - eventBody={ + body={ <>

    @@ -118,6 +116,9 @@ export default () => { return (

    { color={euiPaletteColorBlind()[0]} /> } - eventProps={{ - hasBorder: true, - headerColor: 'subdued', - paddingSize: 'm', - }} - eventHeader={ + header={

    Hot phase Required

    } - eventBody={ + body={

    Store your most recent, most frequently-searched data in the hot diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index a711f526578..ed8f1f266c9 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -67,21 +67,38 @@ export const TimelineExample = { }, ], text: ( -

    + <>

    Use EuiTimelineItem to display timeline items. Each{' '} - EuiTimelineItem accepts two parts:{' '} - icon on the left side and an{' '} - event on the right side. + EuiTimelineItem has two parts: an icon on the left + side and an event on the right side. To create an item you basically + need the following props:

    -
    +
      +
    • + icon: main icon that appears on the left side. +
      • +
    • + header: the most important part of an event + (e.g. a title, username, metadata). All the content should be in + one line. When no body is present the{' '} + header + vertically center aligns with the left side icon. +
      • +
    • + body: additional event content. You can also + use this prop to pass more complex components (e.g. editors, code + blocks or any custom component). +
      • +
    + ), props: { EuiTimelineItem }, snippet: timelineItemSnippet, demo: , }, { - title: 'Timeline item event', + title: 'Customizing an event', source: [ { type: GuideSectionTypes.JS, @@ -89,35 +106,17 @@ export const TimelineExample = { }, ], text: ( -
    + <>

    An event is basically the right side of the{' '} EuiTimelineItem and it's built on top of the{' '} - EuiPanel. - {' '} - Each event can have a eventHeader, a{' '} - eventBody and eventProps: + EuiPanel + + . This example demonstrates how you can use multiple panel props to + customize an event (e.g change the panelColor).

    -
      -
    • - eventHeader: the most important part of the - event (e.g. a title, username, metadata). All the content should - be in one line. When no body is present the header vertically - center aligns with the left side icon. -
      • -
    • - eventBody: additional content. You can also use - this prop to pass more complex components (e.g. editors, code - blocks or any custom component). -
      • -
    • - eventProps: additional props to customize the - event panel. You can change the color, header color, and adjust - the padding. -
      • -
    -
    + ), props: { EuiTimelineItemEvent }, snippet: timelineItemEventSnippet, diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index 37dc2796894..f1db6e9f2df 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -1,31 +1,30 @@ import React from 'react'; -import { EuiTimelineItem, EuiText, EuiBadge } from '../../../../src/components'; +import { + EuiTimelineItem, + EuiText, + EuiTitle, + EuiCode, +} from '../../../../src/components'; export default () => (
    -

    - The icon is on the left side and I'm an{' '} - eventHeader -

    - + header={ + +

    + I'm an event header +

    +     } - eventBody={ + body={

    - The icon is on the left side and I'm an{' '} - eventBody + I'm an event body and you can find the{' '} + icon on the left side.

    } - eventProps={{ - paddingSize: 's', - hasBorder: true, - headerColor: 'subdued', - }} />
    ); diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index c1431d2e1b1..40100d89a19 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -5,13 +5,14 @@ import { EuiText, EuiCodeBlock, EuiLink, + EuiMarkdownEditor, } from '../../../../src/components'; export default () => (
    } - eventHeader={ + header={

    Janet edited the dashboard 4 days ago @@ -22,7 +23,7 @@ export default () => ( } - eventHeader={ + header={

    Nicole mentioned this dashboard in{' '} @@ -34,29 +35,27 @@ export default () => ( } - eventHeader={ + header={

    Error detected in dashboard 5 minutes ago

     } - eventProps={{ - paddingSize: 's', - color: 'danger', - }} + panelPaddingSize="s" + panelColor="danger" /> } - eventHeader={ + header={

    Nicole generated a new iframe 2 minutes ago

    } - eventBody={ + body={ ( `} } - eventProps={{ - hasBorder: true, - paddingSize: 's', - headerColor: 'subdued', - }} + panelHasBorder + panelPaddingSize="s" + headerPanelColor="subdued" + /> + + } + body={ + {}} + initialViewMode="viewing" + /> + } />
    ); diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 4a3a4cd3d99..656bb6a174b 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -17,36 +17,25 @@ import { EuiTimelineItemIconProps, } from './timeline_item_icon'; -export type EuiTimelineItemProps = HTMLAttributes & { - eventHeader?: EuiTimelineItemEventProps['header']; - eventBody?: EuiTimelineItemEventProps['body']; - eventProps?: Omit; -} & EuiTimelineItemIconProps; +export type EuiTimelineItemProps = HTMLAttributes & + EuiTimelineItemEventProps & + EuiTimelineItemIconProps; export const EuiTimelineItem: FunctionComponent = ({ - children, className, - icon, - eventHeader, - eventBody, - eventProps, ...rest }) => { const classes = classNames( 'euiTimelineItem', - { 'euiTimelineItem--hasHeader': eventHeader }, - { 'euiTimelineItem--hasBody': eventBody }, + { 'euiTimelineItem--hasHeader': rest.header }, + { 'euiTimelineItem--hasBody': rest.body }, className ); return ( -
    - - +
    )}> + +
    ); }; diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 10d18ea3feb..17e61275fb1 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -34,53 +34,51 @@ export type EuiTimelineItemEventProps = { */ body?: ReactNode; /** - * Padding applied around the event header and/or event body. + * Changes the event wrapping div to `figure` and the div wrapping the `header` content to `figcaption`. */ - paddingSize?: PaddingSize; + isFigure?: boolean; /** - * Sets the color of all the panel. + * When true the panel will grow in height and width to match the parent container */ - color?: _EuiPanelDivlike['color']; + panelGrow?: boolean; /** - * Sets the color of the header color. + * Adds a border around the panel and a line separating the header and body. */ - headerColor?: _EuiPanelDivlike['color']; + panelHasBorder?: _EuiPanelDivlike['hasBorder']; /** - * Adds a border around the panel and a line separating the header and body. + * Padding applied around the event header and/or event body. */ - hasBorder?: _EuiPanelDivlike['hasBorder']; + panelPaddingSize?: PaddingSize; /** - * Changes the event wrapper element to `figure` and the the header element to `figcaption`. + * Sets the color of all the panel. */ - isFigure?: boolean; -} & CommonProps & - Omit< - _EuiPanelDivlike, - 'hasBorder' | 'color' | 'paddingSize' | 'borderRadius' | 'hasShadow' - >; + panelColor?: _EuiPanelDivlike['color']; + /** + * Sets the color of the header color. + */ + headerPanelColor?: _EuiPanelDivlike['color']; +} & CommonProps; export const EuiTimelineItemEvent: FunctionComponent = ({ - children, className, header, body, - paddingSize = 'none', - color = 'transparent', - headerColor = 'transparent', - hasBorder, - grow = true, + panelPaddingSize = 'none', + panelColor = 'transparent', + headerPanelColor = 'transparent', + panelHasBorder, + panelGrow = true, isFigure = false, - ...rest }) => { const classes = classNames( 'euiTimelineItemEvent', - paddingSizeToClassNameMap[paddingSize], + paddingSizeToClassNameMap[panelPaddingSize], className ); const headerClasses = classNames( 'euiTimelineItemEvent__header', - `euiTimelineItemEvent__header--${headerColor}` + `euiTimelineItemEvent__header--${headerPanelColor}` ); const bodyClasses = classNames('euiTimelineItemEvent__body'); @@ -92,10 +90,9 @@ export const EuiTimelineItemEvent: FunctionComponent {header && ( diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index b4669dd57ae..c5da1162b5f 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -11,12 +11,12 @@ import classNames from 'classnames'; import { CommonProps } from '../common'; import { EuiIcon, IconType } from '../icon'; -export interface EuiTimelineItemIconProps extends CommonProps { +export type EuiTimelineItemIconProps = CommonProps & { /** * Main icon. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. */ - icon?: ReactNode | IconType; -} + icon: ReactNode | IconType; +}; export const EuiTimelineItemIcon: FunctionComponent = ({ icon, From c3fd70e17905a7954f7a35b89fcf541ea6369dd1 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 21 Mar 2022 16:34:37 +0000 Subject: [PATCH 08/59] Updated `textSize` in markdown editor example --- src-docs/src/views/timeline/timeline_item_event.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 40100d89a19..d655eb09175 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -81,6 +81,7 @@ export default () => ( } onChange={() => {}} initialViewMode="viewing" + markdownFormatProps={{ textSize: 's' }} /> } /> From 74217da2b1477b4d1219260e0bc637be663c4583 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 21 Mar 2022 17:47:03 +0000 Subject: [PATCH 09/59] Small fixes --- src/components/avatar/_avatar.scss | 1 - src/components/avatar/avatar.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss index 8df28f83e5e..1b7c407faf7 100644 --- a/src/components/avatar/_avatar.scss +++ b/src/components/avatar/_avatar.scss @@ -33,7 +33,6 @@ background-color: $euiColorLightestShade; } - // Modifiers for sizing. $avatarSizing: ( s: ( diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 75abe838c38..f56907180a4 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -84,7 +84,7 @@ export type EuiAvatarProps = Omit, 'color'> & /** * Accepts hex values like `#FFFFFF`, `#000` otherwise a viz palette color will be assigned. - * Or pass `'plain'` for an empty shade, `'shade'` for an light shade or `null` to remove entirely and the text/icon color will `inherit` + * Or pass `'plain'` for an empty shade, `'shade'` for a light shade or `null` to remove entirely and the text/icon color will `inherit` */ color?: string | 'plain' | 'shade' | null; From f0a09279a666bc49b113c9af6d21e836fd69c4d2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 21 Mar 2022 21:02:45 +0000 Subject: [PATCH 10/59] `panelProps` as object --- src-docs/src/views/timeline/_props.tsx | 6 ++ .../src/views/timeline/timeline_complex.tsx | 16 +++-- .../src/views/timeline/timeline_example.js | 16 +++-- .../views/timeline/timeline_item_event.tsx | 14 ++-- src/components/timeline/index.ts | 5 +- .../timeline/timeline_item_event.tsx | 67 +++++++++++-------- 6 files changed, 78 insertions(+), 46 deletions(-) create mode 100644 src-docs/src/views/timeline/_props.tsx diff --git a/src-docs/src/views/timeline/_props.tsx b/src-docs/src/views/timeline/_props.tsx new file mode 100644 index 00000000000..6c0bdfa60e1 --- /dev/null +++ b/src-docs/src/views/timeline/_props.tsx @@ -0,0 +1,6 @@ +import React, { FunctionComponent } from 'react'; +import { EuiTimelineItemEventPanelProps } from '../../../../src/components'; + +export const EuiTimelineItemEventPanel: FunctionComponent = () => ( +
    +); diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index cfabf27c4ac..ab6708526c6 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -51,9 +51,11 @@ export default () => { avatarColor: string ) => ( { return (
    EuiTimeline will generate a timeline thread.
    ), - props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemEvent }, + props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemEventPanel }, snippet: timelineSnippet, demo: , }, @@ -113,12 +113,11 @@ export const TimelineExample = { EuiPanel - . This example demonstrates how you can use multiple panel props to - customize an event (e.g change the panelColor). + . This example demonstrates how you can use{' '} + panelProps to customize an event.

    ), - props: { EuiTimelineItemEvent }, snippet: timelineItemEventSnippet, demo: , }, @@ -138,7 +137,12 @@ export const TimelineExample = {

    ), - props: { EuiTimeline, EuiTimelineItem, EuiTimelineItemEvent }, + props: { + EuiTimeline, + EuiTimelineItem, + EuiTimelineItemEventPanel, + EuiTimelineItem, + }, demo: , }, ], diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index d655eb09175..97361626d86 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -40,11 +40,18 @@ export default () => (

    Error detected in dashboard 5 minutes ago

    } - panelPaddingSize="s" - panelColor="danger" + panelProps={{ + paddingSize: 's', + color: 'danger', + }} /> } @@ -66,9 +73,6 @@ export default () => ( `} } - panelHasBorder - panelPaddingSize="s" - headerPanelColor="subdued" /> = ({ className, header, body, - panelPaddingSize = 'none', - panelColor = 'transparent', - headerPanelColor = 'transparent', - panelHasBorder, - panelGrow = true, + panelProps = { + paddingSize: 'none', + color: 'transparent', + headerColor: 'transparent', + hasBorder: false, + grow: true, + }, isFigure = false, }) => { + const { paddingSize, color, headerColor, hasBorder, grow } = panelProps; + const classes = classNames( 'euiTimelineItemEvent', - paddingSizeToClassNameMap[panelPaddingSize], + paddingSize && paddingSizeToClassNameMap[paddingSize], className ); const headerClasses = classNames( 'euiTimelineItemEvent__header', - `euiTimelineItemEvent__header--${headerPanelColor}` + `euiTimelineItemEvent__header--${headerColor}` ); const bodyClasses = classNames('euiTimelineItemEvent__body'); @@ -90,9 +101,9 @@ export const EuiTimelineItemEvent: FunctionComponent {header && ( From 4133d830b7e0053888d03b2180550b79c7779d96 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 22 Mar 2022 11:17:37 +0000 Subject: [PATCH 11/59] Better text --- src-docs/src/views/timeline/timeline_example.js | 7 +++---- src/components/timeline/timeline_item_event.tsx | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 325535e0e41..97e6d0a932a 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -80,10 +80,9 @@ export const TimelineExample = {
  • header: the most important part of an event - (e.g. a title, username, metadata). All the content should be in - one line. When no body is present the{' '} - header - vertically center aligns with the left side icon. + (e.g. a title, username, metadata). The content should be in one + line. When no body is passed it vertically + center aligns with the icon.
  • body: additional event content. You can also diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 08f4c9a4485..55a06452a41 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -48,7 +48,7 @@ export type EuiTimelineItemEventPanelProps = { export type EuiTimelineItemEventProps = { /** * The most important part of the event (e.g. a title, username, metadata). - * It should be one line. When no body is passed it vertically center aligns with the icon. + * The content should be in one line. When no body is passed it vertically center aligns with the icon. */ header?: ReactNode; /** From 6867384e211734344191798e78cc5b2de5148bbc Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 22 Mar 2022 13:09:08 +0000 Subject: [PATCH 12/59] Fixing rest props --- src/components/timeline/_timeline_item_event.scss | 2 +- src/components/timeline/timeline_item.tsx | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss index 36bcd0eb52c..9e3293fe18b 100644 --- a/src/components/timeline/_timeline_item_event.scss +++ b/src/components/timeline/_timeline_item_event.scss @@ -18,7 +18,7 @@ } .euiPanel--hasBorder { - > .euiTimelineItemEvent__header { + > .euiTimelineItemEvent__inner .euiTimelineItemEvent__header { border-bottom: $euiBorderThin; } } diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 656bb6a174b..3d0b6e3e216 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; import { EuiTimelineItemEvent, @@ -16,9 +16,7 @@ import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; - -export type EuiTimelineItemProps = HTMLAttributes & - EuiTimelineItemEventProps & +export type EuiTimelineItemProps = EuiTimelineItemEventProps & EuiTimelineItemIconProps; export const EuiTimelineItem: FunctionComponent = ({ @@ -33,7 +31,7 @@ export const EuiTimelineItem: FunctionComponent = ({ ); return ( -
    )}> +
    From d8347d187480888ad44fdf0c7b8f52723c48ab61 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 22 Mar 2022 16:59:06 +0000 Subject: [PATCH 13/59] Updating shade color to subdued in EuiAvatar --- src-docs/src/views/timeline/timeline.tsx | 15 +++++++++------ src-docs/src/views/timeline/timeline_complex.tsx | 2 +- src-docs/src/views/timeline/timeline_item.tsx | 3 ++- .../src/views/timeline/timeline_item_event.tsx | 12 +++++++----- .../avatar/__snapshots__/avatar.test.tsx.snap | 10 +++++----- src/components/avatar/_avatar.scss | 2 +- src/components/avatar/avatar.test.tsx | 4 ++-- src/components/avatar/avatar.tsx | 11 ++++++----- src/components/timeline/_timeline_item_icon.scss | 11 ----------- src/components/timeline/timeline_item_icon.tsx | 15 ++++----------- 10 files changed, 37 insertions(+), 48 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index d7ad0c42d20..b946c4b2c86 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -3,13 +3,14 @@ import { EuiTimeline, EuiTimelineProps, EuiText, + EuiAvatar, } from '../../../../src/components'; const items: EuiTimelineProps['items'] = [ { - icon: 'email', + icon: , header: ( - +

    janet@elastic.co was invited to the project

    @@ -17,9 +18,9 @@ const items: EuiTimelineProps['items'] = [ ), }, { - icon: 'pencil', + icon: , header: ( - +

    The project was renamed to Revenue Dashboard

    @@ -27,9 +28,11 @@ const items: EuiTimelineProps['items'] = [ ), }, { - icon: 'folderClosed', + icon: ( + + ), header: ( - +

    The project was archived

     ), diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index ab6708526c6..093b26ea24e 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -65,7 +65,7 @@ export default () => { color={avatarColor} /> ) : ( - + ) } header={ diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index f1db6e9f2df..76391a58fd7 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -4,12 +4,13 @@ import { EuiText, EuiTitle, EuiCode, + EuiAvatar, } from '../../../../src/components'; export default () => (
    } header={

    diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 97361626d86..4ab5b3146b0 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -11,7 +11,7 @@ import { export default () => (
    } + icon={} header={

    @@ -22,7 +22,9 @@ export default () => ( /> } + icon={ + + } header={

    @@ -34,7 +36,7 @@ export default () => ( /> } + icon={} header={

    Error detected in dashboard 5 minutes ago

    @@ -53,7 +55,7 @@ export default () => ( headerColor: 'subdued', }} icon={ - + } header={ @@ -76,7 +78,7 @@ export default () => ( /> } + icon={} body={ `; -exports[`EuiAvatar props color as shade is rendered 1`] = ` +exports[`EuiAvatar props color as string is rendered 1`] = `

  • - header: the most important part of an event - (e.g. a title, username, metadata). The content should be in one - line. When no body is passed it vertically - center aligns with the icon. -
    • -
  • - body: additional event content. You can also - use this prop to pass more complex components (e.g. editors, code - blocks or any custom component). + children: event content. You can pass any type + of node.
@@ -107,13 +105,18 @@ export const TimelineExample = { text: ( <>

- An event is basically the right side of the{' '} - EuiTimelineItem and it's built on top of the{' '} + Although any node is allowed as a children the + recommendation is to use a{' '} EuiPanel - - . This example demonstrates how you can use{' '} - panelProps to customize an event. + {' '} + or a{' '} + + EuiSplitPanel + {' '} + when you content is text based. For other type of components like + editors, the recommendation is to pass as a children without any + wrapper.

), @@ -139,8 +142,6 @@ export const TimelineExample = { props: { EuiTimeline, EuiTimelineItem, - EuiTimelineItemEventPanel, - EuiTimelineItem, }, demo: , }, diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index 76391a58fd7..c50c5b83bee 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -2,30 +2,23 @@ import React from 'react'; import { EuiTimelineItem, EuiText, - EuiTitle, EuiCode, EuiAvatar, + EuiPanel, } from '../../../../src/components'; export default () => ( -
- } - header={ - -

- I'm an event header -

- - } - body={ - -

- I'm an event body and you can find the{' '} - icon on the left side. -

- - } - /> -
+ } + alignItems="center" + > + + +

+ I'm a children and you can find the{' '} + icon on the left side. +

+ + + ); diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 4ab5b3146b0..863333e51c2 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -6,90 +6,91 @@ import { EuiCodeBlock, EuiLink, EuiMarkdownEditor, + EuiSplitPanel, + EuiPanel, } from '../../../../src/components'; export default () => (
} - header={ + alignItems="center" + > +

Janet edited the dashboard 4 days ago

- } - /> + + } - header={ + alignItems="center" + > +

Nicole mentioned this dashboard in{' '} case/comment#021 2 days ago

- } - /> + + } - header={ + > +

Error detected in dashboard 5 minutes ago

 - } - panelProps={{ - paddingSize: 's', - color: 'danger', - }} - /> + + } - header={ - -

- Nicole generated a new iframe 2 minutes ago -

- - } - body={ - - {` + > + + + +

+ Nicole generated a new iframe 2 minutes ago +

+ + + + + {` `} - - } - /> + + + + } - body={ - {}} - initialViewMode="viewing" - markdownFormatProps={{ textSize: 's' }} - /> - } - /> + > + {}} + initialViewMode="viewing" + markdownFormatProps={{ textSize: 's' }} + height={280} + /> +
); diff --git a/src/components/timeline/_index.scss b/src/components/timeline/_index.scss index 82bd7da27a8..afa36a003f0 100644 --- a/src/components/timeline/_index.scss +++ b/src/components/timeline/_index.scss @@ -1,4 +1,3 @@ @import 'timeline_item'; @import 'timeline_item_event'; -@import 'timeline_item_icon'; -@import 'timeline_item_panel'; \ No newline at end of file +@import 'timeline_item_icon'; \ No newline at end of file diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss index 3ddf1c7ca83..6f718b21091 100644 --- a/src/components/timeline/_timeline_item.scss +++ b/src/components/timeline/_timeline_item.scss @@ -3,36 +3,30 @@ display: flex; padding-bottom: $euiSize; min-height: $euiSize * 3.5; +} - .euiTimelineItemEvent { - flex-grow: 1; - } - +.euiTimelineItem:last-of-type { .euiTimelineItemIcon { - position: relative; - flex-grow: 0; - margin-right: $euiSize; - &::before { - content: ''; - position: absolute; - left: $euiSizeXXL / 2; - top: $euiSize; - width: $euiSizeXS / 2; - background-color: $euiColorLightShade; - height: calc(100% + #{$euiSize}); + display: none; } } } -.euiTimelineItem--hasHeader:not(.euiTimelineItem--hasBody) { + +// Align Items +.euiTimelineItem--alignItemsFlexStart { + align-items: flex-start; +} + +.euiTimelineItem--alignItemsCenter { align-items: center; } -.euiTimelineItem:last-of-type { - .euiTimelineItemIcon { - &::before { - display: none; - } - } +.euiTimelineItem--alignItemsFlexEnd { + align-items: flex-end; } + +.euiTimelineItem--alignItemsBaseline { + align-items: baseline; +} \ No newline at end of file diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss index 9e3293fe18b..8ce0775b2ba 100644 --- a/src/components/timeline/_timeline_item_event.scss +++ b/src/components/timeline/_timeline_item_event.scss @@ -1,51 +1,4 @@ .euiTimelineItemEvent { - display: flex; - align-items: center; - flex-grow: 1; - overflow: hidden; -} - -.euiTimelineItemEvent__inner { flex: 1; } -.euiTimelineItemEvent__header { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; -} - -.euiTimelineItemEvent__footer { - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; -} - -.euiPanel--hasBorder { - > .euiTimelineItemEvent__inner .euiTimelineItemEvent__header { - border-bottom: $euiBorderThin; - } -} - -.euiTimelineItemEvent--noBody { - .euiTimelineItemEvent__header { - border-radius: $euiBorderRadius; - } -} - -// Background colors -@each $modifier, $color in $euiPanelBackgroundColorModifiers { - .euiTimelineItemEvent__header--#{$modifier} { - background-color: $color; - } - - .euiTimelineItemEvent__body-#{$modifier} { - background-color: $color; - } -} - -// Padding -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiTimelineItemEvent--#{$modifier} { - .euiTimelineItemEvent__header, - .euiTimelineItemEvent__body { - padding: $amount; - } - } -} diff --git a/src/components/timeline/_timeline_item_icon.scss b/src/components/timeline/_timeline_item_icon.scss index 2e7545cc0c9..344efc9d23b 100644 --- a/src/components/timeline/_timeline_item_icon.scss +++ b/src/components/timeline/_timeline_item_icon.scss @@ -1,3 +1,19 @@ +.euiTimelineItemIcon { + position: relative; + flex-grow: 0; + margin-right: $euiSize; + + &::before { + content: ''; + position: absolute; + left: $euiSizeXXL / 2; + top: $euiSize; + width: $euiSizeXS / 2; + background-color: $euiColorLightShade; + height: calc(100% + #{$euiSize}); + } +} + .euiTimelineItemIcon__content { min-width: $euiSizeXXL; display: flex; diff --git a/src/components/timeline/_timeline_item_panel.scss b/src/components/timeline/_timeline_item_panel.scss deleted file mode 100644 index 474b851398a..00000000000 --- a/src/components/timeline/_timeline_item_panel.scss +++ /dev/null @@ -1,46 +0,0 @@ -.euiTimelineItemPanel { - display: flex; - align-items: center; - flex-grow: 1; -} - -.euiTimelineItemPanel__header { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; -} - -.euiTimelineItemPanel__footer { - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; -} - -.euiPanel--hasBorder { - > .euiTimelineItemPanel__header { - border-bottom: $euiBorderThin; - } -} - -.euiTimelineItemPanel--noBody { - .euiTimelineItemPanel__header { - border-radius: $euiBorderRadius; - } -} - -// Background colors -@each $modifier, $color in $euiPanelBackgroundColorModifiers { - .euiTimelineItemPanel__header--#{$modifier} { - background-color: $color; - } - - .euiTimelineItemPanel__body-#{$modifier} { - background-color: $color; - } -} - -// Padding -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiTimelineItemPanel--#{$modifier} { - .euiTimelineItemPanel__header, - .euiTimelineItemPanel__body { - padding: $amount; - } - } -} diff --git a/src/components/timeline/index.ts b/src/components/timeline/index.ts index 23caed0e6ea..d06ff0e0806 100644 --- a/src/components/timeline/index.ts +++ b/src/components/timeline/index.ts @@ -9,10 +9,6 @@ export type { EuiTimelineItemProps } from './timeline_item'; export { EuiTimelineItem } from './timeline_item'; -export type { - EuiTimelineItemEventProps, - EuiTimelineItemEventPanelProps, -} from './timeline_item_event'; export { EuiTimelineItemEvent } from './timeline_item_event'; export { EuiTimelineItemIcon } from './timeline_item_icon'; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 3d0b6e3e216..e9a70468366 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -6,34 +6,49 @@ * Side Public License, v 1. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { - EuiTimelineItemEvent, - EuiTimelineItemEventProps, -} from './timeline_item_event'; +import { EuiTimelineItemEvent } from './timeline_item_event'; import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; -export type EuiTimelineItemProps = EuiTimelineItemEventProps & - EuiTimelineItemIconProps; + +import { keysOf } from '../common'; + +const alignItemsToClassNameMap = { + stretch: null, + flexStart: 'euiTimelineItem--alignItemsFlexStart', + flexEnd: 'euiTimelineItem--alignItemsFlexEnd', + center: 'euiTimelineItem--alignItemsCenter', + baseline: 'euiTimelineItem--alignItemsBaseline', +}; + +export const ALIGN_ITEMS = keysOf(alignItemsToClassNameMap); + +export type EuiTimelineItemAlignItems = keyof typeof alignItemsToClassNameMap; + +export type EuiTimelineItemProps = EuiTimelineItemIconProps & { + alignItems?: EuiTimelineItemAlignItems; +} & HTMLAttributes; export const EuiTimelineItem: FunctionComponent = ({ className, + children, + alignItems, ...rest }) => { const classes = classNames( 'euiTimelineItem', - { 'euiTimelineItem--hasHeader': rest.header }, - { 'euiTimelineItem--hasBody': rest.body }, + alignItemsToClassNameMap[alignItems as EuiTimelineItemAlignItems], className ); return (
- + + {children}
); }; diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 55a06452a41..ca12e38badb 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -6,112 +6,8 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; -import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; -import { CommonProps, keysOf } from '../common'; +import React, { FunctionComponent } from 'react'; -const paddingSizeToClassNameMap = { - none: null, - s: 'euiTimelineItemEvent--paddingSmall', - m: 'euiTimelineItemEvent--paddingMedium', - l: 'euiTimelineItemEvent--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - -export type PaddingSize = typeof PADDING_SIZES[number]; - -export type EuiTimelineItemEventPanelProps = { - /** - * When true the panel will grow in height and width to match the parent container - */ - grow?: boolean; - /** - * Adds a border around the panel and a line separating the header and body. - */ - hasBorder?: _EuiPanelDivlike['hasBorder']; - /** - * Padding applied around the event header and/or event body. - */ - paddingSize?: PaddingSize; - /** - * Sets the color of all the panel. - */ - color?: _EuiPanelDivlike['color']; - /** - * Sets the color of the header color. - */ - headerColor?: _EuiPanelDivlike['color']; -}; - -export type EuiTimelineItemEventProps = { - /** - * The most important part of the event (e.g. a title, username, metadata). - * The content should be in one line. When no body is passed it vertically center aligns with the icon. - */ - header?: ReactNode; - /** - * Use the body for aditional content. You can also use this prop - * to pass more complex components (e.g. editors, code blocks or any custom component). - */ - body?: ReactNode; - /** - * Changes the event wrapping div to `figure` and the div wrapping the `header` content to `figcaption`. - */ - isFigure?: boolean; - /** - * See #EuiTimelineItemEventPanel for object details - */ - panelProps?: EuiTimelineItemEventPanelProps; -} & CommonProps; - -export const EuiTimelineItemEvent: FunctionComponent = ({ - className, - header, - body, - panelProps = { - paddingSize: 'none', - color: 'transparent', - headerColor: 'transparent', - hasBorder: false, - grow: true, - }, - isFigure = false, -}) => { - const { paddingSize, color, headerColor, hasBorder, grow } = panelProps; - - const classes = classNames( - 'euiTimelineItemEvent', - paddingSize && paddingSizeToClassNameMap[paddingSize], - className - ); - - const headerClasses = classNames( - 'euiTimelineItemEvent__header', - `euiTimelineItemEvent__header--${headerColor}` - ); - - const bodyClasses = classNames('euiTimelineItemEvent__body'); - - const Element = isFigure ? 'figure' : 'div'; - const HeaderElement = isFigure ? 'figcaption' : 'div'; - - return ( - - - {header && ( - {header} - )} - - {body &&
{body}
} - - - ); +export const EuiTimelineItemEvent: FunctionComponent = ({ children }) => { + return
{children}
; }; diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 84a639bf62e..7d35b8cd68c 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -7,10 +7,8 @@ */ import React, { FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; -import { CommonProps } from '../common'; -export type EuiTimelineItemIconProps = CommonProps & { +export type EuiTimelineItemIconProps = { /** * Any node, but preferably a `EuiAvatar` */ @@ -18,13 +16,10 @@ export type EuiTimelineItemIconProps = CommonProps & { }; export const EuiTimelineItemIcon: FunctionComponent = ({ - className, icon, }) => { - const classes = classNames('euiTimelineItemIcon', className); - return ( -
+
{icon}
); From c666cd4ff26dbff4f2587c2910c54bb32fe558a7 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 22 Mar 2022 19:37:44 +0000 Subject: [PATCH 15/59] Adding `isCenterAligned` prop --- src-docs/src/views/timeline/timeline.tsx | 6 +-- .../src/views/timeline/timeline_example.js | 3 +- src-docs/src/views/timeline/timeline_item.tsx | 2 +- .../views/timeline/timeline_item_event.tsx | 4 +- src/components/timeline/_timeline_item.scss | 14 ------ src/components/timeline/timeline_item.tsx | 45 ++++++++----------- 6 files changed, 25 insertions(+), 49 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index e4b3c3c544f..4efc7c67a6f 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -16,7 +16,7 @@ const wrapper = (children: ReactElement) => ( const items: EuiTimelineProps['items'] = [ { icon: , - alignItems: 'center', + isCenterAligned: true, children: wrapper(

janet@elastic.co was invited to the project @@ -25,7 +25,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: , - alignItems: 'center', + isCenterAligned: true, children: wrapper(

The project was renamed to Revenue Dashboard @@ -36,7 +36,7 @@ const items: EuiTimelineProps['items'] = [ icon: ( ), - alignItems: 'center', + isCenterAligned: true, children: wrapper(

The project was archived

), }, ]; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 435453643f7..b021271683a 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -84,8 +84,7 @@ export const TimelineExample = { icon: main icon that appears on the left side.
  • - children: event content. You can pass any type - of node. + children: event content. You can pass any node.
    • diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index c50c5b83bee..a99ec0312b2 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -10,7 +10,7 @@ import { export default () => ( } - alignItems="center" + isCenterAligned > diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 863333e51c2..04a04ebc7f6 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -14,7 +14,7 @@ export default () => (
    } - alignItems="center" + isCenterAligned > @@ -29,7 +29,7 @@ export default () => ( icon={ } - alignItems="center" + isCenterAligned > diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss index 6f718b21091..9b58ee63924 100644 --- a/src/components/timeline/_timeline_item.scss +++ b/src/components/timeline/_timeline_item.scss @@ -13,20 +13,6 @@ } } - -// Align Items -.euiTimelineItem--alignItemsFlexStart { - align-items: flex-start; -} - .euiTimelineItem--alignItemsCenter { align-items: center; } - -.euiTimelineItem--alignItemsFlexEnd { - align-items: flex-end; -} - -.euiTimelineItem--alignItemsBaseline { - align-items: baseline; -} \ No newline at end of file diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index e9a70468366..44bb20ea1e2 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; import { EuiTimelineItemEvent } from './timeline_item_event'; import { @@ -14,39 +14,30 @@ import { EuiTimelineItemIconProps, } from './timeline_item_icon'; -import { keysOf } from '../common'; - -const alignItemsToClassNameMap = { - stretch: null, - flexStart: 'euiTimelineItem--alignItemsFlexStart', - flexEnd: 'euiTimelineItem--alignItemsFlexEnd', - center: 'euiTimelineItem--alignItemsCenter', - baseline: 'euiTimelineItem--alignItemsBaseline', -}; - -export const ALIGN_ITEMS = keysOf(alignItemsToClassNameMap); - -export type EuiTimelineItemAlignItems = keyof typeof alignItemsToClassNameMap; - -export type EuiTimelineItemProps = EuiTimelineItemIconProps & { - alignItems?: EuiTimelineItemAlignItems; -} & HTMLAttributes; +export type EuiTimelineItemProps = EuiTimelineItemIconProps & + Omit, 'aria-label' | 'className'> & { + /** + * Center aligns the event with the icon + */ + isCenterAligned?: boolean; + /** + * Accepts any node. + */ + children: ReactNode; + }; export const EuiTimelineItem: FunctionComponent = ({ - className, children, - alignItems, - ...rest + isCenterAligned, + icon, }) => { - const classes = classNames( - 'euiTimelineItem', - alignItemsToClassNameMap[alignItems as EuiTimelineItemAlignItems], - className - ); + const classes = classNames('euiTimelineItem', { + 'euiTimelineItem--alignItemsCenter': isCenterAligned, + }); return (
    - + {children}
    From a6a1fc33943977d6aad919f1ba4cabcaa56e784c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 22 Mar 2022 19:51:19 +0000 Subject: [PATCH 16/59] Snippets --- src-docs/src/views/timeline/timeline_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index b021271683a..070fb1c72a7 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -21,13 +21,13 @@ const timelineSnippet = ` +const timelineItemSnippet = ` {content} `; import TimelineItemEvent from './timeline_item_event'; const timelineItemEventSource = require('!!raw-loader!./timeline_item_event'); -const timelineItemEventSnippet = ` +const timelineItemEventSnippet = `

    From e1ebaef03077b5a11b04edc2561f49f74c6aaa8c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 23 Mar 2022 12:53:17 +0000 Subject: [PATCH 17/59] Adding `verticalAlign` prop --- src-docs/src/views/timeline/timeline.tsx | 6 +-- src-docs/src/views/timeline/timeline_item.tsx | 2 +- .../views/timeline/timeline_item_event.tsx | 4 +- src/components/timeline/_timeline_item.scss | 26 +++++++++++- .../timeline/_timeline_item_icon.scss | 2 + src/components/timeline/timeline_item.tsx | 41 ++++++++++++------- .../timeline/timeline_item_event.tsx | 13 +++++- 7 files changed, 70 insertions(+), 24 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 4efc7c67a6f..b338067037a 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -16,7 +16,7 @@ const wrapper = (children: ReactElement) => ( const items: EuiTimelineProps['items'] = [ { icon: , - isCenterAligned: true, + verticalAlign: 'center', children: wrapper(

    janet@elastic.co was invited to the project @@ -25,7 +25,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: , - isCenterAligned: true, + verticalAlign: 'center', children: wrapper(

    The project was renamed to Revenue Dashboard @@ -36,7 +36,7 @@ const items: EuiTimelineProps['items'] = [ icon: ( ), - isCenterAligned: true, + verticalAlign: 'center', children: wrapper(

    The project was archived

    ), }, ]; diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index a99ec0312b2..fafedcb6e4f 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -10,7 +10,7 @@ import { export default () => ( } - isCenterAligned + verticalAlign="center" > diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 04a04ebc7f6..7d4052b147b 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -14,7 +14,7 @@ export default () => (
    } - isCenterAligned + verticalAlign="center" > @@ -29,7 +29,7 @@ export default () => ( icon={ } - isCenterAligned + verticalAlign="center" > diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss index 9b58ee63924..bbb016d319b 100644 --- a/src/components/timeline/_timeline_item.scss +++ b/src/components/timeline/_timeline_item.scss @@ -13,6 +13,28 @@ } } -.euiTimelineItem--alignItemsCenter { - align-items: center; +// Vertical align items +.euiTimelineItem--verticalAlignTop { + .euiTimelineItemIcon { + align-items: flex-start; + } + + .euiTimelineItemEvent { + align-self: flex-start; + } } + +.euiTimelineItem--verticalAlignCenter { + .euiTimelineItemIcon { + align-items: center; + + // when the vertical alignment is center the vertical line starts in the middle of the container + &::before { + top: 50%; + } + } + + .euiTimelineItemEvent { + align-self: center; + } +} \ No newline at end of file diff --git a/src/components/timeline/_timeline_item_icon.scss b/src/components/timeline/_timeline_item_icon.scss index 344efc9d23b..41be2a2378f 100644 --- a/src/components/timeline/_timeline_item_icon.scss +++ b/src/components/timeline/_timeline_item_icon.scss @@ -1,8 +1,10 @@ .euiTimelineItemIcon { + display: flex; position: relative; flex-grow: 0; margin-right: $euiSize; + // timeline vertical line &::before { content: ''; position: absolute; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 44bb20ea1e2..3fa2161a536 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -6,34 +6,47 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { EuiTimelineItemEvent } from './timeline_item_event'; +import { + EuiTimelineItemEvent, + EuiTimelineItemEventProps, +} from './timeline_item_event'; import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; +import { CommonProps, keysOf } from '../common'; + +const verticalAlignToClassNameMap = { + top: 'euiTimelineItem--verticalAlignTop', + center: 'euiTimelineItem--verticalAlignCenter', +}; + +export const VERTICAL_ALIGN = keysOf(verticalAlignToClassNameMap); + +export type EuiTimelineItemVerticalAlign = keyof typeof verticalAlignToClassNameMap; export type EuiTimelineItemProps = EuiTimelineItemIconProps & - Omit, 'aria-label' | 'className'> & { - /** - * Center aligns the event with the icon - */ - isCenterAligned?: boolean; + EuiTimelineItemEventProps & { /** - * Accepts any node. + * Vertical aligns the event with the icon */ - children: ReactNode; - }; + verticalAlign?: EuiTimelineItemVerticalAlign; + } & CommonProps & + HTMLAttributes; export const EuiTimelineItem: FunctionComponent = ({ children, - isCenterAligned, + verticalAlign = 'top', icon, + className, }) => { - const classes = classNames('euiTimelineItem', { - 'euiTimelineItem--alignItemsCenter': isCenterAligned, - }); + const classes = classNames( + 'euiTimelineItem', + verticalAlignToClassNameMap[verticalAlign as EuiTimelineItemVerticalAlign], + className + ); return (
    diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index ca12e38badb..b5a6af94a1c 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -6,8 +6,17 @@ * Side Public License, v 1. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; -export const EuiTimelineItemEvent: FunctionComponent = ({ children }) => { +export type EuiTimelineItemEventProps = { + /** + * Accepts any node. + */ + children: ReactNode; +}; + +export const EuiTimelineItemEvent: FunctionComponent = ({ + children, +}) => { return
    {children}
    ; }; From 19672ef2adcecedf75708dab4205a445179f1da4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 23 Mar 2022 13:36:48 +0000 Subject: [PATCH 18/59] Adding tests --- .../src/views/timeline/timeline_complex.tsx | 9 +- .../src/views/timeline/timeline_example.js | 9 +- .../views/timeline/timeline_item_event.tsx | 2 + .../__snapshots__/timeline.test.tsx.snap | 78 +++++++++++++ .../__snapshots__/timeline_item.test.tsx.snap | 106 ++++++++++++++++++ src/components/timeline/index.ts | 11 +- src/components/timeline/timeline.test.tsx | 41 +++++++ .../timeline/timeline_item.test.tsx | 47 ++++++++ 8 files changed, 290 insertions(+), 13 deletions(-) create mode 100644 src/components/timeline/__snapshots__/timeline.test.tsx.snap create mode 100644 src/components/timeline/__snapshots__/timeline_item.test.tsx.snap create mode 100644 src/components/timeline/timeline.test.tsx create mode 100644 src/components/timeline/timeline_item.test.tsx diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index 3bb782e0bd4..4b78bc3a137 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -12,6 +12,7 @@ import { EuiTitle, EuiSplitPanel, EuiPanel, + EuiHorizontalRule, } from '../../../../src/components'; import { @@ -66,7 +67,7 @@ export default () => { } > - + { - +

    @@ -126,14 +127,14 @@ export default () => { } > - +

    Hot phase Required

    - +

    diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 070fb1c72a7..dd9c7c7251d 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -53,8 +53,7 @@ export const TimelineExample = { text: (

    The EuiTimeline is a component that standardizes the - way a timeline thread is displayed. But it gives the ability to add - custom components and icons. Pass an array of{' '} + way a timeline thread is displayed. Pass an array of{' '} EuiTimelineItem objects and{' '} EuiTimeline will generate a timeline thread.
    @@ -113,9 +112,9 @@ export const TimelineExample = { EuiSplitPanel {' '} - when you content is text based. For other type of components like - editors, the recommendation is to pass as a children without any - wrapper. + when your content is text-based. For other types of components like + editors, the recommendation is to pass the{' '} + children without any wrapper.

    ), diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 7d4052b147b..1b93b25cd31 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -8,6 +8,7 @@ import { EuiMarkdownEditor, EuiSplitPanel, EuiPanel, + EuiHorizontalRule, } from '../../../../src/components'; export default () => ( @@ -64,6 +65,7 @@ export default () => (

    + +
    +
    +
    + +
    +
    +
    +

    + + janet@elastic.co + + was invited to the project +

    +
    +
    +
    +
    +
    + +
    +
    +
    +

    + + janet@elastic.co + + was invited to the project +

    +
    +
    +
    +`; diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap new file mode 100644 index 00000000000..4f82c60855d --- /dev/null +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiTimelineItem is rendered 1`] = ` +
    +
    +
    + +
    +
    +
    +

    + I'm the children +

    +
    +
    +`; + +exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` +
    +
    +
    + +
    +
    +
    +

    + I'm the children +

    +
    +
    +`; + +exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = ` +
    +
    +
    + +
    +
    +
    +

    + I'm the children +

    +
    +
    +`; diff --git a/src/components/timeline/index.ts b/src/components/timeline/index.ts index d06ff0e0806..bd23b8eb59c 100644 --- a/src/components/timeline/index.ts +++ b/src/components/timeline/index.ts @@ -6,12 +6,15 @@ * Side Public License, v 1. */ -export type { EuiTimelineItemProps } from './timeline_item'; +export type { EuiTimelineProps } from './timeline'; +export { EuiTimeline } from './timeline'; + +export type { + EuiTimelineItemProps, + EuiTimelineItemVerticalAlign, +} from './timeline_item'; export { EuiTimelineItem } from './timeline_item'; export { EuiTimelineItemEvent } from './timeline_item_event'; export { EuiTimelineItemIcon } from './timeline_item_icon'; - -export type { EuiTimelineProps } from './timeline'; -export { EuiTimeline } from './timeline'; diff --git a/src/components/timeline/timeline.test.tsx b/src/components/timeline/timeline.test.tsx new file mode 100644 index 00000000000..fefd53e8e5a --- /dev/null +++ b/src/components/timeline/timeline.test.tsx @@ -0,0 +1,41 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { render } from 'enzyme'; +import { EuiAvatar } from '../avatar'; +import { EuiTimeline, EuiTimelineProps } from './timeline'; + +describe('EuiTimeline', () => { + test('is rendered with items', () => { + const items: EuiTimelineProps['items'] = [ + { + icon: , + verticalAlign: 'center', + children: ( +

    + janet@elastic.co was invited to the project +

    + ), + }, + { + icon: , + verticalAlign: 'center', + children: ( +

    + janet@elastic.co was invited to the project +

    + ), + }, + ]; + + const component = render(); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/timeline/timeline_item.test.tsx b/src/components/timeline/timeline_item.test.tsx new file mode 100644 index 00000000000..990770c015a --- /dev/null +++ b/src/components/timeline/timeline_item.test.tsx @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { render } from 'enzyme'; +import { EuiAvatar } from '../avatar'; +import { EuiTimelineItem, VERTICAL_ALIGN } from './timeline_item'; + +describe('EuiTimelineItem', () => { + test('is rendered', () => { + const component = render( + } + > +

    I'm the children

    +     + ); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + describe('verticalAlign', () => { + VERTICAL_ALIGN.forEach((alignment) => { + test(`${alignment} is rendered`, () => { + const component = render( + + } + verticalAlign={alignment} + > +

    I'm the children

    +     + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); +}); From 1f6efa73a3054464d55c6c9c12451c184b2b5fa8 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 23 Mar 2022 13:52:32 +0000 Subject: [PATCH 19/59] Adding CL --- upcoming_changelogs/5730.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 upcoming_changelogs/5730.md diff --git a/upcoming_changelogs/5730.md b/upcoming_changelogs/5730.md new file mode 100644 index 00000000000..b6c2f1566ef --- /dev/null +++ b/upcoming_changelogs/5730.md @@ -0,0 +1,2 @@ +- Added `EuiTimeline` component; +- Added a `"subdued"` color option to `EuiAvatar`; \ No newline at end of file From 30d412d015e2bc497e0965cdbe37d577e5681f49 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 23 Mar 2022 14:52:38 +0000 Subject: [PATCH 20/59] Updating avatar example to use color `"subdued"` --- src-docs/src/views/avatar/avatar_icon.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/avatar/avatar_icon.js b/src-docs/src/views/avatar/avatar_icon.js index 5fefadc1fce..b1159470976 100644 --- a/src-docs/src/views/avatar/avatar_icon.js +++ b/src-docs/src/views/avatar/avatar_icon.js @@ -21,7 +21,12 @@ export default () => {     - +   Date: Wed, 23 Mar 2022 15:27:06 +0000 Subject: [PATCH 21/59] Avatar names --- .../src/views/timeline/timeline_complex.tsx | 6 ++--- src-docs/src/views/timeline/timeline_item.tsx | 2 +- .../views/timeline/timeline_item_event.tsx | 22 +++++++++++++------ 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index 4b78bc3a137..261f8253963 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -57,12 +57,12 @@ export default () => { checked ? ( ) : ( - + ) } > @@ -120,7 +120,7 @@ export default () => { icon={ diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index fafedcb6e4f..739edc88f7b 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -9,7 +9,7 @@ import { export default () => ( } + icon={} verticalAlign="center" > diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 1b93b25cd31..ffc7c69123d 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -14,10 +14,10 @@ import { export default () => (
    } + icon={} verticalAlign="center" > - +

    Janet edited the dashboard 4 days ago @@ -28,7 +28,11 @@ export default () => ( + } verticalAlign="center" > @@ -43,9 +47,9 @@ export default () => ( } + icon={} > - +

    Error detected in dashboard 5 minutes ago

     @@ -54,7 +58,11 @@ export default () => ( + } > @@ -81,7 +89,7 @@ export default () => ( } + icon={} > Date: Mon, 28 Mar 2022 17:36:29 +0100 Subject: [PATCH 22/59] Using `euiPaletteColorBlindBehindText` to ensure better contrast --- .../src/views/timeline/timeline_complex.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index 261f8253963..7ebda13b069 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -17,7 +17,7 @@ import { import { useGeneratedHtmlId, - euiPaletteColorBlind, + euiPaletteColorBlindBehindText, } from '../../../../src/services'; export default () => { @@ -28,6 +28,13 @@ export default () => { prefix: 'buttonElementAccordion', }); + // We could use the `euiPaletteColorBlind` for coloring the avatars + // But because we're placing an icon on top of these colors + // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast + const colorBlindBehindText = euiPaletteColorBlindBehindText({ + sortBy: 'natural', + }); + const onChange1 = (e: { target: { checked: React.SetStateAction }; }) => { @@ -122,7 +129,7 @@ export default () => { size="m" name="check icon" iconType="check" - color={euiPaletteColorBlind()[0]} + color={colorBlindBehindText[0]} /> } > @@ -147,11 +154,11 @@ export default () => { - {phase('Warm phase', checked1, onChange1, euiPaletteColorBlind()[1])} + {phase('Warm phase', checked1, onChange1, colorBlindBehindText[1])} - {phase('Cold phase', checked2, onChange2, euiPaletteColorBlind()[2])} + {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])} - {phase('Frozen phase', checked3, onChange3, euiPaletteColorBlind()[3])} + {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])}
    ); }; From 00f8beb25e4eda046e5f2e785498c552048d534e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 31 Mar 2022 11:28:32 -0500 Subject: [PATCH 23/59] refactor --- src/components/timeline/timeline.tsx | 29 ++++++++----------- src/components/timeline/timeline_item.tsx | 23 ++++++++------- .../timeline/timeline_item_event.tsx | 4 +-- .../timeline/timeline_item_icon.tsx | 4 +-- 4 files changed, 29 insertions(+), 31 deletions(-) diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index 6e1e14f98d9..43ac928ae5d 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -11,32 +11,27 @@ import { CommonProps } from '../common'; import classNames from 'classnames'; import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item'; -export type EuiTimelineProps = HTMLAttributes & - CommonProps & { - /** - * List of timelines to render. See #EuiTimeline - */ - items?: EuiTimelineItemProps[]; - }; +export interface EuiTimelineProps + extends Omit, 'children'>, + CommonProps { + /** + * List of timelines to render. See #EuiTimeline + */ + items?: EuiTimelineItemProps[]; +} export const EuiTimeline: FunctionComponent = ({ className, - items, + items = [], ...rest }) => { const classes = classNames('euiTimeline', className); - let timelineElements = null; - - if (items) { - timelineElements = items.map((item, index) => ( - - )); - } - return (
    - {timelineElements} + {items.map((item, index) => ( + + ))}
    ); }; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 3fa2161a536..2a9e4c1d0f3 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -27,29 +27,32 @@ export const VERTICAL_ALIGN = keysOf(verticalAlignToClassNameMap); export type EuiTimelineItemVerticalAlign = keyof typeof verticalAlignToClassNameMap; -export type EuiTimelineItemProps = EuiTimelineItemIconProps & - EuiTimelineItemEventProps & { - /** - * Vertical aligns the event with the icon - */ - verticalAlign?: EuiTimelineItemVerticalAlign; - } & CommonProps & - HTMLAttributes; +export interface EuiTimelineItemProps + extends Omit, 'children'>, + CommonProps, + EuiTimelineItemIconProps, + EuiTimelineItemEventProps { + /** + * Vertical aligns the event with the icon + */ + verticalAlign?: EuiTimelineItemVerticalAlign; +} export const EuiTimelineItem: FunctionComponent = ({ children, verticalAlign = 'top', icon, className, + ...rest }) => { const classes = classNames( 'euiTimelineItem', - verticalAlignToClassNameMap[verticalAlign as EuiTimelineItemVerticalAlign], + verticalAlignToClassNameMap[verticalAlign], className ); return ( -
    +
    {children} diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index b5a6af94a1c..b2a7728e240 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -8,12 +8,12 @@ import React, { FunctionComponent, ReactNode } from 'react'; -export type EuiTimelineItemEventProps = { +export interface EuiTimelineItemEventProps { /** * Accepts any node. */ children: ReactNode; -}; +} export const EuiTimelineItemEvent: FunctionComponent = ({ children, diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 7d35b8cd68c..98f149a4b65 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -8,12 +8,12 @@ import React, { FunctionComponent, ReactNode } from 'react'; -export type EuiTimelineItemIconProps = { +export interface EuiTimelineItemIconProps { /** * Any node, but preferably a `EuiAvatar` */ icon: ReactNode; -}; +} export const EuiTimelineItemIcon: FunctionComponent = ({ icon, From efc6686da94a7c5450e859b453a752049597b4b1 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 31 Mar 2022 11:29:43 -0500 Subject: [PATCH 24/59] clean up --- .../src/views/timeline/timeline_complex.tsx | 25 ++++++------------- .../src/views/timeline/timeline_example.js | 8 +++--- 2 files changed, 11 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx index 7ebda13b069..ab0c7040b4a 100644 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ b/src-docs/src/views/timeline/timeline_complex.tsx @@ -4,6 +4,7 @@ import { EuiAvatar, EuiText, EuiSwitch, + EuiSwitchEvent, EuiAccordion, EuiFlexGroup, EuiFlexItem, @@ -35,28 +36,16 @@ export default () => { sortBy: 'natural', }); - const onChange1 = (e: { - target: { checked: React.SetStateAction }; - }) => { - setChecked1(e.target.checked); - }; + const onChange1 = (e: EuiSwitchEvent) => setChecked1(e.target.checked); - const onChange2 = (e: { - target: { checked: React.SetStateAction }; - }) => { - setChecked2(e.target.checked); - }; + const onChange2 = (e: EuiSwitchEvent) => setChecked2(e.target.checked); - const onChange3 = (e: { - target: { checked: React.SetStateAction }; - }) => { - setChecked3(e.target.checked); - }; + const onChange3 = (e: EuiSwitchEvent) => setChecked3(e.target.checked); const phase = ( title: string, checked: boolean, - onChange: any, + onChange: (e: EuiSwitchEvent) => void, avatarColor: string ) => ( {

    Move data to the cold tier when you are searching it less often - and don’t need to update it. The cold tier is optimized for cost - savings over search performance. + and don't need to update it. The cold tier is optimized for + cost savings over search performance.

    diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index dd9c7c7251d..8f2d1e7aeed 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -46,7 +46,7 @@ export const TimelineExample = { { source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: timelineSource, }, ], @@ -66,7 +66,7 @@ export const TimelineExample = { title: 'Timeline item', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: timelineItemSource, }, ], @@ -96,7 +96,7 @@ export const TimelineExample = { title: 'Customizing an event', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: timelineItemEventSource, }, ], @@ -125,7 +125,7 @@ export const TimelineExample = { title: 'Complex example', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: TimelineComplexSource, }, ], From e5f8633538a590db7b2ef72e7f0cd78c6025fa37 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 12:36:17 +0100 Subject: [PATCH 25/59] Addressing PR review --- src-docs/src/views/timeline/timeline_example.js | 2 ++ src/components/timeline/timeline.tsx | 2 +- src/components/timeline/timeline_item.tsx | 2 +- src/components/timeline/timeline_item_event.tsx | 2 +- src/components/timeline/timeline_item_icon.tsx | 15 ++++++++++++--- upcoming_changelogs/5730.md | 4 ++-- 6 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index dd9c7c7251d..a647c100641 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -42,6 +42,8 @@ const TimelineComplexSource = require('!!raw-loader!./timeline_complex'); export const TimelineExample = { title: 'Timeline', + isBeta: true, + isNew: true, sections: [ { source: [ diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index 6e1e14f98d9..ba458e0f1db 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -14,7 +14,7 @@ import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item'; export type EuiTimelineProps = HTMLAttributes & CommonProps & { /** - * List of timelines to render. See #EuiTimeline + * List of timeline items to render. See #EuiTimelineItem */ items?: EuiTimelineItemProps[]; }; diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 3fa2161a536..4aafe71a61c 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -30,7 +30,7 @@ export type EuiTimelineItemVerticalAlign = keyof typeof verticalAlignToClassName export type EuiTimelineItemProps = EuiTimelineItemIconProps & EuiTimelineItemEventProps & { /** - * Vertical aligns the event with the icon + * Vertical alignment of the event with the icon */ verticalAlign?: EuiTimelineItemVerticalAlign; } & CommonProps & diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index b5a6af94a1c..9227febdc18 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -10,7 +10,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; export type EuiTimelineItemEventProps = { /** - * Accepts any node. + * Accepts any node. But preferably `EuiPanel` */ children: ReactNode; }; diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 7d35b8cd68c..14a20439337 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -7,20 +7,29 @@ */ import React, { FunctionComponent, ReactNode } from 'react'; +import { IconType } from '../icon'; +import { EuiAvatar } from '../avatar'; export type EuiTimelineItemIconProps = { /** - * Any node, but preferably a `EuiAvatar` + * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`. */ - icon: ReactNode; + icon: ReactNode | IconType; }; export const EuiTimelineItemIcon: FunctionComponent = ({ icon, }) => { + const iconRender = + typeof icon === 'string' ? ( + + ) : ( + icon + ); + return (
    -
    {icon}
    +
    {iconRender}
    ); }; diff --git a/upcoming_changelogs/5730.md b/upcoming_changelogs/5730.md index b6c2f1566ef..48bdfa97e1e 100644 --- a/upcoming_changelogs/5730.md +++ b/upcoming_changelogs/5730.md @@ -1,2 +1,2 @@ -- Added `EuiTimeline` component; -- Added a `"subdued"` color option to `EuiAvatar`; \ No newline at end of file +- Added `EuiTimeline` component +- Added a `"subdued"` color option to `EuiAvatar` \ No newline at end of file From 4d0c823f3d407bade7d2a5c5d6b70493cd1d41f6 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 14:06:18 +0100 Subject: [PATCH 26/59] Converting styles to emotion --- src/components/index.scss | 1 - .../__snapshots__/timeline.test.tsx.snap | 16 +++--- .../__snapshots__/timeline_item.test.tsx.snap | 24 ++++----- src/components/timeline/_index.scss | 3 -- src/components/timeline/_timeline_item.scss | 40 --------------- .../timeline/_timeline_item_event.scss | 4 -- .../timeline/_timeline_item_icon.scss | 25 ---------- .../timeline/timeline_item.styles.ts | 50 +++++++++++++++++++ src/components/timeline/timeline_item.tsx | 10 +++- .../timeline/timeline_item_event.styles.ts | 15 ++++++ .../timeline/timeline_item_event.tsx | 10 +++- .../timeline/timeline_item_icon.styles.ts | 37 ++++++++++++++ .../timeline/timeline_item_icon.tsx | 15 +++++- 13 files changed, 153 insertions(+), 97 deletions(-) delete mode 100644 src/components/timeline/_index.scss delete mode 100644 src/components/timeline/_timeline_item.scss delete mode 100644 src/components/timeline/_timeline_item_event.scss delete mode 100644 src/components/timeline/_timeline_item_icon.scss create mode 100644 src/components/timeline/timeline_item.styles.ts create mode 100644 src/components/timeline/timeline_item_event.styles.ts create mode 100644 src/components/timeline/timeline_item_icon.styles.ts diff --git a/src/components/index.scss b/src/components/index.scss index 0d26b622c2e..a42e85b124e 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -62,7 +62,6 @@ @import 'table/index'; @import 'tabs/index'; @import 'text_diff/index'; -@import 'timeline/index'; @import 'title/index'; @import 'toast/index'; @import 'token/index'; diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index ed297a6cafe..e56f95dd4d6 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -5,13 +5,13 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="euiTimeline" >

    @@ -40,13 +40,13 @@ exports[`EuiTimeline is rendered with items 1`] = `

    diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index 4f82c60855d..82cf5409f26 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -2,13 +2,13 @@ exports[`EuiTimelineItem is rendered 1`] = `

    I'm the children @@ -37,13 +37,13 @@ exports[`EuiTimelineItem is rendered 1`] = ` exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `

    I'm the children @@ -72,13 +72,13 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `

    I'm the children diff --git a/src/components/timeline/_index.scss b/src/components/timeline/_index.scss deleted file mode 100644 index afa36a003f0..00000000000 --- a/src/components/timeline/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'timeline_item'; -@import 'timeline_item_event'; -@import 'timeline_item_icon'; \ No newline at end of file diff --git a/src/components/timeline/_timeline_item.scss b/src/components/timeline/_timeline_item.scss deleted file mode 100644 index bbb016d319b..00000000000 --- a/src/components/timeline/_timeline_item.scss +++ /dev/null @@ -1,40 +0,0 @@ -.euiTimelineItem { - font-size: $euiFontSizeS; - display: flex; - padding-bottom: $euiSize; - min-height: $euiSize * 3.5; -} - -.euiTimelineItem:last-of-type { - .euiTimelineItemIcon { - &::before { - display: none; - } - } -} - -// Vertical align items -.euiTimelineItem--verticalAlignTop { - .euiTimelineItemIcon { - align-items: flex-start; - } - - .euiTimelineItemEvent { - align-self: flex-start; - } -} - -.euiTimelineItem--verticalAlignCenter { - .euiTimelineItemIcon { - align-items: center; - - // when the vertical alignment is center the vertical line starts in the middle of the container - &::before { - top: 50%; - } - } - - .euiTimelineItemEvent { - align-self: center; - } -} \ No newline at end of file diff --git a/src/components/timeline/_timeline_item_event.scss b/src/components/timeline/_timeline_item_event.scss deleted file mode 100644 index 8ce0775b2ba..00000000000 --- a/src/components/timeline/_timeline_item_event.scss +++ /dev/null @@ -1,4 +0,0 @@ -.euiTimelineItemEvent { - flex: 1; -} - diff --git a/src/components/timeline/_timeline_item_icon.scss b/src/components/timeline/_timeline_item_icon.scss deleted file mode 100644 index 41be2a2378f..00000000000 --- a/src/components/timeline/_timeline_item_icon.scss +++ /dev/null @@ -1,25 +0,0 @@ -.euiTimelineItemIcon { - display: flex; - position: relative; - flex-grow: 0; - margin-right: $euiSize; - - // timeline vertical line - &::before { - content: ''; - position: absolute; - left: $euiSizeXXL / 2; - top: $euiSize; - width: $euiSizeXS / 2; - background-color: $euiColorLightShade; - height: calc(100% + #{$euiSize}); - } -} - -.euiTimelineItemIcon__content { - min-width: $euiSizeXXL; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} diff --git a/src/components/timeline/timeline_item.styles.ts b/src/components/timeline/timeline_item.styles.ts new file mode 100644 index 00000000000..47d5c13b657 --- /dev/null +++ b/src/components/timeline/timeline_item.styles.ts @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; + +export const euiTimelineItemStyles = ({ euiTheme }: UseEuiTheme) => ({ + // Base + euiTimelineItem: css` + display: flex; + padding-bottom: ${euiTheme.size.base}; + min-height: calc(${euiTheme.size.base} * 3.5); + + &:last-of-type { + .euiTimelineItemIcon { + &::before { + display: none; + } + } + `, + // Vertical alignments: css` + top: css` + .euiTimelineItemIcon { + align-items: flex-start; + } + + .euiTimelineItemEvent { + align-self: flex-start; + } + `, + center: css` + .euiTimelineItemIcon { + align-items: center; + + // when the vertical alignment is center the vertical line starts in the middle of the container + &::before { + top: 50%; + } + } + + .euiTimelineItemEvent { + align-self: center; + } + `, +}); diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 4aafe71a61c..940eb1c6b42 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -17,6 +17,8 @@ import { EuiTimelineItemIconProps, } from './timeline_item_icon'; import { CommonProps, keysOf } from '../common'; +import { useEuiTheme } from '../../services'; +import { euiTimelineItemStyles } from './timeline_item.styles'; const verticalAlignToClassNameMap = { top: 'euiTimelineItem--verticalAlignTop', @@ -41,15 +43,21 @@ export const EuiTimelineItem: FunctionComponent = ({ verticalAlign = 'top', icon, className, + ...rest }) => { + const euiTheme = useEuiTheme(); + const styles = euiTimelineItemStyles(euiTheme); + const classes = classNames( 'euiTimelineItem', verticalAlignToClassNameMap[verticalAlign as EuiTimelineItemVerticalAlign], className ); + const cssStyles = [styles.euiTimelineItem, styles[verticalAlign]]; + return ( -

    +
    {children} diff --git a/src/components/timeline/timeline_item_event.styles.ts b/src/components/timeline/timeline_item_event.styles.ts new file mode 100644 index 00000000000..c5b722db4dc --- /dev/null +++ b/src/components/timeline/timeline_item_event.styles.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +export const euiTimelineItemEventStyles = () => ({ + euiTimelineItemEvent: css` + flex: 1; + `, +}); diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 9227febdc18..5b16f177e67 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -7,6 +7,7 @@ */ import React, { FunctionComponent, ReactNode } from 'react'; +import { euiTimelineItemEventStyles } from './timeline_item_event.styles'; export type EuiTimelineItemEventProps = { /** @@ -18,5 +19,12 @@ export type EuiTimelineItemEventProps = { export const EuiTimelineItemEvent: FunctionComponent = ({ children, }) => { - return
    {children}
    ; + const styles = euiTimelineItemEventStyles(); + const cssStyles = [styles.euiTimelineItemEvent]; + + return ( +
    + {children} +
    + ); }; diff --git a/src/components/timeline/timeline_item_icon.styles.ts b/src/components/timeline/timeline_item_icon.styles.ts new file mode 100644 index 00000000000..80e2258ce93 --- /dev/null +++ b/src/components/timeline/timeline_item_icon.styles.ts @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; + +export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({ + euiTimelineItemIcon: css` + display: flex; + position: relative; + flex-grow: 0; + margin-right: ${euiTheme.size.base}; + + // timeline vertical line + &::before { + content: ''; + position: absolute; + left: calc(${euiTheme.size.xxl} / 2); + top: ${euiTheme.size.base}; + width: calc(${euiTheme.size.xs} / 2); + background-color: ${euiTheme.colors.lightShade}; + height: calc(100% + ${euiTheme.size.base}); + } + `, + euiTimelineItemIconContent: css` + min-width: ${euiTheme.size.xxl}; + display: flex; + justify-content: center; + align-items: center; + position: relative; + `, +}); diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 14a20439337..3e67ef69208 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -9,6 +9,8 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { IconType } from '../icon'; import { EuiAvatar } from '../avatar'; +import { useEuiTheme } from '../../services'; +import { euiTimelineItemIconStyles } from './timeline_item_icon.styles'; export type EuiTimelineItemIconProps = { /** @@ -20,6 +22,13 @@ export type EuiTimelineItemIconProps = { export const EuiTimelineItemIcon: FunctionComponent = ({ icon, }) => { + const euiTheme = useEuiTheme(); + const styles = euiTimelineItemIconStyles(euiTheme); + + const cssStyles = styles.euiTimelineItemIcon; + + const cssContentStyles = styles.euiTimelineItemIconContent; + const iconRender = typeof icon === 'string' ? ( @@ -28,8 +37,10 @@ export const EuiTimelineItemIcon: FunctionComponent = ); return ( -
    -
    {iconRender}
    +
    +
    + {iconRender} +
    ); }; From 2ccabede1b5428e55c166cfd43bc67da883f331b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 15:42:08 +0100 Subject: [PATCH 27/59] Better complex example --- src-docs/src/views/timeline/timeline.tsx | 15 +- .../src/views/timeline/timeline_complex.tsx | 153 ------------- .../src/views/timeline/timeline_example.js | 65 +++--- src-docs/src/views/timeline/timeline_item.tsx | 15 +- .../views/timeline/timeline_item_event.tsx | 211 +++++++++++------- src/components/timeline/timeline.tsx | 2 + 6 files changed, 175 insertions(+), 286 deletions(-) delete mode 100644 src-docs/src/views/timeline/timeline_complex.tsx diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index b338067037a..5ac8456c037 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -4,18 +4,15 @@ import { EuiTimelineProps, EuiText, EuiAvatar, - EuiPanel, } from '../../../../src/components'; const wrapper = (children: ReactElement) => ( - - {children} - + {children} ); const items: EuiTimelineProps['items'] = [ { - icon: , + icon: , verticalAlign: 'center', children: wrapper(

    @@ -24,7 +21,7 @@ const items: EuiTimelineProps['items'] = [ ), }, { - icon: , + icon: , verticalAlign: 'center', children: wrapper(

    @@ -34,7 +31,11 @@ const items: EuiTimelineProps['items'] = [ }, { icon: ( - + ), verticalAlign: 'center', children: wrapper(

    The project was archived

    ), diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx deleted file mode 100644 index ab0c7040b4a..00000000000 --- a/src-docs/src/views/timeline/timeline_complex.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { useState } from 'react'; -import { - EuiTimelineItem, - EuiAvatar, - EuiText, - EuiSwitch, - EuiSwitchEvent, - EuiAccordion, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiBadge, - EuiTitle, - EuiSplitPanel, - EuiPanel, - EuiHorizontalRule, -} from '../../../../src/components'; - -import { - useGeneratedHtmlId, - euiPaletteColorBlindBehindText, -} from '../../../../src/services'; - -export default () => { - const [checked1, setChecked1] = useState(false); - const [checked2, setChecked2] = useState(false); - const [checked3, setChecked3] = useState(false); - const buttonElementAccordionId = useGeneratedHtmlId({ - prefix: 'buttonElementAccordion', - }); - - // We could use the `euiPaletteColorBlind` for coloring the avatars - // But because we're placing an icon on top of these colors - // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast - const colorBlindBehindText = euiPaletteColorBlindBehindText({ - sortBy: 'natural', - }); - - const onChange1 = (e: EuiSwitchEvent) => setChecked1(e.target.checked); - - const onChange2 = (e: EuiSwitchEvent) => setChecked2(e.target.checked); - - const onChange3 = (e: EuiSwitchEvent) => setChecked3(e.target.checked); - - const phase = ( - title: string, - checked: boolean, - onChange: (e: EuiSwitchEvent) => void, - avatarColor: string - ) => ( - - ) : ( - - ) - } - > - - - - - - - - -

    {title}

    -     -     -     -     - - - -

    - Move data to the cold tier when you are searching it less often - and don't need to update it. The cold tier is optimized for - cost savings over search performance. -

    -     - - {checked && ( - <> - - - - Any content inside of EuiAccordion will - appear here. - - - - )} -     -     -     - ); - - return ( -
    - - } - > - - - -

    - Hot phase Required -

    -     -     - - - -

    - Store your most recent, most frequently-searched data in the hot - tier. The hot tier provides the best indexing and search - performance by using the most powerful, expensive hardware. -

    -     -     -     -     - - {phase('Warm phase', checked1, onChange1, colorBlindBehindText[1])} - - {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])} - - {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])} -
    - ); -}; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 144b841d730..0c84e1747ab 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -16,7 +16,7 @@ const timelineSnippet = ``; import TimelineItem from './timeline_item'; @@ -28,17 +28,17 @@ const timelineItemSnippet = ` import TimelineItemEvent from './timeline_item_event'; const timelineItemEventSource = require('!!raw-loader!./timeline_item_event'); const timelineItemEventSnippet = ` - - -

    - Janet edited the dashboard 4 days ago -

    -     -     -    `; - -import TimelineComplex from './timeline_complex'; -const TimelineComplexSource = require('!!raw-loader!./timeline_complex'); + + + + + + + + + + +`; export const TimelineExample = { title: 'Timeline', @@ -85,7 +85,7 @@ export const TimelineExample = { icon: main icon that appears on the left side.
  • - children: event content. You can pass any node. + children: any node as the event content.
    • @@ -95,7 +95,7 @@ export const TimelineExample = { demo: , }, { - title: 'Customizing an event', + title: 'A timeline thread with timeline items', source: [ { type: GuideSectionTypes.TSX, @@ -105,8 +105,16 @@ export const TimelineExample = { text: ( <>

    - Although any node is allowed as a children the - recommendation is to use a{' '} + You can create a timeline thread by rendering multiple{' '} + EuiTimelineItem. Wrapping these components with a{' '} + EuiTimeline is not required, but we recommend + having all the EuiTimelineItem nested in the same + container. This way, we ensure that timeline styles are applied + correctly. +

    +

    + Although any node is allowed as a children in a{' '} + EuiTimelineItem, the recommendation is to use a{' '} EuiPanel {' '} @@ -118,32 +126,19 @@ export const TimelineExample = { editors, the recommendation is to pass the{' '} children without any wrapper.

    - - ), - snippet: timelineItemEventSnippet, - demo: , - }, - { - title: 'Complex example', - source: [ - { - type: GuideSectionTypes.TSX, - code: TimelineComplexSource, - }, - ], - text: ( -

    - This is an example of how you can customize and display multiple{' '} - EuiTimelineItem. + The following example shows how to display multiple{' '} + EuiTimelineItem and how you can use a{' '} + EuiSplitPanel to customize an event.

    -
    + ), props: { EuiTimeline, EuiTimelineItem, }, - demo: , + snippet: timelineItemEventSnippet, + demo: , }, ], }; diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index 739edc88f7b..18104c3462d 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -4,7 +4,6 @@ import { EuiText, EuiCode, EuiAvatar, - EuiPanel, } from '../../../../src/components'; export default () => ( @@ -12,13 +11,11 @@ export default () => ( icon={} verticalAlign="center" > - - -

    - I'm a children and you can find the{' '} - icon on the left side. -

    -     -     + +

    + I'm a children and you can find the{' '} + icon on the left side. +

    +     ); diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index ffc7c69123d..ab0c7040b4a 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -1,106 +1,153 @@ -import React from 'react'; +import React, { useState } from 'react'; import { EuiTimelineItem, EuiAvatar, EuiText, - EuiCodeBlock, - EuiLink, - EuiMarkdownEditor, + EuiSwitch, + EuiSwitchEvent, + EuiAccordion, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiBadge, + EuiTitle, EuiSplitPanel, EuiPanel, EuiHorizontalRule, } from '../../../../src/components'; -export default () => ( -
    - } - verticalAlign="center" - > - - -

    - Janet edited the dashboard 4 days ago -

    -     -     -     +import { + useGeneratedHtmlId, + euiPaletteColorBlindBehindText, +} from '../../../../src/services'; - - } - verticalAlign="center" - > - - -

    - Nicole mentioned this dashboard in{' '} - case/comment#021 2 days ago -

    -     -     -     +export default () => { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + const buttonElementAccordionId = useGeneratedHtmlId({ + prefix: 'buttonElementAccordion', + }); - } - > - - -

    Error detected in dashboard 5 minutes ago

    -     -     -     + // We could use the `euiPaletteColorBlind` for coloring the avatars + // But because we're placing an icon on top of these colors + // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast + const colorBlindBehindText = euiPaletteColorBlindBehindText({ + sortBy: 'natural', + }); + + const onChange1 = (e: EuiSwitchEvent) => setChecked1(e.target.checked); + const onChange2 = (e: EuiSwitchEvent) => setChecked2(e.target.checked); + + const onChange3 = (e: EuiSwitchEvent) => setChecked3(e.target.checked); + + const phase = ( + title: string, + checked: boolean, + onChange: (e: EuiSwitchEvent) => void, + avatarColor: string + ) => ( + checked ? ( + + ) : ( + + ) } > - - - + + + + + + + + +

    {title}

    +     +     +     +     + + +

    - Nicole generated a new iframe 2 minutes ago + Move data to the cold tier when you are searching it less often + and don't need to update it. The cold tier is optimized for + cost savings over search performance.

    -     - - - - {` -`} - + + {checked && ( + <> + + + + Any content inside of EuiAccordion will + appear here. + + + + )}     + ); - } - > - + } - onChange={() => {}} - initialViewMode="viewing" - markdownFormatProps={{ textSize: 's' }} - height={280} - /> - -
    -); + > + + + +

    + Hot phase Required +

    +     +     + + + +

    + Store your most recent, most frequently-searched data in the hot + tier. The hot tier provides the best indexing and search + performance by using the most powerful, expensive hardware. +

    +     +     +     + + + {phase('Warm phase', checked1, onChange1, colorBlindBehindText[1])} + + {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])} + + {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])} +
    + ); +}; diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index a5f197a3b58..3efdcd2a0c1 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -23,6 +23,7 @@ export interface EuiTimelineProps export const EuiTimeline: FunctionComponent = ({ className, items = [], + children, ...rest }) => { const classes = classNames('euiTimeline', className); @@ -32,6 +33,7 @@ export const EuiTimeline: FunctionComponent = ({ {items.map((item, index) => ( ))} + {children}
    ); }; From 83176c65752d80711fb90722da502e67e3b1497d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 16:49:05 +0100 Subject: [PATCH 28/59] Adding playground --- src-docs/src/views/timeline/playground.js | 56 +++++++++++++++++++ src-docs/src/views/timeline/timeline.tsx | 45 +++++++-------- .../src/views/timeline/timeline_example.js | 3 +- src-docs/src/views/timeline/timeline_item.tsx | 12 +--- .../views/timeline/timeline_item_event.tsx | 6 +- src/components/timeline/timeline_item.tsx | 2 +- 6 files changed, 85 insertions(+), 39 deletions(-) create mode 100644 src-docs/src/views/timeline/playground.js diff --git a/src-docs/src/views/timeline/playground.js b/src-docs/src/views/timeline/playground.js new file mode 100644 index 00000000000..b08339b25bf --- /dev/null +++ b/src-docs/src/views/timeline/playground.js @@ -0,0 +1,56 @@ +import { PropTypes } from 'react-view'; +import { + EuiTimelineItem, + EuiText, + EuiAvatar, +} from '../../../../src/components/'; +import { + propUtilityForPlayground, + createOptionalEnum, +} from '../../services/playground'; + +export default () => { + const docgenInfo = Array.isArray(EuiTimelineItem.__docgenInfo) + ? EuiTimelineItem.__docgenInfo[0] + : EuiTimelineItem.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.icon = { + ...propsToUse.icon, + type: PropTypes.ReactNode, + value: 'email', + }; + + propsToUse.verticalAlign = { + ...createOptionalEnum(propsToUse.verticalAlign), + value: 'center', + }; + + propsToUse.children = { + ...propsToUse.children, + type: PropTypes.ReactNode, + value: ` +

    + janet@elastic.co was invited to the project +

    +     `, + hidden: false, + }; + + return { + config: { + componentName: 'EuiTimelineItem', + props: propsToUse, + scope: { + EuiTimelineItem, + EuiText, + EuiAvatar, + }, + imports: { + '@elastic/eui': { + named: ['EuiTimelineItem', 'EuiText', 'EuiAvatar'], + }, + }, + }, + }; +}; diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 5ac8456c037..1055e03129c 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -1,44 +1,41 @@ -import React, { ReactElement } from 'react'; +import React from 'react'; import { EuiTimeline, EuiTimelineProps, EuiText, - EuiAvatar, } from '../../../../src/components'; -const wrapper = (children: ReactElement) => ( - {children} -); - const items: EuiTimelineProps['items'] = [ { - icon: , + icon: 'email', verticalAlign: 'center', - children: wrapper( -

    - janet@elastic.co was invited to the project -

    + children: ( + +

    + janet@elastic.co was invited to the project +

    +     ), }, { - icon: , + icon: 'pencil', verticalAlign: 'center', - children: wrapper( -

    - The project was renamed to Revenue Dashboard -

    + children: ( + +

    + The project was renamed to Revenue Dashboard +

    +     ), }, { - icon: ( - - ), + icon: 'folderClosed', verticalAlign: 'center', - children: wrapper(

    The project was archived

    ), + children: ( + +

    The project was archived

    +     + ), }, ]; diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 0c84e1747ab..a018bd08bd1 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -7,6 +7,7 @@ import { EuiTimeline, EuiTimelineItem, } from '../../../../src/components'; +import timelineItemConfig from './playground'; import Timeline from './timeline'; const timelineSource = require('!!raw-loader!./timeline'); @@ -93,6 +94,7 @@ export const TimelineExample = { props: { EuiTimelineItem }, snippet: timelineItemSnippet, demo: , + playground: timelineItemConfig, }, { title: 'A timeline thread with timeline items', @@ -134,7 +136,6 @@ export const TimelineExample = { ), props: { - EuiTimeline, EuiTimelineItem, }, snippet: timelineItemEventSnippet, diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index 18104c3462d..fd9c5f99075 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -1,16 +1,8 @@ import React from 'react'; -import { - EuiTimelineItem, - EuiText, - EuiCode, - EuiAvatar, -} from '../../../../src/components'; +import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components'; export default () => ( - } - verticalAlign="center" - > +

    I'm a children and you can find the{' '} diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index ab0c7040b4a..562ef727e27 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -53,12 +53,12 @@ export default () => { checked ? ( ) : ( - + ) } > @@ -116,7 +116,7 @@ export default () => { icon={ diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index a3a895a54ca..2d74fa60d3c 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -35,7 +35,7 @@ export interface EuiTimelineItemProps EuiTimelineItemIconProps, EuiTimelineItemEventProps { /** - * Vertical aligns the event with the icon + * Vertical alignment of the event with the icon */ verticalAlign?: EuiTimelineItemVerticalAlign; } From 728b1bb58c6d5835d31d461d9e36f6c57a335895 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 17:36:19 +0100 Subject: [PATCH 29/59] Linking `steps` and `comments` components --- .../src/views/timeline/timeline_example.js | 35 +++++++++++++++---- .../timeline/timeline_item.styles.ts | 2 +- .../timeline/timeline_item_event.tsx | 2 +- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index a018bd08bd1..9104a2b4d5a 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -54,12 +54,35 @@ export const TimelineExample = { }, ], text: ( -

    - The EuiTimeline is a component that standardizes the - way a timeline thread is displayed. Pass an array of{' '} - EuiTimelineItem objects and{' '} - EuiTimeline will generate a timeline thread. -
    + <> +

    + The EuiTimeline is a component that standardizes + the way a timeline thread is displayed. Pass an array of{' '} + EuiTimelineItem objects and{' '} + EuiTimeline will generate a timeline thread. +

    +

    + This component allows you to create any type of timeline, but for + more specific use cases you should consider: +

    +
      +
    • + + EuiSteps + + : a timeline that allows you to present instructional content that + must be conducted in a particular order and might contain progress + indications. +
      • +
    • + + EuiCommentList + + : a timeline that allows you to display comments or logging + actions that either a user or a system has performed. +
      • +
    + ), props: { EuiTimeline, EuiTimelineItem }, snippet: timelineSnippet, diff --git a/src/components/timeline/timeline_item.styles.ts b/src/components/timeline/timeline_item.styles.ts index 47d5c13b657..31609f7c5a7 100644 --- a/src/components/timeline/timeline_item.styles.ts +++ b/src/components/timeline/timeline_item.styles.ts @@ -23,7 +23,7 @@ export const euiTimelineItemStyles = ({ euiTheme }: UseEuiTheme) => ({ } } `, - // Vertical alignments: css` + // Vertical alignments top: css` .euiTimelineItemIcon { align-items: flex-start; diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 7f71775e381..89ed30828c5 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -20,7 +20,7 @@ export const EuiTimelineItemEvent: FunctionComponent children, }) => { const styles = euiTimelineItemEventStyles(); - const cssStyles = [styles.euiTimelineItemEvent]; + const cssStyles = styles.euiTimelineItemEvent; return (
    From 7b7fbb6dddd01264202863de9cbe7a41d6bdc596 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 1 Apr 2022 18:53:28 +0100 Subject: [PATCH 30/59] Updating tests --- .../timeline/__snapshots__/timeline.test.tsx.snap | 4 ++-- .../timeline/__snapshots__/timeline_item.test.tsx.snap | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index e56f95dd4d6..f13ef826432 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -29,7 +29,7 @@ exports[`EuiTimeline is rendered with items 1`] = `

    @@ -64,7 +64,7 @@ exports[`EuiTimeline is rendered with items 1`] = `

    diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index 82cf5409f26..7f0d25e42e3 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -26,7 +26,7 @@ exports[`EuiTimelineItem is rendered 1`] = `

    I'm the children @@ -61,7 +61,7 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `

    I'm the children @@ -96,7 +96,7 @@ exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `

    I'm the children From acb1d092e53bf5d89905a3c43234b06b3cb53cc3 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 5 Apr 2022 11:44:35 +0100 Subject: [PATCH 31/59] Adding design consideration text --- .../src/views/timeline/timeline_example.js | 38 ++++++++++++------- .../views/timeline/timeline_item_event.tsx | 10 +---- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 9104a2b4d5a..b2f41448778 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -120,7 +120,7 @@ export const TimelineExample = { playground: timelineItemConfig, }, { - title: 'A timeline thread with timeline items', + title: 'A timeline thread with multiple items', source: [ { type: GuideSectionTypes.TSX, @@ -138,23 +138,33 @@ export const TimelineExample = { correctly.

    - Although any node is allowed as a children in a{' '} - EuiTimelineItem, the recommendation is to use a{' '} - - EuiPanel - {' '} - or a{' '} - - EuiSplitPanel - {' '} - when your content is text-based. For other types of components like - editors, the recommendation is to pass the{' '} - children without any wrapper. + When passing an icon and{' '} + children props to each item, there are some + design considerations to take into account:

    +
      +
    • + icon: use icons of the same size to create a + better visual consistency. +
      • +
    • + children: when your content is text-based the + recommendation is to use a{' '} + + EuiPanel + {' '} + or a{' '} + + EuiSplitPanel + {' '} + as a wrapper. For other types of components like editors, the + recommendation is to pass the children without any wrapper. +
      • +

    The following example shows how to display multiple{' '} EuiTimelineItem and how you can use a{' '} - EuiSplitPanel to customize an event. + EuiSplitPanel as the content wrapper.

    ), diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 562ef727e27..96b39f44a5d 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -51,14 +51,9 @@ export default () => { + ) : ( - + ) } > @@ -115,7 +110,6 @@ export default () => { Date: Tue, 5 Apr 2022 12:11:36 +0100 Subject: [PATCH 32/59] More design considerations --- src-docs/src/views/timeline/timeline_example.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index b2f41448778..ee04b182429 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -148,8 +148,12 @@ export const TimelineExample = { better visual consistency.
  • - children: when your content is text-based the - recommendation is to use a{' '} + children: when your content is just one line of + text, the recommendation is to use a a{' '} + + EuiText + {' '} + as a wrapper. For multi-line content consider using a{' '} EuiPanel {' '} @@ -157,7 +161,7 @@ export const TimelineExample = { EuiSplitPanel {' '} - as a wrapper. For other types of components like editors, the + instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.
    • From f6bf949ed53d434dfa82d4a058ce9afd55f4d75d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 5 Apr 2022 19:29:08 +0100 Subject: [PATCH 33/59] Better `::before` styles --- .../timeline/__snapshots__/timeline.test.tsx.snap | 4 ++-- .../timeline/__snapshots__/timeline_item.test.tsx.snap | 6 +++--- src/components/timeline/timeline_item.styles.ts | 6 ++---- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index 0909f9fb27a..57ebd70f9ff 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="euiTimeline" >
    ({ min-height: calc(${euiTheme.size.base} * 3.5); &:last-of-type { - .euiTimelineItemIcon { - &::before { - display: none; - } + .euiTimelineItemIcon::before { + display: none; } } `, From d1b6acf41384b3f18c632ae5a881f4714063e658 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 6 Apr 2022 16:54:54 +0100 Subject: [PATCH 34/59] Emotion styles --- .../__snapshots__/timeline.test.tsx.snap | 16 ++++----- .../__snapshots__/timeline_item.test.tsx.snap | 24 +++++++------- .../timeline/timeline_item.styles.ts | 27 +-------------- src/components/timeline/timeline_item.tsx | 33 +++++++------------ .../timeline/timeline_item_event.styles.ts | 7 ++++ .../timeline/timeline_item_event.tsx | 11 +++---- .../timeline/timeline_item_icon.styles.ts | 14 +++++++- .../timeline/timeline_item_icon.tsx | 13 ++++---- 8 files changed, 64 insertions(+), 81 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index 57ebd70f9ff..ba26534350e 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -5,13 +5,13 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="euiTimeline" >

    @@ -40,13 +40,13 @@ exports[`EuiTimeline is rendered with items 1`] = `

    diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index c23ec8fa6eb..be2d7507d3f 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -2,13 +2,13 @@ exports[`EuiTimelineItem is rendered 1`] = `

    I'm the children @@ -37,13 +37,13 @@ exports[`EuiTimelineItem is rendered 1`] = ` exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `

    I'm the children @@ -72,13 +72,13 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `

    I'm the children diff --git a/src/components/timeline/timeline_item.styles.ts b/src/components/timeline/timeline_item.styles.ts index be75c1a327c..d8b508e06fe 100644 --- a/src/components/timeline/timeline_item.styles.ts +++ b/src/components/timeline/timeline_item.styles.ts @@ -10,40 +10,15 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; export const euiTimelineItemStyles = ({ euiTheme }: UseEuiTheme) => ({ - // Base euiTimelineItem: css` display: flex; padding-bottom: ${euiTheme.size.base}; min-height: calc(${euiTheme.size.base} * 3.5); &:last-of-type { - .euiTimelineItemIcon::before { + > [class*='euiTimelineItemIcon']::before { display: none; } } `, - // Vertical alignments - top: css` - .euiTimelineItemIcon { - align-items: flex-start; - } - - .euiTimelineItemEvent { - align-self: flex-start; - } - `, - center: css` - .euiTimelineItemIcon { - align-items: center; - - // when the vertical alignment is center the vertical line starts in the middle of the container - &::before { - top: 50%; - } - } - - .euiTimelineItemEvent { - align-self: center; - } - `, }); diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 2d74fa60d3c..b7493583979 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -7,7 +7,6 @@ */ import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; import { EuiTimelineItemEvent, EuiTimelineItemEventProps, @@ -16,24 +15,18 @@ import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; -import { CommonProps, keysOf } from '../common'; +import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; import { euiTimelineItemStyles } from './timeline_item.styles'; -const verticalAlignToClassNameMap = { - top: 'euiTimelineItem--verticalAlignTop', - center: 'euiTimelineItem--verticalAlignCenter', -}; - -export const VERTICAL_ALIGN = keysOf(verticalAlignToClassNameMap); - -export type EuiTimelineItemVerticalAlign = keyof typeof verticalAlignToClassNameMap; +export const VERTICAL_ALIGN = ['top', 'center'] as const; +export type EuiTimelineItemVerticalAlign = typeof VERTICAL_ALIGN[number]; export interface EuiTimelineItemProps extends Omit, 'children'>, CommonProps, - EuiTimelineItemIconProps, - EuiTimelineItemEventProps { + Omit, + Omit { /** * Vertical alignment of the event with the icon */ @@ -50,19 +43,15 @@ export const EuiTimelineItem: FunctionComponent = ({ const euiTheme = useEuiTheme(); const styles = euiTimelineItemStyles(euiTheme); - const classes = classNames( - 'euiTimelineItem', - verticalAlignToClassNameMap[verticalAlign], - className - ); - - const cssStyles = [styles.euiTimelineItem, styles[verticalAlign]]; + const cssStyles = [styles.euiTimelineItem]; return ( -

    - +
    + - {children} + + {children} +
    ); }; diff --git a/src/components/timeline/timeline_item_event.styles.ts b/src/components/timeline/timeline_item_event.styles.ts index c5b722db4dc..bdc1a6393de 100644 --- a/src/components/timeline/timeline_item_event.styles.ts +++ b/src/components/timeline/timeline_item_event.styles.ts @@ -12,4 +12,11 @@ export const euiTimelineItemEventStyles = () => ({ euiTimelineItemEvent: css` flex: 1; `, + // Vertical alignments + top: css` + align-self: flex-start; + `, + center: css` + align-self: center; + `, }); diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 89ed30828c5..2d6bee245ad 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -8,23 +8,22 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { euiTimelineItemEventStyles } from './timeline_item_event.styles'; +import { EuiTimelineItemVerticalAlign } from './'; export interface EuiTimelineItemEventProps { /** * Accepts any node. But preferably `EuiPanel` */ children: ReactNode; + verticalAlign?: EuiTimelineItemVerticalAlign; } export const EuiTimelineItemEvent: FunctionComponent = ({ children, + verticalAlign = 'top', }) => { const styles = euiTimelineItemEventStyles(); - const cssStyles = styles.euiTimelineItemEvent; + const cssStyles = [styles.euiTimelineItemEvent, styles[verticalAlign]]; - return ( -
    - {children} -
    - ); + return
    {children}
    ; }; diff --git a/src/components/timeline/timeline_item_icon.styles.ts b/src/components/timeline/timeline_item_icon.styles.ts index 80e2258ce93..e62321aff95 100644 --- a/src/components/timeline/timeline_item_icon.styles.ts +++ b/src/components/timeline/timeline_item_icon.styles.ts @@ -27,11 +27,23 @@ export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({ height: calc(100% + ${euiTheme.size.base}); } `, - euiTimelineItemIconContent: css` + euiTimelineItemIcon__content: css` min-width: ${euiTheme.size.xxl}; display: flex; justify-content: center; align-items: center; position: relative; `, + // Vertical alignments + top: css` + align-items: flex-start; + `, + center: css` + align-items: center; + + // when the vertical alignment is center the vertical line starts in the middle of the container + &::before { + top: 50%; + } + `, }); diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 54dba70061f..f878ac63cf1 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -11,23 +11,26 @@ import { IconType } from '../icon'; import { EuiAvatar } from '../avatar'; import { useEuiTheme } from '../../services'; import { euiTimelineItemIconStyles } from './timeline_item_icon.styles'; +import { EuiTimelineItemVerticalAlign } from './'; export interface EuiTimelineItemIconProps { /** * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`. */ icon: ReactNode | IconType; + verticalAlign?: EuiTimelineItemVerticalAlign; } export const EuiTimelineItemIcon: FunctionComponent = ({ icon, + verticalAlign = 'top', }) => { const euiTheme = useEuiTheme(); const styles = euiTimelineItemIconStyles(euiTheme); - const cssStyles = styles.euiTimelineItemIcon; + const cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]]; - const cssContentStyles = styles.euiTimelineItemIconContent; + const cssContentStyles = styles.euiTimelineItemIcon__content; const iconRender = typeof icon === 'string' ? ( @@ -37,10 +40,8 @@ export const EuiTimelineItemIcon: FunctionComponent = ); return ( -
    -
    - {iconRender} -
    +
    +
    {iconRender}
    ); }; From b4fa0b90e4eb7273eddd50e4612c822785c9e8dc Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 6 Apr 2022 17:02:43 +0100 Subject: [PATCH 35/59] Fixing prop description --- src/components/avatar/avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index f2866443845..47b0733aecc 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -90,7 +90,7 @@ export type EuiAvatarProps = Omit, 'color'> & /** * Accepts hex values like `#FFFFFF`, `#000` otherwise a viz palette color will be assigned. - * Or pass `'plain'` for an empty subdued, `'subdued'` for a light subdued or `null` to remove entirely and the text/icon color will `inherit` + * Or pass `'plain'` for an empty shade, `'subdued'` for a light gray shade or `null` to remove entirely and the text/icon color will `inherit` */ color?: string | 'plain' | 'subdued' | null; From c17cf4d9fc1ef56922ff91013003888653b2037b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 10:44:43 +0100 Subject: [PATCH 36/59] WIP --- src/components/timeline/timeline.tsx | 2 +- src/components/timeline/timeline_item.tsx | 5 +++-- src/components/timeline/timeline_item_icon.tsx | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/timeline/timeline.tsx b/src/components/timeline/timeline.tsx index 3efdcd2a0c1..8d6e1b87c78 100644 --- a/src/components/timeline/timeline.tsx +++ b/src/components/timeline/timeline.tsx @@ -12,7 +12,7 @@ import classNames from 'classnames'; import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item'; export interface EuiTimelineProps - extends Omit, 'children'>, + extends HTMLAttributes, CommonProps { /** * List of timeline items to render. See #EuiTimelineItem diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index b7493583979..07e10de5d89 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -7,6 +7,9 @@ */ import React, { FunctionComponent, HTMLAttributes } from 'react'; +import { CommonProps } from '../common'; +import { useEuiTheme } from '../../services'; + import { EuiTimelineItemEvent, EuiTimelineItemEventProps, @@ -15,8 +18,6 @@ import { EuiTimelineItemIcon, EuiTimelineItemIconProps, } from './timeline_item_icon'; -import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; import { euiTimelineItemStyles } from './timeline_item.styles'; export const VERTICAL_ALIGN = ['top', 'center'] as const; diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index f878ac63cf1..a8728a3862c 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -11,7 +11,7 @@ import { IconType } from '../icon'; import { EuiAvatar } from '../avatar'; import { useEuiTheme } from '../../services'; import { euiTimelineItemIconStyles } from './timeline_item_icon.styles'; -import { EuiTimelineItemVerticalAlign } from './'; +import { EuiTimelineItemVerticalAlign } from './timeline_item'; export interface EuiTimelineItemIconProps { /** From f9067ee95eaa74623b37163dbb036fbe24a53559 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 10:52:11 +0100 Subject: [PATCH 37/59] Tests --- .../timeline/__snapshots__/timeline.test.tsx.snap | 12 ++++++------ src/components/timeline/timeline.test.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index ba26534350e..322e39f4366 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -43,28 +43,28 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="css-nrp69m-euiTimelineItem" >

    diff --git a/src/components/timeline/timeline.test.tsx b/src/components/timeline/timeline.test.tsx index fefd53e8e5a..224b1dcb3d9 100644 --- a/src/components/timeline/timeline.test.tsx +++ b/src/components/timeline/timeline.test.tsx @@ -24,8 +24,8 @@ describe('EuiTimeline', () => { ), }, { - icon: , - verticalAlign: 'center', + icon: 'bolt', + verticalAlign: 'top', children: (

    janet@elastic.co was invited to the project From 940b1750b74cf799570fab7af8a5f6b59b95f967 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:14:24 +0100 Subject: [PATCH 38/59] Fixing `min-height` issue --- .../timeline/__snapshots__/timeline.test.tsx.snap | 4 ++-- .../timeline/__snapshots__/timeline_item.test.tsx.snap | 6 +++--- src/components/timeline/timeline_item.styles.ts | 6 ++++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index 322e39f4366..b69ba4e7a9e 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="euiTimeline" >

    ({ euiTimelineItem: css` display: flex; - padding-bottom: ${euiTheme.size.base}; - min-height: calc(${euiTheme.size.base} * 3.5); + + &:not(:last-of-type) { + padding-bottom: ${euiTheme.size.xl}; + } &:last-of-type { > [class*='euiTimelineItemIcon']::before { From caf07dd172f69aa2dc2129fe84fc749b302bf5fb Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:18:04 +0100 Subject: [PATCH 39/59] Update src-docs/src/views/timeline/timeline_item.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index fd9c5f99075..f7720754a9c 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -5,7 +5,7 @@ export default () => (

    - I'm a children and you can find the{' '} + I'm the children and you can find the{' '} icon on the left side.

    From 06c9fcc2e07fe8d2d38eb87fcdb21464d0303e29 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:19:04 +0100 Subject: [PATCH 40/59] Update src-docs/src/views/timeline/timeline.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 1055e03129c..ce19b2cbf4e 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -12,7 +12,7 @@ const items: EuiTimelineProps['items'] = [ children: (

    - janet@elastic.co was invited to the project + janet@elastic.co was invited to the project.

    ), From d62ceabfcc8e66e322185431b1becc930cfc5760 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:19:21 +0100 Subject: [PATCH 41/59] Update src-docs/src/views/timeline/timeline.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index ce19b2cbf4e..de6f174f76e 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -23,7 +23,7 @@ const items: EuiTimelineProps['items'] = [ children: (

    - The project was renamed to Revenue Dashboard + The project was renamed to Revenue Dashboard.

    ), From 2de0a9378f80624100b5840b3832e74705779e7b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:19:36 +0100 Subject: [PATCH 42/59] Update src-docs/src/views/timeline/timeline.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index de6f174f76e..7fba016e7b4 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -33,7 +33,7 @@ const items: EuiTimelineProps['items'] = [ verticalAlign: 'center', children: ( -

    The project was archived

    +

    The project was archived

    .     ), }, From b25ab3beb87e50b035d30e7071e3c3c94673eaae Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:20:53 +0100 Subject: [PATCH 43/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index ee04b182429..6c3acd41f06 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -56,7 +56,7 @@ export const TimelineExample = { text: ( <>

    - The EuiTimeline is a component that standardizes + The EuiTimeline component standardizes the way a timeline thread is displayed. Pass an array of{' '} EuiTimelineItem objects and{' '} EuiTimeline will generate a timeline thread. From 3bb564f2116e720af45dc73d3726c92a995de20b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:03 +0100 Subject: [PATCH 44/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 6c3acd41f06..dc9890fc5ef 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -131,7 +131,7 @@ export const TimelineExample = { <>

    You can create a timeline thread by rendering multiple{' '} - EuiTimelineItem. Wrapping these components with a{' '} + EuiTimelineItem components. Wrapping these with an{' '} EuiTimeline is not required, but we recommend having all the EuiTimelineItem nested in the same container. This way, we ensure that timeline styles are applied From 525b98d63099a4207853ea88a1d5ff3c23423760 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:11 +0100 Subject: [PATCH 45/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index dc9890fc5ef..125e6cf622f 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -133,7 +133,7 @@ export const TimelineExample = { You can create a timeline thread by rendering multiple{' '} EuiTimelineItem components. Wrapping these with an{' '} EuiTimeline is not required, but we recommend - having all the EuiTimelineItem nested in the same + having all the EuiTimelineItems nested in the same container. This way, we ensure that timeline styles are applied correctly.

    From 19aa16a8ec1c58132668c7b537f0f74f9cce5a1e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:26 +0100 Subject: [PATCH 46/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 125e6cf622f..29be2bff35b 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -106,7 +106,7 @@ export const TimelineExample = {

    • - icon: main icon that appears on the left side. + icon: main icon that appears on the left side. Can be passed as any IconType string or custom node.
    • children: any node as the event content. From 7d472b654205727319736bcf990436871f49476c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:38 +0100 Subject: [PATCH 47/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 29be2bff35b..cbdb0f8f7b8 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -99,7 +99,7 @@ export const TimelineExample = { text: ( <>

      - Use EuiTimelineItem to display timeline items. Each{' '} + Each{' '} EuiTimelineItem has two parts: an icon on the left side and an event on the right side. To create an item you basically need the following props: From cf1dc533e57ef3c42a8e75b2560546e30de3caa0 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:43 +0100 Subject: [PATCH 48/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index cbdb0f8f7b8..69e7f1ddfbc 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -167,7 +167,7 @@ export const TimelineExample = {

    The following example shows how to display multiple{' '} - EuiTimelineItem and how you can use a{' '} + EuiTimelineItems and how you can use a{' '} EuiSplitPanel as the content wrapper.

    From 5f3eada78b9858b841054a36197f12940d220750 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:21:53 +0100 Subject: [PATCH 49/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 69e7f1ddfbc..7e01002d888 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -139,7 +139,7 @@ export const TimelineExample = {

    When passing an icon and{' '} - children props to each item, there are some + children prop to each item, there are some design considerations to take into account:

      From a50eebfc97fe7d34003b203966b92e2e54e92ab8 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:22:06 +0100 Subject: [PATCH 50/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 7e01002d888..c2928f4db98 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -101,7 +101,7 @@ export const TimelineExample = {

      Each{' '} EuiTimelineItem has two parts: an icon on the left - side and an event on the right side. To create an item you basically + side and an event on the right side. To create an item you need the following props:

        From b75a931749efc39cdeac7e27c8de301d2353fc47 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 11:28:36 +0100 Subject: [PATCH 51/59] =?UTF-8?q?Prettier=20=F0=9F=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-docs/src/views/timeline/timeline.tsx | 2 +- .../src/views/timeline/timeline_example.js | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 7fba016e7b4..195f8e11695 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -33,7 +33,7 @@ const items: EuiTimelineProps['items'] = [ verticalAlign: 'center', children: ( -

        The project was archived

        . +

        The project was archived.

         ), }, diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index c2928f4db98..1ffa372d639 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -56,8 +56,8 @@ export const TimelineExample = { text: ( <>

        - The EuiTimeline component standardizes - the way a timeline thread is displayed. Pass an array of{' '} + The EuiTimeline component standardizes the way a + timeline thread is displayed. Pass an array of{' '} EuiTimelineItem objects and{' '} EuiTimeline will generate a timeline thread.

        @@ -99,14 +99,15 @@ export const TimelineExample = { text: ( <>

        - Each{' '} - EuiTimelineItem has two parts: an icon on the left - side and an event on the right side. To create an item you - need the following props: + Each EuiTimelineItem has two parts: an icon on the + left side and an event on the right side. To create an item you need + the following props:

        • - icon: main icon that appears on the left side. Can be passed as any IconType string or custom node. + icon: main icon that appears on the left side. + Can be passed as any IconType string or custom + node.
        • children: any node as the event content. @@ -139,8 +140,8 @@ export const TimelineExample = {

          When passing an icon and{' '} - children prop to each item, there are some - design considerations to take into account: + children prop to each item, there are some design + considerations to take into account:

          • From 181da63439ebb0bdccf497d648e89166472e8dec Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 12:35:37 +0100 Subject: [PATCH 52/59] Adjusting the timeline icon line --- .../src/views/timeline/timeline_item_event.tsx | 2 ++ .../timeline/__snapshots__/timeline.test.tsx.snap | 8 ++++---- .../__snapshots__/timeline_item.test.tsx.snap | 14 +++++++------- src/components/timeline/timeline_item.styles.ts | 15 ++++++++++++++- src/components/timeline/timeline_item.tsx | 2 +- src/components/timeline/timeline_item_event.tsx | 2 +- .../timeline/timeline_item_icon.styles.ts | 10 +++------- src/components/timeline/timeline_item_icon.tsx | 2 +- 8 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx index 96b39f44a5d..e5274e98216 100644 --- a/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/src-docs/src/views/timeline/timeline_item_event.tsx @@ -49,6 +49,7 @@ export default () => { avatarColor: string ) => ( @@ -108,6 +109,7 @@ export default () => { return (

            I'm the children @@ -37,10 +37,10 @@ exports[`EuiTimelineItem is rendered 1`] = ` exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `

            ({ padding-bottom: ${euiTheme.size.xl}; } + &:first-of-type { + > [class*='euiTimelineItemIcon-center']::before { + top: 50%; + // Adding to the height the padding bottom from the parent container + height: calc(50% + ${euiTheme.size.xl}); + } + } + &:last-of-type { - > [class*='euiTimelineItemIcon']::before { + > [class*='euiTimelineItemIcon-top']::before { display: none; } + + > [class*='euiTimelineItemIcon-center']::before { + top: 0; + height: 50%; + } } `, }); diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index 07e10de5d89..dd2032fb1af 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -36,7 +36,7 @@ export interface EuiTimelineItemProps export const EuiTimelineItem: FunctionComponent = ({ children, - verticalAlign = 'top', + verticalAlign = 'center', icon, className, ...rest diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 2d6bee245ad..78f7cfc1a37 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -20,7 +20,7 @@ export interface EuiTimelineItemEventProps { export const EuiTimelineItemEvent: FunctionComponent = ({ children, - verticalAlign = 'top', + verticalAlign = 'center', }) => { const styles = euiTimelineItemEventStyles(); const cssStyles = [styles.euiTimelineItemEvent, styles[verticalAlign]]; diff --git a/src/components/timeline/timeline_item_icon.styles.ts b/src/components/timeline/timeline_item_icon.styles.ts index e62321aff95..63531516b26 100644 --- a/src/components/timeline/timeline_item_icon.styles.ts +++ b/src/components/timeline/timeline_item_icon.styles.ts @@ -20,11 +20,12 @@ export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({ &::before { content: ''; position: absolute; + top: 0; left: calc(${euiTheme.size.xxl} / 2); - top: ${euiTheme.size.base}; width: calc(${euiTheme.size.xs} / 2); + // Adding to the height the padding bottom from the parent container + height: calc(100% + ${euiTheme.size.xl}); background-color: ${euiTheme.colors.lightShade}; - height: calc(100% + ${euiTheme.size.base}); } `, euiTimelineItemIcon__content: css` @@ -40,10 +41,5 @@ export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({ `, center: css` align-items: center; - - // when the vertical alignment is center the vertical line starts in the middle of the container - &::before { - top: 50%; - } `, }); diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index a8728a3862c..c7476c171b7 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -23,7 +23,7 @@ export interface EuiTimelineItemIconProps { export const EuiTimelineItemIcon: FunctionComponent = ({ icon, - verticalAlign = 'top', + verticalAlign = 'center', }) => { const euiTheme = useEuiTheme(); const styles = euiTimelineItemIconStyles(euiTheme); From 391b5b573dbc22ec604ab7f9995f9a71a333a92c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 13:15:22 +0100 Subject: [PATCH 53/59] Removing `verticalAlign="center"` from examples --- src-docs/src/views/timeline/timeline.tsx | 3 --- src-docs/src/views/timeline/timeline_item.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 195f8e11695..906bc9dc656 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -8,7 +8,6 @@ import { const items: EuiTimelineProps['items'] = [ { icon: 'email', - verticalAlign: 'center', children: (

            @@ -19,7 +18,6 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'pencil', - verticalAlign: 'center', children: (

            @@ -30,7 +28,6 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'folderClosed', - verticalAlign: 'center', children: (

            The project was archived.

            diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index f7720754a9c..4cc0f840d12 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components'; export default () => ( - +

            I'm the children and you can find the{' '} From 8c910175d68191999ab6a7490f0580fc80f1d0d2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 14:36:29 +0100 Subject: [PATCH 54/59] Fixing path to type --- src/components/timeline/timeline_item_event.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/timeline/timeline_item_event.tsx b/src/components/timeline/timeline_item_event.tsx index 78f7cfc1a37..6b40a3040e5 100644 --- a/src/components/timeline/timeline_item_event.tsx +++ b/src/components/timeline/timeline_item_event.tsx @@ -8,7 +8,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { euiTimelineItemEventStyles } from './timeline_item_event.styles'; -import { EuiTimelineItemVerticalAlign } from './'; +import { EuiTimelineItemVerticalAlign } from './timeline_item'; export interface EuiTimelineItemEventProps { /** From 28496cbc88f7e676fb2be83cc5afe8a31cf103b8 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 7 Apr 2022 15:49:30 +0100 Subject: [PATCH 55/59] Recommendation for icon size --- src-docs/src/views/timeline/timeline_example.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 1ffa372d639..79e78e59765 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -107,7 +107,11 @@ export const TimelineExample = {

          • icon: main icon that appears on the left side. Can be passed as any IconType string or custom - node. + node (e.g.{' '} + + EuiAvatar + + ). It is recommended not to use an element larger than 40x40.
          • children: any node as the event content. From 2c9c667864f98a17796194154db6246512d348e5 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 12 Apr 2022 14:05:13 +0100 Subject: [PATCH 56/59] Adding `iconAriaLabel` to EuiTimelineItem --- src-docs/src/views/timeline/timeline.tsx | 3 + src-docs/src/views/timeline/timeline_item.tsx | 2 +- .../__snapshots__/timeline.test.tsx.snap | 8 +- .../__snapshots__/timeline_item.test.tsx.snap | 88 ++++++++++++++++--- .../timeline/timeline_item.test.tsx | 33 +++++-- src/components/timeline/timeline_item.tsx | 7 +- .../timeline/timeline_item_icon.tsx | 11 ++- 7 files changed, 122 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx index 906bc9dc656..8a9f46ed7b5 100644 --- a/src-docs/src/views/timeline/timeline.tsx +++ b/src-docs/src/views/timeline/timeline.tsx @@ -8,6 +8,7 @@ import { const items: EuiTimelineProps['items'] = [ { icon: 'email', + iconAriaLabel: 'Invitation', children: (

            @@ -18,6 +19,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'pencil', + iconAriaLabel: 'Edited', children: (

            @@ -28,6 +30,7 @@ const items: EuiTimelineProps['items'] = [ }, { icon: 'folderClosed', + iconAriaLabel: 'Project closed', children: (

            The project was archived.

            diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx index 4cc0f840d12..e4c9162dcfe 100644 --- a/src-docs/src/views/timeline/timeline_item.tsx +++ b/src-docs/src/views/timeline/timeline_item.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components'; export default () => ( - +

            I'm the children and you can find the{' '} diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index f32f9c108e2..c062531bb7a 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -49,17 +49,15 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="css-irfkcc-euiTimelineItemIcon__content" >

    diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap index b9cc62b3f21..26277570d03 100644 --- a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap @@ -1,6 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTimelineItem is rendered 1`] = ` +
    +
    +
    + +
    +
    +
    +

    + I'm the children +

    +
    +
    +`; + +exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
    @@ -12,7 +45,7 @@ exports[`EuiTimelineItem is rendered 1`] = ` > `; -exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` +exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
    @@ -46,16 +79,16 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` class="css-irfkcc-euiTimelineItemIcon__content" >
    @@ -70,6 +103,39 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
    `; +exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = ` +
    +
    +
    + +
    +
    +
    +

    + I'm the children +

    +
    +
    +`; + exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
    diff --git a/src/components/timeline/timeline_item.test.tsx b/src/components/timeline/timeline_item.test.tsx index 990770c015a..39810be9a0e 100644 --- a/src/components/timeline/timeline_item.test.tsx +++ b/src/components/timeline/timeline_item.test.tsx @@ -14,9 +14,7 @@ import { EuiTimelineItem, VERTICAL_ALIGN } from './timeline_item'; describe('EuiTimelineItem', () => { test('is rendered', () => { const component = render( - } - > +

    I'm the children

     ); @@ -29,12 +27,7 @@ describe('EuiTimelineItem', () => { VERTICAL_ALIGN.forEach((alignment) => { test(`${alignment} is rendered`, () => { const component = render( - - } - verticalAlign={alignment} - > +

    I'm the children

     ); @@ -43,5 +36,27 @@ describe('EuiTimelineItem', () => { }); }); }); + + test('iconAriaLabel is rendered', () => { + const component = render( + +

    I'm the children

    +     + ); + + expect(component).toMatchSnapshot(); + }); + + test('EuiAvatar is passed as an icon', () => { + const component = render( + } + > +

    I'm the children

    +     + ); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx index dd2032fb1af..0aaf1a7caa3 100644 --- a/src/components/timeline/timeline_item.tsx +++ b/src/components/timeline/timeline_item.tsx @@ -38,6 +38,7 @@ export const EuiTimelineItem: FunctionComponent = ({ children, verticalAlign = 'center', icon, + iconAriaLabel, className, ...rest }) => { @@ -48,7 +49,11 @@ export const EuiTimelineItem: FunctionComponent = ({ return (
    - + {children} diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index c7476c171b7..5912ea0f1e5 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -19,22 +19,29 @@ export interface EuiTimelineItemIconProps { */ icon: ReactNode | IconType; verticalAlign?: EuiTimelineItemVerticalAlign; + /** + * Specify an `aria-label` for the icon when passed as an `IconType` + * If no `aria-label` is passed we assume the icon is purely decorative. + */ + iconAriaLabel?: string; } export const EuiTimelineItemIcon: FunctionComponent = ({ icon, verticalAlign = 'center', + iconAriaLabel, }) => { const euiTheme = useEuiTheme(); const styles = euiTimelineItemIconStyles(euiTheme); const cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]]; - const cssContentStyles = styles.euiTimelineItemIcon__content; + const ariaLabel = iconAriaLabel ? iconAriaLabel : ''; + const iconRender = typeof icon === 'string' ? ( - + ) : ( icon ); From 16a506e080f8c5e5db2b7b130260447ea5be5976 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 12 Apr 2022 15:49:22 +0100 Subject: [PATCH 57/59] Fixing issue with center vertical alignment --- .../timeline/__snapshots__/timeline.test.tsx.snap | 4 ++-- .../timeline/__snapshots__/timeline_item.test.tsx.snap | 10 +++++----- src/components/timeline/timeline_item.styles.ts | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap index c062531bb7a..06c59dd6eda 100644 --- a/src/components/timeline/__snapshots__/timeline.test.tsx.snap +++ b/src/components/timeline/__snapshots__/timeline.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiTimeline is rendered with items 1`] = ` class="euiTimeline" >
    ({ } &:last-of-type { - > [class*='euiTimelineItemIcon-top']::before { + > [class*='euiTimelineItemIcon']::before { display: none; } - > [class*='euiTimelineItemIcon-center']::before { + &:not(:only-child) > [class*='euiTimelineItemIcon-center']::before { top: 0; height: 50%; } From 91729940feb407c4398bb9faf26d6ef8f4bd9073 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 12 Apr 2022 19:26:32 +0100 Subject: [PATCH 58/59] Adding dot into prop description. --- src/components/timeline/timeline_item_icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/timeline/timeline_item_icon.tsx b/src/components/timeline/timeline_item_icon.tsx index 5912ea0f1e5..af9f9b32b72 100644 --- a/src/components/timeline/timeline_item_icon.tsx +++ b/src/components/timeline/timeline_item_icon.tsx @@ -20,7 +20,7 @@ export interface EuiTimelineItemIconProps { icon: ReactNode | IconType; verticalAlign?: EuiTimelineItemVerticalAlign; /** - * Specify an `aria-label` for the icon when passed as an `IconType` + * Specify an `aria-label` for the icon when passed as an `IconType`. * If no `aria-label` is passed we assume the icon is purely decorative. */ iconAriaLabel?: string; From c25b3d45be23130cd97c61b82c850d7da538bc77 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 13 Apr 2022 12:57:27 +0100 Subject: [PATCH 59/59] Update src-docs/src/views/timeline/timeline_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/timeline/timeline_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js index 79e78e59765..ca86fa87de9 100644 --- a/src-docs/src/views/timeline/timeline_example.js +++ b/src-docs/src/views/timeline/timeline_example.js @@ -12,7 +12,7 @@ import timelineItemConfig from './playground'; import Timeline from './timeline'; const timelineSource = require('!!raw-loader!./timeline'); const timelineSnippet = `