PLAY-1590 | Timeline Small Variant: Add "Gap" Prop to Timeline Kit (#…

…3903) **What does this PR do?** A clear and concise description with your runway ticket url. [PLAY-1590](https://runway.powerhrg.com/backlog_items/PLAY-1590) As a Playbook user, I want to add a gap prop to Timeline kit, So that I can control the spacing between events in my Timeline kit. AC: - A new "Gap" Prop for the [Timeline Kit](https://playbook.powerapp.cloud/kits/timeline/react) - should give us size props like xs, sm, md, lg to change the line_connector length **Screenshots:** Screenshots to visualize your addition/change ![Screenshot 2024-11-13 at 8 26 27 AM](https://github.com/user-attachments/assets/89a3b4b1-8757-4230-87a1-8c3ff3590b49) #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
powerhome · Nov 15, 2024 · 39fed4a · 39fed4a
1 parent 5eb9d8c
commit 39fed4a
Show file tree

Hide file tree

Showing 9 changed files with 346 additions and 11 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss
@@ -8,6 +8,12 @@ $icon_margin: $space_xs/2;
 $icon_height: 28px;
 $height_from_top: $icon_height/2 - $connector_width/2;
 
+// Add gap variables
+$gap_xs: $height_from_top + $space_xs;
+$gap_sm: $height_from_top + $space_sm;
+$gap_md: $height_from_top + $space_md;
+$gap_lg: $height_from_top + $space_lg;
+
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;
     height: $height;
@@ -156,7 +162,7 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                         }
                     }
                 }
-            } 
+            }
         }
     }
     &[class*=_vertical] {
@@ -266,5 +272,41 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                 }
             }
         }
+        &[class*=_gap_xs] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_xs !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_sm] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_sm !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_md] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_md !important;
+                    }
+                }
+            }
+        }
+        &[class*=_gap_lg] {
+            [class*=pb_timeline_item_kit] {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        height: $gap_lg !important;
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx
@@ -20,6 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -31,13 +32,16 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
+  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
+  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
+
   return (
     <div
         {...ariaProps}
@@ -56,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb
@@ -0,0 +1,94 @@
+<%= pb_rails("flex", props: { justify: "evenly" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Conversation started",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Trip #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+                <%= pb_rails("body", props: {
+                    text: "Refund issue #12422",
+                    color: "light"
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx
@@ -0,0 +1,180 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Body from '../../pb_body/_body'
+
+const TimelineWithGap = (props) => (
+  <div>
+    <Flex justify="evenly">
+    <FlexItem>
+        <Timeline
+            gap="xs"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="sm"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="md"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+      <FlexItem>
+        <Timeline
+            gap="lg"
+            orientation="vertical"
+        >
+          <Timeline.Item
+              icon="user"
+              iconColor="royal"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Conversation started"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="check"
+              iconColor="teal"
+              lineStyle="dotted"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Trip #12422"
+                {...props}
+            />
+          </Timeline.Item>
+          <Timeline.Item
+              icon="credit-card"
+              iconColor="red"
+              {...props}
+          >
+            <Body
+                color="light"
+                text="Refund issue #12422"
+                {...props}
+            />
+          </Timeline.Item>
+        </Timeline>
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default TimelineWithGap
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md
@@ -0,0 +1 @@
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml b/playbook/app/pb_kits/playbook/pb_timeline/docs/example.yml
@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-
-
+  - timeline_with_gap: With Gap
+
+
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_with_gap: With Gap
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.