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

package/CHANGELOG.json

@@ -2,7 +2,118 @@
   "name": "@fluentui-react-native/experimental-avatar",
   "entries": [
     {
-      "date": "Tue, 17 May 2022 16:41:36 GMT",
+      "date": "Sat, 21 May 2022 16:16:50 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.14.30",
+      "version": "0.14.30",
+      "comments": {
+        "patch": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35",
+            "comment": "Added documentation for the Avatar"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/badge to v0.0.36",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/framework to v0.7.28",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/icon to v0.11.23",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.15.8",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/tokens to v0.12.2",
+            "commit": "313cc45fbeb5bfaff0b266194cc48608bf6d2c35"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 21 May 2022 01:47:58 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.14.29",
+      "version": "0.14.29",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/badge to v0.0.35",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/framework to v0.7.27",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/icon to v0.11.22",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.15.7",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/theme-tokens to v0.16.3",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/tokens to v0.12.1",
+            "commit": "36ea0d81629f9326eb8c23912d9949381014dade"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 19 May 2022 20:09:25 GMT",
+      "tag": "@fluentui-react-native/experimental-avatar_v0.14.28",
+      "version": "0.14.28",
+      "comments": {
+        "patch": [
+          {
+            "author": "v.kozova13@gmail.com",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "commit": "afc5faf340ee104daf976801ce76962637fe0a61",
+            "comment": "Added color generator depending on theme"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-avatar",
+            "comment": "Bump @fluentui-react-native/badge to v0.0.34",
+            "commit": "afc5faf340ee104daf976801ce76962637fe0a61"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 17 May 2022 16:41:49 GMT",
       "tag": "@fluentui-react-native/experimental-avatar_v0.14.27",
       "version": "0.14.27",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,47 @@
 # Change Log - @fluentui-react-native/experimental-avatar
 
-This log was last generated on Tue, 17 May 2022 16:41:36 GMT and should not be manually modified.
+This log was last generated on Sat, 21 May 2022 16:16:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.14.30
+
+Sat, 21 May 2022 16:16:50 GMT
+
+### Patches
+
+- Added documentation for the Avatar (v.kozova13@gmail.com)
+- Bump @fluentui-react-native/badge to v0.0.36
+- Bump @fluentui-react-native/framework to v0.7.28
+- Bump @fluentui-react-native/icon to v0.11.23
+- Bump @fluentui-react-native/interactive-hooks to v0.15.8
+- Bump @fluentui-react-native/tokens to v0.12.2
+
+## 0.14.29
+
+Sat, 21 May 2022 01:47:58 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/badge to v0.0.35
+- Bump @fluentui-react-native/framework to v0.7.27
+- Bump @fluentui-react-native/icon to v0.11.22
+- Bump @fluentui-react-native/interactive-hooks to v0.15.7
+- Bump @fluentui-react-native/theme-tokens to v0.16.3
+- Bump @fluentui-react-native/tokens to v0.12.1
+
+## 0.14.28
+
+Thu, 19 May 2022 20:09:25 GMT
+
+### Patches
+
+- Added color generator depending on theme (v.kozova13@gmail.com)
+- Bump @fluentui-react-native/badge to v0.0.34
+
 ## 0.14.27
 
-Tue, 17 May 2022 16:41:36 GMT
+Tue, 17 May 2022 16:41:49 GMT
 
 ### Patches
 

package/SPEC.md

@@ -0,0 +1,310 @@
+# Avatar
+
+## Background
+
+The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.
+Previously it was a component PersonaCoin which used an old version of framework. There are more details in MIGRATION.md.
+
+```ts
+import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
+```
+
+## Sample Code
+
+Basic examples:
+
+```jsx
+  <JSAvatar />
+  <JSAvatar icon={{ svgSource: { uri: 'https://www.example.com/test.svg', viewBox: '0 0 100 100' } }} size={120} />
+  <JSAvatar src="../../path-to-image.png" active="active" activeAppearance="ring" size={56} />
+  <JSAvatar shape="square" avatarColor="purple" name="Richard Feynman" />
+```
+
+More examples on the [Test pages for the Avatar](../../../apps/fluent-tester/src/FluentTester/TestComponents/Avatar). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+
+## Variants
+
+### Active
+
+Optional activity indicator.
+Active prop can be `unset`, `active` and `inactive`. Default is `unset`.
+
+- active: the avatar will be decorated according to activeAppearance, e.g. `ring`.
+- inactive: the avatar will be partially transparent (0.8 opacity).
+- unset: normal display
+
+### ActiveAppearance
+
+`activeAppearance` can be used when `active` prop set to `active`.
+It adds `ring` as extra visual.
+
+### Badge
+
+The `Avatar` component can include presence badge when active prop is undefined or `unset`.
+
+### Color
+
+The Avatar supports color variants when displaying initials or an icon:
+
+- Neutral - Gray (default).
+- Brand - Brand colors from the theme
+- Colorful - Pick from a list of pre-defined Avatar colors. The color will be assigned based on a hash of the name (to "randomly" assign a person a color). The color name (like darkRed) can also be specified explicitly in case the use case requires a different algorithm to pick the color.
+
+### Icon
+
+The `Avatar` component can include an `icon` that appears if there's no image or initials.
+
+### Image
+
+The `Avatar` component can include an `image`.
+
+### Initials
+
+Initials can be passed using `initials` prop or generated from `name` prop using getInitials method.
+Here are the requirements from Web spec:
+
+1. If only one word is provided, pull the first letter of the word.
+2. If 2 words provided, pull first letter of both words.
+3. If 2+ words provided, pull first letter of first word and last word.
+4. Ignore suffixes (i.e. Jr, III).
+5. Ignore words in parantheses Ignore special characters i.e. parantheses, dashes If numeric, fall back to Icon If first character is not alphabetic, fall back to icon.
+
+But requirements are still being discussed. This area will be updated once we come up with final solition. There are different implementations in different teams.
+
+### Name
+
+Name prop is used to generate initials.
+
+### Shape
+
+The Avatar supports a circular and square (with rounded corners) shape.
+
+### Sizes
+
+`Avatar` supports next sizes: `20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120`.
+Default size for win32 is 24.
+
+## API
+
+### Slots
+
+The `Avatar` component has the following slots:
+
+- `root` - The outer container representing the `Avatar` wrapper.
+- `image` - If specified, renders an `image`
+- `initials` - If specified, renders initials when there's no `image`
+- `icon` - If specified, renders an `icon` if there's no `image` or `initials`.
+- `initialsBackground` - It's a wrapper for initials and icon.
+- `ring` - If specified, renders the ring for the `Avatar` when active prop is set to `active`.
+- `badge` - If specified, renders presence badge. Example: `badge={{ status: 'outOfOffice' }}.`.
+
+The slots can be modified using the `compose` function on the `Avatar`. For more information on using the `compose` API, please see [this page](../../framework/composition/README.md).
+
+### Props
+
+```ts
+export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
+  /**
+   * 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 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;
+
+  /**
+   * The Avatar's image.
+   */
+  image?: ImageProps;
+
+  /**
+   * The initials are displayed when there is no image (including while the image is loading).
+   *
+   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop, using the `getInitials` function.
+   */
+  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;
+
+  /**
+   * 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
+   */
+  shape?: AvatarShape;
+
+  /**
+   * Currently used for image URL, will be deprecated when image prop works
+   */
+  src?: string;
+}
+```
+
+### Styling Tokens
+
+Tokens can be used to customize the styling of the control by using the `customize` function on the `Avatar`. For more information on using the `customize` API, please see [this page](../../framework/composition/README.md). The `Avatar` has the following tokens:
+
+```ts
+export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
+  /**
+   * Avatar ocality 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;
+
+  /**
+   * The height of the avatar.
+   */
+  height?: number;
+
+  /**
+   * Avatar shapes:
+   */
+  circular?: JSAvatarTokens;
+  square?: JSAvatarTokens;
+
+  /**
+   * Token for inactive value of `active` prop
+   */
+  inactive?: JSAvatarTokens;
+
+  /**
+   * The width of the avatar.
+   */
+  width?: number;
+
+  /**
+   * 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;
+}
+```
+
+## Behaviors
+
+### States
+
+The following section describes the different states which `Avatar` can be in as a result of interaction.
+
+#### showRing state
+
+Ring is shown when `showRing` is set to true
+
+#### transparentRing state
+
+Makes ring transparent
+
+#### showBadge state
+
+showBadge is set to true when `active` prop is `unset` or undefined
+
+### Interaction
+
+For now Avatar doesn't support interactions.
+For the next step we will need to add tooltip and onClick handler.
+
+## Accessibility

package/lib/JSAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQ5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAa5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KAqCnB,CAAC"}
+{"version":3,"file":"JSAvatar.d.ts","sourceRoot":"","sources":["../src/JSAvatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAA8B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAS5F;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,SAAS,aAAa,aAAa,aAAa,KAAG,OAa5F,CAAC;AAEF,eAAO,MAAM,QAAQ,8KA+CnB,CAAC"}

package/lib/JSAvatar.js

@@ -29,6 +29,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.
  *
@@ -65,8 +66,9 @@ export var JSAvatar = compose(__assign(__assign({ displayName: JSAvatarName }, s
             var _a = mergeProps(avatar.props, final), activeAppearance = _a.activeAppearance, icon = _a.icon, initials = _a.initials, image = _a.image, badge = _a.badge, mergedProps = __rest(_a, ["activeAppearance", "icon", "initials", "image", "badge"]);
             var _b = avatar.state, showRing = _b.showRing, transparentRing = _b.transparentRing, showBadge = _b.showBadge;
             var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
+            var fallBackIconXml = "<svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <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\"/>\n      </svg>\n      ";
             return (withSlots(Slots.root, __assign({}, mergedProps),
-                image.source ? (withSlots(Slots.image, __assign({}, image))) : (withSlots(Slots.initialsBackground, null, initials ? withSlots(Slots.initials, null, initials) : userProps.icon && withSlots(Slots.icon, __assign({}, iconProps)))),
+                image.source ? (withSlots(Slots.image, __assign({}, image))) : (withSlots(Slots.initialsBackground, null, initials ? (withSlots(Slots.initials, null, initials)) : userProps.icon ? (withSlots(Slots.icon, __assign({}, iconProps))) : (withSlots(SvgXml, { xml: fallBackIconXml })))),
                 showRing && !transparentRing && withSlots(Slots.ring, null),
                 svgIconsEnabled && showBadge && withSlots(Slots.badge, __assign({}, badge))));
         };

package/lib/JSAvatar.js.map

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

package/lib/JSAvatar.styling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAAiF,CAAC;AAEnI,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAwG7F,CAAC"}
+{"version":3,"file":"JSAvatar.styling.d.ts","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,eAAe,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAAS,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AAYxF,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,cAAc,CAAC,EAShD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CA+G7F,CAAC"}

package/lib/JSAvatar.styling.js

@@ -28,7 +28,14 @@ var nameMap = {
     center: 'center',
     end: 'flex-end',
 };
-export var avatarStates = __spreadArray(__spreadArray(__spreadArray([], AvatarColors, true), AvatarSizesForTokens, true), ['circular', 'square', 'inactive'], false);
+export var avatarStates = __spreadArray(__spreadArray(__spreadArray([], AvatarColors, true), AvatarSizesForTokens, true), [
+    'circular',
+    'square',
+    'inactive',
+    'ringColor',
+    'ringBackgroundColor',
+    'iconColor',
+], false);
 export var stylingSettings = {
     tokens: [defaultJSAvatarTokens, JSAvatarName],
     states: avatarStates,
@@ -50,39 +57,42 @@ export var stylingSettings = {
         }, ['horizontalIconAlignment', 'verticalIconAlignment', 'avatarOpacity', 'height', 'width']),
         initials: buildProps(function (tokens, theme) {
             return {
-                style: __assign(__assign({}, fontStyles.from(tokens, theme)), { color: tokens.color }),
+                style: __assign(__assign({}, fontStyles.from(tokens, theme)), { color: tokens.color, textAlign: 'center' }),
             };
         }, __spreadArray(['color'], fontStyles.keys, true)),
         initialsBackground: buildProps(function (tokens, theme) {
             var backgroundColor = tokens.backgroundColor;
             return {
-                style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor }),
+                style: __assign(__assign({}, borderStyles.from(tokens, theme)), { width: tokens.width, height: tokens.height, flexGrow: 1, alignSelf: 'stretch', justifyContent: 'center', alignItems: 'center', backgroundColor: backgroundColor, borderWidth: tokens.borderWidth, borderColor: tokens.borderColor }),
             };
-        }, __spreadArray(['backgroundColor', 'width', 'height'], borderStyles.keys, true)),
+        }, __spreadArray(['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth'], borderStyles.keys, true)),
         image: buildProps(function (tokens) {
             return {
                 style: {
                     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(function (tokens) {
             return {
                 style: {
                     position: 'absolute',
+                    color: tokens.iconColor,
                     width: tokens.iconSize,
                     height: tokens.iconSize,
                 },
             };
-        }, ['iconSize']),
+        }, ['iconSize', 'iconColor']),
         ring: buildProps(function (tokens, theme) {
             var ringConfig = getRingConfig(tokens.width);
             return {
-                style: __assign({ 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)),
+                style: __assign(__assign({ borderStyle: 'solid', 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 }),
             };
-        }, __spreadArray(['width', 'height'], borderStyles.keys, true)),
+        }, __spreadArray(['width', 'height', 'ringColor'], borderStyles.keys, true)),
         badge: buildProps(function (tokens) {
             return {
                 size: tokens.badgeSize,

package/lib/JSAvatar.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAkD,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACpI,OAAO,EAA4B,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEzE,IAAM,OAAO,GAA8B;IACzC,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,iDAAiC,YAAY,SAAK,oBAAoB,UAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,SAAC,CAAC;AAEnI,MAAM,CAAC,IAAM,eAAe,GAAsE;IAChG,MAAM,EAAE,CAAC,qBAAqB,EAAE,YAAY,CAAC;IAC7C,MAAM,EAAE,YAAY;IACpB,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB;YACb,IAAA,uBAAuB,GAA0D,MAAM,wBAAhE,EAAE,qBAAqB,GAAmC,MAAM,sBAAzC,EAAE,KAAK,GAA4B,MAAM,MAAlC,EAAE,MAAM,GAAoB,MAAM,OAA1B,EAAE,aAAa,GAAK,MAAM,cAAX,CAAY;YAChG,OAAO;gBACL,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,KAAK,EAAE,KAAK;oBACZ,MAAM,EAAE,MAAM;oBACd,cAAc,EAAE,OAAO,CAAC,uBAAuB,IAAI,KAAK,CAAgC;oBACxF,UAAU,EAAE,OAAO,CAAC,qBAAqB,IAAI,KAAK,CAA4B;oBAC9E,uBAAuB,yBAAA;oBACvB,qBAAqB,uBAAA;oBACrB,OAAO,EAAE,aAAa;iBACvB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,yBAAyB,EAAE,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,CAAC,CACzF;QACD,QAAQ,EAAE,UAAU,CAClB,UAAC,MAAsB,EAAE,KAAY;YACnC,OAAO;gBACL,KAAK,wBACA,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACjC,KAAK,EAAE,MAAM,CAAC,KAAK,GACpB;aACF,CAAC;QACJ,CAAC,iBACA,OAAO,GAAK,UAAU,CAAC,IAAI,QAC7B;QACD,kBAAkB,EAAE,UAAU,CAC5B,UAAC,MAAsB,EAAE,KAAY;YAC3B,IAAA,eAAe,GAAK,MAAM,gBAAX,CAAY;YAEnC,OAAO;gBACL,KAAK,wBACA,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KACnC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,eAAe,GACjC;aACF,CAAC;QACJ,CAAC,iBACA,iBAAiB,EAAE,OAAO,EAAE,QAAQ,GAAK,YAAY,CAAC,IAAI,QAC5D;QACD,KAAK,EAAE,UAAU,CACf,UAAC,MAAsB;YACrB,OAAO;gBACL,KAAK,EAAE;oBACL,YAAY,EAAE,MAAM,CAAC,YAAY;oBACjC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,MAAM,EAAE,MAAM,CAAC,MAAM;iBACtB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,cAAc,EAAE,OAAO,EAAE,QAAQ,CAAC,CACpC;QACD,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB;YACrB,OAAO;gBACL,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,MAAM,CAAC,QAAQ;oBACtB,MAAM,EAAE,MAAM,CAAC,QAAQ;iBACxB;aACF,CAAC;QACJ,CAAC,EACD,CAAC,UAAU,CAAC,CACb;QACD,IAAI,EAAE,UAAU,CACd,UAAC,MAAsB,EAAE,KAAY;YACnC,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,OAAO;gBACL,KAAK,aACH,WAAW,EAAE,OAAO,EACpB,WAAW,EAAE,UAAU,CAAC,MAAM,EAC9B,KAAK,EAAE,UAAU,CAAC,IAAI,EACtB,MAAM,EAAE,UAAU,CAAC,IAAI,EACvB,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC3B,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC;aACF,CAAC;QACJ,CAAC,iBACA,OAAO,EAAE,QAAQ,GAAK,YAAY,CAAC,IAAI,QACzC;QACD,KAAK,EAAE,UAAU,CACf,UAAC,MAAsB;YACrB,OAAO;gBACL,IAAI,EAAE,MAAM,CAAC,SAAS;gBACtB,KAAK,EAAE,UAAU;aAClB,CAAC;QACJ,CAAC,EACD,CAAC,WAAW,CAAC,CACd;KACF;CACF,CAAC"}
+{"version":3,"file":"JSAvatar.styling.js","sourceRoot":"","sources":["../src/JSAvatar.styling.ts"],"names":[],"mappings":"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"}

package/lib/JSAvatar.types.d.ts

@@ -14,13 +14,12 @@ export declare type AvatarSize = typeof AvatarSizes[number];
 export declare type AvatarNamedColor = typeof AvatarColors[number];
 export declare type AvatarShape = 'circular' | 'square';
 export declare type AvatarActive = 'active' | 'inactive' | 'unset';
-export declare type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+export declare type AvatarActiveAppearance = 'ring';
 export declare type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
 export declare type IconAlignment = 'start' | 'center' | 'end';
 export interface RingConfig {
     accent?: boolean;
     transparent?: boolean;
-    ringBackgroundColor?: ColorValue;
     ringThickness?: number;
     innerGap?: number;
 }
@@ -53,6 +52,10 @@ 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;
     /**
      * Icon to be displayed when the avatar doesn't have an image or initials.
@@ -64,7 +67,10 @@ 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;
     /**
      * (optional) Custom initials.
@@ -96,14 +102,20 @@ 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;