fix(ThumbnailCircle): add image centering inside the circle (#559)

squash ix(ThumbnailCircle): fix styles for passed child images Rebased
ticketmaster · Jul 19, 2019 · 89e5cf6 · 89e5cf6
1 parent d7cdfde
commit 89e5cf6
Show file tree

Hide file tree

Showing 5 changed files with 2,190 additions and 2,265 deletions.
diff --git a/src/components/Image/ThumbnailCircle.js b/src/components/Image/ThumbnailCircle.js
@@ -14,17 +14,17 @@ const RoundContainer = styled.div`
   position: relative;
   padding-top: ${({ size }) => (size ? `${size}px` : "100%")};
   width: ${({ size }) => (size ? `${size}px` : "100%")};
+  & > img {
+    position: absolute;
+    height: 100%;
+    width: auto;
+    top: 0;
+  }
 `;
 
-const Image = styled.img`
-  position: absolute;
-  height: 100%;
-  width: auto;
-  top: 0;
-`;
 const ThumbnailCircle = ({ size, src, alt, ...props }) => (
   <RoundContainer size={size}>
-    {props.image || <Image src={src} alt={alt} />}
+    {props.image || <img src={src} alt={alt} />}
   </RoundContainer>
 );
 

diff --git a/src/components/Image/__tests__/__snapshots__/index.spec.js.snap b/src/components/Image/__tests__/__snapshots__/index.spec.js.snap
@@ -2,12 +2,11 @@
 
 exports[`<ThumbnailCircle /> renders ThumbnailCircle image correctly 1`] = `
 <div
-  className="klrwsq"
+  className="dnmvmf"
   size={40}
 >
   <img
     alt="thumbnailCircle"
-    className="itIwRK"
     src="https://placekitten.com/g/512/288"
   />
 </div>