@fluentui-react-native/experimental-avatar 0.14.21 → 0.14.22

package/src/JSAvatar.styling.ts

@@ -1,8 +1,8 @@
-import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
+import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps, AvatarColors, AvatarSizes } from './JSAvatar.types';
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { ViewStyle } from 'react-native';
-import { convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
+import { getRingConfig } from './JSAvatar.helpers';
 import { borderStyles } from '@fluentui-react-native/tokens';
 
 const nameMap: { [key: string]: string } = {
@@ -11,23 +11,7 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = [
-  'circular',
-  'square',
-  'inactive',
-  'size20',
-  'size24',
-  'size28',
-  'size32',
-  'size36',
-  'size40',
-  'size48',
-  'size56',
-  'size64',
-  'size72',
-  'size96',
-  'size120',
-];
+export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizes, 'circular', 'square', 'inactive'];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -35,17 +19,17 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
   slotProps: {
     root: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { horizontalIconAlignment, verticalIconAlignment } = tokens;
+        const { horizontalIconAlignment, verticalIconAlignment, width, height, avatarOpacity } = tokens;
         return {
           style: {
             flexDirection: 'row',
-            width: tokens.width,
-            height: tokens.height,
+            width: width,
+            height: height,
             justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
             alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
             horizontalIconAlignment,
             verticalIconAlignment,
-            opacity: tokens.avatarOpacity,
+            opacity: avatarOpacity,
           },
         };
       },
@@ -56,18 +40,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             fontSize: tokens.initialsSize,
+            color: tokens.color,
           },
         };
       },
-      ['initialsSize'],
+      ['initialsSize', 'color'],
     ),
     initialsBackground: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const { backgroundColor, coinColorFluent } = tokens;
-        let effectiveBackgroundColor = backgroundColor;
-        if (coinColorFluent) {
-          effectiveBackgroundColor = convertCoinColorFluent(coinColorFluent);
-        }
+        const { backgroundColor } = tokens;
+
         return {
           style: {
             ...borderStyles.from(tokens, theme),
@@ -77,11 +59,11 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             alignSelf: 'stretch',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: effectiveBackgroundColor,
+            backgroundColor: backgroundColor,
           },
         };
       },
