Fix avatar presentation (#1610)

* Adding stories
* Update naming and image ref
* Image snapshots

packages/components/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.22]
+
+### Fixed
+
+- `AvatarIcon`, `AvatarUser`, `AvatarCombo` - corrected rendering flaw where initials or icon weren't centered
+
 ## [0.9.21]
 
 ### Changed

packages/components/src/Avatar/Avatar.tsx

@@ -119,7 +119,7 @@ export const avatarCSS = css`
 
   align-items: center;
   border-radius: 100%;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
 

storybook/src/AvatarCombo.stories.tsx → packages/components/src/Avatar/AvatarCombo.story.tsx

@@ -25,16 +25,17 @@
  */
 
 import React from 'react'
-import { AvatarCombo, AvatarComboProps } from '@looker/components'
 import { Story } from '@storybook/react/types-6-0'
+import { AvatarCombo, AvatarComboProps } from './AvatarCombo'
 
 const Template: Story<AvatarComboProps> = (args) => <AvatarCombo {...args} />
 
 /* eslint-disable @typescript-eslint/camelcase */
 const user = {
-  avatar_url: 'https://www.fillmurray.com/150/150',
-  first_name: 'Bill',
-  last_name: 'Murray',
+  avatar_url:
+    'https://github.com/looker-open-source/components/blob/1b708b472d974987e80c30bbbb286911a438542a/packages/components/test-assets/cheese.png?raw=true',
+  first_name: 'Cheddar',
+  last_name: 'Cheese',
 }
 /* eslint-enable @typescript-eslint/camelcase */
 
@@ -47,5 +48,5 @@ Primary.args = {
 
 export default {
   component: AvatarCombo,
-  title: 'Avatar/AvatarCombo',
+  title: 'AvatarCombo',
 }

storybook/src/AvatarIcon.stories.tsx → packages/components/src/Avatar/AvatarIcon.story.tsx

@@ -25,8 +25,8 @@
  */
 
 import React from 'react'
-import { AvatarIcon, AvatarIconProps } from '@looker/components'
 import { Story } from '@storybook/react/types-6-0'
+import { AvatarIconProps, AvatarIcon } from './AvatarIcon'
 
 const Template: Story<AvatarIconProps> = (args) => <AvatarIcon {...args} />
 
@@ -38,5 +38,5 @@ Primary.args = {
 
 export default {
   component: AvatarIcon,
-  title: 'Avatar/AvatarIcon',
+  title: 'AvatarIcon',
 }

storybook/src/AvatarUser.stories.tsx → packages/components/src/Avatar/AvatarUser.story.tsx

@@ -25,25 +25,30 @@
  */
 
 import React from 'react'
-import { AvatarUser, AvatarUserProps } from '@looker/components'
 import { Story } from '@storybook/react/types-6-0'
+import { AvatarUserProps, AvatarUser } from './AvatarUser'
 
 const Template: Story<AvatarUserProps> = (args) => <AvatarUser {...args} />
 
 /* eslint-disable @typescript-eslint/camelcase */
 const user = {
-  avatar_url: 'https://www.fillmurray.com/150/150',
-  first_name: 'Bill',
-  last_name: 'Murray',
+  avatar_url:
+    'https://github.com/looker-open-source/components/blob/1b708b472d974987e80c30bbbb286911a438542a/packages/components/test-assets/cheese.png?raw=true',
+  first_name: 'Cheddar',
+  last_name: 'Cheese',
 }
-/* eslint-enable @typescript-eslint/camelcase */
 
 export const Primary = Template.bind({})
 Primary.args = {
   user,
 }
 
+export const Initials = Template.bind({})
+Initials.args = {
+  user: { ...user, avatar_url: null },
+}
+
 export default {
   component: AvatarUser,
-  title: 'Avatar/AvatarUser',
+  title: 'AvatarUser',
 }

packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -52,10 +52,7 @@ exports[`Avatar AvatarCombo renders Avatar and its secondary avatar 1`] = `
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   background: currentColor;
@@ -81,10 +78,7 @@ exports[`Avatar AvatarCombo renders Avatar and its secondary avatar 1`] = `
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -219,10 +213,7 @@ exports[`Avatar AvatarCombo renders Avatar initials and secondary with Code icon
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   background: currentColor;
@@ -248,10 +239,7 @@ exports[`Avatar AvatarCombo renders Avatar initials and secondary with Code icon
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -373,10 +361,7 @@ exports[`Avatar AvatarCombo renders AvatarIcon and secondary avatar if user is n
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -406,10 +391,7 @@ exports[`Avatar AvatarCombo renders AvatarIcon and secondary avatar if user is n
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -539,10 +521,7 @@ exports[`Avatar AvatarIcon renders  1`] = `
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -633,10 +612,7 @@ exports[`Avatar AvatarIcon renders different icon if specified 1`] = `
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   border: solid 1px currentColor;
@@ -717,10 +693,7 @@ exports[`Avatar AvatarUser shows initials if has broken url as avatar_url 1`] =
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   background: currentColor;
@@ -771,10 +744,7 @@ exports[`Avatar AvatarUser shows initials if it has null as avatar_url  1`] = `
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   background: currentColor;
@@ -828,10 +798,7 @@ exports[`Avatar AvatarUser shows user profile picture if it has good avatar_url
   -ms-flex-align: center;
   align-items: center;
   border-radius: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   justify-items: center;
   overflow: hidden;
   background: currentColor;