From ef127f7589c07c4a99dae6cadc4758e1a0fb2a1a Mon Sep 17 00:00:00 2001 From: mathiasbosman <436498+mathiasbosman@users.noreply.github.com> Date: Fri, 3 Sep 2021 12:25:58 +0200 Subject: [PATCH 1/2] Add flex to timeline item --- src/Timeline.tsx | 1 + src/__tests__/__snapshots__/Timeline.tsx.snap | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/Timeline.tsx b/src/Timeline.tsx index bb0fe94726c..7c48662896e 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -29,6 +29,7 @@ type StyledTimelineItemProps = {condensed?: boolean} const TimelineItem = styled(Box).attrs(props => ({ className: classnames('Timeline-Item', props.className) }))` + 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 index 18910d27bb2..2cece715237 100644 --- 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; From 2b950c71d234972ce0d4cfc1fc1cffcabd25de07 Mon Sep 17 00:00:00 2001 From: mathiasbosman <436498+mathiasbosman@users.noreply.github.com> Date: Fri, 3 Sep 2021 12:37:10 +0200 Subject: [PATCH 2/2] Add flex to timeline item (changeset) --- .changeset/great-countries-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/great-countries-yawn.md diff --git a/.changeset/great-countries-yawn.md b/.changeset/great-countries-yawn.md new file mode 100644 index 00000000000..48bfb5aaccd --- /dev/null +++ b/.changeset/great-countries-yawn.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Fix the Timeline.Item layout