EuiTimeline

src-docs/src/views/timeline/timeline_complex.tsx

@@ -4,6 +4,7 @@ import {
   EuiAvatar,
   EuiText,
   EuiSwitch,
+  EuiSwitchEvent,
   EuiAccordion,
   EuiFlexGroup,
   EuiFlexItem,
@@ -35,28 +36,16 @@ export default () => {
     sortBy: 'natural',
   });
 
-  const onChange1 = (e: {
-    target: { checked: React.SetStateAction<boolean> };
-  }) => {
-    setChecked1(e.target.checked);
-  };
+  const onChange1 = (e: EuiSwitchEvent) => setChecked1(e.target.checked);
 
-  const onChange2 = (e: {
-    target: { checked: React.SetStateAction<boolean> };
-  }) => {
-    setChecked2(e.target.checked);
-  };
+  const onChange2 = (e: EuiSwitchEvent) => setChecked2(e.target.checked);
 
-  const onChange3 = (e: {
-    target: { checked: React.SetStateAction<boolean> };
-  }) => {
-    setChecked3(e.target.checked);
-  };
+  const onChange3 = (e: EuiSwitchEvent) => setChecked3(e.target.checked);
 
   const phase = (
     title: string,
     checked: boolean,
-    onChange: any,
+    onChange: (e: EuiSwitchEvent) => void,
     avatarColor: string
   ) => (
     <EuiTimelineItem
@@ -96,8 +85,8 @@ export default () => {
           <EuiText size="s" grow={false}>
             <p>
               Move data to the cold tier when you are searching it less often
-              and don’t need to update it. The cold tier is optimized for cost
-              savings over search performance.
+              and don&apos;t need to update it. The cold tier is optimized for
+              cost savings over search performance.
             </p>
           </EuiText>
 

src-docs/src/views/timeline/timeline_example.js

@@ -46,7 +46,7 @@ export const TimelineExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: timelineSource,
         },
       ],
@@ -66,7 +66,7 @@ export const TimelineExample = {
       title: 'Timeline item',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: timelineItemSource,
         },
       ],
@@ -96,7 +96,7 @@ export const TimelineExample = {
       title: 'Customizing an event',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: timelineItemEventSource,
         },
       ],
@@ -125,7 +125,7 @@ export const TimelineExample = {
       title: 'Complex example',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: TimelineComplexSource,
         },
       ],

src/components/timeline/timeline.tsx

@@ -11,32 +11,27 @@ import { CommonProps } from '../common';
 import classNames from 'classnames';
 import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item';
 
-export type EuiTimelineProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    /**
-     * List of timelines to render. See #EuiTimeline
-     */
-    items?: EuiTimelineItemProps[];
-  };
+export interface EuiTimelineProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,
+    CommonProps {
+  /**
+   * List of timelines to render. See #EuiTimeline
+   */
+  items?: EuiTimelineItemProps[];
+}
 
 export const EuiTimeline: FunctionComponent<EuiTimelineProps> = ({
   className,
-  items,
+  items = [],
   ...rest
 }) => {
   const classes = classNames('euiTimeline', className);
 
-  let timelineElements = null;
-
-  if (items) {
-    timelineElements = items.map((item, index) => (
-      <EuiTimelineItem key={index} {...item} />
-    ));
-  }
-
   return (
     <div className={classes} {...rest}>
-      {timelineElements}
+      {items.map((item, index) => (
+        <EuiTimelineItem key={index} {...item} />
+      ))}
     </div>
   );
 };

src/components/timeline/timeline_item.tsx

@@ -27,29 +27,32 @@ export const VERTICAL_ALIGN = keysOf(verticalAlignToClassNameMap);
 
 export type EuiTimelineItemVerticalAlign = keyof typeof verticalAlignToClassNameMap;
 
-export type EuiTimelineItemProps = EuiTimelineItemIconProps &
-  EuiTimelineItemEventProps & {
-    /**
-     * Vertical aligns the event with the icon
-     */
-    verticalAlign?: EuiTimelineItemVerticalAlign;
-  } & CommonProps &
-  HTMLAttributes<HTMLDivElement>;
+export interface EuiTimelineItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,
+    CommonProps,
+    EuiTimelineItemIconProps,
+    EuiTimelineItemEventProps {
+  /**
+   * Vertical aligns the event with the icon
+   */
+  verticalAlign?: EuiTimelineItemVerticalAlign;
+}
 
 export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
   children,
   verticalAlign = 'top',
   icon,
   className,
+  ...rest
 }) => {
   const classes = classNames(
     'euiTimelineItem',
-    verticalAlignToClassNameMap[verticalAlign as EuiTimelineItemVerticalAlign],
+    verticalAlignToClassNameMap[verticalAlign],
     className
   );
 
   return (
-    <div className={classes}>
+    <div className={classes} {...rest}>
       <EuiTimelineItemIcon icon={icon} />
 
       <EuiTimelineItemEvent>{children}</EuiTimelineItemEvent>

src/components/timeline/timeline_item_event.tsx

@@ -8,12 +8,12 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 
-export type EuiTimelineItemEventProps = {
+export interface EuiTimelineItemEventProps {
   /**
    * Accepts any node.
    */
   children: ReactNode;
-};
+}
 
 export const EuiTimelineItemEvent: FunctionComponent<EuiTimelineItemEventProps> = ({
   children,

src/components/timeline/timeline_item_icon.tsx

@@ -8,12 +8,12 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 
-export type EuiTimelineItemIconProps = {
+export interface EuiTimelineItemIconProps {
   /**
    * Any node, but preferably a `EuiAvatar`
    */
   icon: ReactNode;
-};
+}
 
 export const EuiTimelineItemIcon: FunctionComponent<EuiTimelineItemIconProps> = ({
   icon,