@fluentui-react-native/experimental-avatar 0.14.30 → 0.14.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.30",
+  "version": "0.14.33",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -26,13 +26,13 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "^0.8.5",
-    "@fluentui-react-native/badge": "^0.0.36",
+    "@fluentui-react-native/badge": "^0.0.38",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/framework": "0.7.28",
-    "@fluentui-react-native/icon": "^0.11.23",
-    "@fluentui-react-native/interactive-hooks": "^0.15.8",
-    "@fluentui-react-native/theme-tokens": "^0.16.3",
-    "@fluentui-react-native/tokens": "^0.12.2",
+    "@fluentui-react-native/framework": "0.7.30",
+    "@fluentui-react-native/icon": "^0.11.25",
+    "@fluentui-react-native/interactive-hooks": "^0.16.0",
+    "@fluentui-react-native/theme-tokens": "^0.18.0",
+    "@fluentui-react-native/tokens": "^0.14.0",
     "@fluentui-react-native/use-styling": "^0.8.3",
     "react-native-svg": "^12.3.0"
   },

package/src/JSAvatar.styling.ts

@@ -20,6 +20,7 @@ export const avatarStates: (keyof JSAvatarTokens)[] = [
   'ringColor',
   'ringBackgroundColor',
   'iconColor',
+  'size',
 ];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
@@ -28,12 +29,12 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
   slotProps: {
     root: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { horizontalIconAlignment, verticalIconAlignment, width, height, avatarOpacity } = tokens;
+        const { horizontalIconAlignment, verticalIconAlignment, size, avatarOpacity } = tokens;
         return {
           style: {
             flexDirection: 'row',
-            width: width,
-            height: height,
+            width: size,
+            height: size,
             justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
             alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
             horizontalIconAlignment,
@@ -42,7 +43,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width'],
+      ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'size'],
     ),
     initials: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -58,13 +59,13 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
     ),
     initialsBackground: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const { backgroundColor } = tokens;
+        const { backgroundColor, size } = tokens;
 
         return {
           style: {
             ...borderStyles.from(tokens, theme),
-            width: tokens.width,
-            height: tokens.height,
+            width: size,
+            height: size,
             flexGrow: 1,
             alignSelf: 'stretch',
             justifyContent: 'center',
@@ -75,21 +76,22 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth', ...borderStyles.keys],
+      ['backgroundColor', 'size', 'borderColor', 'borderWidth', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
+        const { borderRadius, size, borderWidth, borderColor } = tokens;
         return {
           style: {
-            borderRadius: tokens.borderRadius,
-            width: tokens.width,
-            height: tokens.height,
-            borderWidth: tokens.borderWidth,
-            borderColor: tokens.borderColor,
+            borderRadius: borderRadius,
+            width: size,
+            height: size,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
           },
         };
       },
-      ['borderRadius', 'width', 'height', 'borderColor', 'borderWidth'],
+      ['borderRadius', 'size', 'borderColor', 'borderWidth'],
     ),
     icon: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -106,7 +108,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
     ),
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const ringConfig = getRingConfig(tokens.width);
+        const ringConfig = getRingConfig(tokens.size);
         return {
           style: {
             borderStyle: 'solid',
@@ -121,7 +123,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['width', 'height', 'ringColor', ...borderStyles.keys],
+      ['size', 'ringColor', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {

package/src/JSAvatar.tsx

@@ -18,7 +18,8 @@ import { SvgXml } from 'react-native-svg';
  * @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}`;
+  const size = userProps.size;
+  const avatarSize = size ? `size${size}` : '';
   return (
     state[layer] ||
     userProps[layer] ||
@@ -27,7 +28,6 @@ export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSA
     layer === userProps['avatarColor'] ||
     (!userProps['avatarColor'] && layer === 'neutral') ||
     layer === avatarSize ||
-    (!userProps['size'] && layer === 'size24') ||
     (userProps.active === 'inactive' && layer === 'inactive')
   );
 };

package/src/JSAvatar.types.ts

@@ -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 {
@@ -147,16 +157,6 @@ 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
@@ -172,7 +172,6 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
   iconColor?: ColorValue;
   iconSize?: number;
-  height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
   circular?: JSAvatarTokens;
@@ -193,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(' ');