@atlaskit/avatar-group 12.1.3 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/avatar-group
 
+## 12.2.0
+
+### Minor Changes
+
+- [#198565](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198565)
+  [`d3eacf36afe32`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3eacf36afe32) -
+  Adjusted stack spacing at 'small' size to ensure visibility of "more" menu. Fix bug where grid
+  spacing was 4px too wide across all sizes
+
+## 12.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.3
 
 ### Patch Changes

package/dist/cjs/components/avatar-group.js

@@ -246,7 +246,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var Group = appearance === 'stack' ? _stack.default : _grid.default;
   return /*#__PURE__*/_react.default.createElement(Group, {
     testId: testId && "".concat(testId, "--avatar-group"),
-    "aria-label": label
+    "aria-label": label,
+    size: size
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
     var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {

package/dist/cjs/components/grid.compiled.css

@@ -7,13 +7,16 @@
 ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._2mzuagmp{list-style-type:none!important}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
 ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
 ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
 ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._vwz4kb7n{line-height:1}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

package/dist/cjs/components/grid.js

@@ -10,9 +10,11 @@ require("./grid.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = null;
+var listStylesFlagged = null;
 var listItemStyles = null;
 var Grid = function Grid(_ref) {
   var children = _ref.children,
@@ -21,7 +23,7 @@ var Grid = function Grid(_ref) {
   return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    className: (0, _runtime.ax)(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+    className: (0, _runtime.ax)(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
   }, _react.Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: (0, _runtime.ax)(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])

package/dist/cjs/components/stack.compiled.css

@@ -1,3 +1,5 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
 ._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
 ._19121cl4{isolation:isolate}

package/dist/cjs/components/stack.js

@@ -10,20 +10,24 @@ require("./stack.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var listStyles = null;
+var listSmallStyles = null;
 var listItemStyles = null;
+var listItemSmallStyles = null;
 var Stack = function Stack(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
-    label = _ref['aria-label'];
+    label = _ref['aria-label'],
+    size = _ref.size;
   return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    className: (0, _runtime.ax)(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+    className: (0, _runtime.ax)(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l21b66"])
   }, _react.Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
-      className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t"])
+      className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && (0, _platformFeatureFlags.fg)('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
     }, child);
   }));
 };

package/dist/es2019/components/avatar-group.js

@@ -209,7 +209,8 @@ const AvatarGroup = ({
   const Group = appearance === 'stack' ? Stack : Grid;
   return /*#__PURE__*/React.createElement(Group, {
     testId: testId && `${testId}--avatar-group`,
-    "aria-label": label
+    "aria-label": label,
+    size: size
   }, data.slice(0, maxAvatar).map((avatarData, idx) => {
     const callback = avatarData.onClick || onAvatarClick;
     const finalAvatar = getOverrides(overrides).Avatar.render(avatar, {

package/dist/es2019/components/grid.compiled.css

@@ -7,13 +7,16 @@
 ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._2mzuagmp{list-style-type:none!important}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
 ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
 ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
 ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._vwz4kb7n{line-height:1}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

package/dist/es2019/components/grid.js

@@ -3,8 +3,10 @@ import "./grid.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const gutter = "var(--ds-space-negative-050, -4px)";
 const listStyles = null;
+const listStylesFlagged = null;
 const listItemStyles = null;
 const Grid = ({
   children,
@@ -13,7 +15,7 @@ const Grid = ({
 }) => /*#__PURE__*/React.createElement("ul", {
   "data-testid": testId,
   "aria-label": label,
-  className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+  className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
 }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
   className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])
 }, child)));

package/dist/es2019/components/stack.compiled.css

@@ -1,3 +1,5 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
 ._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
 ._19121cl4{isolation:isolate}

package/dist/es2019/components/stack.js

@@ -3,18 +3,22 @@ import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const listStyles = null;
+const listSmallStyles = null;
 const listItemStyles = null;
+const listItemSmallStyles = null;
 const Stack = ({
   children,
   testId,
-  'aria-label': label
+  'aria-label': label,
+  size
 }) => /*#__PURE__*/React.createElement("ul", {
   "data-testid": testId,
   "aria-label": label,
-  className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+  className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
 }, Children.map(children, child => child && /*#__PURE__*/React.createElement("li", {
-  className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t"])
+  className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
 }, child)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/avatar-group.js

@@ -237,7 +237,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
   var Group = appearance === 'stack' ? Stack : Grid;
   return /*#__PURE__*/React.createElement(Group, {
     testId: testId && "".concat(testId, "--avatar-group"),
-    "aria-label": label
+    "aria-label": label,
+    size: size
   }, data.slice(0, maxAvatar).map(function (avatarData, idx) {
     var callback = avatarData.onClick || onAvatarClick;
     var finalAvatar = getOverrides(overrides).Avatar.render(avatar, _objectSpread(_objectSpread({}, avatarData), {}, {

package/dist/esm/components/grid.compiled.css

@@ -7,13 +7,16 @@
 ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._2mzuagmp{list-style-type:none!important}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
 ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
 ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbqr5cr{margin-inline-start:var(--ds-space-negative-050,-4px)}
 ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._vwz4kb7n{line-height:1}
 ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

package/dist/esm/components/grid.js

@@ -3,8 +3,10 @@ import "./grid.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var gutter = "var(--ds-space-negative-050, -4px)";
 var listStyles = null;
+var listStylesFlagged = null;
 var listItemStyles = null;
 var Grid = function Grid(_ref) {
   var children = _ref.children,
@@ -13,7 +15,7 @@ var Grid = function Grid(_ref) {
   return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+    className: ax(["_1e0c1txw _1bah1y6m _1n261g80 _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2r5cr _ahbqr5cr _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", fg('platform-avatar-group-spacing-fix') && "_6rth1b66 _y4tiv77o _bozgv77o"])
   }, Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
       className: ax(["_6rthu2gc _1pfhze3t _12l2ze3t _ahbqze3t _y4ti1b66 _bozg1b66"])

package/dist/esm/components/stack.compiled.css

@@ -1,3 +1,5 @@
+._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2r5cr{margin-inline-end:var(--ds-space-negative-050,-4px)}
 ._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._12l2x0bf{margin-inline-end:var(--ds-space-negative-100,-8px)}
 ._19121cl4{isolation:isolate}

package/dist/esm/components/stack.js

@@ -3,19 +3,23 @@ import "./stack.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var listStyles = null;
+var listSmallStyles = null;
 var listItemStyles = null;
+var listItemSmallStyles = null;
 var Stack = function Stack(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
-    label = _ref['aria-label'];
+    label = _ref['aria-label'],
+    size = _ref.size;
   return /*#__PURE__*/React.createElement("ul", {
     "data-testid": testId,
     "aria-label": label,
-    className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
+    className: ax(["_1e0c1txw _19121cl4 _vwz4kb7n _2mzuagmp _6rthze3t _1pfhze3t _12l2u2gc _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l21b66"])
   }, Children.map(children, function (child) {
     return child && /*#__PURE__*/React.createElement("li", {
-      className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t"])
+      className: ax(["_6rthze3t _1pfhze3t _12l2x0bf _ahbqze3t", size === 'small' && fg('platform-avatar-group-spacing-fix') && "_12l2r5cr"])
     }, child);
   }));
 };

package/dist/types/components/stack.d.ts

@@ -3,9 +3,11 @@
  * @jsx jsx
  */
 import { type FC, type ReactNode } from 'react';
+import { type AvatarGroupSize } from './types';
 declare const Stack: FC<{
     children: ReactNode;
     testId?: string;
     'aria-label': string;
+    size: AvatarGroupSize;
 }>;
 export default Stack;

package/dist/types-ts4.5/components/stack.d.ts

@@ -3,9 +3,11 @@
  * @jsx jsx
  */
 import { type FC, type ReactNode } from 'react';
+import { type AvatarGroupSize } from './types';
 declare const Stack: FC<{
     children: ReactNode;
     testId?: string;
     'aria-label': string;
+    size: AvatarGroupSize;
 }>;
 export default Stack;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.1.3",
+	"version": "12.2.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -48,7 +48,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^27.8.0",
+		"@atlaskit/icon": "^27.10.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/primitives": "^14.11.0",
@@ -60,8 +60,7 @@
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"lodash": "^4.17.21",
-		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2"
+		"react-dom": "^18.2.0"
 	},
 	"keywords": [
 		"atlaskit",
@@ -103,6 +102,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform-avatar-group-spacing-fix": {
+			"type": "boolean"
 		}
 	}
 }