Skip to content

Commit

Permalink
[EuiComment] Create styles header and border for EuiCommentEvent (#7288)
Browse files Browse the repository at this point in the history 
Co-authored-by: Bree Hall <briannajdhall@gmail.com>
Co-authored-by: Cee Chen <constance.chen@elastic.co>
  • Loading branch information
@andreadelrio @breehall @cee-chen
3 people authored Oct 18, 2023
1 parent 5d1441d commit 6f5d004
Show file tree
Hide file tree
Showing 9 changed files with 309 additions and 135 deletions.
87 changes: 66 additions & 21 deletions src-docs/src/views/comment/comment_flexible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,12 @@ import {
EuiFlexItem,
EuiSpacer,
EuiCommentListProps,
EuiSelect,
EuiCode,
} from '../../../../src/components/';

import { EuiCommentEventProps } from '../../../../src/components/comment_list/comment_event';

const body = (
<EuiText size="s">
<p>
Expand Down Expand Up @@ -64,14 +68,6 @@ const commentsData: EuiCommentListProps['comments'] = [
eventIconAriaLabel: 'tag',
actions: copyAction,
},
{
username: 'system',
timelineAvatarAriaLabel: 'System',
timelineAvatar: 'dot',
event: 'pushed a new incident',
timestamp: '20 hours ago',
eventColor: 'danger',
},
{
username: 'pancho1',
timelineAvatarAriaLabel: 'Pancho Pérez',
Expand All @@ -95,18 +91,29 @@ const toggleButtons = [
id: 'update',
label: 'Update',
},
{
id: 'updateDanger',
label: 'Update danger',
},
{
id: 'custom',
label: 'Custom',
},
];

export default () => {
const colors: Array<{
value: EuiCommentEventProps['eventColor'];
text: string;
}> = [
{ value: 'subdued', text: 'subdued' },
{ value: 'transparent', text: 'transparent' },
{ value: 'plain', text: 'plain' },
{ value: 'danger', text: 'danger' },
{ value: 'warning', text: 'warning' },
{ value: 'accent', text: 'accent' },
{ value: 'primary', text: 'primary' },
{ value: 'success', text: 'success' },
{ value: undefined, text: 'undefined' },
];
const [toggleIdSelected, setToggleIdSelected] = useState('regular');
const [color, setColor] = useState(colors[0].value);
const [comment, setComment] = useState(commentsData[0]);

const onChangeButtonGroup = (optionId: any) => {
Expand All @@ -119,19 +126,57 @@ export default () => {
setComment(commentsData[selectedCommentIndex]);
};

const onChangeSize = (e: React.ChangeEvent<HTMLSelectElement>) => {
const color = e.target.value;
setColor(
color && color !== 'undefined'
? (color as EuiCommentEventProps['eventColor'])
: undefined
);
};

return (
<>
<EuiButtonGroup
legend="Pick an example"
options={toggleButtons}
onChange={onChangeButtonGroup}
idSelected={toggleIdSelected}
type="single"
color="primary"
/>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonGroup
legend="Pick an example"
options={toggleButtons}
onChange={onChangeButtonGroup}
idSelected={toggleIdSelected}
type="single"
color="primary"
/>
</EuiFlexItem>
{toggleIdSelected !== 'custom' ? (
<EuiFlexItem grow={false}>
<EuiSelect
prepend="eventColor"
options={colors}
value={color}
onChange={(e) => onChangeSize(e)}
compressed
/>
</EuiFlexItem>
) : undefined}
<EuiFlexItem>
{toggleIdSelected === 'regular' && color === 'subdued' && (
<span>
subdued is the default <EuiCode>eventColor</EuiCode> for regular{' '}
<strong>EuiComment</strong>
</span>
)}
{toggleIdSelected === 'update' && color === 'transparent' && (
<span>
transparent is the default <EuiCode>eventColor</EuiCode> for
update <strong>EuiComment</strong>
</span>
)}
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiCommentList>
<EuiComment {...comment} />
<EuiComment {...comment} eventColor={color} />
</EuiCommentList>
</>
);
Expand Down
23 changes: 5 additions & 18 deletions src-docs/src/views/comment/comment_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,6 @@ const complexEvent = (
</EuiFlexGroup>
);

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 comments: EuiCommentProps[] = [
{
username: 'janed',
Expand Down Expand Up @@ -88,12 +75,12 @@ const comments: EuiCommentProps[] = [
eventIconAriaLabel: 'tag',
},
{
username: 'elohar',
timelineAvatarAriaLabel: 'Elohar Jackson',
event: 'added a comment',
timestamp: 'on Jan 14, 2020',
children: longBody,
username: 'Assistant',
timelineAvatarAriaLabel: 'Assistant',
timestamp: 'on Jan 14, 2020, 1:39:04 PM',
children: <p>An error ocurred sending your message.</p>,
actions: copyAction,
eventColor: 'danger',
},
];

Expand Down
14 changes: 7 additions & 7 deletions src/components/comment_list/__snapshots__/comment.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`EuiComment is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
</div>
Expand Down Expand Up @@ -63,14 +63,14 @@ exports[`EuiComment props event is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="update"
>
<div
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
class="euiPanel euiPanel--transparent euiPanel--paddingSmall emotion-euiPanel-grow-m-s-transparent"
>
<div
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
Expand Down Expand Up @@ -124,14 +124,14 @@ exports[`EuiComment props timestamp is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="update"
>
<div
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
class="euiPanel euiPanel--transparent euiPanel--paddingSmall emotion-euiPanel-grow-m-s-transparent"
>
<div
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
Expand Down Expand Up @@ -187,7 +187,7 @@ exports[`EuiComment renders a body 1`] = `
class="emotion-euiTimelineItemEvent-top"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
>
<div
Expand Down Expand Up @@ -229,7 +229,7 @@ exports[`EuiComment renders a timeline icon 1`] = `
class="emotion-euiTimelineItemEvent-top"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
>
<div
Expand Down
16 changes: 8 additions & 8 deletions src/components/comment_list/__snapshots__/comment_event.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiCommentEvent is rendered with custom content 1`] = `
<div
class="euiCommentEvent testClass1 testClass2 emotion-euiCommentEvent-custom-euiTestCss"
class="euiCommentEvent testClass1 testClass2 emotion-euiCommentEvent-euiTestCss"
data-type="custom"
>
<div
Expand All @@ -17,14 +17,14 @@ exports[`EuiCommentEvent is rendered with custom content 1`] = `

exports[`EuiCommentEvent props event is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="update"
>
<div
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
class="euiPanel euiPanel--transparent euiPanel--paddingSmall emotion-euiPanel-grow-m-s-transparent"
>
<div
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
Expand All @@ -51,21 +51,21 @@ exports[`EuiCommentEvent props event is rendered 1`] = `

exports[`EuiCommentEvent props eventColor is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
`;

exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="update"
>
<div
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
class="euiPanel euiPanel--transparent euiPanel--paddingSmall emotion-euiPanel-grow-m-s-transparent"
>
<div
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
Expand Down Expand Up @@ -99,14 +99,14 @@ exports[`EuiCommentEvent props eventIcon and eventIconAriaLabel are rendered 1`]

exports[`EuiCommentEvent props timestamp is rendered 1`] = `
<div
class="euiCommentEvent emotion-euiCommentEvent-update"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="update"
>
<div
class="euiCommentEvent__header emotion-euiCommentEvent__header"
>
<div
class="euiPanel euiPanel--transparent emotion-euiPanel-grow-m-transparent"
class="euiPanel euiPanel--transparent euiPanel--paddingSmall emotion-euiPanel-grow-m-s-transparent"
>
<div
class="euiCommentEvent__headerMain emotion-euiCommentEvent__headerMain"
Expand Down
8 changes: 4 additions & 4 deletions src/components/comment_list/__snapshots__/comment_list.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ exports[`EuiCommentList is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
</div>
Expand Down Expand Up @@ -72,7 +72,7 @@ exports[`EuiCommentList props gutterSize l is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
</div>
Expand Down Expand Up @@ -111,7 +111,7 @@ exports[`EuiCommentList props gutterSize m is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
</div>
Expand Down Expand Up @@ -150,7 +150,7 @@ exports[`EuiCommentList props gutterSize xl is rendered 1`] = `
class="emotion-euiTimelineItemEvent-center"
>
<div
class="euiCommentEvent emotion-euiCommentEvent-custom"
class="euiCommentEvent emotion-euiCommentEvent"
data-type="custom"
/>
</div>
Expand Down
Loading

0 comments on commit 6f5d004

Please sign in to comment.