@atlaskit/avatar 22.0.0 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @atlaskit/avatar
 
+## 24.0.0
+
+### Major Changes
+
+- [#119746](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119746)
+  [`42617a5e15cd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42617a5e15cd2) -
+  Removes the `children` prop from `AvatarItem`, along with the `CustomAvatarItemProps` type.
+  Limiting the amount of customization that can be applied. This change is in preparation for the
+  migration from `@emotion/react` to Compiled CSS-in-JS.
+
+## 23.0.0
+
+### Major Changes
+
+- [#117222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117222)
+  [`a80e8994489e7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a80e8994489e7) -
+  Removes the option to provide a function to the `children` prop to create a custom avatar. A new
+  `AvatarContent` sub-component is now available, which similarly enables custom content to be
+  provided for the avatar. This change is in preparation for the migration from `@emotion/react` to
+  Compiled CSS-in-JS.
+
+  Example usage before and after:
+
+  ### Before
+
+  ```jsx
+  import Avatar from '@atlaskit/avatar';
+
+  <Avatar>
+  	{(props) => (
+  		<span {...props}>
+  			Custom content
+  		</span>
+  	)}
+  <Avatar>
+  ```
+
+  ### After
+
+  ```jsx
+  import Avatar, { AvatarContent } from '@atlaskit/avatar';
+
+  <Avatar>
+  	<AvatarContent>
+  		Custom content
+  	</AvatarContent>
+  <Avatar>
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.0.0
 
 ### Major Changes

package/dist/cjs/avatar-content.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarContent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _context = require("./context");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+
+var boxShadowCssVar = '--avatar-box-shadow';
+var bgColorCssVar = '--avatar-bg-color';
+var styles = {
+  root: (0, _react2.css)({
+    display: 'flex',
+    boxSizing: 'content-box',
+    position: 'static',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    backgroundColor: "var(".concat(bgColorCssVar, ")"),
+    border: 'none',
+    boxShadow: "var(".concat(boxShadowCssVar, ")"),
+    cursor: 'inherit',
+    marginBlockEnd: "var(--ds-space-025, 2px)",
+    marginBlockStart: "var(--ds-space-025, 2px)",
+    marginInlineEnd: "var(--ds-space-025, 2px)",
+    marginInlineStart: "var(--ds-space-025, 2px)",
+    outline: 'none',
+    overflow: 'hidden',
+    paddingBlockEnd: "var(--ds-space-0, 0px)",
+    paddingBlockStart: "var(--ds-space-0, 0px)",
+    paddingInlineEnd: "var(--ds-space-0, 0px)",
+    paddingInlineStart: "var(--ds-space-0, 0px)",
+    transform: 'translateZ(0)',
+    transition: 'transform 200ms, opacity 200ms',
+    '&::after': {
+      width: '100%',
+      position: 'absolute',
+      inset: "var(--ds-space-0, 0px)",
+      backgroundColor: 'transparent',
+      content: "' '",
+      opacity: 0,
+      pointerEvents: 'none',
+      transition: 'opacity 200ms'
+    },
+    '&:focus-visible': {
+      boxShadow: 'none',
+      outlineColor: "var(--ds-border-focused, #2684FF)",
+      outlineOffset: "var(--ds-border-width-outline, 2px)",
+      outlineStyle: 'solid',
+      outlineWidth: "var(--ds-border-width-outline, 2px)"
+    },
+    '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
+      '&:focus-visible': {
+        outlineWidth: "var(--ds-border-width, 1px)"
+      }
+    }
+  }),
+  circle: (0, _react2.css)({
+    borderRadius: "var(--ds-border-radius-circle, 50%)",
+    '&::after': {
+      borderRadius: "var(--ds-border-radius-circle, 50%)"
+    }
+  }),
+  positionRelative: (0, _react2.css)({
+    position: 'relative'
+  }),
+  interactive: (0, _react2.css)({
+    cursor: 'pointer',
+    '&:hover': {
+      '&::after': {
+        backgroundColor: "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"),
+        opacity: 1
+      }
+    },
+    '&:active': {
+      transform: "scale(0.9)",
+      '&::after': {
+        backgroundColor: "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"),
+        opacity: 1
+      }
+    },
+    '@media screen and (forced-colors: active)': {
+      '&:focus-visible': {
+        outlineWidth: 1
+      }
+    }
+  }),
+  disabled: (0, _react2.css)({
+    cursor: 'not-allowed',
+    '&::after': {
+      backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
+      opacity: "var(--ds-opacity-disabled, 0.7)"
+    }
+  })
+};
+var widthHeightMap = {
+  xsmall: (0, _react2.css)({
+    width: '16px',
+    height: '16px'
+  }),
+  small: (0, _react2.css)({
+    width: '24px',
+    height: '24px'
+  }),
+  medium: (0, _react2.css)({
+    width: '32px',
+    height: '32px'
+  }),
+  large: (0, _react2.css)({
+    width: '40px',
+    height: '40px'
+  }),
+  xlarge: (0, _react2.css)({
+    width: '96px',
+    height: '96px'
+  }),
+  xxlarge: (0, _react2.css)({
+    width: '128px',
+    height: '128px'
+  })
+};
+var borderRadiusMap = {
+  xsmall: (0, _react2.css)({
+    borderRadius: '2px',
+    '&::after': {
+      borderRadius: '2px'
+    }
+  }),
+  small: (0, _react2.css)({
+    borderRadius: '2px',
+    '&::after': {
+      borderRadius: '2px'
+    }
+  }),
+  medium: (0, _react2.css)({
+    borderRadius: '3px',
+    '&::after': {
+      borderRadius: '3px'
+    }
+  }),
+  large: (0, _react2.css)({
+    borderRadius: '3px',
+    '&::after': {
+      borderRadius: '3px'
+    }
+  }),
+  xlarge: (0, _react2.css)({
+    borderRadius: '6px',
+    '&::after': {
+      borderRadius: '6px'
+    }
+  }),
+  xxlarge: (0, _react2.css)({
+    borderRadius: '12px',
+    '&::after': {
+      borderRadius: '12px'
+    }
+  })
+};
+/**
+ * __Avatar content__
+ *
+ * Avatar content renders the avatar content. It can be composed with the Avatar component
+ * to create a custom avatar.
+ *
+ * - [Examples](https://atlassian.design/components/avatar/examples)
+ * - [Code](https://atlassian.design/components/avatar/code)
+ * - [Usage](https://atlassian.design/components/avatar/usage)
+ */
+var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children;
+  (0, _context.useEnsureIsInsideAvatar)();
+  var _useAvatarContent = (0, _context.useAvatarContent)(),
+    Container = _useAvatarContent.as,
+    appearance = _useAvatarContent.appearance,
+    avatarImage = _useAvatarContent.avatarImage,
+    _useAvatarContent$bor = _useAvatarContent.borderColor,
+    borderColor = _useAvatarContent$bor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _useAvatarContent$bor,
+    href = _useAvatarContent.href,
+    isDisabled = _useAvatarContent.isDisabled,
+    label = _useAvatarContent.label,
+    onClick = _useAvatarContent.onClick,
+    contextRef = _useAvatarContent.ref,
+    tabIndex = _useAvatarContent.tabIndex,
+    target = _useAvatarContent.target,
+    testId = _useAvatarContent.testId,
+    size = _useAvatarContent.size,
+    stackIndex = _useAvatarContent.stackIndex;
+  var isInteractive = Boolean(onClick || href || isDisabled);
+  return (0, _react2.jsx)(Container, (0, _extends2.default)({
+    css: [styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && styles.interactive, isDisabled && styles.disabled],
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
+    ref: ref || contextRef,
+    "aria-label": isInteractive ? label : undefined,
+    onClick: onClick,
+    tabIndex: tabIndex,
+    "data-testid": testId,
+    disabled: isDisabled,
+    type: Container === 'button' ? 'button' : undefined
+  }, href && {
+    href: href,
+    target: target,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined
+  }), children || avatarImage);
+});

package/dist/cjs/avatar-item.js

@@ -5,55 +5,92 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
-var _constants2 = require("./constants");
 var _utilities = require("./utilities");
-var _templateObject;
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var avatarItemStyles = (0, _react2.css)({
-  minWidth: 0,
-  maxWidth: '100%',
-  flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '1.4',
-  paddingInlineStart: "var(--ds-space-100, 8px)"
-});
-var secondaryTextOldStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, #626F86)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '0.85em'
-});
-var baseTextStyles = (0, _react2.css)({
-  display: 'block',
-  color: "var(--ds-text, #172B4D)"
-});
-var truncationStyles = (0, _react2.css)({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var getStyles = function getStyles(css, _ref) {
-  var backgroundColor = _ref.backgroundColor,
-    isInteractive = _ref.isInteractive,
-    isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\talign-items: center;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", "px;\n\t\tborder: ", "px solid transparent;\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tfont-size: inherit;\n\t\tfont-style: normal;\n\t\tfont-weight: ", ";\n\t\tline-height: 1;\n\t\toutline: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\t\ttext-align: left;\n\t\ttext-decoration: none;\n\t\twidth: 100%;\n\n\t\t", "\n\n\t\t", "\n\t"])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-font-weight-regular, 400)", "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
-  );
-};
 
+var bgColorCssVar = '--avatar-item-bg-color';
+var styles = {
+  root: (0, _react2.css)({
+    display: 'flex',
+    boxSizing: 'border-box',
+    width: '100%',
+    alignItems: 'center',
+    backgroundColor: "var(".concat(bgColorCssVar, ")"),
+    borderColor: 'transparent',
+    borderRadius: '3px',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width-outline, 2px)",
+    color: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: 'inherit',
+    fontStyle: 'normal',
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1',
+    marginBlockEnd: "var(--ds-space-0, 0px)",
+    marginBlockStart: "var(--ds-space-0, 0px)",
+    marginInlineEnd: "var(--ds-space-0, 0px)",
+    marginInlineStart: "var(--ds-space-0, 0px)",
+    outline: 'none',
+    paddingBlockEnd: "var(--ds-space-050, 4px)",
+    paddingBlockStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    textAlign: 'left',
+    textDecoration: 'none'
+  }),
+  rootDisabled: (0, _react2.css)({
+    cursor: 'not-allowed',
+    opacity: "var(--ds-opacity-disabled, 0.5)",
+    pointerEvents: 'none'
+  }),
+  rootInteractive: (0, _react2.css)({
+    '&:hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
+      cursor: 'pointer',
+      textDecoration: 'none'
+    },
+    '&:focus': {
+      borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+      outline: 'none'
+    },
+    '&:active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
+    }
+  }),
+  avatarItem: (0, _react2.css)({
+    minWidth: 0,
+    maxWidth: '100%',
+    flex: '1 1 100%',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.4',
+    paddingInlineStart: "var(--ds-space-100, 8px)"
+  }),
+  baseText: (0, _react2.css)({
+    display: 'block',
+    color: "var(--ds-text, #172B4D)"
+  }),
+  truncation: (0, _react2.css)({
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }),
+  secondaryTextLegacy: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, #626F86)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '0.85em'
+  })
+};
 /**
  * __Avatar item__
  *
@@ -62,67 +99,47 @@ var getStyles = function getStyles(css, _ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
  */
-var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var avatar = _ref2.avatar,
-    _ref2$backgroundColor = _ref2.backgroundColor,
-    backgroundColor = _ref2$backgroundColor === void 0 ? 'transparent' : _ref2$backgroundColor,
-    children = _ref2.children,
-    isTruncationDisabled = _ref2.isTruncationDisabled,
-    href = _ref2.href,
-    isDisabled = _ref2.isDisabled,
-    onClick = _ref2.onClick,
-    primaryText = _ref2.primaryText,
-    secondaryText = _ref2.secondaryText,
-    target = _ref2.target,
-    testId = _ref2.testId,
-    label = _ref2.label;
-  var getTestId = function getTestId(testId, children) {
-    return !children ? {
-      'data-testid': "".concat(testId, "--itemInner")
-    } : {
-      testId: "".concat(testId, "--itemInner")
-    };
-  };
-  var componentProps = function componentProps() {
-    if (isDisabled) {
-      return {
-        disabled: true
-      };
-    }
-
-    // return only relevant props for either anchor or button elements
-    return _objectSpread(_objectSpread({}, href && (0, _utilities.getLinkProps)(href, target)), onClick && !href ? (0, _utilities.getButtonProps)(onClick) : {
-      onClick: onClick
-    });
-  };
-  return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
-    var css = _ref3.css;
-    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      ref: ref,
-      className: getStyles(css, {
-        backgroundColor: backgroundColor,
-        isInteractive: Boolean(onClick || href),
-        isDisabled: isDisabled
-      })
-    }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
-      'aria-label': label
-    }), {}, {
-      children: (0, _react2.jsx)(_react.Fragment, null, avatar, (0, _react2.jsx)("div", {
-        css: avatarItemStyles
-      }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
-        maxLines: isTruncationDisabled ? undefined : 1
-      }, primaryText), (0, _react2.jsx)(_primitives.Text, {
-        color: "color.text.subtlest",
-        maxLines: isTruncationDisabled ? undefined : 1,
-        size: "UNSAFE_small"
-      }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
-        css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
-      }, primaryText), (0, _react2.jsx)("span", {
-        css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
-      }, secondaryText))))
-    });
-    return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
-  });
+var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var avatar = _ref.avatar,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
+    isTruncationDisabled = _ref.isTruncationDisabled,
+    href = _ref.href,
+    isDisabled = _ref.isDisabled,
+    onClick = _ref.onClick,
+    primaryText = _ref.primaryText,
+    secondaryText = _ref.secondaryText,
+    target = _ref.target,
+    testId = _ref.testId,
+    label = _ref.label;
+  var Container = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
+  var isInteractive = Boolean(onClick || href);
+  return (0, _react2.jsx)(Container, (0, _extends2.default)({
+    css: [styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled],
+    style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),
+    ref: ref,
+    "aria-label": isInteractive ? label : undefined,
+    onClick: onClick,
+    disabled: isDisabled,
+    "data-testid": testId ? "".concat(testId, "--itemInner") : undefined,
+    type: Container === 'button' ? 'button' : undefined
+  }, href && {
+    href: href,
+    target: target,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined
+  }), avatar, (0, _react2.jsx)("div", {
+    css: styles.avatarItem
+  }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
+    maxLines: isTruncationDisabled ? undefined : 1
+  }, primaryText), (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    maxLines: isTruncationDisabled ? undefined : 1,
+    size: "UNSAFE_small"
+  }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
+    css: [styles.baseText, !isTruncationDisabled && styles.truncation]
+  }, primaryText), (0, _react2.jsx)("span", {
+    css: [styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation]
+  }, secondaryText))));
 });
 AvatarItem.displayName = 'AvatarItem';
 var _default = exports.default = AvatarItem;