@fluentui-react-native/experimental-avatar 0.14.24 → 0.14.27

package/lib-commonjs/utils/getInitials.js

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = void 0;
+/**
+ * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+ *  so for example, (xyz) [xyz] {xyz} all would be ignored
+ */
+var UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+/**
+ * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+ * Applies after unwanted enclosures have been removed
+ */
+var UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+var PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+/** Regular expression matching one or more spaces. */
+var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+/**
+ * Regular expression matching languages for which we currently don't support initials.
+ * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.
+ * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
+ * Japanese: Hiragana, Katakana.
+ * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
+ *             CJK Unified Ideographs Extension B
+ */
+// eslint-disable-next-line @fluentui/max-len
+var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
+function getInitialsLatin(displayName, isRtl) {
+    var initials = '';
+    var splits = displayName.split(' ');
+    if (splits.length === 2) {
+        initials += splits[0].charAt(0).toUpperCase();
+        initials += splits[1].charAt(0).toUpperCase();
+    }
+    else if (splits.length === 3) {
+        initials += splits[0].charAt(0).toUpperCase();
+        initials += splits[2].charAt(0).toUpperCase();
+    }
+    else if (splits.length !== 0) {
+        initials += splits[0].charAt(0).toUpperCase();
+    }
+    if (isRtl && initials.length > 1) {
+        return initials.charAt(1) + initials.charAt(0);
+    }
+    return initials;
+}
+function cleanupDisplayName(displayName) {
+    displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+    displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
+    displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+    displayName = displayName.trim();
+    return displayName;
+}
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param allowPhoneInitials - Should initials be generated from phone numbers (default false)
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ */
+function getInitials(displayName, isRtl, allowPhoneInitials) {
+    if (!displayName) {
+        return '';
+    }
+    displayName = cleanupDisplayName(displayName);
+    // For names containing CJK characters, and phone numbers, we don't display initials
+    if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {
+        return '';
+    }
+    return getInitialsLatin(displayName, isRtl);
+}
+exports.getInitials = getInitials;
+//# sourceMappingURL=getInitials.js.map

package/lib-commonjs/utils/getInitials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.js","sourceRoot":"","sources":["../../src/utils/getInitials.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAEH;;;GAGG;AACH,IAAM,yBAAyB,GAAW,6BAA6B,CAAC;AAExE;;;GAGG;AACH,IAAM,oBAAoB,GAAW,4DAA4D,CAAC;AAElG;;;GAGG;AACH,IAAM,iBAAiB,GAAW,+BAA+B,CAAC;AAElE,sDAAsD;AACtD,IAAM,0BAA0B,GAAW,MAAM,CAAC;AAElD;;;;;;;GAOG;AACH,6CAA6C;AAC7C,IAAM,sBAAsB,GAC1B,4MAA4M,CAAC;AAE/M,SAAS,gBAAgB,CAAC,WAAmB,EAAE,KAAc;IAC3D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,IAAM,MAAM,GAAa,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEhD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;SAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9C,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;SAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;IAED,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QAChC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChD;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,kBAAkB,CAAC,WAAmB;IAC7C,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;IACjE,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IAC5D,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;IACnE,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEjC,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;GASG;AACH,SAAgB,WAAW,CAAC,WAAsC,EAAE,KAAc,EAAE,kBAA4B;IAC9G,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAE9C,oFAAoF;IACpF,IAAI,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,kBAAkB,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE;QAC5G,OAAO,EAAE,CAAC;KACX;IAED,OAAO,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;AAbD,kCAaC"}

package/lib-commonjs/utils/getInitials.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=getInitials.test.d.ts.map

package/lib-commonjs/utils/getInitials.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.test.d.ts","sourceRoot":"","sources":["../../src/utils/getInitials.test.ts"],"names":[],"mappings":""}

