From f83761bdd627f3dff8c213be2c5e1d9f0274df3d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 08:58:03 -0800 Subject: [PATCH 01/24] playing with css and layouts --- src-docs/src/routes.js | 3 ++ src-docs/src/views/comment/comment.tsx | 11 ++++++ src-docs/src/views/comment/comment_example.js | 37 +++++++++++++++++++ src/components/comment/_comment.scss | 20 ++++++++++ src/components/comment/_index.scss | 1 + src/components/comment/comment.test.tsx | 16 ++++++++ src/components/comment/comment.tsx | 34 +++++++++++++++++ src/components/comment/index.ts | 3 ++ src/components/index.js | 2 + src/components/index.scss | 1 + 10 files changed, 128 insertions(+) create mode 100644 src-docs/src/views/comment/comment.tsx create mode 100644 src-docs/src/views/comment/comment_example.js create mode 100644 src/components/comment/_comment.scss create mode 100644 src/components/comment/_index.scss create mode 100644 src/components/comment/comment.test.tsx create mode 100644 src/components/comment/comment.tsx create mode 100644 src/components/comment/index.ts diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 41a0c6088b6..fd105bc1100 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -67,6 +67,8 @@ import { ColorPickerExample } from './views/color_picker/color_picker_example'; import { ComboBoxExample } from './views/combo_box/combo_box_example'; +import { CommentExample } from './views/comment/comment_example'; + import { ContextExample } from './views/context/context_example'; import { ContextMenuExample } from './views/context_menu/context_menu_example'; @@ -380,6 +382,7 @@ const navigation = [ FormValidationExample, SuperSelectExample, ComboBoxExample, + CommentExample, ColorPickerExample, CodeEditorExample, DatePickerExample, diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx new file mode 100644 index 00000000000..80b56f57971 --- /dev/null +++ b/src-docs/src/views/comment/comment.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + EuiComment, +} from '../../../../src/components/comment'; + +export default () => ( + + + +); diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js new file mode 100644 index 00000000000..44ee2d72a85 --- /dev/null +++ b/src-docs/src/views/comment/comment_example.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import { + EuiCode, + EuiComment, +} from '../../../../src/components'; + +import Comment from './comment'; +const commentSource = require('!!raw-loader!./comment'); +const commentHtml = renderToHtml(Comment); + +export const CommentExample = { + title: 'Comment', + sections: [{ + title: 'Comment', + source: [{ + type: GuideSectionTypes.JS, + code: commentSource, + }, { + type: GuideSectionTypes.HTML, + code: commentHtml, + }], + text: ( +

+ Description needed: how to use the EuiComment component. +

+ ), + props: { EuiComment }, + demo: , + }], +}; diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss new file mode 100644 index 00000000000..4846a43a266 --- /dev/null +++ b/src/components/comment/_comment.scss @@ -0,0 +1,20 @@ +.euiComment { + @include euiPanel($selector: '.euiComment__panel'); + font-size: $euiFontSizeS; + display: flex; + + .euiComment__panel { + overflow: hidden; + } + + .euiComment__panelHeader { + border-bottom: $euiBorderThin; + padding: $euiSizeM; + background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%); + } + + .euiComment__panelBody { + padding: $euiSizeS; + line-height: $euiSize * 1.2; + } +} diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss new file mode 100644 index 00000000000..2b98561c86c --- /dev/null +++ b/src/components/comment/_index.scss @@ -0,0 +1 @@ +@import 'comment'; diff --git a/src/components/comment/comment.test.tsx b/src/components/comment/comment.test.tsx new file mode 100644 index 00000000000..b7ce58cddcc --- /dev/null +++ b/src/components/comment/comment.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiComment } from './comment'; + +describe('EuiComment', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx new file mode 100644 index 00000000000..ea35cba9b9f --- /dev/null +++ b/src/components/comment/comment.tsx @@ -0,0 +1,34 @@ +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; +import { EuiAvatar } from '../avatar'; + +export type EuiCommentProps = HTMLAttributes & CommonProps & {}; + +export const EuiComment: FunctionComponent = ({ + // children, + className, + ...rest +}) => { + const classes = classNames('euiComment', className); + + return ( +
+ +
+
+ mmarcialis added description on Jan 1, 2020 @ 22:30:00 +
+
+ Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna + mollis euismod. Donec sed odio dui. Fusce dapibus, tellus ac cursus + commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit + amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent + commodo cursus magna, vel scelerisque nisl consectetur et. Fusce + dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut + fermentum massa justo sit amet risus. +
+
+
+ ); +}; diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts new file mode 100644 index 00000000000..3e8bca26a3f --- /dev/null +++ b/src/components/comment/index.ts @@ -0,0 +1,3 @@ +export { + EuiComment, +} from './comment'; diff --git a/src/components/index.js b/src/components/index.js index f4cb7cf6652..af426accca6 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -38,6 +38,8 @@ export { export { EuiComboBox } from './combo_box'; +export { EuiComment } from './comment'; + export { EuiContext, EuiI18nConsumer } from './context'; export { diff --git a/src/components/index.scss b/src/components/index.scss index 57f885deb08..6f2f869e3ae 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -16,6 +16,7 @@ @import 'code_editor/index'; @import 'color_picker/index'; @import 'combo_box/index'; +@import 'comment/index'; @import 'context_menu/index'; @import 'control_bar/index'; @import 'date_picker/index'; From cb9a8d5552682c4502dbf938bb032b9189d30461 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 9 Mar 2020 13:38:45 -0700 Subject: [PATCH 02/24] more experimentation with styles --- src-docs/src/views/comment/comment.tsx | 16 +++++---- src/components/comment/_comment.scss | 47 +++++++++++++++++++++++-- src/components/comment/comment.tsx | 48 ++++++++++++++++++-------- 3 files changed, 88 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index 80b56f57971..b8c47cb2018 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -1,11 +1,15 @@ import React from 'react'; -import { - EuiComment, -} from '../../../../src/components/comment'; +import { EuiComment } from '../../../../src/components/comment'; +// import { EuiSpacer } from '../../../../src/components/spacer'; -export default () => ( - +const body = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; - +export default () => ( +
+ + + +
); diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 4846a43a266..45634828a39 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -1,16 +1,42 @@ -.euiComment { +.euiComment__panel { @include euiPanel($selector: '.euiComment__panel'); font-size: $euiFontSizeS; display: flex; + margin: -($euiSize * .5); + padding-bottom: $euiSize; .euiComment__panel { overflow: hidden; + flex-grow: 1; + } + + .euiComment__avatar { + position: relative; + flex-grow: 0; + + &::before { + content: ''; + position: absolute; + left: $euiSizeXL / 2; + top: $euiSizeXXL; + width: $euiSizeXS / 2; + background-color: $euiColorLightShade; + height: calc(100% - (#{$euiSizeXL})); + } + } + + .euiComment__avatar, .euiComment__panel { + flex-basis: auto; + margin: $euiSize * .5; } .euiComment__panelHeader { - border-bottom: $euiBorderThin; padding: $euiSizeM; - background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%); + background-color: $euiColorLightestShade; + + &.euiComment__panelHeader--hasBody { + border-bottom: $euiBorderThin; + } } .euiComment__panelBody { @@ -18,3 +44,18 @@ line-height: $euiSize * 1.2; } } + +.euiComment:last-child { + .euiComment__avatar { + &::before { + content: ''; + background: none; + } + } +} + +.euiComment__avatar-noBody { + .euiComment__panelHeader { + border: none; + } +} \ No newline at end of file diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index ea35cba9b9f..7138fd1113b 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -3,31 +3,51 @@ import { CommonProps } from '../common'; import classNames from 'classnames'; import { EuiAvatar } from '../avatar'; -export type EuiCommentProps = HTMLAttributes & CommonProps & {}; +export type EuiCommentProps = HTMLAttributes & + CommonProps & { + body?: string; + }; export const EuiComment: FunctionComponent = ({ // children, className, + body, ...rest }) => { - const classes = classNames('euiComment', className); + const classes = classNames( + 'euiComment', + // { 'euiComment--hasBody': body }, + className + ); + + const headerClasses = classNames('euiComment__panelHeader', { + 'euiComment__panelHeader--hasBody': body, + }); + + const contentClasses = classNames('euiComment__content', { + euiComment__panel: body, + }); + + // let commentBody; + // if (body) { + // commentBody = body; + // } return (
- -
-
+
+ +
+
+
mmarcialis added description on Jan 1, 2020 @ 22:30:00
-
- Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna - mollis euismod. Donec sed odio dui. Fusce dapibus, tellus ac cursus - commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit - amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent - commodo cursus magna, vel scelerisque nisl consectetur et. Fusce - dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit amet risus. -
+ {body ? ( +
+ Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna + {body} +
+ ) : null}
); From e8c77e6196366c380f967167fc96998e3b62f75d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 11 Mar 2020 16:59:54 -0700 Subject: [PATCH 03/24] before adding an extra style to commentEvent --- src-docs/src/views/comment/comment.tsx | 22 +++++- src/components/comment/_comment.scss | 67 ++++++------------- src/components/comment/_comment_event.scss | 39 +++++++++++ src/components/comment/_comment_timeline.scss | 0 src/components/comment/_index.scss | 1 + src/components/comment/comment.tsx | 65 +++++++++--------- src/components/comment/comment_event.tsx | 42 ++++++++++++ src/components/comment/comment_timeline.tsx | 26 +++++++ src/components/comment/index.ts | 14 +++- src/components/index.js | 2 +- 10 files changed, 193 insertions(+), 85 deletions(-) create mode 100644 src/components/comment/_comment_event.scss create mode 100644 src/components/comment/_comment_timeline.scss create mode 100644 src/components/comment/comment_event.tsx create mode 100644 src/components/comment/comment_timeline.tsx diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index b8c47cb2018..ff375558ec6 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -1,6 +1,9 @@ +// import React from 'react'; import React from 'react'; import { EuiComment } from '../../../../src/components/comment'; +import { EuiIcon } from '../../../../src/components/icon'; +import { EuiAvatar } from '../../../../src/components/avatar'; // import { EuiSpacer } from '../../../../src/components/spacer'; const body = @@ -8,8 +11,21 @@ const body = export default () => (
- - - + } + timeStamp="Jan 1, 2020 @ 22:30:00" + timelineIcon={}> + {body} + + } + timeStamp="Jan 1, 2020 @ 22:30:00" + timelineIcon={} + />
); diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 45634828a39..2e91acec24c 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -1,61 +1,32 @@ -.euiComment__panel { - @include euiPanel($selector: '.euiComment__panel'); +.euiComment { + // @include euiPanel($selector: '.euiComment__panel'); font-size: $euiFontSizeS; display: flex; margin: -($euiSize * .5); padding-bottom: $euiSize; - .euiComment__panel { - overflow: hidden; + .euiCommentEvent { flex-grow: 1; } - .euiComment__avatar { - position: relative; - flex-grow: 0; - - &::before { - content: ''; - position: absolute; - left: $euiSizeXL / 2; - top: $euiSizeXXL; - width: $euiSizeXS / 2; - background-color: $euiColorLightShade; - height: calc(100% - (#{$euiSizeXL})); - } - } - - .euiComment__avatar, .euiComment__panel { + // .euiComment__avatar { + // position: relative; + // flex-grow: 0; + + // &::before { + // content: ''; + // position: absolute; + // left: $euiSizeXL / 2; + // top: $euiSizeXXL; + // width: $euiSizeXS / 2; + // background-color: $euiColorLightShade; + // height: calc(100% - (#{$euiSizeXL})); + // } + // } + + .euiCommentTimeline, .euiCommentEvent { flex-basis: auto; margin: $euiSize * .5; } - .euiComment__panelHeader { - padding: $euiSizeM; - background-color: $euiColorLightestShade; - - &.euiComment__panelHeader--hasBody { - border-bottom: $euiBorderThin; - } - } - - .euiComment__panelBody { - padding: $euiSizeS; - line-height: $euiSize * 1.2; - } -} - -.euiComment:last-child { - .euiComment__avatar { - &::before { - content: ''; - background: none; - } - } -} - -.euiComment__avatar-noBody { - .euiComment__panelHeader { - border: none; - } } \ No newline at end of file diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss new file mode 100644 index 00000000000..8272c527f25 --- /dev/null +++ b/src/components/comment/_comment_event.scss @@ -0,0 +1,39 @@ +@include euiPanel($selector: '.euiCommentEvent'); + +.euiCommentEvent { + font-size: $euiFontSizeS; + overflow: hidden; + + .euiCommentEvent__header { + padding: $euiSizeM; + background-color: $euiColorLightestShade; + border-bottom: $euiBorderThin; + display: flex; + align-items: center; + } + + .euiCommentEvent__headerUser { + display: flex; + align-items: center; + padding-right: $euiSizeXS; + } + + + // .euiCommentEvent__headerEvent, + // .euiCommentEvent__headerActions { + // // margin-right: $euiSizeXS; + // flex-grow: 0; + // } + + .euiCommentEvent__headerTimeStamp { + // margin-left: $euiSizeS; + // margin-right: $euiSizeS; + flex-grow: 1; + } + + + .euiCommentEvent__body { + padding: $euiSizeS; + line-height: $euiSize * 1.2; + } +} \ No newline at end of file diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss index 2b98561c86c..be5de084cd9 100644 --- a/src/components/comment/_index.scss +++ b/src/components/comment/_index.scss @@ -1 +1,2 @@ @import 'comment'; +@import 'comment_event'; diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index 7138fd1113b..7ecd1f1fa53 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -1,17 +1,36 @@ -import React, { HTMLAttributes, FunctionComponent } from 'react'; +import React, { FunctionComponent } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; -import { EuiAvatar } from '../avatar'; -export type EuiCommentProps = HTMLAttributes & +import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; +import { + EuiCommentTimeline, + EuiCommentTimelineProps, +} from './comment_timeline'; + +export type EuiCommentProps = EuiCommentEventProps & + EuiCommentTimelineProps & CommonProps & { - body?: string; + // body?: ReactNode; + // user?: ReactNode; + // headerText?: ReactNode; + // timeStamp?: ReactNode; + // event?: ReactNode; + // commentStyle?: 'regular' | 'update'; + // actions?: ReactNode; }; export const EuiComment: FunctionComponent = ({ - // children, + children, className, - body, + // body, + user, + event, + actions, + timelineIcon, + commentStyle = 'regular', + // headerText, + timeStamp, ...rest }) => { const classes = classNames( @@ -21,34 +40,20 @@ export const EuiComment: FunctionComponent = ({ ); const headerClasses = classNames('euiComment__panelHeader', { - 'euiComment__panelHeader--hasBody': body, - }); - - const contentClasses = classNames('euiComment__content', { - euiComment__panel: body, + // 'euiComment__panelHeader--hasBody': body, }); - // let commentBody; - // if (body) { - // commentBody = body; - // } - return (
-
- -
-
-
- mmarcialis added description on Jan 1, 2020 @ 22:30:00 -
- {body ? ( -
- Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna - {body} -
- ) : null} -
+ + + {children} +
); }; diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx new file mode 100644 index 00000000000..d64ed36ff30 --- /dev/null +++ b/src/components/comment/comment_event.tsx @@ -0,0 +1,42 @@ +import React, { FunctionComponent, ReactNode } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; + +export type EuiCommentEventProps = CommonProps & + CommonProps & { + body?: ReactNode; + user?: ReactNode; + timeStamp?: ReactNode; + event?: ReactNode; + actions?: ReactNode; + commentStyle?: 'regular' | 'update'; + }; + +export const EuiCommentEvent: FunctionComponent = ({ + children, + className, + body, + user, + timeStamp, + event, + actions, + ...rest +}) => { + const classes = classNames( + 'euiCommentEvent', + // { 'euiComment--hasBody': body }, + className + ); + + return ( +
+
+
{user}
+ {event} +
{timeStamp}
+ {actions} +
+
{children}
+
+ ); +}; diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx new file mode 100644 index 00000000000..a6eca09d6d2 --- /dev/null +++ b/src/components/comment/comment_timeline.tsx @@ -0,0 +1,26 @@ +import React, { FunctionComponent, ReactNode } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; + +export type EuiCommentTimelineProps = CommonProps & { + timelineIcon?: ReactNode; +}; + +export const EuiCommentTimeline: FunctionComponent = ({ + // children, + className, + timelineIcon, + ...rest +}) => { + const classes = classNames( + 'euiCommentTimeline', + // { 'euiComment--hasBody': body }, + className + ); + + return ( +
+ {timelineIcon} +
+ ); +}; diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts index 3e8bca26a3f..58f30d99987 100644 --- a/src/components/comment/index.ts +++ b/src/components/comment/index.ts @@ -1,3 +1,11 @@ -export { - EuiComment, -} from './comment'; +export { EuiComment } from './comment'; + +export { EuiCommentEvent } from './comment_event'; + +export { EuiCommentTimeline } from './comment_timeline'; + +// export { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body'; + +// export { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer'; + +// export { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header'; diff --git a/src/components/index.js b/src/components/index.js index af426accca6..0a611febdfe 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -38,7 +38,7 @@ export { export { EuiComboBox } from './combo_box'; -export { EuiComment } from './comment'; +export { EuiComment, EuiCommentEvent } from './comment'; export { EuiContext, EuiI18nConsumer } from './context'; From 61dad2f1d3bfcf359225e2649dc4f656f8afc4c0 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 16 Mar 2020 12:41:31 -0700 Subject: [PATCH 04/24] some things I stashed, not sure why --- src-docs/src/views/card/card.js | 3 +- src-docs/src/views/comment/comment.tsx | 27 ++++++++++--- src/components/comment/_comment.scss | 26 ++++++------- src/components/comment/_comment_event.scss | 45 ++++++++++++++-------- src/components/comment/comment_event.tsx | 7 ++++ 5 files changed, 71 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index 179fe318eb1..61b63648da8 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -7,7 +7,7 @@ import { EuiFlexItem, } from '../../../../src/components'; -const icons = ['Beats', 'Cloud', 'Logging', 'Kibana']; +const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana']; const cardNodes = icons.map(function(item, index) { return ( @@ -15,7 +15,6 @@ const cardNodes = icons.map(function(item, index) { } title={`Elastic ${item}`} - isDisabled={item === 'Kibana' ? true : false} description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} /> diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index ff375558ec6..90d40db7ec2 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -7,25 +7,40 @@ import { EuiAvatar } from '../../../../src/components/avatar'; // import { EuiSpacer } from '../../../../src/components/spacer'; const body = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; export default () => (
} timeStamp="Jan 1, 2020 @ 22:30:00" - timelineIcon={}> + timelineIcon={}> {body} } + event="requested review" + timeStamp="Jan 1, 2020 @ 22:30:00" + timelineIcon={} + /> + } + timelineIcon={} /> + } + timeStamp="Jan 1, 2020 @ 22:30:00" + timelineIcon={}> + {body} +
); diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 2e91acec24c..745f61b722b 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -9,20 +9,20 @@ flex-grow: 1; } - // .euiComment__avatar { - // position: relative; - // flex-grow: 0; + .euiCommentTimeline { + position: relative; + flex-grow: 0; - // &::before { - // content: ''; - // position: absolute; - // left: $euiSizeXL / 2; - // top: $euiSizeXXL; - // width: $euiSizeXS / 2; - // background-color: $euiColorLightShade; - // height: calc(100% - (#{$euiSizeXL})); - // } - // } + &::before { + content: ''; + position: absolute; + left: $euiSizeXL / 2; + top: $euiSizeXXL; + width: $euiSizeXS / 2; + background-color: $euiColorLightShade; + height: calc(100% - (#{$euiSizeL})); + } + } .euiCommentTimeline, .euiCommentEvent { flex-basis: auto; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 8272c527f25..92de9ce0d68 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -1,13 +1,13 @@ -@include euiPanel($selector: '.euiCommentEvent'); +@include euiPanel($selector: '.euiCommentEvent--regular'); .euiCommentEvent { font-size: $euiFontSizeS; overflow: hidden; .euiCommentEvent__header { - padding: $euiSizeM; - background-color: $euiColorLightestShade; - border-bottom: $euiBorderThin; + // padding: $euiSizeM; + // background-color: $euiColorLightestShade; + // border-bottom: $euiBorderThin; display: flex; align-items: center; } @@ -16,24 +16,37 @@ display: flex; align-items: center; padding-right: $euiSizeXS; + font-weight: 600; } - - // .euiCommentEvent__headerEvent, - // .euiCommentEvent__headerActions { - // // margin-right: $euiSizeXS; - // flex-grow: 0; + // .euiCommentEvent__headerTimeStamp { + // flex-grow: 1; // } - .euiCommentEvent__headerTimeStamp { - // margin-left: $euiSizeS; - // margin-right: $euiSizeS; - flex-grow: 1; - } - - .euiCommentEvent__body { padding: $euiSizeS; line-height: $euiSize * 1.2; } +} + +.euiCommentEvent--regular { + .euiCommentEvent__header { + background-color: $euiColorLightestShade; + border-bottom: $euiBorderThin; + padding: $euiSizeM; + + .euiCommentEvent__headerTimeStamp { + flex-grow: 1; + } + } +} + +.euiCommentEvent--update { + .euiCommentEvent__header { + padding-top: $euiSizeS; + } + + .euiCommentEvent__headerTimeStamp { + padding-right: $euiSizeL; + } } \ No newline at end of file diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index d64ed36ff30..86fda55a3d7 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -12,12 +12,18 @@ export type EuiCommentEventProps = CommonProps & commentStyle?: 'regular' | 'update'; }; +const commentStyleToClassMap: { [commentStyle: string]: string | null } = { + regular: 'euiCommentEvent--regular', + update: 'euiCommentEvent--update', +}; + export const EuiCommentEvent: FunctionComponent = ({ children, className, body, user, timeStamp, + commentStyle = 'regular', event, actions, ...rest @@ -25,6 +31,7 @@ export const EuiCommentEvent: FunctionComponent = ({ const classes = classNames( 'euiCommentEvent', // { 'euiComment--hasBody': body }, + commentStyleToClassMap[commentStyle], className ); From 508211e3cdd1727a04c11188ebd3496aedb246c1 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 19 Mar 2020 18:41:33 -0700 Subject: [PATCH 05/24] will try a different way for separator --- src-docs/src/views/comment/comment.tsx | 69 +++++++++++++++---- src/components/comment/_comment.scss | 4 +- src/components/comment/_comment_event.scss | 17 ++++- src/components/comment/_comment_timeline.scss | 7 ++ src/components/comment/_index.scss | 1 + src/components/comment/comment.tsx | 4 +- src/components/comment/comment_event.tsx | 10 +-- src/components/comment/comment_timeline.tsx | 9 ++- 8 files changed, 95 insertions(+), 26 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index 90d40db7ec2..3cafb524763 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -4,43 +4,82 @@ import React from 'react'; import { EuiComment } from '../../../../src/components/comment'; import { EuiIcon } from '../../../../src/components/icon'; import { EuiAvatar } from '../../../../src/components/avatar'; +import { EuiBadge } from '../../../../src/components/badge'; +import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; // import { EuiSpacer } from '../../../../src/components/spacer'; const body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; +const longBody = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; + +const bodyUpdate = + 'This is a comment of the style "update" but it can also have a body'; + export default () => (
} - timeStamp="Jan 1, 2020 @ 22:30:00" - timelineIcon={}> + timeStamp="on Jan 1, 2020"> {body} } - event="requested review" - timeStamp="Jan 1, 2020 @ 22:30:00" - timelineIcon={} + event="pushed a new incident" + timeStamp="on Jan 3, 2020" + timelineIcon={} + /> + + + + + dsnide + + } + commentStyle="update" + event={ + + added tags + + sample + + + review + + + } + timeStamp="on Jan 4, 2020" + timelineIcon={} /> } + event="edited case" + timeStamp="on Jan 11, 2020" + timelineIcon={} /> } - timeStamp="Jan 1, 2020 @ 22:30:00" - timelineIcon={}> - {body} + timeStamp="on Jan 14, 2020" + timelineIcon={}> + {longBody} + + }> + {bodyUpdate}
); diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 745f61b722b..f09433b20f2 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -4,6 +4,7 @@ display: flex; margin: -($euiSize * .5); padding-bottom: $euiSize; + min-height: $euiSize * 5; .euiCommentEvent { flex-grow: 1; @@ -16,7 +17,8 @@ &::before { content: ''; position: absolute; - left: $euiSizeXL / 2; + left: $euiSizeXXL / 2; + // left: calc(50% - (#{$euiSize * .5})); top: $euiSizeXXL; width: $euiSizeXS / 2; background-color: $euiColorLightShade; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 92de9ce0d68..8285115f661 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -19,14 +19,17 @@ font-weight: 600; } + .euiCommentEvent__event { + padding-right: $euiSizeXS; + } + // .euiCommentEvent__headerTimeStamp { // flex-grow: 1; // } - .euiCommentEvent__body { - padding: $euiSizeS; - line-height: $euiSize * 1.2; + line-height: $euiSize * 1.2; // this should be on the demo side only? } + } .euiCommentEvent--regular { @@ -39,6 +42,10 @@ flex-grow: 1; } } + + .euiCommentEvent__body { + padding: $euiSizeS; + } } .euiCommentEvent--update { @@ -49,4 +56,8 @@ .euiCommentEvent__headerTimeStamp { padding-right: $euiSizeL; } + + .euiCommentEvent__body { + padding-top: $euiSizeS; + } } \ No newline at end of file diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss index e69de29bb2d..cd39c4a81d0 100644 --- a/src/components/comment/_comment_timeline.scss +++ b/src/components/comment/_comment_timeline.scss @@ -0,0 +1,7 @@ +.euiCommentTimeline__content { + min-width: $euiSizeXXL; + min-height: $euiSizeXXL; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss index be5de084cd9..78e82990cb1 100644 --- a/src/components/comment/_index.scss +++ b/src/components/comment/_index.scss @@ -1,2 +1,3 @@ @import 'comment'; @import 'comment_event'; +@import 'comment_timeline'; diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index 7ecd1f1fa53..f1ea299a9cf 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -24,7 +24,7 @@ export const EuiComment: FunctionComponent = ({ children, className, // body, - user, + username, event, actions, timelineIcon, @@ -47,7 +47,7 @@ export const EuiComment: FunctionComponent = ({
= ({ children, className, body, - user, + username, timeStamp, + responses, commentStyle = 'regular', event, actions, @@ -38,8 +40,8 @@ export const EuiCommentEvent: FunctionComponent = ({ return (
-
{user}
- {event} +
{username}
+
{event}
{timeStamp}
{actions}
diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index a6eca09d6d2..d6caac87be3 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; +import { EuiIcon } from '../icon'; export type EuiCommentTimelineProps = CommonProps & { timelineIcon?: ReactNode; @@ -20,7 +21,13 @@ export const EuiCommentTimeline: FunctionComponent = ({ return (
- {timelineIcon} +
+ {timelineIcon ? ( + timelineIcon + ) : ( + + )} +
); }; From 193a22b9010803d4b2513b066166e2fb2435f97d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 23 Mar 2020 15:43:36 -0700 Subject: [PATCH 06/24] rename one prop and improve handling of large timelineIcon --- src-docs/src/views/combo_box/combo_box.js | 1 + src-docs/src/views/comment/comment.tsx | 14 +++--- src-docs/src/views/comment/comment_example.js | 49 ++++++++++--------- .../__snapshots__/comment.test.tsx.snap | 41 ++++++++++++++++ src/components/comment/_comment.scss | 4 +- src/components/comment/_comment_event.scss | 41 ++++++++-------- src/components/comment/_comment_timeline.scss | 2 + src/components/comment/comment.tsx | 8 +-- src/components/comment/comment_event.tsx | 25 ++++++---- 9 files changed, 116 insertions(+), 69 deletions(-) create mode 100644 src/components/comment/__snapshots__/comment.test.tsx.snap diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js index 973334206d4..4d12c2e923a 100644 --- a/src-docs/src/views/combo_box/combo_box.js +++ b/src-docs/src/views/combo_box/combo_box.js @@ -86,6 +86,7 @@ export default class extends Component { /* DisplayToggles wrapper for Docs only */ (
@@ -28,13 +27,14 @@ export default () => ( } event="pushed a new incident" timeStamp="on Jan 3, 2020" timelineIcon={} /> } username={ @@ -43,7 +43,7 @@ export default () => ( dsnide } - commentStyle="update" + type="update" event={ added tags @@ -56,11 +56,11 @@ export default () => ( } timeStamp="on Jan 4, 2020" - timelineIcon={} + timelineIcon={} /> } @@ -75,7 +75,7 @@ export default () => ( }> diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 44ee2d72a85..75c0e2e4727 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -2,14 +2,9 @@ import React from 'react'; import { renderToHtml } from '../../services'; -import { - GuideSectionTypes, -} from '../../components'; +import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiComment, -} from '../../../../src/components'; +import { EuiCode, EuiComment } from '../../../../src/components'; import Comment from './comment'; const commentSource = require('!!raw-loader!./comment'); @@ -17,21 +12,27 @@ const commentHtml = renderToHtml(Comment); export const CommentExample = { title: 'Comment', - sections: [{ - title: 'Comment', - source: [{ - type: GuideSectionTypes.JS, - code: commentSource, - }, { - type: GuideSectionTypes.HTML, - code: commentHtml, - }], - text: ( -

- Description needed: how to use the EuiComment component. -

- ), - props: { EuiComment }, - demo: , - }], + sections: [ + { + title: 'Comment', + source: [ + { + type: GuideSectionTypes.JS, + code: commentSource, + }, + { + type: GuideSectionTypes.HTML, + code: commentHtml, + }, + ], + text: ( +

+ Description needed: how to use the EuiComment{' '} + component. +

+ ), + props: { EuiComment }, + demo: , + }, + ], }; diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap new file mode 100644 index 00000000000..c9eb4114e23 --- /dev/null +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiComment is rendered 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+`; diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index f09433b20f2..458a2633e75 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -1,5 +1,4 @@ .euiComment { - // @include euiPanel($selector: '.euiComment__panel'); font-size: $euiFontSizeS; display: flex; margin: -($euiSize * .5); @@ -18,11 +17,10 @@ content: ''; position: absolute; left: $euiSizeXXL / 2; - // left: calc(50% - (#{$euiSize * .5})); top: $euiSizeXXL; width: $euiSizeXS / 2; background-color: $euiColorLightShade; - height: calc(100% - (#{$euiSizeL})); + height: 100%; } } diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 8285115f661..1f8414597c5 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -4,32 +4,32 @@ font-size: $euiFontSizeS; overflow: hidden; - .euiCommentEvent__header { - // padding: $euiSizeM; - // background-color: $euiColorLightestShade; - // border-bottom: $euiBorderThin; - display: flex; - align-items: center; + .euiCommentEvent__event { + padding-right: $euiSizeXS; } - .euiCommentEvent__headerUser { - display: flex; + .euiCommentEvent__header { align-items: center; - padding-right: $euiSizeXS; - font-weight: 600; + + @include euiBreakpoint('xs', 's') { + margin: -($euiSizeXS); + + >div { + margin: $euiSizeXS; + } + } } - .euiCommentEvent__event { - padding-right: $euiSizeXS; + .euiCommentEvent__headerData { + align-items: center; + display: flex; + flex-wrap: wrap; } - // .euiCommentEvent__headerTimeStamp { - // flex-grow: 1; - // } .euiCommentEvent__body { line-height: $euiSize * 1.2; // this should be on the demo side only? } - + } .euiCommentEvent--regular { @@ -37,10 +37,9 @@ background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; padding: $euiSizeM; - - .euiCommentEvent__headerTimeStamp { - flex-grow: 1; - } + display: flex; + justify-content: space-between; + align-items: center; } .euiCommentEvent__body { @@ -51,6 +50,8 @@ .euiCommentEvent--update { .euiCommentEvent__header { padding-top: $euiSizeS; + display: flex; + justify-content: flex-start; } .euiCommentEvent__headerTimeStamp { diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss index cd39c4a81d0..9f6a824f3a7 100644 --- a/src/components/comment/_comment_timeline.scss +++ b/src/components/comment/_comment_timeline.scss @@ -4,4 +4,6 @@ display: flex; justify-content: center; align-items: center; + position: relative; + background-color: $euiColorEmptyShade; } \ No newline at end of file diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index f1ea299a9cf..3858e722b73 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -28,7 +28,7 @@ export const EuiComment: FunctionComponent = ({ event, actions, timelineIcon, - commentStyle = 'regular', + type = 'regular', // headerText, timeStamp, ...rest @@ -39,10 +39,6 @@ export const EuiComment: FunctionComponent = ({ className ); - const headerClasses = classNames('euiComment__panelHeader', { - // 'euiComment__panelHeader--hasBody': body, - }); - return (
@@ -51,7 +47,7 @@ export const EuiComment: FunctionComponent = ({ actions={actions} event={event} timeStamp={timeStamp} - commentStyle={commentStyle}> + type={type}> {children}
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 8a3affc441a..b0f96033298 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, ReactNode } from 'react'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; export type EuiCommentEventProps = CommonProps & @@ -10,14 +10,21 @@ export type EuiCommentEventProps = CommonProps & event?: ReactNode; responses?: ReactNode; actions?: ReactNode; - commentStyle?: 'regular' | 'update'; + type?: EuiCommentType; }; -const commentStyleToClassMap: { [commentStyle: string]: string | null } = { +// const commentStyleToClassMap: { [commentStyle: string]: string | null } = { +// regular: 'euiCommentEvent--regular', +// update: 'euiCommentEvent--update', +// }; +const typeToClassNameMap = { regular: 'euiCommentEvent--regular', update: 'euiCommentEvent--update', }; +export const TYPES = keysOf(typeToClassNameMap); +export type EuiCommentType = keyof typeof typeToClassNameMap; + export const EuiCommentEvent: FunctionComponent = ({ children, className, @@ -25,7 +32,7 @@ export const EuiCommentEvent: FunctionComponent = ({ username, timeStamp, responses, - commentStyle = 'regular', + type = 'regular', event, actions, ...rest @@ -33,17 +40,17 @@ export const EuiCommentEvent: FunctionComponent = ({ const classes = classNames( 'euiCommentEvent', // { 'euiComment--hasBody': body }, - commentStyleToClassMap[commentStyle], + typeToClassNameMap[type], className ); return (
-
{username}
-
{event}
-
{timeStamp}
- {actions} +
+ {username} {event} {timeStamp} +
+
{actions}
{children}
From 40f046b53e237f7095b4670c551a1581cb543067 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 24 Mar 2020 15:27:27 -0700 Subject: [PATCH 07/24] props descriptions not showing up --- src-docs/src/views/comment/comment_example.js | 28 +++++++++++++- .../__snapshots__/comment.test.tsx.snap | 38 +++++++++++++++++++ src/components/comment/_comment.scss | 12 +++++- src/components/comment/_comment_event.scss | 6 +-- src/components/comment/_comment_list.scss | 3 ++ src/components/comment/_index.scss | 1 + src/components/comment/comment.test.tsx | 17 ++++++--- src/components/comment/comment.tsx | 18 +-------- src/components/comment/comment_event.tsx | 8 ++-- src/components/comment/comment_list.test.tsx | 16 ++++++++ src/components/comment/comment_list.tsx | 24 ++++++++++++ src/components/comment/index.ts | 6 +-- 12 files changed, 141 insertions(+), 36 deletions(-) create mode 100644 src/components/comment/_comment_list.scss create mode 100644 src/components/comment/comment_list.test.tsx create mode 100644 src/components/comment/comment_list.tsx diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 75c0e2e4727..dca5ba6d5a2 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -11,8 +11,34 @@ const commentSource = require('!!raw-loader!./comment'); const commentHtml = renderToHtml(Comment); export const CommentExample = { - title: 'Comment', + title: 'Comment List', sections: [ + // { + // source: [ + // { + // type: GuideSectionTypes.JS, + // code: suggestSource, + // }, + // { + // type: GuideSectionTypes.HTML, + // code: suggestHtml, + // }, + // ], + // text: ( + //
+ //

+ // EuiSuggest is a text field component used to + // display suggestions. The status of the component is shown on its + // right side. The available status are:{' '} + // unsaved, saved, + // unchanged and isLoading. + //

+ //
+ // ), + // props: { EuiSuggest }, + // snippet: suggestSnippet, + // demo: , + // }, { title: 'Comment', source: [ diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index c9eb4114e23..4a87524d8a2 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -39,3 +39,41 @@ exports[`EuiComment is rendered 1`] = `
`; + +exports[`EuiComment props type is rendered 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+`; diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 458a2633e75..466c733c06c 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -24,9 +24,19 @@ } } - .euiCommentTimeline, .euiCommentEvent { + .euiCommentTimeline, + .euiCommentEvent { flex-basis: auto; margin: $euiSize * .5; } +} + +.euiComment:last-of-type { + .euiCommentTimeline { + &::before { + content: ''; + height: 0; + } + } } \ No newline at end of file diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 1f8414597c5..84d3adb8c75 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -9,8 +9,6 @@ } .euiCommentEvent__header { - align-items: center; - @include euiBreakpoint('xs', 's') { margin: -($euiSizeXS); @@ -18,6 +16,8 @@ margin: $euiSizeXS; } } + + align-items: center; } .euiCommentEvent__headerData { @@ -29,7 +29,7 @@ .euiCommentEvent__body { line-height: $euiSize * 1.2; // this should be on the demo side only? } - + } .euiCommentEvent--regular { diff --git a/src/components/comment/_comment_list.scss b/src/components/comment/_comment_list.scss new file mode 100644 index 00000000000..2ee7f51ba72 --- /dev/null +++ b/src/components/comment/_comment_list.scss @@ -0,0 +1,3 @@ +.euiCommentList { + +} diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss index 78e82990cb1..1981a314a13 100644 --- a/src/components/comment/_index.scss +++ b/src/components/comment/_index.scss @@ -1,3 +1,4 @@ @import 'comment'; @import 'comment_event'; @import 'comment_timeline'; +@import 'comment_list'; diff --git a/src/components/comment/comment.test.tsx b/src/components/comment/comment.test.tsx index b7ce58cddcc..bf6631be055 100644 --- a/src/components/comment/comment.test.tsx +++ b/src/components/comment/comment.test.tsx @@ -6,11 +6,18 @@ import { EuiComment } from './comment'; describe('EuiComment', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + describe('type', () => { + it('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); }); }); diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index 3858e722b73..a67b8716861 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -10,34 +10,20 @@ import { export type EuiCommentProps = EuiCommentEventProps & EuiCommentTimelineProps & - CommonProps & { - // body?: ReactNode; - // user?: ReactNode; - // headerText?: ReactNode; - // timeStamp?: ReactNode; - // event?: ReactNode; - // commentStyle?: 'regular' | 'update'; - // actions?: ReactNode; - }; + CommonProps & {}; export const EuiComment: FunctionComponent = ({ children, className, - // body, username, event, actions, timelineIcon, type = 'regular', - // headerText, timeStamp, ...rest }) => { - const classes = classNames( - 'euiComment', - // { 'euiComment--hasBody': body }, - className - ); + const classes = classNames('euiComment', className); return (
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index b0f96033298..1640251527a 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -10,13 +10,12 @@ export type EuiCommentEventProps = CommonProps & event?: ReactNode; responses?: ReactNode; actions?: ReactNode; + /** + * Use "update" when the comment is primarily showing info about actions that the user has performed (e.g. "user1 edited a case"). + */ type?: EuiCommentType; }; -// const commentStyleToClassMap: { [commentStyle: string]: string | null } = { -// regular: 'euiCommentEvent--regular', -// update: 'euiCommentEvent--update', -// }; const typeToClassNameMap = { regular: 'euiCommentEvent--regular', update: 'euiCommentEvent--update', @@ -39,7 +38,6 @@ export const EuiCommentEvent: FunctionComponent = ({ }) => { const classes = classNames( 'euiCommentEvent', - // { 'euiComment--hasBody': body }, typeToClassNameMap[type], className ); diff --git a/src/components/comment/comment_list.test.tsx b/src/components/comment/comment_list.test.tsx new file mode 100644 index 00000000000..8fa713b6965 --- /dev/null +++ b/src/components/comment/comment_list.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCommentList } from './comment_list'; + +describe('EuiCommentList', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/comment/comment_list.tsx b/src/components/comment/comment_list.tsx new file mode 100644 index 00000000000..6ab322fc86d --- /dev/null +++ b/src/components/comment/comment_list.tsx @@ -0,0 +1,24 @@ +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; + +export type EuiCommentListProps = HTMLAttributes & CommonProps & { + +}; + +export const EuiCommentList: FunctionComponent = ({ + children, + className, + ...rest +}) => { + const classes = classNames('euiCommentList', className); + + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts index 58f30d99987..dbc66fa8ab3 100644 --- a/src/components/comment/index.ts +++ b/src/components/comment/index.ts @@ -4,8 +4,4 @@ export { EuiCommentEvent } from './comment_event'; export { EuiCommentTimeline } from './comment_timeline'; -// export { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body'; - -// export { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer'; - -// export { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header'; +export { EuiCommentList } from './comment_list'; From 0f088f925e9412014e0a568d306913580837fd38 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 25 Mar 2020 11:51:56 -0700 Subject: [PATCH 08/24] improve demo --- src-docs/src/views/comment/comment.tsx | 23 +++++---- src-docs/src/views/comment/comment_example.js | 51 +++++++------------ .../__snapshots__/comment.test.tsx.snap | 18 ++++--- .../__snapshots__/comment_list.test.tsx.snap | 9 ++++ src/components/comment/_comment_event.scss | 8 ++- src/components/comment/_comment_list.scss | 3 -- src/components/comment/_comment_timeline.scss | 16 +++++- src/components/comment/comment_event.tsx | 10 ++-- src/components/comment/comment_list.test.tsx | 7 +-- src/components/comment/comment_list.tsx | 10 ++-- src/components/comment/comment_timeline.tsx | 11 ++-- 11 files changed, 88 insertions(+), 78 deletions(-) create mode 100644 src/components/comment/__snapshots__/comment_list.test.tsx.snap diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index cd9e6ee2415..3bf4dc606fe 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -1,12 +1,9 @@ -// import React from 'react'; import React from 'react'; - import { EuiComment } from '../../../../src/components/comment'; import { EuiIcon } from '../../../../src/components/icon'; import { EuiAvatar } from '../../../../src/components/avatar'; import { EuiBadge } from '../../../../src/components/badge'; import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; -// import { EuiSpacer } from '../../../../src/components/spacer'; const body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; @@ -19,14 +16,14 @@ const bodyUpdate = 'This type of comment can also have a body'; export default () => (
} timeStamp="on Jan 1, 2020"> {body} } event="pushed a new incident" @@ -38,9 +35,9 @@ export default () => ( username={ - + - dsnide + pedror } type="update" @@ -56,17 +53,21 @@ export default () => ( } timeStamp="on Jan 4, 2020" - timelineIcon={} + timelineIcon={ +
+ +
+ } /> } /> } timeStamp="on Jan 14, 2020" @@ -74,7 +75,7 @@ export default () => ( {longBody} - //

- // EuiSuggest is a text field component used to - // display suggestions. The status of the component is shown on its - // right side. The available status are:{' '} - // unsaved, saved, - // unchanged and isLoading. - //

- //
- // ), - // props: { EuiSuggest }, - // snippet: suggestSnippet, - // demo: , - // }, { - title: 'Comment', source: [ { type: GuideSectionTypes.JS, @@ -52,10 +25,24 @@ export const CommentExample = { }, ], text: ( -

- Description needed: how to use the EuiComment{' '} - component. -

+
+

+ Use EuiComment for displaying comment threads + with EuiCommentList. There are two different + types of comments regular and{' '} + update available through the{' '} + type prop. Use comments of type{' '} + update to display comments that generally do not + have a body and are logging actions that either the user or the + system has performed (e.g. “jsmith edited a case” or + “kibanamachine added the backport missing label”). +

+

+ The timelineIcon can be customized as needed. It + is recommended to use an element of dimensions 40x40. The default{' '} + timelineIcon is a user icon. +

+
), props: { EuiComment }, demo: , diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index 4a87524d8a2..0576fd5bf5c 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -13,9 +13,12 @@ exports[`EuiComment is rendered 1`] = ` class="euiCommentTimeline__content" >
+ class="euiCommentTimeline__contentDefault" + > +
+
+ class="euiCommentTimeline__contentDefault" + > +
+
+`; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 84d3adb8c75..60ab310c4b7 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -18,6 +18,10 @@ } align-items: center; + + .euiCommentEvent__headerData>div { + padding-right: $euiSizeXS; + } } .euiCommentEvent__headerData { @@ -54,8 +58,8 @@ justify-content: flex-start; } - .euiCommentEvent__headerTimeStamp { - padding-right: $euiSizeL; + .euiCommentEvent__headerData { + padding-right: $euiSizeS; } .euiCommentEvent__body { diff --git a/src/components/comment/_comment_list.scss b/src/components/comment/_comment_list.scss index 2ee7f51ba72..e69de29bb2d 100644 --- a/src/components/comment/_comment_list.scss +++ b/src/components/comment/_comment_list.scss @@ -1,3 +0,0 @@ -.euiCommentList { - -} diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss index 9f6a824f3a7..090124eb85a 100644 --- a/src/components/comment/_comment_timeline.scss +++ b/src/components/comment/_comment_timeline.scss @@ -1,9 +1,21 @@ .euiCommentTimeline__content { - min-width: $euiSizeXXL; - min-height: $euiSizeXXL; + min-width: $euiSizeXL; + min-height: $euiSizeXL; display: flex; justify-content: center; align-items: center; position: relative; background-color: $euiColorEmptyShade; +} + +.euiCommentTimeline__contentDefault { + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow-x: hidden; + border-radius: 50%; + background-color: $euiColorLightShade; + width: $euiSizeXXL; + height: $euiSizeXXL; } \ No newline at end of file diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 1640251527a..759a7a817ca 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -5,14 +5,19 @@ import classNames from 'classnames'; export type EuiCommentEventProps = CommonProps & CommonProps & { body?: ReactNode; + /** + * Author of the comment. Given it is a node you can display an icon or a small avatar with it if needed. + */ username?: ReactNode; timeStamp?: ReactNode; event?: ReactNode; - responses?: ReactNode; - actions?: ReactNode; /** * Use "update" when the comment is primarily showing info about actions that the user has performed (e.g. "user1 edited a case"). */ + actions?: ReactNode; + /** + * Actions available from the comment's header + */ type?: EuiCommentType; }; @@ -30,7 +35,6 @@ export const EuiCommentEvent: FunctionComponent = ({ body, username, timeStamp, - responses, type = 'regular', event, actions, diff --git a/src/components/comment/comment_list.test.tsx b/src/components/comment/comment_list.test.tsx index 8fa713b6965..48d29603692 100644 --- a/src/components/comment/comment_list.test.tsx +++ b/src/components/comment/comment_list.test.tsx @@ -6,11 +6,8 @@ import { EuiCommentList } from './comment_list'; describe('EuiCommentList', () => { test('is rendered', () => { - const component = render( - - ); + const component = render(); - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/comment/comment_list.tsx b/src/components/comment/comment_list.tsx index 6ab322fc86d..c665bf82c88 100644 --- a/src/components/comment/comment_list.tsx +++ b/src/components/comment/comment_list.tsx @@ -2,9 +2,8 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; -export type EuiCommentListProps = HTMLAttributes & CommonProps & { - -}; +export type EuiCommentListProps = HTMLAttributes & + CommonProps & {}; export const EuiCommentList: FunctionComponent = ({ children, @@ -14,10 +13,7 @@ export const EuiCommentList: FunctionComponent = ({ const classes = classNames('euiCommentList', className); return ( -
+
{children}
); diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index d6caac87be3..6ed20acb4e1 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -8,16 +8,11 @@ export type EuiCommentTimelineProps = CommonProps & { }; export const EuiCommentTimeline: FunctionComponent = ({ - // children, className, timelineIcon, ...rest }) => { - const classes = classNames( - 'euiCommentTimeline', - // { 'euiComment--hasBody': body }, - className - ); + const classes = classNames('euiCommentTimeline', className); return (
@@ -25,7 +20,9 @@ export const EuiCommentTimeline: FunctionComponent = ({ {timelineIcon ? ( timelineIcon ) : ( - +
+ +
)}
From 4776ea4d890d63b3075d90c78cb4730a2b568d78 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 25 Mar 2020 16:15:03 -0700 Subject: [PATCH 09/24] clean and more tests --- src-docs/src/routes.js | 2 +- src-docs/src/views/card/card.js | 3 +- src-docs/src/views/combo_box/combo_box.js | 1 - src-docs/src/views/comment/comment.tsx | 37 +-- src-docs/src/views/comment/comment_example.js | 3 + .../__snapshots__/comment.test.tsx.snap | 213 +++++++++++++++++- src/components/comment/_comment_event.scss | 6 +- src/components/comment/comment.test.tsx | 52 ++++- src/components/comment/comment.tsx | 4 +- src/components/comment/comment_event.tsx | 22 +- src/components/comment/comment_timeline.tsx | 3 + 11 files changed, 309 insertions(+), 37 deletions(-) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index fd105bc1100..7f6ad4717a1 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -357,6 +357,7 @@ const navigation = [ CallOutExample, CardExample, CodeExample, + CommentExample, DescriptionListExample, DragAndDropExample, EmptyPromptExample, @@ -382,7 +383,6 @@ const navigation = [ FormValidationExample, SuperSelectExample, ComboBoxExample, - CommentExample, ColorPickerExample, CodeEditorExample, DatePickerExample, diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index 61b63648da8..179fe318eb1 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -7,7 +7,7 @@ import { EuiFlexItem, } from '../../../../src/components'; -const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana']; +const icons = ['Beats', 'Cloud', 'Logging', 'Kibana']; const cardNodes = icons.map(function(item, index) { return ( @@ -15,6 +15,7 @@ const cardNodes = icons.map(function(item, index) { } title={`Elastic ${item}`} + isDisabled={item === 'Kibana' ? true : false} description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} /> diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js index 4d12c2e923a..973334206d4 100644 --- a/src-docs/src/views/combo_box/combo_box.js +++ b/src-docs/src/views/combo_box/combo_box.js @@ -86,7 +86,6 @@ export default class extends Component { /* DisplayToggles wrapper for Docs only */ ; + export default () => (
} - timeStamp="on Jan 1, 2020"> + actions={copyAction} + timestamp="on Jan 1, 2020"> {body} } - event="pushed a new incident" - timeStamp="on Jan 3, 2020" - timelineIcon={} + actions={copyAction} + event="pushed incident X0Z235" + timestamp="on Jan 3, 2020" + timelineIcon={} /> } + actions={copyAction} username={ @@ -52,7 +55,7 @@ export default () => ( } - timeStamp="on Jan 4, 2020" + timestamp="on Jan 4, 2020" timelineIcon={
@@ -63,23 +66,23 @@ export default () => ( username="pancho1" type="update" event="edited case" - timeStamp="on Jan 11, 2020" - timelineIcon={} + timestamp="on Jan 11, 2020" + timelineIcon={} /> } - timeStamp="on Jan 14, 2020" - timelineIcon={}> + actions={copyAction} + timestamp="on Jan 14, 2020" + timelineIcon={}> {longBody} }> + timestamp="on Jan 21, 2020" + timelineIcon={}> {bodyUpdate}
diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 2fe3d6208a1..219b5d7483d 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -42,6 +42,9 @@ export const CommentExample = { is recommended to use an element of dimensions 40x40. The default{' '} timelineIcon is a user icon.

+

+ Use children to pass the body of the comment. +

), props: { EuiComment }, diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index 0576fd5bf5c..8011f8f87ac 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -23,6 +23,7 @@ exports[`EuiComment is rendered 1`] = `
- +
+ someuser +
+ +
+
+
+
+
+
+`; + +exports[`EuiComment props event is rendered 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ someuser +
+ commented +
+
+
+
+
+
+`; + +exports[`EuiComment props timelineIcon is rendered 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+
+ someuser +
+ +
+
+
+
+
+
+`; + +exports[`EuiComment props timestamp is rendered 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ someuser +
+ 21 days ago
- +
+ someuser +
+
`; + +exports[`EuiComment renders a body 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ someuser +
+ +
+
+
+
+

+ This is the body. +

+
+
+
+`; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 60ab310c4b7..6a73a2891f9 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -30,8 +30,12 @@ flex-wrap: wrap; } + .euiCommentEvent__headerUsername { + font-weight: $euiFontWeightSemiBold; + } + .euiCommentEvent__body { - line-height: $euiSize * 1.2; // this should be on the demo side only? + line-height: $euiSize * 1.2; } } diff --git a/src/components/comment/comment.test.tsx b/src/components/comment/comment.test.tsx index bf6631be055..346383117db 100644 --- a/src/components/comment/comment.test.tsx +++ b/src/components/comment/comment.test.tsx @@ -3,10 +3,13 @@ import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { EuiComment } from './comment'; +import { EuiAvatar } from '../avatar'; describe('EuiComment', () => { test('is rendered', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); @@ -14,10 +17,55 @@ describe('EuiComment', () => { describe('props', () => { describe('type', () => { it('is rendered', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); }); + + describe('timelineIcon', () => { + it('is rendered', () => { + const component = render( + } + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('timestamp', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('event', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + + test('renders a body', () => { + const component = render( + +

This is the body.

+ + ); + + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index a67b8716861..53130c04921 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -20,7 +20,7 @@ export const EuiComment: FunctionComponent = ({ actions, timelineIcon, type = 'regular', - timeStamp, + timestamp, ...rest }) => { const classes = classNames('euiComment', className); @@ -32,7 +32,7 @@ export const EuiComment: FunctionComponent = ({ username={username} actions={actions} event={event} - timeStamp={timeStamp} + timestamp={timestamp} type={type}> {children} diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 759a7a817ca..fc6e1be2480 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -4,19 +4,21 @@ import classNames from 'classnames'; export type EuiCommentEventProps = CommonProps & CommonProps & { - body?: ReactNode; /** - * Author of the comment. Given it is a node you can display an icon or a small avatar with it if needed. + * Author of the comment. Display a small icon or avatar with it if needed. + */ + username: ReactNode; + timestamp?: ReactNode; + /** + * Describes the event that took place */ - username?: ReactNode; - timeStamp?: ReactNode; event?: ReactNode; /** - * Use "update" when the comment is primarily showing info about actions that the user has performed (e.g. "user1 edited a case"). + * Actions the user can perform from the comment's header */ actions?: ReactNode; /** - * Actions available from the comment's header + * Use "update" when the comment is primarily showing info about actions that the user or the system has performed (e.g. "user1 edited a case"). */ type?: EuiCommentType; }; @@ -32,9 +34,8 @@ export type EuiCommentType = keyof typeof typeToClassNameMap; export const EuiCommentEvent: FunctionComponent = ({ children, className, - body, username, - timeStamp, + timestamp, type = 'regular', event, actions, @@ -47,10 +48,11 @@ export const EuiCommentEvent: FunctionComponent = ({ ); return ( -
+
- {username} {event} {timeStamp} +
{username}
+ {event} {timestamp}
{actions}
diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index 6ed20acb4e1..31eb23f12b2 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -4,6 +4,9 @@ import classNames from 'classnames'; import { EuiIcon } from '../icon'; export type EuiCommentTimelineProps = CommonProps & { + /** + * Main icon that accompanies the comment. + */ timelineIcon?: ReactNode; }; From 9e2a095b5a6e6b9b695d5776d9f70d8c60632c40 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 26 Mar 2020 12:19:56 -0700 Subject: [PATCH 10/24] mobile small improvement --- src-docs/src/views/comment/comment.tsx | 10 +++- .../__snapshots__/comment.test.tsx.snap | 46 ++++++++++++++++--- src/components/comment/comment_event.tsx | 3 +- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index 2d2cabcf157..e5a93db7128 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -26,12 +26,18 @@ export default () => ( {body} } + timelineIcon={ + + } /> someuser
- +
+
someuser
- commented +
+ commented +
+
someuser
- +
+
someuser
- 21 days ago +
+
+ 21 days ago +
someuser
- +
+
someuser
- +
+
= ({
{username}
- {event} {timestamp} +
{event}
+
{timestamp}
{actions}
From 58fc8f958a93b90f05bdb2fcbaf41cd8e044a5b2 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 26 Mar 2020 12:41:28 -0700 Subject: [PATCH 11/24] add snippet --- src-docs/src/views/comment/comment_example.js | 5 +++++ src/components/comment/_comment.scss | 4 ++-- src/components/comment/_comment_event.scss | 6 +++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 219b5d7483d..45b26310fea 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -10,6 +10,10 @@ import Comment from './comment'; const commentSource = require('!!raw-loader!./comment'); const commentHtml = renderToHtml(Comment); +const commentSnippet = ` + {body} +`; + export const CommentExample = { title: 'Comment', sections: [ @@ -48,6 +52,7 @@ export const CommentExample = {
), props: { EuiComment }, + snippet: commentSnippet, demo: , }, ], diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 466c733c06c..6b858f595b0 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -1,7 +1,7 @@ .euiComment { font-size: $euiFontSizeS; display: flex; - margin: -($euiSize * .5); + margin: -($euiSizeS); padding-bottom: $euiSize; min-height: $euiSize * 5; @@ -27,7 +27,7 @@ .euiCommentTimeline, .euiCommentEvent { flex-basis: auto; - margin: $euiSize * .5; + margin: $euiSizeS; } } diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 6a73a2891f9..cc351ed2718 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -15,6 +15,10 @@ >div { margin: $euiSizeXS; } + + .euiCommentEvent__headerTimestamp { + padding-top: $euiSizeXS * .5; + } } align-items: center; @@ -44,7 +48,7 @@ .euiCommentEvent__header { background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; - padding: $euiSizeM; + padding: $euiSizeS; display: flex; justify-content: space-between; align-items: center; From e5b1d1ca47d36fcbae1bd4460b8dc36d8a0fff92 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 26 Mar 2020 14:13:30 -0700 Subject: [PATCH 12/24] add cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c38227a9a5e..fdd6fa8e1d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Improved `EuiModal` close button position to prevent from overlapping with the title ([#3176](https://github.com/elastic/eui/pull/3176)) +- Added `EuiComment` component ([#3179](https://github.com/elastic/eui/pull/3179)) **Bug Fixes** From c6916244d6105a3d6acf94e787e7b4e2725923dd Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 30 Mar 2020 19:34:11 -0700 Subject: [PATCH 13/24] feedback part 1 --- src-docs/src/views/comment/comment.tsx | 52 ++++++++++++++----- src/components/comment/_comment.scss | 19 ++++--- src/components/comment/_comment_event.scss | 14 ++--- src/components/comment/_comment_timeline.scss | 3 +- src/components/comment/comment.tsx | 12 ++++- src/components/comment/comment_event.tsx | 10 +++- src/components/index.js | 2 +- 7 files changed, 75 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index e5a93db7128..fb51890d2f4 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -5,16 +5,44 @@ import { EuiAvatar } from '../../../../src/components/avatar'; import { EuiBadge } from '../../../../src/components/badge'; import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; import { EuiButtonIcon } from '../../../../src/components/button'; +import { EuiText } from '../../../../src/components/text'; -const body = - 'Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.'; +const body = ( + +

+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +

+ +); -const longBody = - 'This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time. Many solutions were suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole it was not the small green pieces of paper that were unhappy.'; +const longBody = ( + +

+ This planet has - or rather had - a problem, which was this: most of the + people living on it were unhappy for pretty much of the time. Many + solutions were suggested for this problem, but most of these were largely + concerned with the movements of small green pieces of paper, which is odd + because on the whole it was not the small green pieces of paper that were + unhappy. +

+ +); -const bodyUpdate = 'This type of comment can also have a body'; +const bodyUpdate = ( + +

This type of comment can also have a body

+ +); -const copyAction = ; +const copyAction = ( + +); export default () => (
@@ -22,7 +50,7 @@ export default () => ( username="janed" event="added a comment" actions={copyAction} - timestamp="on Jan 1, 2020"> + timestamp="Jan 1, 2020"> {body} ( type="update" actions={copyAction} event="pushed incident X0Z235" - timestamp="on Jan 3, 2020" + timestamp="Jan 3, 2020" timelineIcon={ ( } - timestamp="on Jan 4, 2020" + timestamp="Jan 4, 2020" timelineIcon={
@@ -72,14 +100,14 @@ export default () => ( username="pancho1" type="update" event="edited case" - timestamp="on Jan 11, 2020" + timestamp="Jan 11, 2020" timelineIcon={} /> }> {longBody} @@ -87,7 +115,7 @@ export default () => ( username="pancho1" type="update" event="edited case" - timestamp="on Jan 21, 2020" + timestamp="Jan 21, 2020" timelineIcon={}> {bodyUpdate} diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 6b858f595b0..74b22f02817 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -1,7 +1,7 @@ .euiComment { font-size: $euiFontSizeS; display: flex; - margin: -($euiSizeS); + // margin: -($euiSizeS); padding-bottom: $euiSize; min-height: $euiSize * 5; @@ -12,6 +12,7 @@ .euiCommentTimeline { position: relative; flex-grow: 0; + margin-right: $euiSize; &::before { content: ''; @@ -23,20 +24,18 @@ height: 100%; } } - - .euiCommentTimeline, - .euiCommentEvent { - flex-basis: auto; - margin: $euiSizeS; - } - } .euiComment:last-of-type { .euiCommentTimeline { &::before { - content: ''; - height: 0; + display: none; } } +} + +.euiComment--update:not(.euiComment--hasBody) { + @include euiBreakpoint('m', 'l', 'xl') { + align-items: center; + } } \ No newline at end of file diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index cc351ed2718..196c5ee3d96 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -4,15 +4,11 @@ font-size: $euiFontSizeS; overflow: hidden; - .euiCommentEvent__event { - padding-right: $euiSizeXS; - } - .euiCommentEvent__header { @include euiBreakpoint('xs', 's') { margin: -($euiSizeXS); - >div { + > div { margin: $euiSizeXS; } @@ -23,7 +19,7 @@ align-items: center; - .euiCommentEvent__headerData>div { + .euiCommentEvent__headerData > div { padding-right: $euiSizeXS; } } @@ -38,13 +34,11 @@ font-weight: $euiFontWeightSemiBold; } - .euiCommentEvent__body { - line-height: $euiSize * 1.2; - } - } .euiCommentEvent--regular { + border: $euiBorderThin; + .euiCommentEvent__header { background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss index 090124eb85a..5eda697a3cb 100644 --- a/src/components/comment/_comment_timeline.scss +++ b/src/components/comment/_comment_timeline.scss @@ -5,7 +5,6 @@ justify-content: center; align-items: center; position: relative; - background-color: $euiColorEmptyShade; } .euiCommentTimeline__contentDefault { @@ -15,7 +14,7 @@ align-items: center; overflow-x: hidden; border-radius: 50%; - background-color: $euiColorLightShade; + background-color: $euiColorLightestShade; width: $euiSizeXXL; height: $euiSizeXXL; } \ No newline at end of file diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx index 53130c04921..a2e610583b4 100644 --- a/src/components/comment/comment.tsx +++ b/src/components/comment/comment.tsx @@ -12,6 +12,11 @@ export type EuiCommentProps = EuiCommentEventProps & EuiCommentTimelineProps & CommonProps & {}; +const typeToClassNameMap = { + regular: '', + update: 'euiComment--update', +}; + export const EuiComment: FunctionComponent = ({ children, className, @@ -23,7 +28,12 @@ export const EuiComment: FunctionComponent = ({ timestamp, ...rest }) => { - const classes = classNames('euiComment', className); + const classes = classNames( + 'euiComment', + typeToClassNameMap[type], + { 'euiComment--hasBody': children }, + className + ); return (
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index a8160b1106d..b2cff584876 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; +import { EuiI18n } from '../i18n'; export type EuiCommentEventProps = CommonProps & CommonProps & { @@ -53,7 +54,14 @@ export const EuiCommentEvent: FunctionComponent = ({
{username}
{event}
-
{timestamp}
+ {timestamp ? ( +
+ {' '} + +
+ ) : ( + undefined + )}
{actions}
diff --git a/src/components/index.js b/src/components/index.js index a00e4ce2fd8..567660a9df7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -47,7 +47,7 @@ export { export { EuiComboBox } from './combo_box'; -export { EuiComment, EuiCommentEvent } from './comment'; +export { EuiComment } from './comment'; export { EuiContext, EuiI18nConsumer } from './context'; From 89f1fefb09bcd76c9d0120e4d45fe58f46f70acc Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 1 Apr 2020 21:42:55 -0700 Subject: [PATCH 14/24] feedback part 2 --- src-docs/src/views/comment/comment.tsx | 34 +--- .../src/views/comment/comment_actions.tsx | 108 ++++++++++ src-docs/src/views/comment/comment_example.js | 186 ++++++++++++++++-- .../views/comment/comment_timelineIcons.tsx | 76 +++++++ src-docs/src/views/comment/comment_types.tsx | 55 ++++++ .../__snapshots__/comment.test.tsx.snap | 71 +++---- src/components/comment/_comment.scss | 11 +- src/components/comment/_comment_event.scss | 5 +- src/components/comment/_comment_timeline.scss | 17 +- src/components/comment/comment.tsx | 2 +- src/components/comment/comment_event.tsx | 8 +- src/components/comment/comment_timeline.tsx | 45 ++++- 12 files changed, 502 insertions(+), 116 deletions(-) create mode 100644 src-docs/src/views/comment/comment_actions.tsx create mode 100644 src-docs/src/views/comment/comment_timelineIcons.tsx create mode 100644 src-docs/src/views/comment/comment_types.tsx diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index fb51890d2f4..7cf8fd35442 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { EuiComment } from '../../../../src/components/comment'; -import { EuiIcon } from '../../../../src/components/icon'; import { EuiAvatar } from '../../../../src/components/avatar'; import { EuiBadge } from '../../../../src/components/badge'; import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; @@ -29,12 +28,6 @@ const longBody = ( ); -const bodyUpdate = ( - -

This type of comment can also have a body

- -); - const copyAction = ( ( /> } /> + ( } - timestamp="Jan 4, 2020" - timelineIcon={ -
- -
- } - /> - } + timelineIcon="tag" /> ( timelineIcon={}> {longBody} - }> - {bodyUpdate} -
); diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx new file mode 100644 index 00000000000..901d35d7cd7 --- /dev/null +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -0,0 +1,108 @@ +import React, { Component, HTMLAttributes } from 'react'; +import { EuiComment } from '../../../../src/components/comment'; +import { EuiButtonIcon } from '../../../../src/components/button'; +import { EuiText } from '../../../../src/components/text'; +import { EuiPopover } from '../../../../src/components/popover'; +import { + EuiContextMenuPanel, + EuiContextMenuItem, +} from '../../../../src/components/context_menu'; +import { CommonProps } from '../../../../src/components/common'; + +const body = ( + +

+ This comment has custom actions available. See the upper right corner. +

+ +); + +export type CustomActionsProps = HTMLAttributes & + CommonProps & {}; + +interface CustomActionsState { + isPopoverOpen: boolean; +} + +export default class extends Component< + // export class CustomActions extends Component< + CustomActionsProps, + CustomActionsState +> { + state = { + isPopoverOpen: false, + }; + + togglePopover = () => { + this.setState(prevState => ({ + isPopoverOpen: !prevState.isPopoverOpen, + })); + }; + + closePopover = () => { + this.setState({ + isPopoverOpen: false, + }); + }; + + render() { + const { isPopoverOpen } = this.state; + const customActions = ( + this.togglePopover()} + /> + } + isOpen={isPopoverOpen} + closePopover={() => this.closePopover()} + panelPaddingSize="none" + anchorPosition="leftCenter"> + { + this.closePopover(); + }}> + Edit + , + { + this.closePopover(); + }}> + Share + , + { + this.closePopover(); + }}> + Copy + , + ]} + /> + + ); + return ( +
+ + {body} + +
+ ); + } +} diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 45b26310fea..7b2fe9c028d 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -10,10 +10,56 @@ import Comment from './comment'; const commentSource = require('!!raw-loader!./comment'); const commentHtml = renderToHtml(Comment); +import CommentTypes from './comment_types'; +const commentTypesSource = require('!!raw-loader!./comment_types'); +const commentTypesHtml = renderToHtml(CommentTypes); + +import CommentTimelineIcons from './comment_timelineIcons'; +const commentTimelineIconsSource = require('!!raw-loader!./comment_timelineIcons'); +const commentTimelineIconsHtml = renderToHtml(CommentTimelineIcons); + +import CommentActions from './comment_actions'; +const commentActionsSource = require('!!raw-loader!./comment_actions'); +const commentActionsHtml = renderToHtml(CommentActions); + const commentSnippet = ` {body} `; +const commentTypesSnippet = [ + ` + {body} + +`, + ` +`, + ` + {body} + +`, +]; + +const commentTimelineIconsSnippet = [ + ` + {body} + +`, + ` +`, + ` + } username="janed"> + {body} + +`, +]; + +const commentActionsSnippet = ` + {body} +`; + export const CommentExample = { title: 'Comment', sections: [ @@ -31,29 +77,139 @@ export const CommentExample = { text: (

- Use EuiComment for displaying comment threads - with EuiCommentList. There are two different - types of comments regular and{' '} - update available through the{' '} - type prop. Use comments of type{' '} - update to display comments that generally do not - have a body and are logging actions that either the user or the - system has performed (e.g. “jsmith edited a case” or - “kibanamachine added the backport missing label”). + Use EuiComment for displaying comment threads with{' '} + EuiCommentList. Each EuiComment{' '} + has a header with the following parts: username,{' '} + event, timeStamp and{' '} + actions.

+
    +
  • + username can display a small avatar or icon + next to it. +
    • +
  • + timeStamp receives a date in the format of the + consumer's choice. +
    • +
  • + There are two different types of comments, + regular and update available + through the type prop.{' '} +
    • +
  • + timelineIcons has default icons and styling for + both types of comments. It can also be customized as needed. +
    • +
  • + Use children to pass the body of the comment. +
    • +
+
+ ), + props: { EuiComment }, + snippet: commentSnippet, + demo: , + }, + { + title: 'Comment types', + source: [ + { + type: GuideSectionTypes.JS, + code: commentTypesSource, + }, + { + type: GuideSectionTypes.HTML, + code: commentTypesHtml, + }, + ], + text: ( +

- The timelineIcon can be customized as needed. It - is recommended to use an element of dimensions 40x40. The default{' '} - timelineIcon is a user icon. + Use the default type of comment,{' '} + regular to display comments that a user has + written.

- Use children to pass the body of the comment. + Use comments of type update to display comments + that generally do not have a body and are logging actions that + either the user or the system has performed (e.g. “jsmith + edited a case” or “kibanamachine added the review + label”).

), props: { EuiComment }, - snippet: commentSnippet, - demo: , + snippet: commentTypesSnippet, + demo: , + }, + { + title: 'Custom timelineIcon', + source: [ + { + type: GuideSectionTypes.JS, + code: commentTimelineIconsSource, + }, + { + type: GuideSectionTypes.HTML, + code: commentTimelineIconsHtml, + }, + ], + text: ( +
+

+ There are three ways to use timelineIcon: +

+
    +
  1. + Use the defaults a) a user icon inside a 40x40 container for + comments of type + regular and b) a dot icon inside a 24x24 + container for comments of type update. +
    2. +
  2. + Pass a string with any of the icon types that{' '} + EuiIcon supports and it will receive the default + styling. +
    3. +
  3. + Pass any other element (e.g. EuiAvatar). It is + recommended not to use an element larger that 40x40. +
    4. +
+
+ ), + props: { EuiComment }, + snippet: commentTimelineIconsSnippet, + demo: , + }, + { + title: 'Actions', + source: [ + { + type: GuideSectionTypes.JS, + code: commentActionsSource, + }, + { + type: GuideSectionTypes.HTML, + code: commentActionsHtml, + }, + ], + text: ( +
+

+ To allow the user to perform actions from within a comment, use the{' '} + actionsprop. actions can be + any element. For example, for something simple you can use{' '} + EuiButtonIcon and for something more complex you + can combine that with EuiPopover and{' '} + EuiContextMenu. +

+
+ ), + props: { EuiComment }, + snippet: commentActionsSnippet, + demo: , }, ], }; diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx new file mode 100644 index 00000000000..996f5214266 --- /dev/null +++ b/src-docs/src/views/comment/comment_timelineIcons.tsx @@ -0,0 +1,76 @@ +import React, { Fragment } from 'react'; +import { EuiComment } from '../../../../src/components/comment'; +import { EuiText } from '../../../../src/components/text'; +import { EuiAvatar } from '../../../../src/components/avatar'; +import { EuiCode } from '../../../../src/components/code'; +import { EuiSpacer } from '../../../../src/components/spacer'; + +const defaultBody = ( + +

+ These two comments are using the default timelineIcons. +

+ +); + +const iconStringBody = ( + +

+ This comment passed the string “tag” to the{' '} + timelineIcon prop. +

+ +); + +const customIconBody = ( + +

+ This comment has a custom element as its timelineIcon. +

+ +); + +export default () => ( + +
+ + {defaultBody} + + +
+ +
+ + {iconStringBody} + +
+ +
+ + }> + {customIconBody} + +
+ +); diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx new file mode 100644 index 00000000000..3a27eb72bc6 --- /dev/null +++ b/src-docs/src/views/comment/comment_types.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { EuiComment } from '../../../../src/components/comment'; +import { EuiButtonIcon } from '../../../../src/components/button'; +import { EuiText } from '../../../../src/components/text'; +import { EuiCode } from '../../../../src/components/code'; + +const body = ( + +

+ This is the body of a comment of type regular +

+ +); + +const bodyUpdate = ( + +

+ Comments of type update can also have a body +

+ +); + +const copyAction = ( + +); + +export default () => ( +
+ + {body} + + + + {bodyUpdate} + +
+); diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index a73db9351f0..06fdaf1d2d3 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -13,7 +13,7 @@ exports[`EuiComment is rendered 1`] = ` class="euiCommentTimeline__content" >
-
-
`; @@ -65,7 +59,7 @@ exports[`EuiComment props event is rendered 1`] = ` class="euiCommentTimeline__content" >
commented
-
-
`; @@ -119,16 +107,20 @@ exports[`EuiComment props timelineIcon is rendered 1`] = ` class="euiCommentTimeline__content" >
- + +
@@ -150,17 +142,11 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
-
-
`; @@ -176,7 +162,7 @@ exports[`EuiComment props timestamp is rendered 1`] = ` class="euiCommentTimeline__content" >
- 21 days ago + on +
-
`; exports[`EuiComment props type is rendered 1`] = `
@@ -256,24 +242,18 @@ exports[`EuiComment props type is rendered 1`] = `
-
-
`; exports[`EuiComment renders a body 1`] = `
-
= ({ return (
- + = ({
{event}
{timestamp ? (
- {' '} + {' '}
) : ( @@ -65,7 +65,11 @@ export const EuiCommentEvent: FunctionComponent = ({
{actions}
-
{children}
+ {children ? ( +
{children}
+ ) : ( + undefined + )}
); }; diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index 31eb23f12b2..e98d446594e 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, ReactNode } from 'react'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; import { EuiIcon } from '../icon'; @@ -7,26 +7,53 @@ export type EuiCommentTimelineProps = CommonProps & { /** * Main icon that accompanies the comment. */ - timelineIcon?: ReactNode; + timelineIcon?: ReactNode | string; + type?: EuiCommentType; }; +const typeToClassNameMap = { + regular: 'euiCommentTimeline--regular', + update: 'euiCommentTimeline--update', +}; + +export const TYPES = keysOf(typeToClassNameMap); +export type EuiCommentType = keyof typeof typeToClassNameMap; + export const EuiCommentTimeline: FunctionComponent = ({ className, timelineIcon, + type = 'regular', ...rest }) => { const classes = classNames('euiCommentTimeline', className); + const iconClasses = classNames( + { + euiCommentTimeline__default: + !timelineIcon || typeof timelineIcon === 'string', + }, + typeToClassNameMap[type] + ); + + let iconRender; + if (typeof timelineIcon === 'string') { + iconRender = ( + + ); + } else if (timelineIcon) { + iconRender = timelineIcon; + } else { + iconRender = ( + + ); + } return (
- {timelineIcon ? ( - timelineIcon - ) : ( -
- -
- )} +
{iconRender}
); From c4fbca46b82c086e9bad34a32ddc831ef3f7f4c2 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 1 Apr 2020 22:02:02 -0700 Subject: [PATCH 15/24] remove commentList for now --- .../src/views/comment/comment_actions.tsx | 7 +------ .../__snapshots__/comment.test.tsx.snap | 6 ------ .../__snapshots__/comment_list.test.tsx.snap | 9 --------- src/components/comment/_comment_list.scss | 0 src/components/comment/_index.scss | 1 - src/components/comment/comment_event.tsx | 2 +- src/components/comment/comment_list.test.tsx | 13 ------------ src/components/comment/comment_list.tsx | 20 ------------------- src/components/comment/index.ts | 2 -- 9 files changed, 2 insertions(+), 58 deletions(-) delete mode 100644 src/components/comment/__snapshots__/comment_list.test.tsx.snap delete mode 100644 src/components/comment/_comment_list.scss delete mode 100644 src/components/comment/comment_list.test.tsx delete mode 100644 src/components/comment/comment_list.tsx diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx index 901d35d7cd7..5ebf1cb178d 100644 --- a/src-docs/src/views/comment/comment_actions.tsx +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -24,11 +24,7 @@ interface CustomActionsState { isPopoverOpen: boolean; } -export default class extends Component< - // export class CustomActions extends Component< - CustomActionsProps, - CustomActionsState -> { +export default class extends Component { state = { isPopoverOpen: false, }; @@ -49,7 +45,6 @@ export default class extends Component< const { isPopoverOpen } = this.state; const customActions = (
-`; diff --git a/src/components/comment/_comment_list.scss b/src/components/comment/_comment_list.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss index 1981a314a13..78e82990cb1 100644 --- a/src/components/comment/_index.scss +++ b/src/components/comment/_index.scss @@ -1,4 +1,3 @@ @import 'comment'; @import 'comment_event'; @import 'comment_timeline'; -@import 'comment_list'; diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 960ff997d25..c23ac8104fc 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -49,7 +49,7 @@ export const EuiCommentEvent: FunctionComponent = ({ ); return ( -
+
{username}
diff --git a/src/components/comment/comment_list.test.tsx b/src/components/comment/comment_list.test.tsx deleted file mode 100644 index 48d29603692..00000000000 --- a/src/components/comment/comment_list.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiCommentList } from './comment_list'; - -describe('EuiCommentList', () => { - test('is rendered', () => { - const component = render(); - - expect(component).toMatchSnapshot(); - }); -}); diff --git a/src/components/comment/comment_list.tsx b/src/components/comment/comment_list.tsx deleted file mode 100644 index c665bf82c88..00000000000 --- a/src/components/comment/comment_list.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { HTMLAttributes, FunctionComponent } from 'react'; -import { CommonProps } from '../common'; -import classNames from 'classnames'; - -export type EuiCommentListProps = HTMLAttributes & - CommonProps & {}; - -export const EuiCommentList: FunctionComponent = ({ - children, - className, - ...rest -}) => { - const classes = classNames('euiCommentList', className); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts index dbc66fa8ab3..5a1c059f78b 100644 --- a/src/components/comment/index.ts +++ b/src/components/comment/index.ts @@ -3,5 +3,3 @@ export { EuiComment } from './comment'; export { EuiCommentEvent } from './comment_event'; export { EuiCommentTimeline } from './comment_timeline'; - -export { EuiCommentList } from './comment_list'; From ea74210f52d8650aa041eaf96da837df52feadd0 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 2 Apr 2020 14:18:45 -0700 Subject: [PATCH 16/24] header in regular has min-height and fixed separator in mobile --- src/components/comment/_comment.scss | 4 ++-- src/components/comment/_comment_event.scss | 7 ++++++- src/components/comment/comment_timeline.tsx | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss index 72e5bc346b4..7b94de4fb61 100644 --- a/src/components/comment/_comment.scss +++ b/src/components/comment/_comment.scss @@ -17,10 +17,10 @@ content: ''; position: absolute; left: $euiSizeXXL / 2; - top: 0; + top: $euiSizeL; width: $euiSizeXS / 2; background-color: $euiColorLightShade; - height: calc(100% + #{$euiSizeXXL}); + height: calc(100% + #{$euiSizeL}); } } } diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 457b899c4f3..b5efcce63a4 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -39,9 +39,14 @@ border: $euiBorderThin; .euiCommentEvent__header { + @include euiBreakpoint('xs', 's') { + padding: $euiSizeS; + } + + min-height: $euiSizeXXL; background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; - padding: $euiSizeS; + padding: 0 $euiSizeS; display: flex; justify-content: space-between; align-items: center; diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index e98d446594e..a252373c01f 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -37,7 +37,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ let iconRender; if (typeof timelineIcon === 'string') { iconRender = ( - + ); } else if (timelineIcon) { iconRender = timelineIcon; From 56855b348fae922dc28e255d96eb864b5a4230c7 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Fri, 3 Apr 2020 12:40:46 -0700 Subject: [PATCH 17/24] documentation feedback --- src-docs/src/views/comment/comment_example.js | 46 ++++------- .../views/comment/comment_timelineIcons.tsx | 76 +++++++++---------- src/components/comment/comment_event.tsx | 5 +- src/components/comment/comment_timeline.tsx | 2 +- 4 files changed, 55 insertions(+), 74 deletions(-) diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 7b2fe9c028d..783db4338a5 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -79,32 +79,13 @@ export const CommentExample = {

Use EuiComment for displaying comment threads with{' '} EuiCommentList. Each EuiComment{' '} - has a header with the following parts: username,{' '} - event, timeStamp and{' '} - actions. + has two parts: a timelineIcon on the left and + content on the right. The timelineIcon provides a + visual indication of the type of comment it is. + For example, it can be an icon that represents what action was + performed or it can be a user avatar. The content has a header with + all the relevant metadata and a body.

-
    -
  • - username can display a small avatar or icon - next to it. -
    • -
  • - timeStamp receives a date in the format of the - consumer's choice. -
    • -
  • - There are two different types of comments, - regular and update available - through the type prop.{' '} -
    • -
  • - timelineIcons has default icons and styling for - both types of comments. It can also be customized as needed. -
    • -
  • - Use children to pass the body of the comment. -
    • -
), props: { EuiComment }, @@ -198,11 +179,16 @@ export const CommentExample = { text: (

- To allow the user to perform actions from within a comment, use the{' '} - actionsprop. actions can be - any element. For example, for something simple you can use{' '} - EuiButtonIcon and for something more complex you - can combine that with EuiPopover and{' '} + There are scenarios where you might want to allow the user to + perform actions related to each comment. Some + common actions include: editing, deleting, + sharing and copying. To add custom actions to a + comment, use the actions + prop. These will be placed to the right of the metadata in the + comment's header. You can use any element to display{' '} + actions. For example, for something simple you + can use EuiButtonIcon and for something more + complex you can combine that with EuiPopover and{' '} EuiContextMenu.

diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx index 996f5214266..5f433def31b 100644 --- a/src-docs/src/views/comment/comment_timelineIcons.tsx +++ b/src-docs/src/views/comment/comment_timelineIcons.tsx @@ -3,12 +3,12 @@ import { EuiComment } from '../../../../src/components/comment'; import { EuiText } from '../../../../src/components/text'; import { EuiAvatar } from '../../../../src/components/avatar'; import { EuiCode } from '../../../../src/components/code'; -import { EuiSpacer } from '../../../../src/components/spacer'; const defaultBody = (

- These two comments are using the default timelineIcons. + This comment and the one below are using the default{' '} + timelineIcons.

); @@ -32,45 +32,37 @@ const customIconBody = ( export default () => ( -
- - {defaultBody} - - -
- -
- - {iconStringBody} - -
- -
- - }> - {customIconBody} - -
+ + {defaultBody} + + + + {iconStringBody} + + + }> + {customIconBody} + ); diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index c23ac8104fc..4ad3b31751e 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -9,13 +9,16 @@ export type EuiCommentEventProps = CommonProps & * Author of the comment. Display a small icon or avatar with it if needed. */ username: ReactNode; + /** + * Time of occurrence of the event. Its format is set on the consumer's side + */ timestamp?: ReactNode; /** * Describes the event that took place */ event?: ReactNode; /** - * Actions the user can perform from the comment's header + * Custom actions that the user can perform from the comment's header */ actions?: ReactNode; /** diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index a252373c01f..f0a5805cb17 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -5,7 +5,7 @@ import { EuiIcon } from '../icon'; export type EuiCommentTimelineProps = CommonProps & { /** - * Main icon that accompanies the comment. + * Main icon that accompanies the comment. There's default icons for both types of comment, user icon for regular comments and dot icon for update comments. It also accepts any type supported by EuiIcon or any other node. */ timelineIcon?: ReactNode | string; type?: EuiCommentType; From 91eb5fb14642239af85810d34c22806b0114e48c Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 5 Apr 2020 23:15:33 -0700 Subject: [PATCH 18/24] more feedback and new tests --- src-docs/src/views/comment/comment_example.js | 57 ++++++++++++------- .../views/comment/comment_timelineIcons.tsx | 2 +- src-docs/src/views/comment/comment_types.tsx | 11 ---- .../__snapshots__/comment.test.tsx.snap | 30 ++-------- .../__snapshots__/comment_event.test.tsx.snap | 26 +++++++++ .../comment_timeline.test.tsx.snap | 21 +++++++ src/components/comment/_comment_event.scss | 1 + src/components/comment/_comment_timeline.scss | 6 +- src/components/comment/comment_event.test.tsx | 15 +++++ src/components/comment/comment_event.tsx | 6 +- .../comment/comment_timeline.test.tsx | 13 +++++ src/components/comment/comment_timeline.tsx | 8 +-- 12 files changed, 131 insertions(+), 65 deletions(-) create mode 100644 src/components/comment/__snapshots__/comment_event.test.tsx.snap create mode 100644 src/components/comment/__snapshots__/comment_timeline.test.tsx.snap create mode 100644 src/components/comment/comment_event.test.tsx create mode 100644 src/components/comment/comment_timeline.test.tsx diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 783db4338a5..43619aee12e 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -1,5 +1,7 @@ import React from 'react'; +import { Link } from 'react-router'; + import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; @@ -49,6 +51,7 @@ const commentTimelineIconsSnippet = [ ` } username="janed"> {body} @@ -77,14 +80,14 @@ export const CommentExample = { text: (

- Use EuiComment for displaying comment threads with{' '} - EuiCommentList. Each EuiComment{' '} - has two parts: a timelineIcon on the left and - content on the right. The timelineIcon provides a - visual indication of the type of comment it is. - For example, it can be an icon that represents what action was - performed or it can be a user avatar. The content has a header with - all the relevant metadata and a body. + Use EuiComment to display comments. Each{' '} + EuiComment has two parts: a{' '} + timelineIcon on the left and content on the + right. The timelineIcon provides a visual + indication of the type of comment it is. For + example, it can be an icon that represents what action was performed + or it can be a user avatar. The content has a header with all the + relevant metadata and a body.

), @@ -107,12 +110,12 @@ export const CommentExample = { text: (

- Use the default type of comment,{' '} - regular to display comments that a user has + The default type of comment is + regular and displays a comment that a user has written.

- Use comments of type update to display comments + Change the type to update to display comments that generally do not have a body and are logging actions that either the user or the system has performed (e.g. “jsmith edited a case” or “kibanamachine added the review @@ -125,7 +128,7 @@ export const CommentExample = { demo: , }, { - title: 'Custom timelineIcon', + title: 'Custom timeline icon', source: [ { type: GuideSectionTypes.JS, @@ -143,10 +146,9 @@ export const CommentExample = {

  1. - Use the defaults a) a user icon inside a 40x40 container for - comments of type - regular and b) a dot icon inside a 24x24 - container for comments of type update. + Use the defaults; a user icon inside a large container for + regular comments; or a dot icon inside a small + container for update comments.
  2. Pass a string with any of the icon types that{' '} @@ -154,8 +156,11 @@ export const CommentExample = { styling.
  3. - Pass any other element (e.g. EuiAvatar). It is - recommended not to use an element larger that 40x40. + Pass any other element (e.g.{' '} + + EuiAvatar + + ). It is recommended not to use an element larger that 40x40.
@@ -187,9 +192,19 @@ export const CommentExample = { prop. These will be placed to the right of the metadata in the comment's header. You can use any element to display{' '} actions. For example, for something simple you - can use EuiButtonIcon and for something more - complex you can combine that with EuiPopover and{' '} - EuiContextMenu. + can use{' '} + + EuiButtonIcon + {' '} + and for something more complex you can combine that with{' '} + + EuiPopover + {' '} + and{' '} + + EuiContextMenu + + .

), diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx index 5f433def31b..99ce2e0c4e6 100644 --- a/src-docs/src/views/comment/comment_timelineIcons.tsx +++ b/src-docs/src/views/comment/comment_timelineIcons.tsx @@ -8,7 +8,7 @@ const defaultBody = (

This comment and the one below are using the default{' '} - timelineIcons. + timelineIcon.

); diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index 3a27eb72bc6..c8bd4721b15 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { EuiComment } from '../../../../src/components/comment'; -import { EuiButtonIcon } from '../../../../src/components/button'; import { EuiText } from '../../../../src/components/text'; import { EuiCode } from '../../../../src/components/code'; @@ -20,21 +19,11 @@ const bodyUpdate = ( ); -const copyAction = ( - -); - export default () => (
{body} diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index 364d9dade7f..aadec40c48c 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -13,7 +13,7 @@ exports[`EuiComment is rendered 1`] = ` class="euiCommentTimeline__content" >
-
@@ -58,7 +55,7 @@ exports[`EuiComment props event is rendered 1`] = ` class="euiCommentTimeline__content" >
-
@@ -105,7 +99,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = ` class="euiCommentTimeline__content" >
-
@@ -159,7 +150,7 @@ exports[`EuiComment props timestamp is rendered 1`] = ` class="euiCommentTimeline__content" >
-
@@ -212,7 +200,7 @@ exports[`EuiComment props type is rendered 1`] = ` class="euiCommentTimeline__content" >
-
@@ -257,7 +242,7 @@ exports[`EuiComment renders a body 1`] = ` class="euiCommentTimeline__content" >
-
+
+
+
+ someuser +
+
+
+
+
+`; diff --git a/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap new file mode 100644 index 00000000000..a3e0c8c0efc --- /dev/null +++ b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCommentTimeline is rendered 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index b5efcce63a4..97fa5c64aaa 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -44,6 +44,7 @@ } min-height: $euiSizeXXL; + height: $euiSize; // vertical centering stops working in IE when there's a min-height and not a height. background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; padding: 0 $euiSizeS; diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss index 4f87738c3e6..18ea3d40acf 100644 --- a/src/components/comment/_comment_timeline.scss +++ b/src/components/comment/_comment_timeline.scss @@ -6,7 +6,7 @@ position: relative; } -.euiCommentTimeline__default { +.euiCommentTimeline__icon--default { flex-shrink: 0; display: flex; justify-content: center; @@ -15,12 +15,12 @@ border-radius: 50%; background-color: $euiColorLightestShade; - &.euiCommentTimeline--regular { + &.euiCommentTimeline__icon--regular { width: $euiSizeXXL; height: $euiSizeXXL; } - &.euiCommentTimeline--update { + &.euiCommentTimeline__icon--update { width: $euiSizeL; height: $euiSizeL; } diff --git a/src/components/comment/comment_event.test.tsx b/src/components/comment/comment_event.test.tsx new file mode 100644 index 00000000000..b13c2a28ad8 --- /dev/null +++ b/src/components/comment/comment_event.test.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCommentEvent } from './comment_event'; + +describe('EuiCommentEvent', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 4ad3b31751e..9bfaedd80ef 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -66,7 +66,11 @@ export const EuiCommentEvent: FunctionComponent = ({ undefined )}
-
{actions}
+ {actions ? ( +
{actions}
+ ) : ( + undefined + )}
{children ? (
{children}
diff --git a/src/components/comment/comment_timeline.test.tsx b/src/components/comment/comment_timeline.test.tsx new file mode 100644 index 00000000000..0222b3b4945 --- /dev/null +++ b/src/components/comment/comment_timeline.test.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCommentTimeline } from './comment_timeline'; + +describe('EuiCommentTimeline', () => { + test('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index f0a5805cb17..cbf58138788 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -5,15 +5,15 @@ import { EuiIcon } from '../icon'; export type EuiCommentTimelineProps = CommonProps & { /** - * Main icon that accompanies the comment. There's default icons for both types of comment, user icon for regular comments and dot icon for update comments. It also accepts any type supported by EuiIcon or any other node. + * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. */ timelineIcon?: ReactNode | string; type?: EuiCommentType; }; const typeToClassNameMap = { - regular: 'euiCommentTimeline--regular', - update: 'euiCommentTimeline--update', + regular: 'euiCommentTimeline__icon--regular', + update: 'euiCommentTimeline__icon--update', }; export const TYPES = keysOf(typeToClassNameMap); @@ -28,7 +28,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ const classes = classNames('euiCommentTimeline', className); const iconClasses = classNames( { - euiCommentTimeline__default: + 'euiCommentTimeline__icon--default': !timelineIcon || typeof timelineIcon === 'string', }, typeToClassNameMap[type] From 6cb33b15a529e95afd40e235788407e81fde8532 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 6 Apr 2020 11:10:35 -0700 Subject: [PATCH 19/24] more tests and more IE fixes --- .../__snapshots__/comment_event.test.tsx.snap | 79 +++++++++++++++++++ .../comment_timeline.test.tsx.snap | 45 +++++++++++ src/components/comment/_comment_event.scss | 21 ++++- src/components/comment/comment_event.test.tsx | 32 ++++++++ .../comment/comment_timeline.test.tsx | 23 ++++++ 5 files changed, 199 insertions(+), 1 deletion(-) diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap index 5eaaf9a133e..ef8230a37df 100644 --- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap @@ -24,3 +24,82 @@ exports[`EuiCommentEvent is rendered 1`] = `
`; + +exports[`EuiCommentEvent props event is rendered 1`] = ` +
+
+
+
+ someuser +
+
+ commented +
+
+
+
+`; + +exports[`EuiCommentEvent props timestamp is rendered 1`] = ` +
+
+
+
+ someuser +
+
+
+ on + +
+
+
+
+`; + +exports[`EuiCommentEvent props type is rendered 1`] = ` +
+
+
+
+ someuser +
+
+
+
+
+`; diff --git a/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap index a3e0c8c0efc..7a58b92b90c 100644 --- a/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap @@ -19,3 +19,48 @@ exports[`EuiCommentTimeline is rendered 1`] = `
`; + +exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = ` +
+
+
+
+ +
+
+
+
+`; + +exports[`EuiCommentTimeline props type is rendered 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 97fa5c64aaa..934d0d4eeb9 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -41,16 +41,35 @@ .euiCommentEvent__header { @include euiBreakpoint('xs', 's') { padding: $euiSizeS; + + /** + * Fix for IE when using align-items:center in an item that has min-height + (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) + */ + &::after { + content: ''; + min-height: inherit; + font-size: 0; + display: block; + } + } + + /** + * Fix for IE when using align-items:center in an item that has min-height + (https://github.com/philipwalton/flexbugs/issues/231#issue-245848315) + */ + @include euiBreakpoint('m', 'l', 'xl') { + height: $euiSize; } min-height: $euiSizeXXL; - height: $euiSize; // vertical centering stops working in IE when there's a min-height and not a height. background-color: $euiColorLightestShade; border-bottom: $euiBorderThin; padding: 0 $euiSizeS; display: flex; justify-content: space-between; align-items: center; + } .euiCommentEvent__body { diff --git a/src/components/comment/comment_event.test.tsx b/src/components/comment/comment_event.test.tsx index b13c2a28ad8..96dd8f7dca0 100644 --- a/src/components/comment/comment_event.test.tsx +++ b/src/components/comment/comment_event.test.tsx @@ -12,4 +12,36 @@ describe('EuiCommentEvent', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('type', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('timestamp', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('event', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); diff --git a/src/components/comment/comment_timeline.test.tsx b/src/components/comment/comment_timeline.test.tsx index 0222b3b4945..0d508c16452 100644 --- a/src/components/comment/comment_timeline.test.tsx +++ b/src/components/comment/comment_timeline.test.tsx @@ -3,6 +3,7 @@ import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { EuiCommentTimeline } from './comment_timeline'; +import { EuiAvatar } from '../avatar'; describe('EuiCommentTimeline', () => { test('is rendered', () => { @@ -10,4 +11,26 @@ describe('EuiCommentTimeline', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('type', () => { + it('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('timelineIcon', () => { + it('is rendered', () => { + const component = render( + } + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); }); From 0e831b0b586377f717340adf62562a0f407237cf Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Apr 2020 16:39:49 -0400 Subject: [PATCH 20/24] Tidying CSS a bit and fixing IE and responsiveness --- src/components/comment/_comment_event.scss | 83 +++++++++------------- 1 file changed, 32 insertions(+), 51 deletions(-) diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss index 934d0d4eeb9..e6ccfd851d8 100644 --- a/src/components/comment/_comment_event.scss +++ b/src/components/comment/_comment_event.scss @@ -2,74 +2,56 @@ .euiCommentEvent { overflow: hidden; +} - .euiCommentEvent__header { - @include euiBreakpoint('xs', 's') { - margin: -($euiSizeXS); - - > div { - margin: $euiSizeXS; - } - - .euiCommentEvent__headerTimestamp { - padding-top: $euiSizeXS * .5; - } - } - - align-items: center; - - .euiCommentEvent__headerData > div { - padding-right: $euiSizeXS; - } - } +.euiCommentEvent__header { + line-height: $euiLineHeight; + display: flex; + align-items: center; +} - .euiCommentEvent__headerData { - align-items: center; - display: flex; - flex-wrap: wrap; - } +.euiCommentEvent__headerData { + align-items: center; + display: flex; + flex-wrap: wrap; - .euiCommentEvent__headerUsername { - font-weight: $euiFontWeightSemiBold; + > div { + padding-right: $euiSizeXS; } +} +.euiCommentEvent__headerUsername { + font-weight: $euiFontWeightSemiBold; } .euiCommentEvent--regular { border: $euiBorderThin; .euiCommentEvent__header { - @include euiBreakpoint('xs', 's') { - padding: $euiSizeS; + min-height: $euiSizeXXL; + background-color: $euiColorLightestShade; + border-bottom: $euiBorderThin; + padding: $euiSizeXS $euiSizeS; - /** - * Fix for IE when using align-items:center in an item that has min-height - (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) - */ + /** + * Fix for IE when using align-items:center in an item that has min-height + (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042) + */ + // sass-lint:disable-block mixins-before-declarations + @include internetExplorerOnly { &::after { content: ''; - min-height: inherit; + // Calculates the minimum height based on full header's min-height minus the vertical padding + min-height: $euiSizeXXL - $euiSizeS; font-size: 0; display: block; } } + } - /** - * Fix for IE when using align-items:center in an item that has min-height - (https://github.com/philipwalton/flexbugs/issues/231#issue-245848315) - */ - @include euiBreakpoint('m', 'l', 'xl') { - height: $euiSize; - } - - min-height: $euiSizeXXL; - background-color: $euiColorLightestShade; - border-bottom: $euiBorderThin; - padding: 0 $euiSizeS; - display: flex; - justify-content: space-between; - align-items: center; - + .euiCommentEvent__headerData { + // Push the actions far right + flex-grow: 1; } .euiCommentEvent__body { @@ -79,7 +61,6 @@ .euiCommentEvent--update { .euiCommentEvent__header { - display: flex; justify-content: flex-start; padding: $euiSizeXS 0; } @@ -91,4 +72,4 @@ .euiCommentEvent__body { padding-top: $euiSizeXS; } -} \ No newline at end of file +} From c96b3cc9185ed31fe8ba58049f860c2489c32107 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 7 Apr 2020 14:57:27 -0700 Subject: [PATCH 21/24] greg's feedback --- src-docs/src/views/comment/comment.tsx | 10 +++++----- src-docs/src/views/comment/comment_example.js | 2 +- src-docs/src/views/comment/comment_types.tsx | 9 +++------ .../__snapshots__/comment.test.tsx.snap | 1 - .../__snapshots__/comment_event.test.tsx.snap | 1 - src/components/comment/comment_event.tsx | 6 ++---- src/components/comment/comment_timeline.tsx | 19 ++++++++++--------- src/components/comment/index.ts | 4 ++-- 8 files changed, 23 insertions(+), 29 deletions(-) diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index 7cf8fd35442..e4260300150 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -43,7 +43,7 @@ export default () => ( username="janed" event="added a comment" actions={copyAction} - timestamp="Jan 1, 2020"> + timestamp="on Jan 1, 2020"> {body} ( type="update" actions={copyAction} event="pushed incident X0Z235" - timestamp="Jan 3, 2020" + timestamp="on Jan 3, 2020" timelineIcon={ ( username="pancho1" type="update" event="edited case" - timestamp="Jan 9, 2020" + timestamp="on Jan 9, 2020" /> ( } - timestamp="Jan 11, 2020" + timestamp="on Jan 11, 2020" timelineIcon="tag" /> }> {longBody} diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index 43619aee12e..c112a2b91cd 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -160,7 +160,7 @@ export const CommentExample = { EuiAvatar - ). It is recommended not to use an element larger that 40x40. + ). It is recommended not to use an element larger than 40x40.
diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index c8bd4721b15..2d9557719a7 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -21,23 +21,20 @@ const bodyUpdate = ( export default () => (
- + {body} + timestamp="6 hours ago"> {bodyUpdate}
diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap index aadec40c48c..52ab2e550b4 100644 --- a/src/components/comment/__snapshots__/comment.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment.test.tsx.snap @@ -178,7 +178,6 @@ exports[`EuiComment props timestamp is rendered 1`] = `
- on diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap index ef8230a37df..d614313b717 100644 --- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap @@ -71,7 +71,6 @@ exports[`EuiCommentEvent props timestamp is rendered 1`] = `
- on diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 9bfaedd80ef..4005b66f980 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -1,10 +1,9 @@ -import React, { FunctionComponent, ReactNode } from 'react'; +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; -import { EuiI18n } from '../i18n'; export type EuiCommentEventProps = CommonProps & - CommonProps & { + HTMLAttributes & { /** * Author of the comment. Display a small icon or avatar with it if needed. */ @@ -59,7 +58,6 @@ export const EuiCommentEvent: FunctionComponent = ({
{event}
{timestamp ? (
- {' '}
) : ( diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index cbf58138788..2f1252f646d 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -1,15 +1,16 @@ -import React, { FunctionComponent, ReactNode } from 'react'; +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; -import { EuiIcon } from '../icon'; +import { EuiIcon, IconType } from '../icon'; -export type EuiCommentTimelineProps = CommonProps & { - /** - * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. - */ - timelineIcon?: ReactNode | string; - type?: EuiCommentType; -}; +export type EuiCommentTimelineProps = CommonProps & + HTMLAttributes & { + /** + * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. + */ + timelineIcon?: ReactNode | IconType; + type?: EuiCommentType; + }; const typeToClassNameMap = { regular: 'euiCommentTimeline__icon--regular', diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts index 5a1c059f78b..23f3dc8bdb5 100644 --- a/src/components/comment/index.ts +++ b/src/components/comment/index.ts @@ -1,5 +1,5 @@ -export { EuiComment } from './comment'; +export { EuiComment, EuiCommentProps } from './comment'; -export { EuiCommentEvent } from './comment_event'; +export { EuiCommentEvent, EuiCommentType } from './comment_event'; export { EuiCommentTimeline } from './comment_timeline'; From da7382407b1498773aaf16f7f75c7774d08ea595 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 7 Apr 2020 16:42:36 -0700 Subject: [PATCH 22/24] small a11y change --- src-docs/src/views/comment/comment_types.tsx | 2 +- .../__snapshots__/comment.test.tsx.snap | 40 +++++++++---------- .../__snapshots__/comment_event.test.tsx.snap | 24 +++++------ src/components/comment/comment_event.tsx | 16 ++++++-- 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index 2d9557719a7..1ebd29824e6 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -21,7 +21,7 @@ const bodyUpdate = ( export default () => (
- + {body}
-
-
-
-
+ +
`; @@ -63,10 +63,10 @@ exports[`EuiComment props event is rendered 1`] = `
-
-
-
-
+ +
`; @@ -116,10 +116,10 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
-
-
-
-
+ +
`; @@ -158,10 +158,10 @@ exports[`EuiComment props timestamp is rendered 1`] = `
-
-
-
-
+ +
`; @@ -249,10 +249,10 @@ exports[`EuiComment renders a body 1`] = `
-
-
-
+
@@ -275,6 +275,6 @@ exports[`EuiComment renders a body 1`] = ` This is the body.

-
+
`; diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap index d614313b717..2a8600d3077 100644 --- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiCommentEvent is rendered 1`] = ` -
-
-
-
+ + `; exports[`EuiCommentEvent props event is rendered 1`] = ` -
-
-
-
+ + `; exports[`EuiCommentEvent props timestamp is rendered 1`] = ` -
-
-
-
+ + `; exports[`EuiCommentEvent props type is rendered 1`] = ` diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 4005b66f980..1cff87e2bc0 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -50,9 +50,17 @@ export const EuiCommentEvent: FunctionComponent = ({ className ); + const Element = + type === 'regular' || (type === 'update' && children) ? 'figure' : 'div'; + + const HeaderElement = + type === 'regular' || (type === 'update' && children) + ? 'figcaption' + : 'div'; + return ( -
-
+ +
{username}
{event}
@@ -69,12 +77,12 @@ export const EuiCommentEvent: FunctionComponent = ({ ) : ( undefined )} -
+ {children ? (
{children}
) : ( undefined )} -
+ ); }; From c986405591c961d934ccc3180e73983653f46d67 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 8 Apr 2020 11:34:03 -0500 Subject: [PATCH 23/24] figure; better type inheritance --- .../__snapshots__/comment_event.test.tsx.snap | 2 - .../comment_timeline.test.tsx.snap | 2 - src/components/comment/comment.tsx | 10 +-- src/components/comment/comment_event.tsx | 61 +++++++++---------- src/components/comment/comment_timeline.tsx | 20 +++--- 5 files changed, 43 insertions(+), 52 deletions(-) diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap index 2a8600d3077..8c90835a202 100644 --- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap +++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap @@ -2,9 +2,7 @@ exports[`EuiCommentEvent is rendered 1`] = `
, + EuiCommentEventProps, + EuiCommentTimelineProps {} const typeToClassNameMap = { regular: '', diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx index 1cff87e2bc0..9feb2f0d36e 100644 --- a/src/components/comment/comment_event.tsx +++ b/src/components/comment/comment_event.tsx @@ -1,30 +1,29 @@ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; -export type EuiCommentEventProps = CommonProps & - HTMLAttributes & { - /** - * Author of the comment. Display a small icon or avatar with it if needed. - */ - username: ReactNode; - /** - * Time of occurrence of the event. Its format is set on the consumer's side - */ - timestamp?: ReactNode; - /** - * Describes the event that took place - */ - event?: ReactNode; - /** - * Custom actions that the user can perform from the comment's header - */ - actions?: ReactNode; - /** - * Use "update" when the comment is primarily showing info about actions that the user or the system has performed (e.g. "user1 edited a case"). - */ - type?: EuiCommentType; - }; +export interface EuiCommentEventProps extends CommonProps { + /** + * Author of the comment. Display a small icon or avatar with it if needed. + */ + username: ReactNode; + /** + * Time of occurrence of the event. Its format is set on the consumer's side + */ + timestamp?: ReactNode; + /** + * Describes the event that took place + */ + event?: ReactNode; + /** + * Custom actions that the user can perform from the comment's header + */ + actions?: ReactNode; + /** + * Use "update" when the comment is primarily showing info about actions that the user or the system has performed (e.g. "user1 edited a case"). + */ + type?: EuiCommentType; +} const typeToClassNameMap = { regular: 'euiCommentEvent--regular', @@ -42,7 +41,6 @@ export const EuiCommentEvent: FunctionComponent = ({ type = 'regular', event, actions, - ...rest }) => { const classes = classNames( 'euiCommentEvent', @@ -50,16 +48,15 @@ export const EuiCommentEvent: FunctionComponent = ({ className ); - const Element = - type === 'regular' || (type === 'update' && children) ? 'figure' : 'div'; + const isFigure = + type === 'regular' || + (type === 'update' && typeof children !== 'undefined'); - const HeaderElement = - type === 'regular' || (type === 'update' && children) - ? 'figcaption' - : 'div'; + const Element = isFigure ? 'figure' : 'div'; + const HeaderElement = isFigure ? 'figcaption' : 'div'; return ( - +
{username}
diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx index 2f1252f646d..e902315fe7b 100644 --- a/src/components/comment/comment_timeline.tsx +++ b/src/components/comment/comment_timeline.tsx @@ -1,16 +1,15 @@ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; import { CommonProps, keysOf } from '../common'; import classNames from 'classnames'; import { EuiIcon, IconType } from '../icon'; -export type EuiCommentTimelineProps = CommonProps & - HTMLAttributes & { - /** - * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. - */ - timelineIcon?: ReactNode | IconType; - type?: EuiCommentType; - }; +export interface EuiCommentTimelineProps extends CommonProps { + /** + * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`. + */ + timelineIcon?: ReactNode | IconType; + type?: EuiCommentType; +} const typeToClassNameMap = { regular: 'euiCommentTimeline__icon--regular', @@ -24,7 +23,6 @@ export const EuiCommentTimeline: FunctionComponent = ({ className, timelineIcon, type = 'regular', - ...rest }) => { const classes = classNames('euiCommentTimeline', className); const iconClasses = classNames( @@ -52,7 +50,7 @@ export const EuiCommentTimeline: FunctionComponent = ({ } return ( -
+
{iconRender}
From d6cf389990efe059c7515e32dcf38c8b295b063d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 8 Apr 2020 10:12:52 -0700 Subject: [PATCH 24/24] update cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5c38980d1b..6169f16426b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions ([#3115](https://github.com/elastic/eui/pull/3115)) - Added support for `EuiCodeEditor` to set `readonly` and `id` on `