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

package/src/JSAvatarTokens.ts

@@ -15,6 +15,11 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     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,
     },
@@ -132,161 +137,77 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     neutral: {
       backgroundColor: t.colors.neutralBackground6,
       color: t.colors.neutralForeground3,
-      borderColor: t.colors.defaultBorder,
+      iconColor: t.colors.neutralForeground3,
+      ringColor: t.colors.transparentStroke,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      borderColor: t.colors.brandedBorder,
-    },
-    darkRed: {
-      backgroundColor: globalTokens.color.darkRed.tint40,
-      color: globalTokens.color.darkRed.shade30,
-      borderColor: globalTokens.color.darkRed.primary,
-    },
-    cranberry: {
-      backgroundColor: globalTokens.color.cranberry.tint40,
-      color: globalTokens.color.cranberry.shade30,
-      borderColor: globalTokens.color.cranberry.primary,
-    },
-    red: {
-      backgroundColor: globalTokens.color.red.tint40,
-      color: globalTokens.color.red.shade30,
-      borderColor: globalTokens.color.red.primary,
-    },
-    pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.tint40,
-      color: globalTokens.color.pumpkin.shade30,
-      borderColor: globalTokens.color.pumpkin.primary,
-    },
-    peach: {
-      backgroundColor: globalTokens.color.peach.tint40,
-      color: globalTokens.color.peach.shade30,
-      borderColor: globalTokens.color.peach.primary,
-    },
-    marigold: {
-      backgroundColor: globalTokens.color.marigold.tint40,
-      color: globalTokens.color.marigold.shade30,
-      borderColor: globalTokens.color.marigold.primary,
-    },
-    gold: {
-      backgroundColor: globalTokens.color.gold.tint40,
-      color: globalTokens.color.gold.shade30,
-      borderColor: globalTokens.color.gold.primary,
-    },
-    brass: {
-      backgroundColor: globalTokens.color.brass.tint40,
-      color: globalTokens.color.brass.shade30,
-      borderColor: globalTokens.color.brass.primary,
-    },
-    brown: {
-      backgroundColor: globalTokens.color.brown.tint40,
-      color: globalTokens.color.brown.shade30,
-      borderColor: globalTokens.color.brown.primary,
-    },
-    forest: {
-      backgroundColor: globalTokens.color.forest.tint40,
-      color: globalTokens.color.forest.shade30,
-      borderColor: globalTokens.color.forest.primary,
-    },
-    seafoam: {
-      backgroundColor: globalTokens.color.seafoam.tint40,
-      color: globalTokens.color.seafoam.shade30,
-      borderColor: globalTokens.color.seafoam.primary,
-    },
-    darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.tint40,
-      color: globalTokens.color.darkGreen.shade30,
-      borderColor: globalTokens.color.darkGreen.primary,
-    },
-    lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.tint40,
-      color: globalTokens.color.lightTeal.shade30,
-      borderColor: globalTokens.color.lightTeal.primary,
-    },
-    teal: {
-      backgroundColor: globalTokens.color.teal.tint40,
-      color: globalTokens.color.teal.shade30,
-      borderColor: globalTokens.color.teal.primary,
-    },
-    steel: {
-      backgroundColor: globalTokens.color.steel.tint40,
-      color: globalTokens.color.steel.shade30,
-      borderColor: globalTokens.color.steel.primary,
-    },
-    blue: {
-      backgroundColor: globalTokens.color.blue.tint40,
-      color: globalTokens.color.blue.shade30,
-      borderColor: globalTokens.color.blue.primary,
-    },
-    royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.tint40,
-      color: globalTokens.color.royalBlue.shade30,
-      borderColor: globalTokens.color.royalBlue.primary,
-    },
-    cornflower: {
-      backgroundColor: globalTokens.color.cornflower.tint40,
-      color: globalTokens.color.cornflower.shade30,
-      borderColor: globalTokens.color.cornflower.primary,
-    },
-    navy: {
-      backgroundColor: globalTokens.color.navy.tint40,
-      color: globalTokens.color.navy.shade30,
-      borderColor: globalTokens.color.navy.primary,
-    },
-    lavender: {
-      backgroundColor: globalTokens.color.lavender.tint40,
-      color: globalTokens.color.lavender.shade30,
-      borderColor: globalTokens.color.lavender.primary,
-    },
-    purple: {
-      backgroundColor: globalTokens.color.purple.tint40,
-      color: globalTokens.color.purple.shade30,
-      borderColor: globalTokens.color.purple.primary,
-    },
-    grape: {
-      backgroundColor: globalTokens.color.grape.tint40,
-      color: globalTokens.color.grape.shade30,
-      borderColor: globalTokens.color.grape.primary,
-    },
-    lilac: {
-      backgroundColor: globalTokens.color.lilac.tint40,
-      color: globalTokens.color.lilac.shade30,
-      borderColor: globalTokens.color.lilac.primary,
-    },
-    pink: {
-      backgroundColor: globalTokens.color.pink.tint40,
-      color: globalTokens.color.pink.shade30,
-      borderColor: globalTokens.color.pink.primary,
-    },
-    magenta: {
-      backgroundColor: globalTokens.color.magenta.tint40,
-      color: globalTokens.color.magenta.shade30,
-      borderColor: globalTokens.color.magenta.primary,
-    },
-    plum: {
-      backgroundColor: globalTokens.color.plum.tint40,
-      color: globalTokens.color.plum.shade30,
-      borderColor: globalTokens.color.plum.primary,
-    },
-    beige: {
-      backgroundColor: globalTokens.color.beige.tint40,
-      color: globalTokens.color.beige.shade30,
-      borderColor: globalTokens.color.beige.primary,
-    },
-    mink: {
-      backgroundColor: globalTokens.color.mink.tint40,
-      color: globalTokens.color.mink.shade30,
-      borderColor: globalTokens.color.mink.primary,
-    },
-    platinum: {
-      backgroundColor: globalTokens.color.platinum.tint40,
-      color: globalTokens.color.platinum.shade30,
-      borderColor: globalTokens.color.platinum.primary,
-    },
-    anchor: {
-      backgroundColor: globalTokens.color.anchor.tint40,
-      color: globalTokens.color.anchor.shade30,
-      borderColor: 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,
+      };
+  }
+}

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

@@ -22,13 +22,71 @@ exports[`renders Avatar 1`] = `
         "alignItems": "center",
         "alignSelf": "stretch",
         "backgroundColor": "#4f6bed",
+        "borderColor": "#ffffff",
         "borderRadius": 9999,
+        "borderWidth": 0,
         "flexGrow": 1,
         "height": 24,
         "justifyContent": "center",
         "width": 24,
       }
     }
-  />
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={16}
+      bbWidth={14}
+      fill="none"
+      focusable={false}
+      height={16}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 16,
+            "width": 14,
+          },
+        ]
+      }
+      vbHeight={16}
+      vbWidth={14}
+      width={14}
+      xml="<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>
+      "
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          Array [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          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={
+            Array [
+              2,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
 </View>
 `;