Removes irregular styling on Timeline (#1424)

Co-authored-by: Cole Bemis <colebemis@github.com>
primer · Sep 15, 2021 · 7cf8d8b · 7cf8d8b
1 parent 7c5bdca
commit 7cf8d8b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/gold-waves-notice.md b/.changeset/gold-waves-notice.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Removed irregular styling on Timeline
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
@@ -77,10 +77,10 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
         display="flex"
         className={classnames(props.className, 'TimelineItem-Badge')}
         flexShrink={0}
-        css={`
-          border-radius: 50%;
-          border: 2px solid ${get('colors.bg.canvas')};
-        `}
+        borderRadius="50%"
+        borderWidth="2px"
+        borderStyle="solid"
+        borderColor="bg.canvas"
         overflow="hidden"
         color="icon.secondary"
         bg="timeline.badgeBg"

diff --git a/src/__tests__/__snapshots__/Timeline.tsx.snap b/src/__tests__/__snapshots__/Timeline.tsx.snap
@@ -70,7 +70,9 @@ exports[`Timeline.Badge renders consistently 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   border-radius: 50%;
-  border: 2px solid #ffffff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #ffffff;
 }
 
 <div