fix(avatar): image always covers circle area

Fixes #480
pluralsight · Apr 2, 2019 · f9171a3 · f9171a3
1 parent b05ff38
commit f9171a3
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 21 deletions.
diff --git a/packages/avatar/src/css/index.js b/packages/avatar/src/css/index.js
@@ -41,8 +41,9 @@ export default {
     position: 'absolute',
     top: '0',
     left: '0',
-    width: 'auto',
-    height: '100%'
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
   },
   // __initials
   '.psds-avatar__initials': {

diff --git a/packages/avatar/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/avatar/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -9,7 +9,7 @@ exports[`Storyshots Default large 1`] = `
   >
     <img
       alt="large avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -27,7 +27,7 @@ exports[`Storyshots Default light image 1`] = `
   >
     <img
       alt="light image avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://en.gravatar.com/userimage/8399312/b15448d840afacd0eb18102baf788255.jpeg?d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -56,7 +56,7 @@ exports[`Storyshots Default medium 1`] = `
   >
     <img
       alt="medium avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -74,7 +74,7 @@ exports[`Storyshots Default small 1`] = `
   >
     <img
       alt="small avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -92,7 +92,7 @@ exports[`Storyshots Default xLarge 1`] = `
   >
     <img
       alt="xLarge avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -110,7 +110,7 @@ exports[`Storyshots Default xSmall 1`] = `
   >
     <img
       alt="xSmall avatar"
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -119,6 +119,93 @@ exports[`Storyshots Default xSmall 1`] = `
 </div>
 `;
 
+exports[`Storyshots Image cases flat, long 1`] = `
+<div
+  data-css-claeju=""
+>
+  <div
+    aria-hidden={true}
+    data-css-7fe6v0=""
+  >
+    <img
+      data-css-d7y6x2=""
+      onError={[Function]}
+      onLoad={[Function]}
+      src="https://cdn1.thr.com/sites/default/files/2019/03/chrisrocknaacp.jpg"
+    />
+    <div
+      aria-label="Chris Rock"
+      data-css-x99j9q=""
+      style={
+        Object {
+          "backgroundColor": "#9A171B",
+        }
+      }
+    >
+      CR
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Image cases square 1`] = `
+<div
+  data-css-claeju=""
+>
+  <div
+    aria-hidden={true}
+    data-css-7fe6v0=""
+  >
+    <img
+      data-css-d7y6x2=""
+      onError={[Function]}
+      onLoad={[Function]}
+      src="https://gravatar.com/avatar/63a1fa126f541c0f0ecf1d74f7a40640?s=320&r=g&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
+    />
+    <div
+      aria-label="Jake Trentsky"
+      data-css-x99j9q=""
+      style={
+        Object {
+          "backgroundColor": "#076F84",
+        }
+      }
+    >
+      JT
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Image cases tall, thin 1`] = `
+<div
+  data-css-claeju=""
+>
+  <div
+    aria-hidden={true}
+    data-css-7fe6v0=""
+  >
+    <img
+      data-css-d7y6x2=""
+      onError={[Function]}
+      onLoad={[Function]}
+      src="https://akns-images.eonline.com/eol_images/Entire_Site/2010330/293.WillFerrell.tg.043010.jpg"
+    />
+    <div
+      aria-label="Will Ferrill"
+      data-css-x99j9q=""
+      style={
+        Object {
+          "backgroundColor": "#1F964E",
+        }
+      }
+    >
+      WF
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Using Initials % Special Characters 1`] = `
 <div
   data-css-claeju=""
@@ -371,7 +458,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -393,7 +480,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -415,7 +502,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -437,7 +524,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -459,7 +546,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -481,7 +568,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -503,7 +590,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -525,7 +612,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -547,7 +634,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -569,7 +656,7 @@ exports[`Storyshots Using Initials alpha-order names w/ varied colors 1`] = `
       data-css-7fe6v0=""
     >
       <img
-        data-css-1ba73bf=""
+        data-css-d7y6x2=""
         onError={[Function]}
         onLoad={[Function]}
         src="https://example.com/image.jpg"
@@ -611,7 +698,7 @@ exports[`Storyshots Using Initials error-out image src, with name 1`] = `
     data-css-7fe6v0=""
   >
     <img
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://jaketrent.com/fake.jpg"
@@ -650,7 +737,7 @@ exports[`Storyshots Using Initials with invalid gravatar image 1`] = `
     data-css-7fe6v0=""
   >
     <img
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/invalidhash?d=tmp&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"
@@ -679,7 +766,7 @@ exports[`Storyshots Using Initials with invalid gravatar image, no name 1`] = `
     data-css-7fe6v0=""
   >
     <img
-      data-css-1ba73bf=""
+      data-css-d7y6x2=""
       onError={[Function]}
       onLoad={[Function]}
       src="https://secure.gravatar.com/avatar/invalidhash?d=tmp&d=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fps-cdn%2Fdesign-system%2Fassets%2Ftransparent.gif"

diff --git a/packages/avatar/src/react/__stories__/index.story.js b/packages/avatar/src/react/__stories__/index.story.js
@@ -70,3 +70,23 @@ storyInitials.add('alpha-order names w/ varied colors', () => (
     <Avatar name="Brian O'Mally" src="https://example.com/image.jpg" />
   </div>
 ))
+
+storiesOf('Image cases', module)
+  .add('tall, thin', () => (
+    <Avatar
+      name={'Will Ferrill'}
+      src="https://akns-images.eonline.com/eol_images/Entire_Site/2010330/293.WillFerrell.tg.043010.jpg"
+    />
+  ))
+  .add('flat, long', () => (
+    <Avatar
+      name="Chris Rock"
+      src="https://cdn1.thr.com/sites/default/files/2019/03/chrisrocknaacp.jpg"
+    />
+  ))
+  .add('square', () => (
+    <Avatar
+      name="Jake Trentsky"
+      src="https://gravatar.com/avatar/63a1fa126f541c0f0ecf1d74f7a40640?s=320&r=g"
+    />
+  ))