@fluentui-react-native/experimental-avatar 0.14.23 → 0.14.26

package/src/JSAvatar.types.ts

@@ -1,11 +1,11 @@
 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 { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
 import { BadgeProps, PresenceBadgeProps, BadgeSize } from '@fluentui-react-native/badge';
 import { IconProps, IconSourcesType } from '@fluentui-react-native/icon';
 
 export const JSAvatarName = 'Avatar';
-export const AvatarSizes = [
+export const AvatarSizesForTokens = [
   'size20',
   'size24',
   'size28',
@@ -20,6 +20,8 @@ export const AvatarSizes = [
   'size120',
 ] as const;
 
+export const AvatarSizes = [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120] as const;
+
 /**
  * Sets color of the avatar when there is no picture. Uses fluent color names
  */
@@ -67,7 +69,6 @@ export type IconAlignment = 'start' | 'center' | 'end';
 export interface RingConfig {
   accent?: boolean;
   transparent?: boolean;
-  ringColor?: ColorValue; // glow
   ringBackgroundColor?: ColorValue; // inner/outer rings
   ringThickness?: number;
   innerGap?: number;
@@ -84,14 +85,33 @@ export interface AvatarConfigurableProps {
    * @defaultvalue neutral
    */
   avatarColor?: AvatarColor;
-  size?: AvatarSize;
   ring?: RingConfig;
 }
 
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+  /**
+   * Optional activity indicator
+   * * active: the avatar will be decorated according to activeAppearance
+   * * inactive: the avatar will be reduced in size and partially transparent
+   * * unset: normal display
+   *
+   * @defaultvalue unset
+   */
   active?: AvatarActive;
+
+  /**
+   * The appearance when `active="active"`
+   *
+   * @defaultvalue ring
+   */
   activeAppearance?: AvatarActiveAppearance;
   badge?: PresenceBadgeProps;
+
+  /**
+   * Icon to be displayed when the avatar doesn't have an image or initials.
+   *
+   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
+   */
   icon?: IconSourcesType;
 
   /**
@@ -101,15 +121,45 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   idForColor?: string | undefined;
 
   image?: ImageProps;
+
+  /**
+   * (optional) Custom initials.
+   *
+   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
+   * using the `getInitials` function.
+   *
+   * The initials are displayed when there is no image (including while the image is loading).
+   */
   initials?: string;
+
+  /**
+   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+   *
+   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
+   * accessibility tools.
+   */
   name?: string;
+
+  /**
+   * Size of the avatar in pixels.
+   *
+   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+   * based on design guidelines for the Avatar control.
+   *
+   * @defaultvalue 24
+   */
+  size?: AvatarSize;
+
+  /**
+   * The avatar can have a circular or square shape.
+   * @defaultvalue circular
+   */
   shape?: AvatarShape;
   src?: string;
 }
 
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
   iconSize?: number;
-  initialsSize?: number;
   height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
@@ -117,7 +167,6 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   square?: JSAvatarTokens;
   inactive?: JSAvatarTokens;
   avatarOpacity?: number;
-  ringColor?: ColorValue;
   size20?: JSAvatarTokens;
   size24?: JSAvatarTokens;
   size28?: JSAvatarTokens;
@@ -179,6 +228,7 @@ export interface AvatarSlotProps {
 export interface JSAvatarState {
   showRing: boolean;
   transparentRing: boolean;
+  showBadge: boolean;
 }
 
 export interface AvatarInfo {

package/src/JSAvatarTokens.ts

@@ -10,6 +10,11 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     color: globalTokens.color.white,
     backgroundColor: globalTokens.color.cornflower.primary,
     avatarOpacity: 1,
+    fontFamily: t.typography.families.primary,
+    fontWeight: globalTokens.font.weight.semibold,
+    fontSize: globalTokens.font.size[200],
+    width: 24,
+    height: 24,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
     },
@@ -23,184 +28,265 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       width: 20,
       height: 20,
       badgeSize: 'smallest',
-      iconSize: 10,
-      initialsSize: 16,
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size24: {
       width: 24,
       height: 24,
       badgeSize: 'smallest',
-      iconSize: 10,
-      initialsSize: 16,
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size28: {
       width: 28,
       height: 28,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
+      fontWeight: globalTokens.font.weight.semibold,
+      fontSize: globalTokens.font.size[100],
     },
     size32: {
       width: 32,
       height: 32,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
+      fontSize: globalTokens.font.size[100],
     },
     size36: {
       width: 36,
       height: 36,
       badgeSize: 'smaller',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
     },
     size40: {
       width: 40,
       height: 40,
       badgeSize: 'small',
-      iconSize: 16,
-      initialsSize: 20,
+      iconSize: 20,
     },
     size48: {
       width: 48,
       height: 48,
       badgeSize: 'small',
-      iconSize: 20,
-      initialsSize: 24,
+      iconSize: 24,
     },
     size56: {
       width: 56,
       height: 56,
       badgeSize: 'medium',
-      iconSize: 24,
-      initialsSize: 28,
+      iconSize: 28,
+      fontSize: globalTokens.font.size[400],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size64: {
       width: 64,
       height: 64,
       badgeSize: 'large',
-      iconSize: 28,
-      initialsSize: 32,
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size72: {
       width: 72,
       height: 72,
       badgeSize: 'large',
-      iconSize: 28,
-      initialsSize: 32,
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size96: {
       width: 96,
       height: 96,
       badgeSize: 'largest',
-      iconSize: 40,
-      initialsSize: 48,
+      iconSize: 48,
+      fontWeight: globalTokens.font.weight.regular,
+      fontSize: globalTokens.font.size[700],
+      square: {
+        borderRadius: globalTokens.corner.radius.extraLarge,
+      },
     },
     size120: {
       width: 120,
       height: 120,
       badgeSize: 'largest',
-      iconSize: 40,
-      initialsSize: 48,
+      iconSize: 48,
+      fontWeight: globalTokens.font.weight.regular,
+      fontSize: globalTokens.font.size[900],
+      square: {
+        borderRadius: globalTokens.corner.radius.extraLarge,
+      },
     },
     neutral: {
       backgroundColor: t.colors.neutralBackground6,
       color: t.colors.neutralForeground3,
-      ringColor: t.colors.defaultBorder,
+      borderColor: t.colors.defaultBorder,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.brandedBorder,
+      borderColor: t.colors.brandedBorder,
     },
     darkRed: {
-      backgroundColor: globalTokens.color.darkRed.primary,
+      backgroundColor: globalTokens.color.darkRed.tint40,
+      color: globalTokens.color.darkRed.shade30,
+      borderColor: globalTokens.color.darkRed.primary,
     },
     cranberry: {
-      backgroundColor: globalTokens.color.cranberry.primary,
+      backgroundColor: globalTokens.color.cranberry.tint40,
+      color: globalTokens.color.cranberry.shade30,
+      borderColor: globalTokens.color.cranberry.primary,
     },
     red: {
-      backgroundColor: globalTokens.color.red.primary,
+      backgroundColor: globalTokens.color.red.tint40,
+      color: globalTokens.color.red.shade30,
+      borderColor: globalTokens.color.red.primary,
     },
     pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.primary,
+      backgroundColor: globalTokens.color.pumpkin.tint40,
+      color: globalTokens.color.pumpkin.shade30,
+      borderColor: globalTokens.color.pumpkin.primary,
     },
     peach: {
-      backgroundColor: globalTokens.color.peach.primary,
+      backgroundColor: globalTokens.color.peach.tint40,
+      color: globalTokens.color.peach.shade30,
+      borderColor: globalTokens.color.peach.primary,
     },
     marigold: {
-      backgroundColor: globalTokens.color.marigold.primary,
+      backgroundColor: globalTokens.color.marigold.tint40,
+      color: globalTokens.color.marigold.shade30,
+      borderColor: globalTokens.color.marigold.primary,
     },
     gold: {
-      backgroundColor: globalTokens.color.gold.primary,
+      backgroundColor: globalTokens.color.gold.tint40,
+      color: globalTokens.color.gold.shade30,
+      borderColor: globalTokens.color.gold.primary,
     },
     brass: {
-      backgroundColor: globalTokens.color.brass.primary,
+      backgroundColor: globalTokens.color.brass.tint40,
+      color: globalTokens.color.brass.shade30,
+      borderColor: globalTokens.color.brass.primary,
     },
     brown: {
-      backgroundColor: globalTokens.color.brown.primary,
+      backgroundColor: globalTokens.color.brown.tint40,
+      color: globalTokens.color.brown.shade30,
+      borderColor: globalTokens.color.brown.primary,
     },
     forest: {
-      backgroundColor: globalTokens.color.forest.primary,
+      backgroundColor: globalTokens.color.forest.tint40,
+      color: globalTokens.color.forest.shade30,
+      borderColor: globalTokens.color.forest.primary,
     },
     seafoam: {
-      backgroundColor: globalTokens.color.seafoam.primary,
+      backgroundColor: globalTokens.color.seafoam.tint40,
+      color: globalTokens.color.seafoam.shade30,
+      borderColor: globalTokens.color.seafoam.primary,
     },
     darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.primary,
+      backgroundColor: globalTokens.color.darkGreen.tint40,
+      color: globalTokens.color.darkGreen.shade30,
+      borderColor: globalTokens.color.darkGreen.primary,
     },
     lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.primary,
+      backgroundColor: globalTokens.color.lightTeal.tint40,
+      color: globalTokens.color.lightTeal.shade30,
+      borderColor: globalTokens.color.lightTeal.primary,
     },
     teal: {
-      backgroundColor: globalTokens.color.teal.primary,
+      backgroundColor: globalTokens.color.teal.tint40,
+      color: globalTokens.color.teal.shade30,
+      borderColor: globalTokens.color.teal.primary,
     },
     steel: {
-      backgroundColor: globalTokens.color.steel.primary,
+      backgroundColor: globalTokens.color.steel.tint40,
+      color: globalTokens.color.steel.shade30,
+      borderColor: globalTokens.color.steel.primary,
     },
     blue: {
-      backgroundColor: globalTokens.color.blue.primary,
+      backgroundColor: globalTokens.color.blue.tint40,
+      color: globalTokens.color.blue.shade30,
+      borderColor: globalTokens.color.blue.primary,
     },
     royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.primary,
+      backgroundColor: globalTokens.color.royalBlue.tint40,
+      color: globalTokens.color.royalBlue.shade30,
+      borderColor: globalTokens.color.royalBlue.primary,
     },
     cornflower: {
-      backgroundColor: globalTokens.color.cornflower.primary,
+      backgroundColor: globalTokens.color.cornflower.tint40,
+      color: globalTokens.color.cornflower.shade30,
+      borderColor: globalTokens.color.cornflower.primary,
     },
     navy: {
-      backgroundColor: globalTokens.color.navy.primary,
+      backgroundColor: globalTokens.color.navy.tint40,
+      color: globalTokens.color.navy.shade30,
+      borderColor: globalTokens.color.navy.primary,
     },
     lavender: {
-      backgroundColor: globalTokens.color.lavender.primary,
+      backgroundColor: globalTokens.color.lavender.tint40,
+      color: globalTokens.color.lavender.shade30,
+      borderColor: globalTokens.color.lavender.primary,
     },
     purple: {
-      backgroundColor: globalTokens.color.purple.primary,
+      backgroundColor: globalTokens.color.purple.tint40,
+      color: globalTokens.color.purple.shade30,
+      borderColor: globalTokens.color.purple.primary,
     },
     grape: {
-      backgroundColor: globalTokens.color.grape.primary,
+      backgroundColor: globalTokens.color.grape.tint40,
+      color: globalTokens.color.grape.shade30,
+      borderColor: globalTokens.color.grape.primary,
     },
     lilac: {
-      backgroundColor: globalTokens.color.lilac.primary,
+      backgroundColor: globalTokens.color.lilac.tint40,
+      color: globalTokens.color.lilac.shade30,
+      borderColor: globalTokens.color.lilac.primary,
     },
     pink: {
-      backgroundColor: globalTokens.color.pink.primary,
+      backgroundColor: globalTokens.color.pink.tint40,
+      color: globalTokens.color.pink.shade30,
+      borderColor: globalTokens.color.pink.primary,
     },
     magenta: {
-      backgroundColor: globalTokens.color.magenta.primary,
+      backgroundColor: globalTokens.color.magenta.tint40,
+      color: globalTokens.color.magenta.shade30,
+      borderColor: globalTokens.color.magenta.primary,
     },
     plum: {
-      backgroundColor: globalTokens.color.plum.primary,
+      backgroundColor: globalTokens.color.plum.tint40,
+      color: globalTokens.color.plum.shade30,
+      borderColor: globalTokens.color.plum.primary,
     },
     beige: {
-      backgroundColor: globalTokens.color.beige.primary,
+      backgroundColor: globalTokens.color.beige.tint40,
+      color: globalTokens.color.beige.shade30,
+      borderColor: globalTokens.color.beige.primary,
     },
     mink: {
-      backgroundColor: globalTokens.color.mink.primary,
+      backgroundColor: globalTokens.color.mink.tint40,
+      color: globalTokens.color.mink.shade30,
+      borderColor: globalTokens.color.mink.primary,
     },
     platinum: {
-      backgroundColor: globalTokens.color.platinum.primary,
+      backgroundColor: globalTokens.color.platinum.tint40,
+      color: globalTokens.color.platinum.shade30,
+      borderColor: globalTokens.color.platinum.primary,
     },
     anchor: {
-      backgroundColor: globalTokens.color.anchor.primary,
+      backgroundColor: globalTokens.color.anchor.tint40,
+      color: globalTokens.color.anchor.shade30,
+      borderColor: globalTokens.color.anchor.primary,
     },
   } as JSAvatarTokens);

package/src/useAvatar.ts

@@ -9,10 +9,11 @@ import { PresenceBadgeProps } from '@fluentui-react-native/badge';
  * @returns configured props and state for FURN Avatar
  */
 export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
-  const { active, accessibilityLabel, activeAppearance, badge, src, ring, shape, ...rest } = props;
+  const { active, accessibilityLabel, activeAppearance, badge, ring, src, 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,
@@ -27,6 +28,7 @@ export const useAvatar = (props: JSAvatarProps): AvatarInfo => {
   const state: JSAvatarState = {
     showRing,
     transparentRing,
+    showBadge,
   };
 
   return {