@atlaskit/avatar-group 9.1.4 → 9.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.2.1
+
+### Patch Changes
+
+- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+
+## 9.2.0
+
+### Minor Changes
+
+- [`3f8f08a1888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f8f08a1888) - Updating Avatar-group component to position the tooltip either to top or bottom based on configuration.
+
 ## 9.1.4
 
 ### Patch Changes

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

@@ -94,7 +94,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       testId = _ref.testId,
       _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'avatar group' : _ref$label;
+      label = _ref$label === void 0 ? 'avatar group' : _ref$label,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -197,7 +199,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return !isTooltipDisabled && !avatarData.isDisabled ? (0, _react2.jsx)(_tooltip.default, {
       key: (0, _utils.composeUniqueKey)(avatarData, idx),
       content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx)
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

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

@@ -57,8 +57,9 @@ var buttonStyles = (0, _react2.css)({
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     color: "var(--ds-text, ".concat(_colors.N500, ")"),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")"),
       color: "var(--ds-text, ".concat(_colors.N500, ")")

package/dist/cjs/version.json

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

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

@@ -59,7 +59,8 @@ const AvatarGroup = ({
   showMoreButtonProps = {},
   size = 'medium',
   testId,
-  label = 'avatar group'
+  label = 'avatar group',
+  tooltipPosition = 'bottom'
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const onClose = useCallback(() => setIsOpen(false), []);
@@ -144,7 +145,8 @@ const AvatarGroup = ({
     return !isTooltipDisabled && !avatarData.isDisabled ? jsx(Tooltip, {
       key: composeUniqueKey(avatarData, idx),
       content: avatarData.name,
-      testId: testId && `${testId}--tooltip-${idx}`
+      testId: testId && `${testId}--tooltip-${idx}`,
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

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

@@ -35,8 +35,9 @@ const buttonStyles = css({
   '&&': {
     backgroundColor: `var(--ds-background-neutral, ${N20})`,
     color: `var(--ds-text, ${N500})`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: `var(--ds-background-neutral-hovered, ${N30})`,
       color: `var(--ds-text, ${N500})`

package/dist/es2019/version.json

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

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

@@ -72,7 +72,9 @@ var AvatarGroup = function AvatarGroup(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       testId = _ref.testId,
       _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'avatar group' : _ref$label;
+      label = _ref$label === void 0 ? 'avatar group' : _ref$label,
+      _ref$tooltipPosition = _ref.tooltipPosition,
+      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -175,7 +177,8 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return !isTooltipDisabled && !avatarData.isDisabled ? jsx(Tooltip, {
       key: composeUniqueKey(avatarData, idx),
       content: avatarData.name,
-      testId: testId && "".concat(testId, "--tooltip-").concat(idx)
+      testId: testId && "".concat(testId, "--tooltip-").concat(idx),
+      position: tooltipPosition
     }, finalAvatar) : finalAvatar;
   }), renderMoreDropdown(+maxAvatar, total));
 };

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

@@ -37,8 +37,9 @@ var buttonStyles = css({
   '&&': {
     backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
     color: "var(--ds-text, ".concat(N500, ")"),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     '&:hover': {
       backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30, ")"),
       color: "var(--ds-text, ".concat(N500, ")")

package/dist/esm/version.json

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

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

@@ -2,6 +2,7 @@
 import { ElementType, MouseEventHandler } from 'react';
 import { jsx } from '@emotion/react';
 import { SizeType } from '@atlaskit/avatar';
+import { PositionType } from '@atlaskit/tooltip';
 import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupProps {
     /**
@@ -74,6 +75,12 @@ export interface AvatarGroupProps {
      * Custom overrides for the composed components.
      */
     overrides?: AvatarGroupOverrides;
+    /**
+     *
+     * Where the tooltip should appear relative to its target.
+     * Defaults to tooltip position "bottom".
+     */
+    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
     /**
      * Disables tooltips
      */
@@ -99,5 +106,5 @@ export interface AvatarGroupProps {
  * - [Code](https://atlassian.design/components/avatar-group/code)
  * - [Usage](https://atlassian.design/components/avatar-group/usage)
  */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => jsx.JSX.Element;
+declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, tooltipPosition, }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.1.4",
+  "version": "9.2.1",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/avatar-group"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -19,6 +20,7 @@ import type { AvatarPropTypes } from '@atlaskit/avatar';
 import { ElementType } from 'react';
 import { jsx } from '@emotion/react';
 import { MouseEventHandler } from 'react';
+import { PositionType } from '@atlaskit/tooltip';
 import type { ReactNode } from 'react';
 import { SizeType } from '@atlaskit/avatar';
 
@@ -38,6 +40,7 @@ const AvatarGroup: ({
   size,
   testId,
   label,
+  tooltipPosition,
 }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;
 
@@ -93,6 +96,7 @@ export interface AvatarGroupProps {
   showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
   size?: SizeType;
   testId?: string;
+  tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
 }
 
 // @public (undocumented)
@@ -113,3 +117,15 @@ type onAvatarClickHandler = (
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->