@fluentui-react-native/experimental-avatar 0.14.25 → 0.14.28

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

@@ -1,6 +1,6 @@
 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';
 
@@ -69,8 +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;
 }
@@ -159,17 +157,18 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   src?: string;
 }
 
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
+  iconColor?: ColorValue;
   iconSize?: number;
-  initialsSize?: number;
   height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
   circular?: JSAvatarTokens;
+  ringColor?: ColorValue;
+  ringBackgroundColor?: ColorValue;
   square?: JSAvatarTokens;
   inactive?: JSAvatarTokens;
   avatarOpacity?: number;
-  ringColor?: ColorValue;
   size20?: JSAvatarTokens;
   size24?: JSAvatarTokens;
   size28?: JSAvatarTokens;

package/src/JSAvatarTokens.ts

@@ -10,8 +10,16 @@ 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,
+    iconSize: 16,
+    iconColor: globalTokens.color.white,
+    ringColor: t.colors.transparentStroke,
+    borderColor: globalTokens.color.white,
+    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
     },
@@ -26,183 +34,180 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       height: 20,
       badgeSize: 'smallest',
       iconSize: 16,
-      initialsSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size24: {
       width: 24,
       height: 24,
       badgeSize: 'smallest',
       iconSize: 16,
-      initialsSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size28: {
       width: 28,
       height: 28,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
+      fontWeight: globalTokens.font.weight.semibold,
+      fontSize: globalTokens.font.size[100],
     },
     size32: {
       width: 32,
       height: 32,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
+      fontSize: globalTokens.font.size[100],
     },
     size36: {
       width: 36,
       height: 36,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
     },
     size40: {
       width: 40,
       height: 40,
       badgeSize: 'small',
       iconSize: 20,
-      initialsSize: 20,
     },
     size48: {
       width: 48,
       height: 48,
       badgeSize: 'small',
       iconSize: 24,
-      initialsSize: 24,
     },
     size56: {
       width: 56,
       height: 56,
       badgeSize: 'medium',
       iconSize: 28,
-      initialsSize: 28,
+      fontSize: globalTokens.font.size[400],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size64: {
       width: 64,
       height: 64,
       badgeSize: 'large',
       iconSize: 32,
-      initialsSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size72: {
       width: 72,
       height: 72,
       badgeSize: 'large',
       iconSize: 32,
-      initialsSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size96: {
       width: 96,
       height: 96,
       badgeSize: 'largest',
       iconSize: 48,
-      initialsSize: 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: 48,
-      initialsSize: 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,
+      iconColor: t.colors.neutralForeground3,
+      ringColor: t.colors.transparentStroke,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.brandedBorder,
-    },
-    darkRed: {
-      backgroundColor: globalTokens.color.darkRed.primary,
-    },
-    cranberry: {
-      backgroundColor: globalTokens.color.cranberry.primary,
-    },
-    red: {
-      backgroundColor: globalTokens.color.red.primary,
-    },
-    pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.primary,
-    },
-    peach: {
-      backgroundColor: globalTokens.color.peach.primary,
-    },
-    marigold: {
-      backgroundColor: globalTokens.color.marigold.primary,
-    },
-    gold: {
-      backgroundColor: globalTokens.color.gold.primary,
-    },
-    brass: {
-      backgroundColor: globalTokens.color.brass.primary,
-    },
-    brown: {
-      backgroundColor: globalTokens.color.brown.primary,
-    },
-    forest: {
-      backgroundColor: globalTokens.color.forest.primary,
-    },
-    seafoam: {
-      backgroundColor: globalTokens.color.seafoam.primary,
-    },
-    darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.primary,
-    },
-    lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.primary,
-    },
-    teal: {
-      backgroundColor: globalTokens.color.teal.primary,
-    },
-    steel: {
-      backgroundColor: globalTokens.color.steel.primary,
-    },
-    blue: {
-      backgroundColor: globalTokens.color.blue.primary,
-    },
-    royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.primary,
-    },
-    cornflower: {
-      backgroundColor: globalTokens.color.cornflower.primary,
-    },
-    navy: {
-      backgroundColor: globalTokens.color.navy.primary,
-    },
-    lavender: {
-      backgroundColor: globalTokens.color.lavender.primary,
-    },
-    purple: {
-      backgroundColor: globalTokens.color.purple.primary,
-    },
-    grape: {
-      backgroundColor: globalTokens.color.grape.primary,
-    },
-    lilac: {
-      backgroundColor: globalTokens.color.lilac.primary,
-    },
-    pink: {
-      backgroundColor: globalTokens.color.pink.primary,
-    },
-    magenta: {
-      backgroundColor: globalTokens.color.magenta.primary,
-    },
-    plum: {
-      backgroundColor: globalTokens.color.plum.primary,
-    },
-    beige: {
-      backgroundColor: globalTokens.color.beige.primary,
-    },
-    mink: {
-      backgroundColor: globalTokens.color.mink.primary,
-    },
-    platinum: {
-      backgroundColor: globalTokens.color.platinum.primary,
-    },
-    anchor: {
-      backgroundColor: globalTokens.color.anchor.primary,
-    },
+      iconColor: 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),
   } as JSAvatarTokens);
