@atlaskit/avatar-group 8.5.13 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/avatar-group
 
+## 9.0.0
+
+### Major Changes
+
+- [`92bb02bc46b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92bb02bc46b) - [ux] There are **no code changes required** to consume this major, but you should be aware that internal changes have been made to how `@atlaskit/avatar` loads images.
+
+  Before, the image loading behaviour was written in JS. Now, it leans on a standard HTML `img` tag if you provide a `src` prop, allowing it to rely on the browser to optimise the loading. These changes should result in faster image loading and an improved server-side rendering story.
+
+  In this version, the **breaking change is that you will no longer see a fallback icon while the image is loading**. We have intentionally removed this loading behaviour as it is no longer consistent with our native `img` behaviour-first approach, and was a source of SSR bugs. Avatar images will load either instantly from the cache, or very fast from a CDN. In the edge cases where there is an error with the image src provided, we will still fall back to a default icon.
+
+### Patch Changes
+
+- [`1276a8179ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1276a8179ad) - [ux] DSP-4535: Fix wrongly used token.
+- Updated dependencies
+
+## 8.5.15
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
+## 8.5.14
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.5.13
 
 ### Patch Changes

package/dist/cjs/components/more-indicator.js

@@ -39,7 +39,7 @@ var buttonActiveStyles = (0, _core.css)({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
-    boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(_colors.B300, ")")),
+    boxShadow: "0 0 0 ".concat(_avatar.BORDER_WIDTH, "px ").concat("var(--ds-border-selected, ".concat(_colors.B300, ")")),
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
     transform: "scale(".concat(_avatar.ACTIVE_SCALE_FACTOR, ")")
   }
@@ -73,7 +73,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(_colors.N0, ")") : _ref$borderColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$count = _ref.count,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.13",
+	"version": "9.0.0",
 	"sideEffects": false
 }

package/dist/es2019/components/more-indicator.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
-import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 const FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -17,7 +17,7 @@ const buttonActiveStyles = css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: `var(--ds-background-selected, ${B50})`,
-    boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-selected, ${B300})`}`,
+    boxShadow: `0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-selected, ${B300})`}`,
     color: `var(--ds-text-selected, ${B400})`,
     transform: `scale(${ACTIVE_SCALE_FACTOR})`
   }
@@ -49,7 +49,7 @@ const buttonStyles = css({
 const MAX_DISPLAY_COUNT = 99;
 const MoreIndicator = /*#__PURE__*/forwardRef(({
   appearance = 'circle',
-  borderColor = `var(--ds-surface-overlay, ${background()})`,
+  borderColor = `var(--ds-border-inverse, ${N0})`,
   size = 'medium',
   count = 0,
   testId,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.13",
+	"version": "9.0.0",
 	"sideEffects": false
 }

package/dist/esm/components/more-indicator.js

@@ -6,7 +6,7 @@ var _excluded = ["testId", "className", "ref"];
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/core';
 import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
-import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
+import { B300, B400, B50, N0, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
 var FONT_SIZE = {
   xsmall: '10px',
   small: '10px',
@@ -19,7 +19,7 @@ var buttonActiveStyles = css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&&': {
     backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
-    boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-text-selected, ".concat(B300, ")")),
+    boxShadow: "0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-selected, ".concat(B300, ")")),
     color: "var(--ds-text-selected, ".concat(B400, ")"),
     transform: "scale(".concat(ACTIVE_SCALE_FACTOR, ")")
   }
@@ -53,7 +53,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-border-inverse, ".concat(N0, ")") : _ref$borderColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$count = _ref.count,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "8.5.13",
+	"version": "9.0.0",
 	"sideEffects": false
 }

package/dist/types/components/avatar-group.d.ts

@@ -78,16 +78,14 @@ export interface AvatarGroupProps {
      */
     isTooltipDisabled?: boolean;
     /**
-     * Text to be used as aria-label of avatar's list.
-     *
-     * Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
-     *
-     * The label should describe the `AvatarGroup`'s entities, for instance:
-     *
-     * - `label="team members"`, screen reader announcement would be `list team members, X items`
-     * - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
-     *
-     * When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
+      Text to be used as aria-label for the list of avatars.
+      Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
+  
+      The label should describe the `AvatarGroup`'s entities, for instance:
+      - `label="team members"`, screen reader announcement would be `list team members, X items`
+      - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
+  
+      When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
      */
     label?: string;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "8.5.13",
+  "version": "9.0.0",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -23,11 +23,11 @@
     }
   },
   "dependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"