@fluentui-react-native/experimental-avatar 0.14.36 → 0.14.39

package/src/JSAvatar.types.ts

@@ -56,18 +56,22 @@ export const AvatarColors = [
   'mink',
   'platinum',
   'anchor',
+  'burgundy',
+  'hotPink',
+  'orchid',
 ] as const;
+export const ColorSchemes = ['neutral', 'brand', 'colorful'] as const;
 export type AvatarSize = typeof AvatarSizes[number];
 export type AvatarNamedColor = typeof AvatarColors[number];
+export type AvatarColorSchemes = typeof ColorSchemes[number];
 
 export type AvatarShape = 'circular' | 'square';
 export type AvatarActive = 'active' | 'inactive' | 'unset';
 export type AvatarActiveAppearance = 'ring';
-export type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+export type AvatarColor = AvatarColorSchemes | AvatarNamedColor | ColorValue;
 export type IconAlignment = 'start' | 'center' | 'end';
 
 export interface RingConfig {
-  accent?: boolean;
   transparent?: boolean;
   ringThickness?: number;
   innerGap?: number;
@@ -84,6 +88,7 @@ export interface AvatarConfigurableProps {
    * @defaultvalue neutral
    */
   avatarColor?: AvatarColor;
+  initialsColor?: ColorValue;
   ring?: RingConfig;
 
   /**
@@ -134,11 +139,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
    */
   idForColor?: string;
 
-  /**
-   * The Avatar's image.
-   */
-  image?: ImageProps;
-
   /**
    * (optional) Custom initials.
    *
@@ -164,9 +164,9 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   shape?: AvatarShape;
 
   /**
-   * Currently used for image URL, will be deprecated when image prop works
+   * Shorthand for passing image URL instead of using `image` prop
    */
-  src?: string;
+  imageUrl?: string;
 }
 
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
@@ -225,6 +225,9 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   mink?: JSAvatarTokens;
   platinum?: JSAvatarTokens;
   anchor?: JSAvatarTokens;
+  burgundy?: JSAvatarTokens;
+  hotPink?: JSAvatarTokens;
+  orchid?: JSAvatarTokens;
 }
 
 export interface AvatarSlotProps {

package/src/JSAvatarTokens.ts

@@ -7,15 +7,15 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
   ({
     horizontalIconAlignment: 'end',
     verticalIconAlignment: 'end',
-    color: globalTokens.color.white,
-    backgroundColor: globalTokens.color.cornflower.primary,
+    color: t.colors.neutralForeground3,
+    backgroundColor: t.colors.neutralBackground6,
     avatarOpacity: 1,
     fontFamily: t.typography.families.primary,
     fontWeight: globalTokens.font.weight.semibold,
     fontSize: globalTokens.font.size[200],
     size: 24,
     iconSize: 16,
-    iconColor: globalTokens.color.white,
+    iconColor: t.colors.neutralForeground3,
     ringColor: t.colors.transparentStroke,
     borderColor: globalTokens.color.white,
     borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
@@ -163,6 +163,9 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     mink: getColorProps('mink', t),
     platinum: getColorProps('platinum', t),
     anchor: getColorProps('anchor', t),
+    burgundy: getColorProps('burgundy', t),
+    hotPink: getColorProps('hotPink', t),
+    orchid: getColorProps('orchid', t),
   } as JSAvatarTokens);
 
 /**

package/src/JSAvatarTokens.win32.ts

@@ -163,6 +163,9 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     mink: getColorProps('mink', t),
     platinum: getColorProps('platinum', t),
     anchor: getColorProps('anchor', t),
+    burgundy: getColorProps('burgundy', t),
+    hotPink: getColorProps('hotPink', t),
+    orchid: getColorProps('orchid', t),
   } as JSAvatarTokens);
 
 /**

package/src/__tests__/__snapshots__/JSAvatar.test.jsx.snap

@@ -2,6 +2,9 @@
 
 exports[`Avatar rendering renders Avatar 1`] = `
 <View
+  accessibilityLabel=""
+  accessibilityRole="image"
+  accessible={true}
   shape="circular"
   style={
     Object {
@@ -17,6 +20,7 @@ exports[`Avatar rendering renders Avatar 1`] = `
   }
 >
   <View
+    accessible={false}
     style={
       Object {
         "alignItems": "center",

package/src/useAvatar.ts

@@ -1,5 +1,4 @@
 import { JSAvatarProps, AvatarInfo, JSAvatarState, AvatarColors } from './JSAvatar.types';
-import { ImageProps, ImageSourcePropType } from 'react-native';
 import { PresenceBadgeProps } from '@fluentui-react-native/badge';
 import { titles } from './titles';
 import { getHashCodeWeb } from './getHashCode';
@@ -11,16 +10,25 @@ import { getHashCodeWeb } from './getHashCode';
  * @returns configured props and state for FURN Avatar
  */
 export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
-  const { avatarColor, active, accessibilityLabel, activeAppearance, badge, idForColor, initials, name, src, ring, shape, ...rest } = props;
+  const {
+    avatarColor,
+    active,
+    accessibilityLabel,
+    accessibilityRole,
+    activeAppearance,
+    badge,
+    idForColor,
+    initials,
+    name,
+    ring,
+    shape,
+    ...rest
+  } = props;
 
   const showRing = active === 'active' && activeAppearance === 'ring';
   const transparentRing = !!ring?.transparent;
   const showBadge = (!active || active === 'unset') && !!badge && !!badge.status;
-
-  const imageProps: ImageProps = {
-    accessibilityLabel,
-    source: src ? ({ uri: src } as ImageSourcePropType) : undefined,
-  };
+  const accessibilityText = `${name || ''}${showBadge ? `, ${badge.status}` : ''}`;
 
   const badgeProps: PresenceBadgeProps = {
     size: 'small',
@@ -39,12 +47,14 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
 
   return {
     props: {
+      accessible: true,
+      accessibilityLabel: accessibilityLabel || accessibilityText,
+      accessibilityRole: accessibilityRole ?? 'image',
       avatarColor: _avatarColor,
       shape: shape || 'circular',
       ...rest,
       active,
       activeAppearance,
-      image: imageProps,
       badge: badgeProps,
       initials: _initials,
     },