Add gutterSize prop to EuiTimeline (#5955)

* Added `gap` prop to `EuiTimelineItem` * Adding CL * Adding `gap` test * Adding `logicalCSS` * Moving `gap` to `EuiTimeline`. Removed `component` prop from `EuiTimelineItem` * Improving callout * Fixing typo in callout text * Vertical line only appearing when items are wrapped in `EuiTimeline` * Renaming `gap` prop to `gutterSize` * Updating CL * Moving vertical line to the icon to avoid min-width
elastic · Jun 16, 2022 · a49464e · a49464e
1 parent 81ee199
commit a49464e
Show file tree

Hide file tree

Showing 13 changed files with 406 additions and 112 deletions.
diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js
@@ -89,10 +89,13 @@ export const TimelineExample = {
             iconType="accessibility"
             title={
               <>
-                For accessibility, it is highly recommended to provide a
-                descriptive <EuiCode>aria-label</EuiCode>, or a text node ID of
-                an external label to the <EuiCode>aria-labelledby</EuiCode> prop
-                of the <strong>EuiTimeline</strong>.
+                For accessibility, it is required to wrap your{' '}
+                <strong>EuiTimelineItem</strong>&apos;s with a{' '}
+                <strong>EuiTimeline</strong>. It is highly recommended to
+                provide a descriptive <EuiCode>aria-label</EuiCode>, or a text
+                node ID of an external label to the{' '}
+                <EuiCode>aria-labelledby</EuiCode> prop of the{' '}
+                <strong>EuiTimeline</strong>.
               </>
             }
           />

diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
-import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components';
+import {
+  EuiTimeline,
+  EuiTimelineItem,
+  EuiText,
+  EuiCode,
+} from '../../../../src/components';
 
 export default () => (
-  <EuiTimelineItem icon="dot" iconAriaLabel="Main icon" component="div">
-    <EuiText size="s">
-      <p>
-        I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}
-        <EuiCode>icon</EuiCode> on the left side.
-      </p>
-    </EuiText>
-  </EuiTimelineItem>
+  <EuiTimeline aria-label="Timeline item example">
+    <EuiTimelineItem icon="dot" iconAriaLabel="Main icon">
+      <EuiText size="s">
+        <p>
+          I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}
+          <EuiCode>icon</EuiCode> on the left side.
+        </p>
+      </EuiText>
+    </EuiTimelineItem>
+  </EuiTimeline>
 );
diff --git a/src/components/timeline/__snapshots__/timeline.test.tsx.snap b/src/components/timeline/__snapshots__/timeline.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`EuiTimeline is rendered with items 1`] = `
 <ol
-  class="euiTimeline"
+  class="euiTimeline emotion-euiTimeline-xl"
   role="list"
 >
   <li
-    class="emotion-euiTimelineItem"
+    class="emotion-euiTimelineItem-center"
   >
     <div
       class="emotion-euiTimelineItemIcon-center"
@@ -41,7 +41,235 @@ exports[`EuiTimeline is rendered with items 1`] = `
     </div>
   </li>
   <li
-    class="emotion-euiTimelineItem"
+    class="emotion-euiTimelineItem-top"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-top"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label=""
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title=""
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="bolt"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-top"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+</ol>
+`;
+
+exports[`EuiTimeline props gutterSize l is rendered 1`] = `
+<ol
+  class="euiTimeline emotion-euiTimeline-l"
+  role="list"
+>
+  <li
+    class="emotion-euiTimelineItem-center"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-center"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label="email"
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title="email"
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="email"
+          >
+            email
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-center"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+  <li
+    class="emotion-euiTimelineItem-top"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-top"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label=""
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title=""
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="bolt"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-top"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+</ol>
+`;
+
+exports[`EuiTimeline props gutterSize m is rendered 1`] = `
+<ol
+  class="euiTimeline emotion-euiTimeline-m"
+  role="list"
+>
+  <li
+    class="emotion-euiTimelineItem-center"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-center"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label="email"
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title="email"
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="email"
+          >
+            email
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-center"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+  <li
+    class="emotion-euiTimelineItem-top"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-top"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label=""
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title=""
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="bolt"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-top"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+</ol>
+`;
+
+exports[`EuiTimeline props gutterSize xl is rendered 1`] = `
+<ol
+  class="euiTimeline emotion-euiTimeline-xl"
+  role="list"
+>
+  <li
+    class="emotion-euiTimelineItem-center"
+  >
+    <div
+      class="emotion-euiTimelineItemIcon-center"
+    >
+      <div
+        class="emotion-euiTimelineItemIcon__content"
+      >
+        <div
+          aria-label="email"
+          class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
+          role="img"
+          title="email"
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="email"
+          >
+            email
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-euiTimelineItemEvent-center"
+    >
+      <p>
+        <strong>
+          [email protected]
+        </strong>
+         was invited to the project
+      </p>
+    </div>
+  </li>
+  <li
+    class="emotion-euiTimelineItem-top"
   >
     <div
       class="emotion-euiTimelineItemIcon-top"

diff --git a/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap b/src/components/timeline/__snapshots__/timeline_item.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiTimelineItem is rendered 1`] = `
 <li
-  class="emotion-euiTimelineItem"
+  class="emotion-euiTimelineItem-center"
 >
   <div
     class="emotion-euiTimelineItemIcon-center"
@@ -35,7 +35,7 @@ exports[`EuiTimelineItem is rendered 1`] = `
 
 exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
 <li
-  class="emotion-euiTimelineItem"
+  class="emotion-euiTimelineItem-center"
 >
   <div
     class="emotion-euiTimelineItemIcon-center"
@@ -70,7 +70,7 @@ exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
 
 exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
 <li
-  class="emotion-euiTimelineItem"
+  class="emotion-euiTimelineItem-center"
 >
   <div
     class="emotion-euiTimelineItemIcon-center"
@@ -105,7 +105,7 @@ exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
 
 exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
 <li
-  class="emotion-euiTimelineItem"
+  class="emotion-euiTimelineItem-center"
 >
   <div
     class="emotion-euiTimelineItemIcon-center"
@@ -138,7 +138,7 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
 
 exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
 <li
-  class="emotion-euiTimelineItem"
+  class="emotion-euiTimelineItem-top"
 >
   <div
     class="emotion-euiTimelineItemIcon-top"