@fluentui-react-native/experimental-avatar 0.14.29 → 0.14.32

package/src/JSAvatar.types.ts

@@ -62,7 +62,7 @@ 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 AvatarActiveAppearance = 'ring';
 export type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
 export type IconAlignment = 'start' | 'center' | 'end';
 
@@ -85,6 +85,16 @@ export interface AvatarConfigurableProps {
    */
   avatarColor?: AvatarColor;
   ring?: RingConfig;
+
+  /**
+   * 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;
 }
 
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
@@ -104,6 +114,11 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
    * @defaultvalue ring
    */
   activeAppearance?: AvatarActiveAppearance;
+
+  /**
+   * Badge shows the avatar's presence status.
+   * Badge can be shown only if `active` prop is undefined or unset
+   */
   badge?: PresenceBadgeProps;
 
   /**
@@ -117,8 +132,11 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
    * 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;
+  idForColor?: string;
 
+  /**
+   * The Avatar's image.
+   */
   image?: ImageProps;
 
   /**
@@ -139,28 +157,21 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
    */
   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;
+
+  /**
+   * Currently used for image URL, will be deprecated when image prop works
+   */
   src?: string;
 }
 
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
   iconColor?: ColorValue;
   iconSize?: number;
-  height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
   circular?: JSAvatarTokens;
@@ -181,7 +192,6 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   size72?: JSAvatarTokens;
   size96?: JSAvatarTokens;
   size120?: JSAvatarTokens;
-  width?: number;
   badgeSize?: BadgeSize;
   neutral?: JSAvatarTokens;
   brand?: JSAvatarTokens;

package/src/JSAvatarTokens.ts

@@ -13,8 +13,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     fontFamily: t.typography.families.primary,
     fontWeight: globalTokens.font.weight.semibold,
     fontSize: globalTokens.font.size[200],
-    width: 24,
-    height: 24,
+    size: 24,
     iconSize: 16,
     iconColor: globalTokens.color.white,
     ringColor: t.colors.transparentStroke,
