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

package/lib-commonjs/JSAvatarTokens.win32.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultJSAvatarTokens = void 0;
+var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+var defaultJSAvatarTokens = function (t) {
+    return ({
+        horizontalIconAlignment: 'end',
+        verticalIconAlignment: 'end',
+        color: theme_tokens_1.globalTokens.color.white,
+        backgroundColor: theme_tokens_1.globalTokens.color.cornflower.primary,
+        avatarOpacity: 1,
+        fontFamily: t.typography.families.primary,
+        fontWeight: theme_tokens_1.globalTokens.font.weight.semibold,
+        fontSize: theme_tokens_1.globalTokens.font.size[200],
+        width: 24,
+        height: 24,
+        iconSize: 16,
+        iconColor: theme_tokens_1.globalTokens.color.white,
+        ringColor: t.colors.transparentStroke,
+        borderColor: theme_tokens_1.globalTokens.color.white,
+        borderWidth: t.name === 'HighContrast' ? 1 : 0,
+        circular: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
+        },
+        square: {
+            borderRadius: theme_tokens_1.globalTokens.corner.radius.medium,
+        },
+        inactive: {
+            avatarOpacity: 0.8,
+        },
+        size20: {
+            width: 20,
+            height: 20,
+            badgeSize: 'smallest',
+            iconSize: 16,
+            fontSize: theme_tokens_1.globalTokens.font.size[100],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.small,
+            },
+        },
+        size24: {
+            width: 24,
+            height: 24,
+            badgeSize: 'smallest',
+            iconSize: 16,
+            fontSize: theme_tokens_1.globalTokens.font.size[100],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.small,
+            },
+        },
+        size28: {
+            width: 28,
+            height: 28,
+            badgeSize: 'smaller',
+            iconSize: 20,
+            fontWeight: theme_tokens_1.globalTokens.font.weight.semibold,
+            fontSize: theme_tokens_1.globalTokens.font.size[100],
+        },
+        size32: {
+            width: 32,
+            height: 32,
+            badgeSize: 'smaller',
+            iconSize: 20,
+            fontSize: theme_tokens_1.globalTokens.font.size[100],
+        },
+        size36: {
+            width: 36,
+            height: 36,
+            badgeSize: 'smaller',
+            iconSize: 20,
+        },
+        size40: {
+            width: 40,
+            height: 40,
+            badgeSize: 'small',
+            iconSize: 20,
+        },
+        size48: {
+            width: 48,
+            height: 48,
+            badgeSize: 'small',
+            iconSize: 24,
+        },
+        size56: {
+            width: 56,
+            height: 56,
+            badgeSize: 'medium',
+            iconSize: 28,
+            fontSize: theme_tokens_1.globalTokens.font.size[400],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.large,
+            },
+        },
+        size64: {
+            width: 64,
+            height: 64,
+            badgeSize: 'large',
+            iconSize: 32,
+            fontSize: theme_tokens_1.globalTokens.font.size[500],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.large,
+            },
+        },
+        size72: {
+            width: 72,
+            height: 72,
+            badgeSize: 'large',
+            iconSize: 32,
+            fontSize: theme_tokens_1.globalTokens.font.size[500],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.large,
+            },
+        },
+        size96: {
+            width: 96,
+            height: 96,
+            badgeSize: 'largest',
+            iconSize: 48,
+            fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
+            fontSize: theme_tokens_1.globalTokens.font.size[700],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.extraLarge,
+            },
+        },
+        size120: {
+            width: 120,
+            height: 120,
+            badgeSize: 'largest',
+            iconSize: 48,
+            fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
+            fontSize: theme_tokens_1.globalTokens.font.size[900],
+            square: {
+                borderRadius: theme_tokens_1.globalTokens.corner.radius.extraLarge,
+            },
+        },
+        neutral: {
+            backgroundColor: t.colors.neutralBackground6,
+            color: t.colors.neutralForeground3,
+            ringColor: t.colors.transparentStroke,
+        },
+        brand: {
+            backgroundColor: t.colors.brandBackgroundStatic,
+            color: t.colors.neutralForegroundOnBrand,
+            ringColor: t.colors.transparentStroke,
+        },
+        darkRed: getColorProps('darkRed', t),
+        cranberry: getColorProps('cranberry', t),
+        red: getColorProps('red', t),
+        pumpkin: getColorProps('pumpkin', t),
+        peach: getColorProps('peach', t),
+        marigold: getColorProps('marigold', t),
+        gold: getColorProps('gold', t),
+        brass: getColorProps('brass', t),
+        brown: getColorProps('brown', t),
+        forest: getColorProps('forest', t),
+        seafoam: getColorProps('seafoam', t),
+        darkGreen: getColorProps('darkGreen', t),
+        lightTeal: getColorProps('lightTeal', t),
+        teal: getColorProps('teal', t),
+        steel: getColorProps('steel', t),
+        blue: getColorProps('blue', t),
+        royalBlue: getColorProps('royalBlue', t),
+        cornflower: getColorProps('cornflower', t),
+        navy: getColorProps('navy', t),
+        lavender: getColorProps('lavender', t),
+        purple: getColorProps('purple', t),
+        grape: getColorProps('grape', t),
+        lilac: getColorProps('lilac', t),
+        pink: getColorProps('pink', t),
+        magenta: getColorProps('magenta', t),
+        plum: getColorProps('plum', t),
+        beige: getColorProps('beige', t),
+        mink: getColorProps('mink', t),
+        platinum: getColorProps('platinum', t),
+        anchor: getColorProps('anchor', t),
+    });
+};
+exports.defaultJSAvatarTokens = defaultJSAvatarTokens;
+/**
+ * A function which returns object of props depending on color and theme.
+ * @param color
+ * @param theme
+ * @returns object of props - backgroundColor, color and ringColor
+ */
+function getColorProps(color, theme) {
+    var themeAppearance = theme.name;
+    switch (themeAppearance) {
+        case 'White':
+        case 'Colorful':
+        default:
+            return {
+                backgroundColor: theme_tokens_1.globalTokens.color[color].tint40,
+                color: theme_tokens_1.globalTokens.color[color].shade30,
+                iconColor: theme_tokens_1.globalTokens.color[color].shade30,
+                ringColor: theme_tokens_1.globalTokens.color[color].primary,
+            };
+        case 'DarkGray':
+        case 'Black':
+            return {
+                backgroundColor: theme_tokens_1.globalTokens.color[color].shade30,
+                color: theme_tokens_1.globalTokens.color[color].tint40,
+                iconColor: theme_tokens_1.globalTokens.color[color].tint40,
+                ringColor: theme_tokens_1.globalTokens.color[color].tint30,
+            };
+        case 'HighContrast':
+            return {
+                backgroundColor: theme.colors.neutralBackground6,
+                color: theme.colors.neutralForeground3,
+                iconColor: theme.colors.neutralForeground3,
+                ringColor: theme.colors.transparentStroke,
+            };
+    }
+}
+//# sourceMappingURL=JSAvatarTokens.win32.js.map

