@fluentui-react-native/experimental-avatar 0.14.45 → 0.15.2

package/src/JSAvatar.types.ts

@@ -1,286 +0,0 @@
-import type { IViewProps } from '@fluentui-react-native/adapters';
-import { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native';
-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';
-
-export const JSAvatarName = 'Avatar';
-export const AvatarSizesForTokens = [
-  'size20',
-  'size24',
-  'size28',
-  'size32',
-  'size36',
-  'size40',
-  'size48',
-  'size56',
-  'size64',
-  'size72',
-  'size96',
-  'size120',
-] as const;
-
-export const AvatarSizes = [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120] as const;
-
-/**
- * Sets color of the avatar when there is no picture. Uses fluent color names
- */
-export const AvatarColors = [
-  'darkRed',
-  'cranberry',
-  'red',
-  'pumpkin',
-  'peach',
-  'marigold',
-  'gold',
-  'brass',
-  'brown',
-  'forest',
-  'seafoam',
-  'darkGreen',
-  'lightTeal',
-  'teal',
-  'steel',
-  'blue',
-  'royalBlue',
-  'cornflower',
-  'navy',
-  'lavender',
-  'purple',
-  'grape',
-  'lilac',
-  'pink',
-  'magenta',
-  'plum',
-  'beige',
-  'mink',
-  'platinum',
-  'anchor',
-  'burgundy',
-  'hotPink',
-  'orchid',
-] as const;
-export const ColorSchemes = ['neutral', 'brand', 'colorful'] as const;
-export type AvatarSize = typeof AvatarSizes[number];
-export type AvatarNamedColor = typeof AvatarColors[number];
-export type AvatarColorSchemes = typeof ColorSchemes[number];
-
-export type AvatarShape = 'circular' | 'square';
-export type AvatarActive = 'active' | 'inactive' | 'unset';
-export type AvatarActiveAppearance = 'ring';
-export type AvatarColor = AvatarColorSchemes | AvatarNamedColor | ColorValue;
-
-export interface AvatarConfigurableProps {
-  /**
-   * Optional activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * unset: normal display
-   *
-   * @defaultvalue unset
-   */
-  active?: AvatarActive;
-  /**
-   * The color when displaying either an icon or initials.
-   * * neutral (default): gray
-   * * brand: color from the brand palette
-   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
-   * * [AvatarNamedColor]: a specific color from the theme
-   *
-   * @defaultvalue neutral
-   */
-  avatarColor?: AvatarColor;
-  initialsColor?: ColorValue;
-
-  /**
-   * Ring props
-   */
-  ringInnerGap?: number;
-  ringBackgroundColor?: ColorValue;
-  ringColor?: ColorValue;
-  ringThickness?: number;
-  transparentRing?: boolean;
-
-  /**
-   * 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 {
-  /**
-   * The appearance when `active="active"`
-   *
-   * @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;
-
-  /**
-   * Icon to be displayed when the avatar doesn't have an image or initials.
-   *
-   * @defaultvalue `PersonRegular` (the default icon's size depends on the Avatar's size)
-   */
-  icon?: IconSourcesType;
-
-  /**
-   * 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;
-
-  /**
-   * (optional) Custom initials.
-   *
-   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,
-   * using the `getInitials` function.
-   *
-   * The initials are displayed when there is no image (including while the image is loading).
-   */
-  initials?: string;
-
-  /**
-   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
-   *
-   * The name will be used to determine the initials displayed when there is no icon, as well as provided to
-   * accessibility tools.
-   */
-  name?: string;
-
-  /**
-   * The avatar can have a circular or square shape.
-   * @defaultvalue circular
-   */
-  shape?: AvatarShape;
-
-  /**
-   * Shorthand for passing image URL instead of using `image` prop
-   */
-  imageUrl?: string;
-}
-
-export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
-  /**
-   * Avatar opacity which is changed depending on `active` prop.
-   */
-  avatarOpacity?: number;
-
-  /**
-   * The size of presence badge.
-   */
-  badgeSize?: BadgeSize;
-
-  /**
-   * The icon color.
-   */
-  iconColor?: ColorValue;
-
-  /**
-   * The size of the icon.
-   */
-  iconSize?: number;
-
-  /**
-   * Avatar shapes:
-   */
-  circular?: JSAvatarTokens;
-  square?: JSAvatarTokens;
-
-  /**
-   * Token for inactive value of `active` prop
-   */
-  inactive?: JSAvatarTokens;
-
-  /**
-   * Avatar sizes:
-   */
-  size20?: JSAvatarTokens;
-  size24?: JSAvatarTokens;
-  size28?: JSAvatarTokens;
-  size32?: JSAvatarTokens;
-  size36?: JSAvatarTokens;
-  size40?: JSAvatarTokens;
-  size48?: JSAvatarTokens;
-  size56?: JSAvatarTokens;
-  size64?: JSAvatarTokens;
-  size72?: JSAvatarTokens;
-  size96?: JSAvatarTokens;
-  size120?: JSAvatarTokens;
-
-  /**
-   * Avatar colors:
-   */
-  neutral?: JSAvatarTokens;
-  brand?: JSAvatarTokens;
-  darkRed?: JSAvatarTokens;
-  cranberry?: JSAvatarTokens;
-  red?: JSAvatarTokens;
-  pumpkin?: JSAvatarTokens;
-  peach?: JSAvatarTokens;
-  marigold?: JSAvatarTokens;
-  gold?: JSAvatarTokens;
-  brass?: JSAvatarTokens;
-  brown?: JSAvatarTokens;
-  forest?: JSAvatarTokens;
-  seafoam?: JSAvatarTokens;
-  darkGreen?: JSAvatarTokens;
-  lightTeal?: JSAvatarTokens;
-  teal?: JSAvatarTokens;
-  steel?: JSAvatarTokens;
-  blue?: JSAvatarTokens;
-  royalBlue?: JSAvatarTokens;
-  cornflower?: JSAvatarTokens;
-  navy?: JSAvatarTokens;
-  lavender?: JSAvatarTokens;
-  purple?: JSAvatarTokens;
-  grape?: JSAvatarTokens;
-  lilac?: JSAvatarTokens;
-  pink?: JSAvatarTokens;
-  magenta?: JSAvatarTokens;
-  plum?: JSAvatarTokens;
-  beige?: JSAvatarTokens;
-  mink?: JSAvatarTokens;
-  platinum?: JSAvatarTokens;
-  anchor?: JSAvatarTokens;
-  burgundy?: JSAvatarTokens;
-  hotPink?: JSAvatarTokens;
-  orchid?: JSAvatarTokens;
-}
-
-export interface AvatarSlotProps {
-  root: ViewProps;
-  image: ImageProps;
-  initials: TextProps;
-  initialsBackground: ViewProps;
-  icon: IconProps;
-  ring: ViewProps;
-  badge: BadgeProps;
-}
-
-export interface JSAvatarState {
-  showRing: boolean;
-  transparentRing: boolean;
-  showBadge: boolean;
-}
-
-export interface AvatarInfo {
-  props: JSAvatarProps;
-  state: JSAvatarState;
-}
-
-export interface JSAvatarType {
-  props: JSAvatarProps;
-  slotProps: AvatarSlotProps;
-  tokens: JSAvatarTokens;
-  state: JSAvatarState;
-}

