Simplifying props structure to avoid objects

elastic · Mar 21, 2022 · b9a059e · b9a059e
1 parent 42890a4
commit b9a059e
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 127 deletions.
diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx
@@ -8,7 +8,7 @@ import {
 const items: EuiTimelineProps['items'] = [
   {
     icon: 'email',
-    eventHeader: (
+    header: (
       <EuiText size="s">
         <p>
           <strong>janet@elastic.co</strong> was invited to the project
@@ -18,7 +18,7 @@ const items: EuiTimelineProps['items'] = [
   },
   {
     icon: 'pencil',
-    eventHeader: (
+    header: (
       <EuiText size="s">
         <p>
           The project was renamed to <strong>Revenue Dashboard</strong>
@@ -28,7 +28,7 @@ const items: EuiTimelineProps['items'] = [
   },
   {
     icon: 'folderClosed',
-    eventHeader: (
+    header: (
       <EuiText size="s">
         <p>The project was archived</p>
       </EuiText>

diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx
@@ -51,6 +51,9 @@ export default () => {
     avatarColor: string
   ) => (
     <EuiTimelineItem
+      panelHasBorder
+      panelPaddingSize="m"
+      headerPanelColor="subdued"
       icon={
         checked ? (
           <EuiAvatar
@@ -63,12 +66,7 @@ export default () => {
           <EuiAvatar size="s" name={title} iconType="dot" color="shade" />
         )
       }
-      eventProps={{
-        hasBorder: true,
-        headerColor: 'subdued',
-        paddingSize: 'm',
-      }}
-      eventHeader={
+      header={
         <EuiFlexGroup alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiSwitch
@@ -85,7 +83,7 @@ export default () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       }
-      eventBody={
+      body={
         <>
           <EuiText size="s" grow={false}>
             <p>
@@ -118,6 +116,9 @@ export default () => {
   return (
     <div>
       <EuiTimelineItem
+        panelHasBorder
+        panelPaddingSize="m"
+        headerPanelColor="subdued"
         icon={
           <EuiAvatar
             size="m"
@@ -126,19 +127,14 @@ export default () => {
             color={euiPaletteColorBlind()[0]}
           />
         }
-        eventProps={{
-          hasBorder: true,
-          headerColor: 'subdued',
-          paddingSize: 'm',
-        }}
-        eventHeader={
+        header={
           <EuiTitle size="s">
             <h2>
               Hot phase <EuiBadge color="warning">Required</EuiBadge>
             </h2>
           </EuiTitle>
         }
-        eventBody={
+        body={
           <EuiText grow={false} size="s">
             <p>
               Store your most recent, most frequently-searched data in the hot

diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js
@@ -67,57 +67,56 @@ export const TimelineExample = {
         },
       ],
       text: (
-        <div>
+        <>
           <p>
             Use <strong>EuiTimelineItem</strong> to display timeline items. Each{' '}
-            <strong>EuiTimelineItem</strong> accepts two parts:{' '}
-            <EuiCode>icon</EuiCode> on the left side and an{' '}
-            <EuiCode>event</EuiCode> on the right side.
+            <strong>EuiTimelineItem</strong> has two parts: an icon on the left
+            side and an event on the right side. To create an item you basically
+            need the following props:
           </p>
-        </div>
+          <ul>
+            <li>
+              <EuiCode>icon</EuiCode>: main icon that appears on the left side.
+            </li>
+            <li>
+              <EuiCode>header</EuiCode>: the most important part of an event
+              (e.g. a title, username, metadata). All the content should be in
+              one line. When no <EuiCode>body</EuiCode> is present the{' '}
+              <EuiCode>header</EuiCode>
+              vertically center aligns with the left side icon.
+            </li>
+            <li>
+              <EuiCode>body</EuiCode>: additional event content. You can also
+              use this prop to pass more complex components (e.g. editors, code
+              blocks or any custom component).
+            </li>
+          </ul>
+        </>
       ),
       props: { EuiTimelineItem },
       snippet: timelineItemSnippet,
       demo: <TimelineItem />,
     },
     {
-      title: 'Timeline item event',
+      title: 'Customizing an event',
       source: [
         {
           type: GuideSectionTypes.JS,
           code: timelineItemEventSource,
         },
       ],
       text: (
-        <div>
+        <>
           <p>
             An event is basically the right side of the{' '}
             <strong>EuiTimelineItem</strong> and it&apos;s built on top of the{' '}
             <Link to="/layout/panel">
-              <strong>EuiPanel</strong>.
-            </Link>{' '}
-            Each event can have a <EuiCode>eventHeader</EuiCode>, a{' '}
-            <EuiCode>eventBody</EuiCode> and <EuiCode>eventProps</EuiCode>:
+              <strong>EuiPanel</strong>
+            </Link>
+            . This example demonstrates how you can use multiple panel props to
+            customize an event (e.g change the <EuiCode>panelColor</EuiCode>).
           </p>
-          <ul>
-            <li>
-              <EuiCode>eventHeader</EuiCode>: the most important part of the
-              event (e.g. a title, username, metadata). All the content should
-              be in one line. When no body is present the header vertically
-              center aligns with the left side icon.
-            </li>
-            <li>
-              <EuiCode>eventBody</EuiCode>: additional content. You can also use
-              this prop to pass more complex components (e.g. editors, code
-              blocks or any custom component).
-            </li>
-            <li>
-              <EuiCode>eventProps</EuiCode>: additional props to customize the
-              event panel. You can change the color, header color, and adjust
-              the padding.
-            </li>
-          </ul>
-        </div>
+        </>
       ),
       props: { EuiTimelineItemEvent },
       snippet: timelineItemEventSnippet,

diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx
@@ -1,31 +1,30 @@
 import React from 'react';
-import { EuiTimelineItem, EuiText, EuiBadge } from '../../../../src/components';
+import {
+  EuiTimelineItem,
+  EuiText,
+  EuiTitle,
+  EuiCode,
+} from '../../../../src/components';
 
 export default () => (
   <div>
     <EuiTimelineItem
       icon="editorComment"
-      eventHeader={
-        <EuiText size="s">
-          <p>
-            The <EuiBadge>icon</EuiBadge> is on the left side and I&apos;m an{' '}
-            <EuiBadge>eventHeader</EuiBadge>
-          </p>
-        </EuiText>
+      header={
+        <EuiTitle size="xs">
+          <h2>
+            I&apos;m an event <EuiCode>header</EuiCode>
+          </h2>
+        </EuiTitle>
       }
-      eventBody={
+      body={
         <EuiText size="s">
           <p>
-            The <EuiBadge>icon</EuiBadge> is on the left side and I&apos;m an{' '}
-            <EuiBadge>eventBody</EuiBadge>
+            I&apos;m an event <EuiCode>body</EuiCode> and you can find the{' '}
+            <EuiCode>icon</EuiCode> on the left side.
           </p>
         </EuiText>
       }
-      eventProps={{
-        paddingSize: 's',
-        hasBorder: true,
-        headerColor: 'subdued',
-      }}
     />
   </div>
 );
diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx
@@ -5,13 +5,14 @@ import {
   EuiText,
   EuiCodeBlock,
   EuiLink,
+  EuiMarkdownEditor,
 } from '../../../../src/components';
 
 export default () => (
   <div>
     <EuiTimelineItem
       icon={<EuiAvatar name="Checked" iconType="pencil" color="shade" />}
-      eventHeader={
+      header={
         <EuiText size="s">
           <p>
             <strong>Janet</strong> edited the dashboard 4 days ago
@@ -22,7 +23,7 @@ export default () => (
 
     <EuiTimelineItem
       icon={<EuiAvatar name="system" iconType="editorComment" color="shade" />}
-      eventHeader={
+      header={
         <EuiText size="s">
           <p>
             <strong>Nicole</strong> mentioned this dashboard in{' '}
@@ -34,29 +35,27 @@ export default () => (
 
     <EuiTimelineItem
       icon={<EuiAvatar name="system" iconType="alert" color="shade" />}
-      eventHeader={
+      header={
         <EuiText size="s">
           <p>Error detected in dashboard 5 minutes ago</p>
         </EuiText>
       }
-      eventProps={{
-        paddingSize: 's',
-        color: 'danger',
-      }}
+      panelPaddingSize="s"
+      panelColor="danger"
     />
 
     <EuiTimelineItem
       icon={
         <EuiAvatar name="system" iconType="editorCodeBlock" color="shade" />
       }
-      eventHeader={
+      header={
         <EuiText size="s">
           <p>
             <strong>Nicole</strong> generated a new iframe 2 minutes ago
           </p>
         </EuiText>
       }
-      eventBody={
+      body={
         <EuiCodeBlock
           language="html"
           isCopyable
@@ -67,11 +66,23 @@ export default () => (
 <iframe src="#" width="560" height="315" allowfullscreen="allowfullscreen"></iframe>`}
         </EuiCodeBlock>
       }
-      eventProps={{
-        hasBorder: true,
-        paddingSize: 's',
-        headerColor: 'subdued',
-      }}
+      panelHasBorder
+      panelPaddingSize="s"
+      headerPanelColor="subdued"
+    />
+
+    <EuiTimelineItem
+      icon={<EuiAvatar name="system" iconType="alert" color="shade" />}
+      body={
+        <EuiMarkdownEditor
+          aria-label="Markdown editor"
+          value={
+            'Just a markdown editor passed in the `body` prop without any panel customization :tada:'
+          }
+          onChange={() => {}}
+          initialViewMode="viewing"
+        />
+      }
     />
   </div>
 );
diff --git a/src/components/timeline/timeline_item.tsx b/src/components/timeline/timeline_item.tsx
@@ -17,36 +17,25 @@ import {
   EuiTimelineItemIconProps,
 } from './timeline_item_icon';
 
-export type EuiTimelineItemProps = HTMLAttributes<HTMLDivElement> & {
-  eventHeader?: EuiTimelineItemEventProps['header'];
-  eventBody?: EuiTimelineItemEventProps['body'];
-  eventProps?: Omit<EuiTimelineItemEventProps, 'header' | 'body'>;
-} & EuiTimelineItemIconProps;
+export type EuiTimelineItemProps = HTMLAttributes<HTMLDivElement> &
+  EuiTimelineItemEventProps &
+  EuiTimelineItemIconProps;
 
 export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
-  children,
   className,
-  icon,
-  eventHeader,
-  eventBody,
-  eventProps,
   ...rest
 }) => {
   const classes = classNames(
     'euiTimelineItem',
-    { 'euiTimelineItem--hasHeader': eventHeader },
-    { 'euiTimelineItem--hasBody': eventBody },
+    { 'euiTimelineItem--hasHeader': rest.header },
+    { 'euiTimelineItem--hasBody': rest.body },
     className
   );
 
   return (
-    <div className={classes} {...rest}>
-      <EuiTimelineItemIcon icon={icon} />
-      <EuiTimelineItemEvent
-        header={eventHeader}
-        body={eventBody}
-        {...eventProps}
-      />
+    <div className={classes} {...(rest as HTMLAttributes<HTMLDivElement>)}>
+      <EuiTimelineItemIcon {...(rest as EuiTimelineItemIconProps)} />
+      <EuiTimelineItemEvent {...(rest as EuiTimelineItemEventProps)} />
     </div>
   );
 };