package/lib-commonjs/JSAvatarTokens.win32.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.27",
+  "version": "0.14.30",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -26,14 +26,15 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "^0.8.5",
-    "@fluentui-react-native/badge": "^0.0.33",
+    "@fluentui-react-native/badge": "^0.0.36",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/icon": "^0.11.21",
-    "@fluentui-react-native/interactive-hooks": "^0.15.6",
-    "@fluentui-react-native/framework": "0.7.26",
-    "@fluentui-react-native/theme-tokens": "^0.16.2",
-    "@fluentui-react-native/tokens": "^0.12.0",
-    "@fluentui-react-native/use-styling": "^0.8.3"
+    "@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/use-styling": "^0.8.3",
+    "react-native-svg": "^12.3.0"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/JSAvatar.styling.ts

@@ -11,7 +11,16 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizesForTokens, 'circular', 'square', 'inactive'];
+export const avatarStates: (keyof JSAvatarTokens)[] = [
+  ...AvatarColors,
+  ...AvatarSizesForTokens,
+  'circular',
+  'square',
+  'inactive',
+  'ringColor',
+  'ringBackgroundColor',
+  'iconColor',
+];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -41,6 +50,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           style: {
             ...fontStyles.from(tokens, theme),
             color: tokens.color,
+            textAlign: 'center',
           },
         };
       },