@@ -30,8 +29,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       avatarOpacity: 0.8,
     },
     size20: {
-      width: 20,
-      height: 20,
+      size: 20,
       badgeSize: 'smallest',
       iconSize: 16,
       fontSize: globalTokens.font.size[100],
@@ -40,8 +38,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size24: {
-      width: 24,
-      height: 24,
+      size: 24,
       badgeSize: 'smallest',
       iconSize: 16,
       fontSize: globalTokens.font.size[100],
@@ -50,41 +47,35 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size28: {
-      width: 28,
-      height: 28,
+      size: 28,
       badgeSize: 'smaller',
       iconSize: 20,
       fontWeight: globalTokens.font.weight.semibold,
       fontSize: globalTokens.font.size[100],
     },
     size32: {
-      width: 32,
-      height: 32,
+      size: 32,
       badgeSize: 'smaller',
       iconSize: 20,
       fontSize: globalTokens.font.size[100],
     },
     size36: {
-      width: 36,
-      height: 36,
+      size: 36,
       badgeSize: 'smaller',
       iconSize: 20,
     },
     size40: {
-      width: 40,
-      height: 40,
+      size: 40,
       badgeSize: 'small',
       iconSize: 20,
     },
     size48: {
-      width: 48,
-      height: 48,
+      size: 48,
       badgeSize: 'small',
       iconSize: 24,
     },
     size56: {
-      width: 56,
-      height: 56,
+      size: 56,
       badgeSize: 'medium',
       iconSize: 28,
       fontSize: globalTokens.font.size[400],
@@ -93,8 +84,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size64: {
-      width: 64,
-      height: 64,
+      size: 64,
       badgeSize: 'large',
       iconSize: 32,
       fontSize: globalTokens.font.size[500],
@@ -103,8 +93,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size72: {
-      width: 72,
-      height: 72,
+      size: 72,
       badgeSize: 'large',
       iconSize: 32,
       fontSize: globalTokens.font.size[500],
@@ -113,8 +102,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size96: {
-      width: 96,
-      height: 96,
+      size: 96,
       badgeSize: 'largest',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
@@ -124,8 +112,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size120: {
-      width: 120,
-      height: 120,
+      size: 120,
       badgeSize: 'largest',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,

package/src/JSAvatarTokens.win32.ts

@@ -13,8 +13,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     fontFamily: t.typography.families.primary,
     fontWeight: globalTokens.font.weight.semibold,
     fontSize: globalTokens.font.size[200],
-    width: 24,
-    height: 24,
+    size: 24,
     iconSize: 16,
     iconColor: globalTokens.color.white,
     ringColor: t.colors.transparentStroke,
@@ -30,8 +29,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       avatarOpacity: 0.8,
     },
     size20: {
-      width: 20,
-      height: 20,
+      size: 20,
       badgeSize: 'smallest',
       iconSize: 16,
       fontSize: globalTokens.font.size[100],
@@ -40,8 +38,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size24: {
-      width: 24,
-      height: 24,
+      size: 24,
       badgeSize: 'smallest',
       iconSize: 16,
       fontSize: globalTokens.font.size[100],
@@ -50,41 +47,35 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size28: {
-      width: 28,
-      height: 28,
+      size: 28,
       badgeSize: 'smaller',
       iconSize: 20,
       fontWeight: globalTokens.font.weight.semibold,
       fontSize: globalTokens.font.size[100],
     },
     size32: {
-      width: 32,
-      height: 32,
+      size: 32,
       badgeSize: 'smaller',
       iconSize: 20,
       fontSize: globalTokens.font.size[100],
     },
     size36: {
-      width: 36,
-      height: 36,
+      size: 36,
       badgeSize: 'smaller',
       iconSize: 20,
     },
     size40: {
-      width: 40,
-      height: 40,
+      size: 40,
       badgeSize: 'small',
       iconSize: 20,
     },
     size48: {
-      width: 48,
-      height: 48,
+      size: 48,
       badgeSize: 'small',
       iconSize: 24,
     },
     size56: {
-      width: 56,
-      height: 56,
+      size: 56,
       badgeSize: 'medium',
       iconSize: 28,
       fontSize: globalTokens.font.size[400],
@@ -93,8 +84,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size64: {
-      width: 64,
-      height: 64,
+      size: 64,
       badgeSize: 'large',
       iconSize: 32,
       fontSize: globalTokens.font.size[500],
@@ -103,8 +93,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size72: {
-      width: 72,
-      height: 72,
+      size: 72,
       badgeSize: 'large',
       iconSize: 32,
       fontSize: globalTokens.font.size[500],
@@ -113,8 +102,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size96: {
-      width: 96,
-      height: 96,
+      size: 96,
       badgeSize: 'largest',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,
@@ -124,8 +112,7 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       },
     },
     size120: {
-      width: 120,
-      height: 120,
+      size: 120,
       badgeSize: 'largest',
       iconSize: 48,
       fontWeight: globalTokens.font.weight.regular,

package/src/__tests__/JSAvatar.test.jsx

@@ -22,9 +22,11 @@ const otherTestNames = ['(206) 123-4567', '耿盈盈']; // will return this case
 const namesWithTitles = ['Mr Feynman', 'Dr Richard Feynman'];
 const initialsForNameWithTitles = ['F', 'RF'];
 
-it('renders Avatar', () => {
-  const tree = renderer.create(<JSAvatar />).toJSON();
-  expect(tree).toMatchSnapshot();
+describe('Avatar rendering', () => {
+  it('renders Avatar', () => {
+    const tree = renderer.create(<JSAvatar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('validateAlphabeticalCharacters method', () => {

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders Avatar 1`] = `
+exports[`Avatar rendering renders Avatar 1`] = `
 <View
   shape="circular"
   style={

package/src/useAvatar.ts

@@ -62,7 +62,6 @@ export const getInitials = (name: string): string => {
   if (!name && !validateAlphabeticalCharacters(name)) {
     return '';
   }
-  // prettier-ignore
   const nonWordRegExp = new RegExp('\\W+(?<!\\S-)', 'g');
   const wordsInBracesRegExp = new RegExp('(\\(|\\[|\\{)\\w+(\\)|\\]|\\})', 'g');
   let words = name.replace(wordsInBracesRegExp, ' ').replace(nonWordRegExp, ' ').trim().split(' ');