-      ['coinColorFluent', 'backgroundColor', 'width', 'height', ...borderStyles.keys],
+      ['backgroundColor', 'width', 'height', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -110,12 +92,10 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
         const ringConfig = getRingConfig(tokens.width);
-
-        const ringColor = tokens.ringColor;
         return {
           style: {
             borderStyle: 'solid',
-            borderColor: ringColor,
+            borderColor: tokens.ringColor,
             borderWidth: ringConfig.stroke,
             width: ringConfig.size,
             height: ringConfig.size,
@@ -126,7 +106,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['width', 'height', ...borderStyles.keys],
+      ['width', 'height', 'ringColor', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {

package/src/JSAvatar.tsx

@@ -22,6 +22,8 @@ export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSA
     userProps[layer] ||
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'circular') ||
+    layer === userProps['avatarColor'] ||
+    (!userProps['avatarColor'] && layer === 'brand') ||
     layer === userProps['size'] ||
     (!userProps['size'] && layer === 'size56') ||
     (userProps.active === 'inactive' && layer === 'inactive')

package/src/JSAvatar.types.ts

@@ -19,36 +19,51 @@ export const AvatarSizes = [
   'size96',
   'size120',
 ] as const;
+
+/**
+ * Sets color of the avatar when there is no picture. Uses fluent color names
+ */
+export const AvatarColors = [
+  'darkRed',
+  'cranberry',
+  'red',
+  'pumpkin',
+  'peach',
+  'marigold',
+  'gold',
+  'brass',
+  'brown',
+  'forest',
+  'seafoam',
+  'darkGreen',
+  'lightTeal',
+  'teal',
+  'steel',
+  'blue',
+  'royalBlue',
+  'cornflower',
+  'navy',
+  'lavender',
+  'purple',
+  'grape',
+  'lilac',
+  'pink',
+  'magenta',
+  'plum',
+  'beige',
+  'mink',
+  'platinum',
+  'anchor',
+] as const;
 export type AvatarSize = typeof AvatarSizes[number];
+export type AvatarNamedColor = typeof AvatarColors[number];
 
 export type AvatarShape = 'circular' | 'square';
 export type AvatarActive = 'active' | 'inactive' | 'unset';
 export type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+export type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+export type IconAlignment = 'start' | 'center' | 'end';
 
-/**
- * Sets color of the avatar when there is no picture. Uses fluent color names
- */
-export type AvatarColor =
-  | 'cornflower'
-  | 'blue'
-  | 'royalBlue'
-  | 'teal'
-  | 'forest'
-  | 'darkGreen'
-  | 'berry'
-  | 'hotPink'
-  | 'grape'
-  | 'purple'
-  | 'pumpkin'
-  | 'red'
-  | 'burgundy'
-  | 'orchid'
-  | 'brass'
-  | 'darkRed'
-  | 'beige'
-  | 'platinum'
-  | 'steel'
-  | 'brown';
 export interface RingConfig {
   accent?: boolean;
   transparent?: boolean;
@@ -59,9 +74,18 @@ export interface RingConfig {
 }
 
 export interface AvatarConfigurableProps {
+  /**
+   * The color when displaying either an icon or initials.
+   * * neutral (default): gray
+   * * brand: color from the brand palette
+   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
+   * * [AvatarNamedColor]: a specific color from the theme
+   *
+   * @defaultvalue neutral
+   */
+  avatarColor?: AvatarColor;
   size?: AvatarSize;
   ring?: RingConfig;
-  coinColorFluent?: AvatarColor;
 }
 
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
@@ -69,6 +93,13 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   activeAppearance?: AvatarActiveAppearance;
   badge?: PresenceBadgeProps;
   icon?: IconSourcesType;
+
+  /**
+   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+   * Use this when a name is not available, but there is another unique identifier that can be used instead.
+   */
+  idForColor?: string | undefined;
+
   image?: ImageProps;
   initials?: string;
   name?: string;
@@ -76,22 +107,8 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   src?: string;
 }
 
-export interface AvatarSlotProps {
-  root: ViewProps;
-  image: ImageProps;
-  initials: TextProps;
-  initialsBackground: ViewProps;
-  icon: IconProps;
-  ring: ViewProps;
-  badge: BadgeProps;
-}
-
-export type IconAlignment = 'start' | 'center' | 'end';
-
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
   iconSize?: number;
-  iconStrokeWidth?: number;
-  iconStrokeColor?: string;
   initialsSize?: number;
   height?: number;
   horizontalIconAlignment?: IconAlignment;
@@ -115,6 +132,48 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   size120?: JSAvatarTokens;
   width?: number;
   badgeSize?: BadgeSize;
+  neutral?: JSAvatarTokens;
+  brand?: JSAvatarTokens;
+  darkRed?: JSAvatarTokens;
+  cranberry?: JSAvatarTokens;
+  red?: JSAvatarTokens;
+  pumpkin?: JSAvatarTokens;
+  peach?: JSAvatarTokens;
+  marigold?: JSAvatarTokens;
+  gold?: JSAvatarTokens;
+  brass?: JSAvatarTokens;
+  brown?: JSAvatarTokens;
+  forest?: JSAvatarTokens;
+  seafoam?: JSAvatarTokens;
+  darkGreen?: JSAvatarTokens;
+  lightTeal?: JSAvatarTokens;
+  teal?: JSAvatarTokens;
+  steel?: JSAvatarTokens;
+  blue?: JSAvatarTokens;
+  royalBlue?: JSAvatarTokens;
+  cornflower?: JSAvatarTokens;
+  navy?: JSAvatarTokens;
+  lavender?: JSAvatarTokens;
+  purple?: JSAvatarTokens;
+  grape?: JSAvatarTokens;
+  lilac?: JSAvatarTokens;
+  pink?: JSAvatarTokens;
+  magenta?: JSAvatarTokens;
+  plum?: JSAvatarTokens;
+  beige?: JSAvatarTokens;
+  mink?: JSAvatarTokens;
+  platinum?: JSAvatarTokens;
+  anchor?: JSAvatarTokens;
+}
+
+export interface AvatarSlotProps {
+  root: ViewProps;
+  image: ImageProps;
+  initials: TextProps;
+  initialsBackground: ViewProps;
+  icon: IconProps;
+  ring: ViewProps;
+  badge: BadgeProps;
 }
 
 export interface JSAvatarState {

package/src/JSAvatarTokens.ts

@@ -1,16 +1,14 @@
 import { Theme } from '@fluentui-react-native/framework';
 import { TokenSettings } from '@fluentui-react-native/use-styling';
 import { JSAvatarTokens } from '.';
-import { convertCoinColorFluent } from './JSAvatar.helpers';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
+export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
   ({
     horizontalIconAlignment: 'end',
     verticalIconAlignment: 'end',
-    color: 'white', // initials is always 'white', unless overriden by token
-    iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
-    backgroundColor: convertCoinColorFluent('cornflower'),
+    color: globalTokens.color.white,
+    backgroundColor: globalTokens.color.cornflower.primary,
     avatarOpacity: 1,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
@@ -105,4 +103,104 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
       iconSize: 40,
       initialsSize: 48,
     },
+    neutral: {
+      backgroundColor: t.colors.neutralBackground6,
+      color: t.colors.neutralForeground3,
+      ringColor: t.colors.defaultBorder,
+    },
+    brand: {
+      backgroundColor: t.colors.brandBackgroundStatic,
+      color: t.colors.neutralForegroundOnBrand,
+      ringColor: t.colors.brandedBorder,
+    },
+    darkRed: {
+      backgroundColor: globalTokens.color.darkRed.primary,
+    },
+    cranberry: {
+      backgroundColor: globalTokens.color.cranberry.primary,
+    },
+    red: {
+      backgroundColor: globalTokens.color.red.primary,
+    },
+    pumpkin: {
+      backgroundColor: globalTokens.color.pumpkin.primary,
+    },
+    peach: {
+      backgroundColor: globalTokens.color.peach.primary,
+    },
+    marigold: {
+      backgroundColor: globalTokens.color.marigold.primary,
+    },
+    gold: {
+      backgroundColor: globalTokens.color.gold.primary,
+    },
+    brass: {
+      backgroundColor: globalTokens.color.brass.primary,
+    },
+    brown: {
+      backgroundColor: globalTokens.color.brown.primary,
+    },
+    forest: {
+      backgroundColor: globalTokens.color.forest.primary,
+    },
+    seafoam: {
+      backgroundColor: globalTokens.color.seafoam.primary,
+    },
+    darkGreen: {
+      backgroundColor: globalTokens.color.darkGreen.primary,
+    },
+    lightTeal: {
+      backgroundColor: globalTokens.color.lightTeal.primary,
+    },
+    teal: {
+      backgroundColor: globalTokens.color.teal.primary,
+    },
+    steel: {
+      backgroundColor: globalTokens.color.steel.primary,
+    },
+    blue: {
+      backgroundColor: globalTokens.color.blue.primary,
+    },
+    royalBlue: {
+      backgroundColor: globalTokens.color.royalBlue.primary,
+    },
+    cornflower: {
+      backgroundColor: globalTokens.color.cornflower.primary,
+    },
+    navy: {
+      backgroundColor: globalTokens.color.navy.primary,
+    },
+    lavender: {
+      backgroundColor: globalTokens.color.lavender.primary,
+    },
+    purple: {
+      backgroundColor: globalTokens.color.purple.primary,
+    },
+    grape: {
+      backgroundColor: globalTokens.color.grape.primary,
+    },
+    lilac: {
+      backgroundColor: globalTokens.color.lilac.primary,
+    },
+    pink: {
+      backgroundColor: globalTokens.color.pink.primary,
+    },
+    magenta: {
+      backgroundColor: globalTokens.color.magenta.primary,
+    },
+    plum: {
+      backgroundColor: globalTokens.color.plum.primary,
+    },
+    beige: {
+      backgroundColor: globalTokens.color.beige.primary,
+    },
+    mink: {
+      backgroundColor: globalTokens.color.mink.primary,
+    },
+    platinum: {
+      backgroundColor: globalTokens.color.platinum.primary,
+    },
+    anchor: {
+      backgroundColor: globalTokens.color.anchor.primary,
+    },
   } as JSAvatarTokens);