fix(avatar): font icons sizing issue

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -12,7 +12,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
       image={
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
-        <Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
+        <Icon name="user" circular variables={{ color: 'blue' }} />
       }
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />

packages/react/src/components/Avatar/Avatar.tsx

@@ -13,6 +13,10 @@ import {
   SizeValue,
 } from '../../lib'
 
+export type AvatarSlotClassNames = {
+  image: string
+}
+
 export interface AvatarProps extends UIComponentProps {
   /** Shorthand for the image. */
   image?: ShorthandValue
@@ -43,6 +47,10 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
 
   static displayName = 'Avatar'
 
+  static slotClassNames = {
+    image: `${Avatar.className}__image`,
+  }
+
   static propTypes = {
     ...commonPropTypes.createCommon({
       children: false,
@@ -92,6 +100,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
             avatar: true,
             title: name,
             styles: styles.image,
+            className: Avatar.slotClassNames.image,
           },
         })}
         {!image &&

packages/react/src/lib/callable.ts

@@ -1,6 +1,10 @@
+import { Func } from '../types'
+
 // https://jsperf.com/startdust-callable
-const callable = (possibleFunction: any) => (...args: any[]) => {
-  return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction
+const callable = <T = {}>(possibleFunction: T | Func<T>) => (...args: any[]) => {
+  return typeof possibleFunction === 'function'
+    ? (possibleFunction as Func<T>)(...args)
+    : possibleFunction
 }
 
 export default callable

packages/react/src/lib/createAnimationStyles.tsx

@@ -1,7 +1,7 @@
-import { ThemePrepared, AnimationProp } from '../themes/types'
+import { AnimationProp, ICSSInJSStyle, ThemePrepared } from '../themes/types'
 import callable from './callable'
 
-const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared) => {
+const createAnimationStyles = (animation: AnimationProp, theme: ThemePrepared): ICSSInJSStyle => {
   let animationCSSProp = {}
   const { animations = {} } = theme
 

packages/react/src/lib/getClasses.ts

@@ -19,7 +19,10 @@ const getClasses = (
   const componentParts: string[] = Object.keys(componentStyles)
 
   return componentParts.reduce((classes, partName) => {
-    classes[partName] = renderer.renderRule(callable(componentStyles[partName]), styleParam)
+    // The reason for explicit cast is that Fela and Stardust use different interfaces for CSS styles
+    // - Fela: interface IStyle extends CSS.Properties<string | number>
+    // - Stardust: interface ICSSInJSStyle extends React.CSSProperties
+    classes[partName] = renderer.renderRule(callable<any>(componentStyles[partName]), styleParam)
 
     return classes
   }, {})

packages/react/src/lib/renderComponent.tsx

@@ -211,10 +211,10 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
           colors,
         }
 
-        mergedStyles.root = {
+        mergedStyles.root = callable({
           ...callable(mergedStyles.root)(styleParam),
           ...animationCSSProp,
-        }
+        })
 
         const resolvedStyles: ComponentSlotStylesPrepared = Object.keys(mergedStyles).reduce(
           (acc, next) => ({ ...acc, [next]: callable(mergedStyles[next])(styleParam) }),

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -4,6 +4,7 @@ export { default as Chat } from './components/Chat/chatVariables'
 export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
+export { default as Icon } from './components/Icon/iconVariables'
 export { default as Input } from './components/Input/inputVariables'
 export { default as Menu } from './components/Menu/menuVariables'
 export { default as Text } from './components/Text/textVariables'

packages/react/src/themes/teams-high-contrast/components/Icon/iconVariables.ts

@@ -0,0 +1,6 @@
+import avatarVariables from '../Avatar/avatarVariables'
+import { callable } from '../../../../lib'
+
+export default siteVars => ({
+  avatarBorderWidth: callable(avatarVariables)(siteVars).avatarBorderWidth,
+})

packages/react/src/themes/teams/components/Avatar/avatarStyles.ts

@@ -1,8 +1,8 @@
 import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { AvatarProps } from '../../../../components/Avatar/Avatar'
+import { AvatarProps } from '../../../..'
 
-const sizeToPxValue = {
+export const sizeToPxValue = {
   smallest: 24,
   smaller: 24,
   small: 24,

packages/react/src/themes/teams/components/Icon/avatarIconStyles.ts

@@ -0,0 +1,34 @@
+import * as _ from 'lodash'
+
+import { pxToRem, SizeValue } from '../../../../lib'
+import { IconVariables } from './iconVariables'
+
+import { sizeToPxValue as avatarSizeToPxValue } from '../Avatar/avatarStyles'
+
+const sizeToIconPaddingInPx: Record<SizeValue, number> = {
+  smallest: 4,
+  smaller: 4,
+  small: 4,
+  medium: 6,
+  large: 8,
+  larger: 8,
+  largest: 10,
+}
+
+export const getAvatarFontIconStyles = (size: SizeValue, v: IconVariables) => {
+  const slotSizeInPx = avatarSizeToPxValue[size]
+  const iconBorderWidthInPx = v.avatarBorderWidth || 0
+  const iconPaddingSizeInPx = sizeToIconPaddingInPx[size]
+
+  const iconSizeInRems = pxToRem(slotSizeInPx - 2 * iconPaddingSizeInPx - 2 * iconBorderWidthInPx)
+
+  return {
+    fontSize: iconSizeInRems,
+    padding: pxToRem(iconPaddingSizeInPx),
+
+    '::before': {
+      width: iconSizeInRems,
+      height: iconSizeInRems,
+    },
+  }
+}

packages/react/src/themes/teams/components/Icon/iconStyles.ts

@@ -4,9 +4,10 @@ import fontAwesomeIcons from './fontAwesomeIconStyles'
 import { callable, pxToRem, SizeValue } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../types'
-import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
+import { Avatar, IconXSpacing, IconProps } from '../../../../'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, IconSizeModifier } from './iconVariables'
+import { getAvatarFontIconStyles } from './avatarIconStyles'
 
 const sizes: Record<SizeValue, number> = {
   smallest: 7,
@@ -19,7 +20,7 @@ const sizes: Record<SizeValue, number> = {
 }
 
 const getDefaultFontIcon = (iconName: string) => {
-  return callable(fontAwesomeIcons(iconName).icon)()
+  return callable(fontAwesomeIcons(iconName).icon as FontIconSpec)()
 }
 
 const getFontStyles = (
@@ -124,6 +125,10 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
       ...(!rtl && {
         transform: `rotate(${rotate}deg)`,
       }),
+
+      [`&.${Avatar.slotClassNames.image}`]: {
+        ...(isFontBased && getAvatarFontIconStyles(size, v)),
+      },
     }
   },
 

packages/react/src/themes/teams/components/Icon/iconVariables.ts

@@ -1,5 +1,7 @@
 import { ColorValues } from '../../../types'
-import { mapColorsToScheme, pxToRem } from '../../../../lib'
+import { callable, mapColorsToScheme, pxToRem } from '../../../../lib'
+
+import avatarVariables from '../Avatar/avatarVariables'
 
 export type IconSizeModifier = 'x' | 'xx'
 
@@ -19,6 +21,8 @@ export interface IconVariables {
   marginRight: string
   outline?: boolean
   sizeModifier?: IconSizeModifier
+
+  avatarBorderWidth?: number
 }
 
 const colorVariant = 500
@@ -36,4 +40,6 @@ export default (siteVars): IconVariables => ({
   horizontalSpace: pxToRem(10),
   marginRight: pxToRem(8),
   outline: undefined,
+
+  avatarBorderWidth: callable(avatarVariables)(siteVars).avatarBorderWidth,
 })

packages/react/src/types.ts

@@ -17,6 +17,7 @@ export type ResultOf<T> = T extends (...arg: any[]) => infer TResult ? TResult :
 export type OneOrArray<T> = T | T[]
 export type ObjectOf<T> = { [key: string]: T }
 
+export type Func<TResult> = (...args: any[]) => TResult
 export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult
 
 // ========================================================