package/lib-commonjs/utils/getInitials.test.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getInitials_1 = require("./getInitials");
+describe('getInitials', function () {
+    it('handles null inputs', function () {
+        var result = (0, getInitials_1.getInitials)(null, false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)(undefined, false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials in LTR', function () {
+        var result = (0, getInitials_1.getInitials)('Kat Larrson', false);
+        expect(result).toEqual('KL');
+    });
+    it('calculates an expected initials in LTR for non-ASCII characters', function () {
+        var result = (0, getInitials_1.getInitials)('Írissa Þórðardóttir', false);
+        expect(result).toEqual('ÍÞ');
+        result = (0, getInitials_1.getInitials)('Øyvind Åsen', false);
+        expect(result).toEqual('ØÅ');
+    });
+    it('calculates an expected initials in LTR with a hypen', function () {
+        var result = (0, getInitials_1.getInitials)('David Zearing-Goff', false);
+        expect(result).toEqual('DZ');
+    });
+    it('calculates an expected initials in LTR with numbers', function () {
+        var result = (0, getInitials_1.getInitials)('4lex 5loo', false);
+        expect(result).toEqual('45');
+    });
+    it('calculates an expected initials in LTR with parentheses', function () {
+        var result = (0, getInitials_1.getInitials)('David (The man) Goff', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with brackets', function () {
+        var result = (0, getInitials_1.getInitials)('David Goff [The man]', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with curly braces', function () {
+        var result = (0, getInitials_1.getInitials)('David {The man} Goff', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', function () {
+        var result = (0, getInitials_1.getInitials)(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)    ', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with multiple types of unwanted text', function () {
+        var result = (0, getInitials_1.getInitials)(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)  [Beta]  ', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in RTL if one was not specified', function () {
+        var result = (0, getInitials_1.getInitials)('Kat Larrson', true);
+        expect(result).toEqual('LK');
+    });
+    it('calculates an expected initials in LTR for names with multiple components', function () {
+        var result = (0, getInitials_1.getInitials)('A', false);
+        expect(result).toEqual('A');
+        result = (0, getInitials_1.getInitials)('A B', false);
+        expect(result).toEqual('AB');
+        result = (0, getInitials_1.getInitials)('A B C', false);
+        expect(result).toEqual('AC');
+        result = (0, getInitials_1.getInitials)('A B C D', false);
+        expect(result).toEqual('A');
+    });
+    it('calculates an expected initials for Arabic names', function () {
+        var result = (0, getInitials_1.getInitials)('خسرو رحیمی', true);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Chinese names', function () {
+        var result = (0, getInitials_1.getInitials)('桂英', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('佳', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('宋智洋', false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Korean names', function () {
+        var result = (0, getInitials_1.getInitials)('강현', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('최종래', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('남궁 성종', false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Japanese names', function () {
+        var result = (0, getInitials_1.getInitials)('松田', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('海野', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('かり', false);
+        expect(result).toEqual('');
+    });
+    it('calculates expected initials for phone numbers', function () {
+        var result = (0, getInitials_1.getInitials)('12345678', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+1 (555) 123-4567 ext.4567', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+47 12 34 56 78 (X 5678)', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+47 12 34 56 78 (X 5678)', false, true);
+        expect(result).toEqual('4');
+        result = (0, getInitials_1.getInitials)('47 12 34', false, true);
+        expect(result).toEqual('43');
+        result = (0, getInitials_1.getInitials)('47 12', false, true);
+        expect(result).toEqual('41');
+        result = (0, getInitials_1.getInitials)('1 Ext 2', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('James Ext 2', false);
+        expect(result).toEqual('J2');
+        result = (0, getInitials_1.getInitials)('1x1', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('1y1', false);
+        expect(result).toEqual('1');
+        result = (0, getInitials_1.getInitials)('1', false);
+        expect(result).toEqual('1');
+        result = (0, getInitials_1.getInitials)('A 2', false);
+        expect(result).toEqual('A2');
+    });
+});
+//# sourceMappingURL=getInitials.test.js.map

package/lib-commonjs/utils/getInitials.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.test.js","sourceRoot":"","sources":["../../src/utils/getInitials.test.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getInitials } from './getInitials';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = void 0;
+var getInitials_1 = require("./getInitials");
+Object.defineProperty(exports, "getInitials", { enumerable: true, get: function () { return getInitials_1.getInitials; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.24",
+  "version": "0.14.27",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",

package/src/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@fluentui-react-native/eslint-config-rules'],
+};

package/src/JSAvatar.styling.ts

@@ -1,9 +1,9 @@
-import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps, AvatarColors, AvatarSizes } from './JSAvatar.types';
+import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps, AvatarColors, AvatarSizesForTokens } from './JSAvatar.types';
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { ViewStyle } from 'react-native';
 import { getRingConfig } from './JSAvatar.helpers';
-import { borderStyles } from '@fluentui-react-native/tokens';
+import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
 
 const nameMap: { [key: string]: string } = {
   start: 'flex-start',
@@ -11,7 +11,7 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizes, 'circular', 'square', 'inactive'];
+export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizesForTokens, 'circular', 'square', 'inactive'];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -36,15 +36,15 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
       ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width'],
     ),
     initials: buildProps(
-      (tokens: JSAvatarTokens) => {
+      (tokens: JSAvatarTokens, theme: Theme) => {
         return {
           style: {
-            fontSize: tokens.initialsSize,
+            ...fontStyles.from(tokens, theme),
             color: tokens.color,
           },
         };
       },
-      ['initialsSize', 'color'],
+      ['color', ...fontStyles.keys],
     ),
     initialsBackground: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -95,7 +95,6 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             borderStyle: 'solid',
-            borderColor: tokens.ringColor,
             borderWidth: ringConfig.stroke,
             width: ringConfig.size,
             height: ringConfig.size,
@@ -106,7 +105,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['width', 'height', 'ringColor', ...borderStyles.keys],
+      ['width', 'height', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -115,7 +114,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           shape: 'circular',
         };
       },
-      ['size'],
+      ['badgeSize'],
     ),
   },
 };

package/src/JSAvatar.tsx

@@ -17,15 +17,16 @@ import { createIconProps } from '@fluentui-react-native/interactive-hooks';
  * @returns Whether the styles that are assigned to the layer should be applied to the avatar
  */
 export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSAvatarProps): boolean => {
+  const avatarSize = `size${userProps.size || 24}`;
   return (
     state[layer] ||
     userProps[layer] ||
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'circular') ||
     layer === userProps['avatarColor'] ||
-    (!userProps['avatarColor'] && layer === 'brand') ||
-    layer === userProps['size'] ||
-    (!userProps['size'] && layer === 'size56') ||
+    (!userProps['avatarColor'] && layer === 'neutral') ||
+    layer === avatarSize ||
+    (!userProps['size'] && layer === 'size24') ||
     (userProps.active === 'inactive' && layer === 'inactive')
   );
 };
@@ -45,11 +46,11 @@ export const JSAvatar = compose<JSAvatarType>({
   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));
+    const Slots = useSlots(avatar.props, (layer) => avatarLookup(layer, avatar.state, avatar.props));
 
     return (final: JSAvatarProps) => {
       const { activeAppearance, icon, initials, image, badge, ...mergedProps } = mergeProps(avatar.props, final);
-      const { showRing, transparentRing } = avatar.state;
+      const { showRing, transparentRing, showBadge } = avatar.state;
       const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
       return (
@@ -62,7 +63,7 @@ export const JSAvatar = compose<JSAvatarType>({
             </Slots.initialsBackground>
           )}
           {showRing && !transparentRing && <Slots.ring />}
-          {svgIconsEnabled && badge.status && <Slots.badge {...badge} />}
+          {svgIconsEnabled && showBadge && <Slots.badge {...badge} />}
         </Slots.root>
       );
     };

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 {