+
+/**
+ * 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: string, theme: Theme) {
+  const themeAppearance = theme.host.appearance;
+  switch (themeAppearance) {
+    case 'light':
+    default:
+      return {
+        backgroundColor: globalTokens.color[color].tint40,
+        color: globalTokens.color[color].shade30,
+        iconColor: globalTokens.color[color].shade30,
+        ringColor: globalTokens.color[color].primary,
+      };
+    case 'dark':
+      return {
+        backgroundColor: globalTokens.color[color].shade30,
+        color: globalTokens.color[color].tint40,
+        iconColor: globalTokens.color[color].tint40,
+        ringColor: globalTokens.color[color].tint30,
+      };
+    case 'highContrast':
+      return {
+        backgroundColor: theme.colors.neutralBackground6,
+        color: theme.colors.neutralForeground3,
+        iconColor: theme.colors.neutralForeground3,
+        ringColor: theme.colors.transparentStroke,
+      };
+  }
+}

package/src/JSAvatarTokens.win32.ts

@@ -0,0 +1,213 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { JSAvatarTokens } from '.';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+
+export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
+  ({
+    horizontalIconAlignment: 'end',
+    verticalIconAlignment: 'end',
+    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,
+    iconSize: 16,
+    iconColor: globalTokens.color.white,
+    ringColor: t.colors.transparentStroke,
+    borderColor: globalTokens.color.white,
+    borderWidth: t.name === 'HighContrast' ? 1 : 0,
+    circular: {
+      borderRadius: globalTokens.corner.radius.circle,
+    },
+    square: {
+      borderRadius: globalTokens.corner.radius.medium,
+    },
+    inactive: {
+      avatarOpacity: 0.8,
+    },
+    size20: {
+      width: 20,
+      height: 20,
+      badgeSize: 'smallest',
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
+    },
+    size24: {
+      width: 24,
+      height: 24,
+      badgeSize: 'smallest',
+      iconSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
+    },
+    size28: {
+      width: 28,
+      height: 28,
+      badgeSize: 'smaller',
+      iconSize: 20,
+      fontWeight: globalTokens.font.weight.semibold,
+      fontSize: globalTokens.font.size[100],
+    },
+    size32: {
+      width: 32,
+      height: 32,
+      badgeSize: 'smaller',
+      iconSize: 20,
+      fontSize: 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: globalTokens.font.size[400],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
+    },
+    size64: {
+      width: 64,
+      height: 64,
+      badgeSize: 'large',
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
+    },
+    size72: {
+      width: 72,
+      height: 72,
+      badgeSize: 'large',
+      iconSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
+    },
+    size96: {
+      width: 96,
+      height: 96,
+      badgeSize: 'largest',
+      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: 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.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),
+  } as JSAvatarTokens);
+
+/**
+ * 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: string, theme: Theme) {
+  const themeAppearance = theme.name;
+  switch (themeAppearance) {
+    case 'White':
+    case 'Colorful':
+    default:
+      return {
+        backgroundColor: globalTokens.color[color].tint40,
+        color: globalTokens.color[color].shade30,
+        iconColor: globalTokens.color[color].shade30,
+        ringColor: globalTokens.color[color].primary,
+      };
+    case 'DarkGray':
+    case 'Black':
+      return {
+        backgroundColor: globalTokens.color[color].shade30,
+        color: globalTokens.color[color].tint40,
+        iconColor: globalTokens.color[color].tint40,
+        ringColor: globalTokens.color[color].tint30,
+      };
+    case 'HighContrast':
+      return {
+        backgroundColor: theme.colors.neutralBackground6,
+        color: theme.colors.neutralForeground3,
+        iconColor: theme.colors.neutralForeground3,
+        ringColor: theme.colors.transparentStroke,
+      };
+  }
+}