package/src/JSAvatarTokens.ts

@@ -1,201 +0,0 @@
-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) =>
-  ({
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    ringColor: t.colors.transparentStroke,
-    borderColor: globalTokens.color.white,
-    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
-    circular: {
-      borderRadius: globalTokens.corner.radius.circle,
-    },
-    square: {
-      borderRadius: globalTokens.corner.radius.medium,
-    },
-    inactive: {
-      avatarOpacity: 0.8,
-    },
-    size20: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 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,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      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),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', 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

@@ -1,204 +0,0 @@
-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) =>
-  ({
-    badgeSize: 'smallest',
-    color: t.colors.neutralForeground3,
-    backgroundColor: t.colors.neutralBackground6,
-    avatarOpacity: 1,
-    fontFamily: t.typography.families.primary,
-    fontWeight: globalTokens.font.weight.semibold,
-    fontSize: globalTokens.font.size[200],
-    size: 24,
-    iconSize: 16,
-    iconColor: t.colors.neutralForeground3,
-    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: {
-      size: 20,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size24: {
-      size: 24,
-      badgeSize: 'smallest',
-      iconSize: 16,
-      fontSize: globalTokens.font.size[100],
-      square: {
-        borderRadius: globalTokens.corner.radius.small,
-      },
-    },
-    size28: {
-      size: 28,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontWeight: globalTokens.font.weight.semibold,
-      fontSize: globalTokens.font.size[100],
-    },
-    size32: {
-      size: 32,
-      badgeSize: 'smaller',
-      iconSize: 20,
-      fontSize: globalTokens.font.size[100],
-    },
-    size36: {
-      size: 36,
-      badgeSize: 'smaller',
-      iconSize: 20,
-    },
-    size40: {
-      size: 40,
-      badgeSize: 'small',
-      iconSize: 20,
-    },
-    size48: {
-      size: 48,
-      badgeSize: 'small',
-      iconSize: 24,
-    },
-    size56: {
-      size: 56,
-      badgeSize: 'medium',
-      iconSize: 28,
-      fontSize: globalTokens.font.size[400],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size64: {
-      size: 64,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size72: {
-      size: 72,
-      badgeSize: 'large',
-      iconSize: 32,
-      fontSize: globalTokens.font.size[500],
-      square: {
-        borderRadius: globalTokens.corner.radius.large,
-      },
-    },
-    size96: {
-      size: 96,
-      badgeSize: 'largest',
-      iconSize: 48,
-      fontWeight: globalTokens.font.weight.regular,
-      fontSize: globalTokens.font.size[700],
-      square: {
-        borderRadius: globalTokens.corner.radius.extraLarge,
-      },
-    },
-    size120: {
-      size: 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,
-      iconColor: t.colors.neutralForeground3,
-      ringColor: t.colors.transparentStroke,
-    },
-    brand: {
-      backgroundColor: t.colors.brandBackgroundStatic,
-      color: t.colors.neutralForegroundOnBrand,
-      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),
-    burgundy: getColorProps('burgundy', t),
-    hotPink: getColorProps('hotPink', t),
-    orchid: getColorProps('orchid', 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,
-      };
-  }
-}