Add flex to timeline item (#1403)

* Add flex to timeline item * Add flex to timeline item (changeset) Co-authored-by: Cole Bemis <colebemis@github.com>
primer · Sep 3, 2021 · 65cab2c · 65cab2c
1 parent ad4ec42
commit 65cab2c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/great-countries-yawn.md b/.changeset/great-countries-yawn.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Fix the Timeline.Item layout
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
@@ -29,6 +29,7 @@ type StyledTimelineItemProps = {condensed?: boolean}
 const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
   className: classnames('Timeline-Item', props.className)
 }))<StyledTimelineItemProps>`
+  display: flex;
   position: relative;
   padding: ${get('space.3')} 0;
   margin-left: ${get('space.3')};

diff --git a/src/__tests__/__snapshots__/Timeline.tsx.snap b/src/__tests__/__snapshots__/Timeline.tsx.snap
@@ -89,6 +89,10 @@ exports[`Timeline.Badge renders consistently 1`] = `
 
 exports[`Timeline.Item renders consistently 1`] = `
 .c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   position: relative;
   padding: 16px 0;
   margin-left: 16px;
@@ -112,6 +116,10 @@ exports[`Timeline.Item renders consistently 1`] = `
 
 exports[`Timeline.Item renders with condensed prop 1`] = `
 .c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   position: relative;
   padding: 16px 0;
   margin-left: 16px;