@fluentui-react-native/experimental-avatar 0.14.18 → 0.14.19

package/src/JSAvatar.styling.ts

@@ -2,7 +2,7 @@ import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { ViewStyle } from 'react-native';
-import { calculateEffectiveSizes, convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
+import { convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
 import { borderStyles } from '@fluentui-react-native/tokens';
 
 const nameMap: { [key: string]: string } = {
@@ -11,7 +11,23 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = ['circular', 'square', 'inactive'];
+export const avatarStates: (keyof JSAvatarTokens)[] = [
+  'circular',
+  'square',
+  'inactive',
+  'size20',
+  'size24',
+  'size28',
+  'size32',
+  'size36',
+  'size40',
+  'size48',
+  'size56',
+  'size64',
+  'size72',
+  'size96',
+  'size120',
+];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -19,13 +35,12 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
   slotProps: {
     root: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { physicalSize } = calculateEffectiveSizes(tokens);
         const { horizontalIconAlignment, verticalIconAlignment } = tokens;
         return {
           style: {
             flexDirection: 'row',
-            width: physicalSize,
-            height: physicalSize,
+            width: tokens.width,
+            height: tokens.height,
             justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
             alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
             horizontalIconAlignment,
@@ -34,14 +49,13 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity'],
+      ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width'],
     ),
     initials: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { initialsSize } = calculateEffectiveSizes(tokens);
         return {
           style: {
-            fontSize: initialsSize,
+            fontSize: tokens.initialsSize,
           },
         };
       },
@@ -49,7 +63,6 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
     ),
     initialsBackground: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const { physicalSize } = calculateEffectiveSizes(tokens);
         const { backgroundColor, coinColorFluent } = tokens;
         let effectiveBackgroundColor = backgroundColor;
         if (coinColorFluent) {
@@ -58,8 +71,8 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             ...borderStyles.from(tokens, theme),
-            width: physicalSize,
-            height: physicalSize,
+            width: tokens.width,
+            height: tokens.height,
             flexGrow: 1,
             alignSelf: 'stretch',
             justifyContent: 'center',
@@ -68,46 +81,35 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['coinColorFluent', 'backgroundColor', 'physicalSize', ...borderStyles.keys],
+      ['coinColorFluent', 'backgroundColor', 'width', 'height', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { physicalSize } = calculateEffectiveSizes(tokens);
-
         return {
           style: {
             borderRadius: tokens.borderRadius,
-            width: physicalSize,
-            height: physicalSize,
+            width: tokens.width,
+            height: tokens.height,
           },
         };
       },
-      ['physicalSize', 'borderRadius'],
+      ['borderRadius', 'width', 'height'],
     ),
     icon: buildProps(
-      (tokens: JSAvatarTokens, theme: Theme) => {
-        const { iconSize, iconStrokeWidth } = calculateEffectiveSizes(tokens);
-        const iconSizeAdjusted = iconSize + iconStrokeWidth * 2;
-        const iconStrokeColor = tokens.iconStrokeColor || theme.colors.background;
+      (tokens: JSAvatarTokens) => {
         return {
           style: {
             position: 'absolute',
-            width: iconSizeAdjusted,
-            height: iconSizeAdjusted,
-            bottom: -iconStrokeWidth,
-            end: -iconStrokeWidth,
-            borderRadius: iconSizeAdjusted / 2,
-            borderWidth: iconStrokeWidth,
-            borderColor: iconStrokeColor,
+            width: tokens.iconSize,
+            height: tokens.iconSize,
           },
         };
       },
-      ['iconSize', 'iconStrokeWidth', 'iconStrokeColor'],
+      ['iconSize'],
     ),
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const { physicalSize } = calculateEffectiveSizes(tokens);
-        const ringConfig = getRingConfig(physicalSize);
+        const ringConfig = getRingConfig(tokens.width);
 
         const ringColor = tokens.ringColor;
         return {
@@ -124,13 +126,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['physicalSize', 'ring', 'physicalSize', ...borderStyles.keys],
+      ['width', 'height', ...borderStyles.keys],
+    ),
+    badge: buildProps(
+      (tokens: JSAvatarTokens) => {
+        return {
+          size: tokens.badgeSize,
+          shape: 'circular',
+        };
+      },
+      ['size'],
     ),
-    badge: buildProps((_tokens: JSAvatarTokens) => {
-      return {
-        size: 'medium',
-        shape: 'circular',
-      };
-    }, []),
   },
 };

package/src/JSAvatar.tsx

@@ -5,6 +5,8 @@ import { stylingSettings } from './JSAvatar.styling';
 import { compose, UseSlots, mergeProps, withSlots } from '@fluentui-react-native/framework';
 import { useAvatar } from './useAvatar';
 import { PresenceBadge } from '@fluentui-react-native/badge';
+import { Icon } from '@fluentui-react-native/icon';
+import { createIconProps } from '@fluentui-react-native/interactive-hooks';
 
 /**
  * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
@@ -20,6 +22,8 @@ export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSA
     userProps[layer] ||
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'circular') ||
+    layer === userProps['size'] ||
+    (!userProps['size'] && layer === 'size56') ||
     (userProps.active === 'inactive' && layer === 'inactive')
   );
 };
@@ -32,16 +36,17 @@ export const JSAvatar = compose<JSAvatarType>({
     image: Image,
     initials: Text,
     initialsBackground: View,
-    icon: Image,
+    icon: Icon,
     ring: View,
     badge: PresenceBadge,
   },
   useRender: (userProps: JSAvatarProps, useSlots: UseSlots<JSAvatarType>) => {
     const avatar = useAvatar(userProps);
+    const iconProps = createIconProps(userProps.icon);
     const Slots = useSlots(userProps, (layer) => avatarLookup(layer, avatar.state, userProps));
 
     return (final: JSAvatarProps) => {
-      const { activeAppearance, initials, image, badge, ...mergedProps } = mergeProps(avatar.props, final);
+      const { activeAppearance, icon, initials, image, badge, ...mergedProps } = mergeProps(avatar.props, final);
       const { showRing, transparentRing } = avatar.state;
 
       return (
@@ -50,11 +55,11 @@ export const JSAvatar = compose<JSAvatarType>({
             <Slots.image {...image} />
           ) : (
             <Slots.initialsBackground>
-              <Slots.initials>{initials}</Slots.initials>
+              {initials ? <Slots.initials>{initials}</Slots.initials> : userProps.icon && <Slots.icon {...iconProps} />}
             </Slots.initialsBackground>
           )}
           {showRing && !transparentRing && <Slots.ring />}
-          <Slots.badge {...badge} />
+          {badge.status && <Slots.badge {...badge} />}
         </Slots.root>
       );
     };

package/src/JSAvatar.types.ts

@@ -1,7 +1,8 @@
 import type { IViewProps } from '@fluentui-react-native/adapters';
 import { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native';
 import { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
-import { BadgeProps, PresenceBadgeProps } from '@fluentui-react-native/badge';
+import { BadgeProps, PresenceBadgeProps, BadgeSize } from '@fluentui-react-native/badge';
+import { IconProps, IconSourcesType } from '@fluentui-react-native/icon';
 
 export const JSAvatarName = 'Avatar';
 export const AvatarSizes = [
@@ -66,12 +67,13 @@ export interface AvatarConfigurableProps {
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   active?: AvatarActive;
   activeAppearance?: AvatarActiveAppearance;
+  badge?: PresenceBadgeProps;
+  icon?: IconSourcesType;
   image?: ImageProps;
-  src?: string;
   initials?: string;
   name?: string;
   shape?: AvatarShape;
-  badge?: PresenceBadgeProps;
+  src?: string;
 }
 
 export interface AvatarSlotProps {
@@ -79,7 +81,7 @@ export interface AvatarSlotProps {
   image: ImageProps;
   initials: TextProps;
   initialsBackground: ViewProps;
-  icon: ImageProps;
+  icon: IconProps;
   ring: ViewProps;
   badge: BadgeProps;
 }
@@ -87,19 +89,32 @@ export interface AvatarSlotProps {
 export type IconAlignment = 'start' | 'center' | 'end';
 
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
-  avatarSize?: number;
   iconSize?: number;
   iconStrokeWidth?: number;
   iconStrokeColor?: string;
   initialsSize?: number;
+  height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
-  physicalSize?: number;
   circular?: JSAvatarTokens;
   square?: JSAvatarTokens;
   inactive?: JSAvatarTokens;
   avatarOpacity?: number;
   ringColor?: ColorValue;
+  size20?: JSAvatarTokens;
+  size24?: JSAvatarTokens;
+  size28?: JSAvatarTokens;
+  size32?: JSAvatarTokens;
+  size36?: JSAvatarTokens;
+  size40?: JSAvatarTokens;
+  size48?: JSAvatarTokens;
+  size56?: JSAvatarTokens;
+  size64?: JSAvatarTokens;
+  size72?: JSAvatarTokens;
+  size96?: JSAvatarTokens;
+  size120?: JSAvatarTokens;
+  width?: number;
+  badgeSize?: BadgeSize;
 }
 
 export interface JSAvatarState {

package/src/JSAvatarTokens.ts

@@ -21,4 +21,88 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
     inactive: {
       avatarOpacity: 0.8,
     },
+    size20: {
+      width: 20,
+      height: 20,
+      badgeSize: 'smallest',
+      iconSize: 10,
+      initialsSize: 16,
+    },
+    size24: {
+      width: 24,
+      height: 24,
+      badgeSize: 'smallest',
+      iconSize: 10,
+      initialsSize: 16,
+    },
+    size28: {
+      width: 28,
+      height: 28,
+      badgeSize: 'smaller',
+      iconSize: 16,
+      initialsSize: 20,
+    },
+    size32: {
+      width: 32,
+      height: 32,
+      badgeSize: 'smaller',
+      iconSize: 16,
+      initialsSize: 20,
+    },
+    size36: {
+      width: 36,
+      height: 36,
+      badgeSize: 'smaller',
+      iconSize: 16,
+      initialsSize: 20,
+    },
+    size40: {
+      width: 40,
+      height: 40,
+      badgeSize: 'small',
+      iconSize: 16,
+      initialsSize: 20,
+    },
+    size48: {
+      width: 48,
+      height: 48,
+      badgeSize: 'small',
+      iconSize: 20,
+      initialsSize: 24,
+    },
+    size56: {
+      width: 56,
+      height: 56,
+      badgeSize: 'medium',
+      iconSize: 24,
+      initialsSize: 28,
+    },
+    size64: {
+      width: 64,
+      height: 64,
+      badgeSize: 'large',
+      iconSize: 28,
+      initialsSize: 32,
+    },
+    size72: {
+      width: 72,
+      height: 72,
+      badgeSize: 'large',
+      iconSize: 28,
+      initialsSize: 32,
+    },
+    size96: {
+      width: 96,
+      height: 96,
+      badgeSize: 'largest',
+      iconSize: 40,
+      initialsSize: 48,
+    },
+    size120: {
+      width: 120,
+      height: 120,
+      badgeSize: 'largest',
+      iconSize: 40,
+      initialsSize: 48,
+    },
   } as JSAvatarTokens);