@@ -60,10 +70,12 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             justifyContent: 'center',
             alignItems: 'center',
             backgroundColor: backgroundColor,
+            borderWidth: tokens.borderWidth,
+            borderColor: tokens.borderColor,
           },
         };
       },
-      ['backgroundColor', 'width', 'height', ...borderStyles.keys],
+      ['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -72,22 +84,25 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             borderRadius: tokens.borderRadius,
             width: tokens.width,
             height: tokens.height,
+            borderWidth: tokens.borderWidth,
+            borderColor: tokens.borderColor,
           },
         };
       },
-      ['borderRadius', 'width', 'height'],
+      ['borderRadius', 'width', 'height', 'borderColor', 'borderWidth'],
     ),
     icon: buildProps(
       (tokens: JSAvatarTokens) => {
         return {
           style: {
             position: 'absolute',
+            color: tokens.iconColor,
             width: tokens.iconSize,
             height: tokens.iconSize,
           },
         };
       },
-      ['iconSize'],
+      ['iconSize', 'iconColor'],
     ),
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -95,17 +110,18 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             borderStyle: 'solid',
-            borderWidth: ringConfig.stroke,
             width: ringConfig.size,
             height: ringConfig.size,
             position: 'absolute',
             top: -ringConfig.stroke * 2,
             left: -ringConfig.stroke * 2,
             ...borderStyles.from(tokens, theme),
+            borderWidth: ringConfig.stroke,
+            borderColor: tokens.ringColor,
           },
         };
       },
-      ['width', 'height', ...borderStyles.keys],
+      ['width', 'height', 'ringColor', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {

package/src/JSAvatar.tsx

@@ -7,6 +7,7 @@ import { useAvatar } from './useAvatar';
 import { PresenceBadge } from '@fluentui-react-native/badge';
 import { Icon } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/interactive-hooks';
+import { SvgXml } from 'react-native-svg';
 
 /**
  * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
@@ -52,6 +53,10 @@ export const JSAvatar = compose<JSAvatarType>({
       const { activeAppearance, icon, initials, image, badge, ...mergedProps } = mergeProps(avatar.props, final);
       const { showRing, transparentRing, showBadge } = avatar.state;
       const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+      const fallBackIconXml = `<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z" fill="currentColor"/>
+      </svg>
+      `;
 
       return (
         <Slots.root {...mergedProps}>
@@ -59,7 +64,13 @@ export const JSAvatar = compose<JSAvatarType>({
             <Slots.image {...image} />
           ) : (
             <Slots.initialsBackground>
-              {initials ? <Slots.initials>{initials}</Slots.initials> : userProps.icon && <Slots.icon {...iconProps} />}
+              {initials ? (
+                <Slots.initials>{initials}</Slots.initials>
+              ) : userProps.icon ? (
+                <Slots.icon {...iconProps} />
+              ) : (
+                <SvgXml xml={fallBackIconXml} />
+              )}
             </Slots.initialsBackground>
           )}
           {showRing && !transparentRing && <Slots.ring />}

package/src/JSAvatar.types.ts

@@ -62,14 +62,13 @@ 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';
 
 export interface RingConfig {
   accent?: boolean;
   transparent?: boolean;
-  ringBackgroundColor?: ColorValue; // inner/outer rings
   ringThickness?: number;
   innerGap?: number;
 }
@@ -105,6 +104,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;
 
   /**
@@ -118,8 +122,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;
 
   /**
@@ -155,15 +162,22 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
    * @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;
+  ringColor?: ColorValue;
+  ringBackgroundColor?: ColorValue;
   square?: JSAvatarTokens;
   inactive?: JSAvatarTokens;
   avatarOpacity?: number;