Skip to content

Commit

Permalink
feedback part 1
Browse files Browse the repository at this point in the history
  • Loading branch information
andreadelrio committed Mar 31, 2020
1 parent e5b1d1c commit c691624
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 37 deletions.
52 changes: 40 additions & 12 deletions src-docs/src/views/comment/comment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,60 @@ 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 = (
<EuiText size="s">
<p>
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</p>
</EuiText>
);

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 = (
<EuiText size="s">
<p>
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.
</p>
</EuiText>
);

const bodyUpdate = 'This type of comment can also have a body';
const bodyUpdate = (
<EuiText size="s">
<p>This type of comment can also have a body</p>
</EuiText>
);

const copyAction = <EuiButtonIcon color="subdued" iconType="copy" />;
const copyAction = (
<EuiButtonIcon
title="Custom action"
aria-label="Custom action"
color="subdued"
iconType="copy"
/>
);

export default () => (
<div>
<EuiComment
username="janed"
event="added a comment"
actions={copyAction}
timestamp="on Jan 1, 2020">
timestamp="Jan 1, 2020">
{body}
</EuiComment>
<EuiComment
username="juanab"
type="update"
actions={copyAction}
event="pushed incident X0Z235"
timestamp="on Jan 3, 2020"
timestamp="Jan 3, 2020"
timelineIcon={
<EuiAvatar
imageUrl="https://source.unsplash.com/64x64/?woman"
Expand Down Expand Up @@ -61,7 +89,7 @@ export default () => (
</EuiFlexItem>
</EuiFlexGroup>
}
timestamp="on Jan 4, 2020"
timestamp="Jan 4, 2020"
timelineIcon={
<div className="euiCommentTimeline__contentDefault">
<EuiIcon size="l" type="tag" />
Expand All @@ -72,22 +100,22 @@ export default () => (
username="pancho1"
type="update"
event="edited case"
timestamp="on Jan 11, 2020"
timestamp="Jan 11, 2020"
timelineIcon={<EuiAvatar size="l" name="Pancho" />}
/>
<EuiComment
username="elohar"
event="added a comment"
actions={copyAction}
timestamp="on Jan 14, 2020"
timestamp="Jan 14, 2020"
timelineIcon={<EuiAvatar size="l" name="Eloha" />}>
{longBody}
</EuiComment>
<EuiComment
username="pancho1"
type="update"
event="edited case"
timestamp="on Jan 21, 2020"
timestamp="Jan 21, 2020"
timelineIcon={<EuiAvatar size="l" name="Pancho" />}>
{bodyUpdate}
</EuiComment>
Expand Down
19 changes: 9 additions & 10 deletions src/components/comment/_comment.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.euiComment {
font-size: $euiFontSizeS;
display: flex;
margin: -($euiSizeS);
// margin: -($euiSizeS);
padding-bottom: $euiSize;
min-height: $euiSize * 5;

Expand All @@ -12,6 +12,7 @@
.euiCommentTimeline {
position: relative;
flex-grow: 0;
margin-right: $euiSize;

&::before {
content: '';
Expand All @@ -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;
}
}
14 changes: 4 additions & 10 deletions src/components/comment/_comment_event.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -23,7 +19,7 @@

align-items: center;

.euiCommentEvent__headerData>div {
.euiCommentEvent__headerData > div {
padding-right: $euiSizeXS;
}
}
Expand All @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions src/components/comment/_comment_timeline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
justify-content: center;
align-items: center;
position: relative;
background-color: $euiColorEmptyShade;
}

.euiCommentTimeline__contentDefault {
Expand All @@ -15,7 +14,7 @@
align-items: center;
overflow-x: hidden;
border-radius: 50%;
background-color: $euiColorLightShade;
background-color: $euiColorLightestShade;
width: $euiSizeXXL;
height: $euiSizeXXL;
}
12 changes: 11 additions & 1 deletion src/components/comment/comment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export type EuiCommentProps = EuiCommentEventProps &
EuiCommentTimelineProps &
CommonProps & {};

const typeToClassNameMap = {
regular: '',
update: 'euiComment--update',
};

export const EuiComment: FunctionComponent<EuiCommentProps> = ({
children,
className,
Expand All @@ -23,7 +28,12 @@ export const EuiComment: FunctionComponent<EuiCommentProps> = ({
timestamp,
...rest
}) => {
const classes = classNames('euiComment', className);
const classes = classNames(
'euiComment',
typeToClassNameMap[type],
{ 'euiComment--hasBody': children },
className
);

return (
<div className={classes} {...rest}>
Expand Down
10 changes: 9 additions & 1 deletion src/components/comment/comment_event.tsx
Original file line number Diff line number Diff line change
@@ -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 & {
Expand Down Expand Up @@ -53,7 +54,14 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
<div className="euiCommentEvent__headerData">
<div className="euiCommentEvent__headerUsername">{username}</div>
<div className="euiCommentEvent__headerEvent">{event}</div>
<div className="euiCommentEvent__headerTimestamp">{timestamp}</div>
{timestamp ? (
<div className="euiCommentEvent__headerTimestamp">
<EuiI18n token="euiCommentEven.onDate" default="on" />{' '}
<time>{timestamp}</time>
</div>
) : (
undefined
)}
</div>
<div className="euiCommentEvent__headerActions">{actions}</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export {

export { EuiComboBox } from './combo_box';

export { EuiComment, EuiCommentEvent } from './comment';
export { EuiComment } from './comment';

export { EuiContext, EuiI18nConsumer } from './context';

Expand Down

0 comments on commit c691624

Please sign in to comment.