[EuiComment] Create styles header and border for EuiCommentEvent

src-docs/src/views/comment/comment_flexible.tsx

@@ -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>
@@ -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',
@@ -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) => {
@@ -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>
     </>
   );

src-docs/src/views/comment/comment_list.tsx

@@ -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',
@@ -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',
   },
 ];
 

src/components/comment_list/__snapshots__/comment.test.tsx.snap

@@ -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>
@@ -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"
@@ -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"
@@ -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
@@ -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

src/components/comment_list/__snapshots__/comment_event.test.tsx.snap

@@ -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
@@ -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"
@@ -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"
@@ -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"

src/components/comment_list/__snapshots__/comment_list.test.tsx.snap

@@ -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>
@@ -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>
@@ -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>
@@ -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>