@atlaskit/avatar 25.2.1 → 25.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/avatar-content.js +1 -1
  3. package/dist/cjs/avatar.js +6 -3
  4. package/dist/cjs/internal/avatar-image.compiled.css +1 -2
  5. package/dist/cjs/internal/avatar-image.js +6 -9
  6. package/dist/es2019/avatar-content.js +1 -2
  7. package/dist/es2019/avatar.js +6 -3
  8. package/dist/es2019/internal/avatar-image.compiled.css +1 -2
  9. package/dist/es2019/internal/avatar-image.js +6 -9
  10. package/dist/esm/avatar-content.js +1 -1
  11. package/dist/esm/avatar.js +6 -3
  12. package/dist/esm/internal/avatar-image.compiled.css +1 -2
  13. package/dist/esm/internal/avatar-image.js +6 -9
  14. package/dist/types/avatar.d.ts +9 -0
  15. package/dist/types-ts4.5/avatar.d.ts +9 -0
  16. package/package.json +3 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`42beb385671cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42beb385671cf) -
8
+ [ux] Add a new prop to set the container element for avatar content"
9
+
10
+ ## 25.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`e314c4cb133f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e314c4cb133f7) -
15
+ [ux] Updates avatar and avatar group styles to reflect our new visual design language. These
16
+ changes were previously behind a feature flag and are now fully rolled out.
17
+
3
18
  ## 25.2.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/avatar-content.js CHANGED
@@ -63,7 +63,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
63
63
  appearance = _useAvatarContent.appearance,
64
64
  avatarImage = _useAvatarContent.avatarImage,
65
65
  _useAvatarContent$bor = _useAvatarContent.borderColor,
66
- borderColor = _useAvatarContent$bor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)" : _useAvatarContent$bor,
66
+ borderColor = _useAvatarContent$bor === void 0 ? "var(--ds-surface, #FFFFFF)" : _useAvatarContent$bor,
67
67
  href = _useAvatarContent.href,
68
68
  isDisabled = _useAvatarContent.isDisabled,
69
69
  label = _useAvatarContent.label,
package/dist/cjs/avatar.js CHANGED
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
24
24
  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; }
25
25
  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; }
26
26
  var packageName = "@atlaskit/avatar";
27
- var packageVersion = "25.2.0";
27
+ var packageVersion = "0.0.0-development";
28
28
  var containerStyles = null;
29
29
 
30
30
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -58,6 +58,8 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
58
58
  testId = _ref.testId,
59
59
  _ref$as = _ref.as,
60
60
  AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
61
+ contentAs = _ref.contentAs,
62
+ containerRole = _ref.containerRole,
61
63
  _ref$isDecorative = _ref.isDecorative,
62
64
  isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
63
65
  imgLoading = _ref.imgLoading;
@@ -115,11 +117,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
115
117
  var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
116
118
  var isInteractive = onClick || href || isDisabled;
117
119
  var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
120
+ var avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
118
121
  return /*#__PURE__*/React.createElement(_context.EnsureIsInsideAvatarContext.Provider, {
119
122
  value: true
120
123
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
121
124
  "data-testid": testId,
122
- role: containerShouldBeImage ? 'img' : undefined,
125
+ role: avatarContainerRole,
123
126
  "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
124
127
  style: {
125
128
  zIndex: stackIndex
@@ -127,7 +130,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
127
130
  className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
128
131
  }, /*#__PURE__*/React.createElement(_context.AvatarContentContext.Provider, {
129
132
  value: {
130
- as: (0, _utilities.getCustomElement)(isDisabled, href, onClick),
133
+ as: contentAs || (0, _utilities.getCustomElement)(isDisabled, href, onClick),
131
134
  appearance: appearance,
132
135
  borderColor: borderColor,
133
136
  href: href,
package/dist/cjs/internal/avatar-image.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
2
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
4
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
6
6
  ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
7
7
  ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
15
15
  ._1o9zkb7n{flex-shrink:1}
16
16
  ._4t3i1osq{height:100%}
17
17
  ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
18
- ._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
19
18
  ._i0dl1osq{flex-basis:100%}
20
19
  ._w8l516xz svg{width:6pc}
21
20
  ._w8l51qr7 svg{width:8pc}
package/dist/cjs/internal/avatar-image.js CHANGED
@@ -14,20 +14,17 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var _person = _interopRequireDefault(require("@atlaskit/icon/core/migration/person"));
16
16
  var _releaseShip = _interopRequireDefault(require("@atlaskit/icon/core/migration/release--ship"));
17
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
17
  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); }
19
18
  var styles = {
20
19
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
21
- icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
22
- iconBg: "_bfhkr4aa",
23
- iconBGVisualRefresh: "_bfhk1v33",
20
+ icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
24
21
  circle: "_2rko1rr0"
25
22
  };
26
23
  var borderRadiusMap = {
27
24
  xsmall: "_2rkolb4i",
28
25
  small: "_2rkolb4i",
29
- medium: "_2rkofajl",
30
- large: "_2rkofajl",
26
+ medium: "_2rko12b0",
27
+ large: "_2rko12b0",
31
28
  xlarge: "_2rko1qi0",
32
29
  xxlarge: "_2rkopb1k"
33
30
  };
@@ -64,16 +61,16 @@ var AvatarImage = function AvatarImage(_ref) {
64
61
  }, [src]);
65
62
  if (!src || hasImageErrored) {
66
63
  return /*#__PURE__*/React.createElement("span", {
67
- className: (0, _runtime.ax)([styles.icon, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
64
+ className: (0, _runtime.ax)([styles.icon, nestedSvgStylesMap[size]])
68
65
  }, appearance === 'circle' ? /*#__PURE__*/React.createElement(_person.default, {
69
66
  label: alt,
70
- color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
67
+ color: "var(--ds-icon-subtle, #626F86)",
71
68
  testId: testId && "".concat(testId, "--person"),
72
69
  spacing: "spacious",
73
70
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
74
71
  }) : /*#__PURE__*/React.createElement(_releaseShip.default, {
75
72
  label: alt,
76
- color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
73
+ color: "var(--ds-icon-subtle, #626F86)",
77
74
  testId: testId && "".concat(testId, "--ship"),
78
75
  spacing: "spacious",
79
76
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
package/dist/es2019/avatar-content.js CHANGED
@@ -53,8 +53,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
53
53
  as: Container,
54
54
  appearance,
55
55
  avatarImage,
56
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
57
- borderColor = fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)",
56
+ borderColor = "var(--ds-surface, #FFFFFF)",
58
57
  href,
59
58
  isDisabled,
60
59
  label,
package/dist/es2019/avatar.js CHANGED
@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
12
12
  import { StatusWrapper } from './status';
13
13
  import { getCustomElement } from './utilities';
14
14
  const packageName = "@atlaskit/avatar";
15
- const packageVersion = "25.2.0";
15
+ const packageVersion = "0.0.0-development";
16
16
  const containerStyles = null;
17
17
 
18
18
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -44,6 +44,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
44
44
  target,
45
45
  testId,
46
46
  as: AvatarContainer = 'div',
47
+ contentAs,
48
+ containerRole,
47
49
  isDecorative = false,
48
50
  imgLoading
49
51
  }, ref) => {
@@ -103,11 +105,12 @@ const Avatar = /*#__PURE__*/forwardRef(({
103
105
  const defaultLabel = [name, isStatus && !customStatusNode && `(${status})`, isPresence && !customPresenceNode && `(${presence})`].filter(Boolean).join(' ');
104
106
  const isInteractive = onClick || href || isDisabled;
105
107
  const containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
108
+ const avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
106
109
  return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
107
110
  value: true
108
111
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
109
112
  "data-testid": testId,
110
- role: containerShouldBeImage ? 'img' : undefined,
113
+ role: avatarContainerRole,
111
114
  "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
112
115
  style: {
113
116
  zIndex: stackIndex
@@ -115,7 +118,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
115
118
  className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
116
119
  }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
117
120
  value: {
118
- as: getCustomElement(isDisabled, href, onClick),
121
+ as: contentAs || getCustomElement(isDisabled, href, onClick),
119
122
  appearance,
120
123
  borderColor,
121
124
  href,
package/dist/es2019/internal/avatar-image.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
2
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
4
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
6
6
  ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
7
7
  ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
15
15
  ._1o9zkb7n{flex-shrink:1}
16
16
  ._4t3i1osq{height:100%}
17
17
  ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
18
- ._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
19
18
  ._i0dl1osq{flex-basis:100%}
20
19
  ._w8l516xz svg{width:6pc}
21
20
  ._w8l51qr7 svg{width:8pc}
package/dist/es2019/internal/avatar-image.js CHANGED
@@ -5,19 +5,16 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useEffect, useState } from 'react';
6
6
  import PersonIcon from '@atlaskit/icon/core/migration/person';
7
7
  import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
8
  const styles = {
10
9
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
11
- icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
12
- iconBg: "_bfhkr4aa",
13
- iconBGVisualRefresh: "_bfhk1v33",
10
+ icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
14
11
  circle: "_2rko1rr0"
15
12
  };
16
13
  const borderRadiusMap = {
17
14
  xsmall: "_2rkolb4i",
18
15
  small: "_2rkolb4i",
19
- medium: "_2rkofajl",
20
- large: "_2rkofajl",
16
+ medium: "_2rko12b0",
17
+ large: "_2rko12b0",
21
18
  xlarge: "_2rko1qi0",
22
19
  xxlarge: "_2rkopb1k"
23
20
  };
@@ -51,16 +48,16 @@ const AvatarImage = ({
51
48
  }, [src]);
52
49
  if (!src || hasImageErrored) {
53
50
  return /*#__PURE__*/React.createElement("span", {
54
- className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
51
+ className: ax([styles.icon, nestedSvgStylesMap[size]])
55
52
  }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
56
53
  label: alt,
57
- color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
54
+ color: "var(--ds-icon-subtle, #626F86)",
58
55
  testId: testId && `${testId}--person`,
59
56
  spacing: "spacious",
60
57
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
61
58
  }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
62
59
  label: alt,
63
- color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
60
+ color: "var(--ds-icon-subtle, #626F86)",
64
61
  testId: testId && `${testId}--ship`,
65
62
  spacing: "spacious",
66
63
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
package/dist/esm/avatar-content.js CHANGED
@@ -54,7 +54,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
54
54
  appearance = _useAvatarContent.appearance,
55
55
  avatarImage = _useAvatarContent.avatarImage,
56
56
  _useAvatarContent$bor = _useAvatarContent.borderColor,
57
- borderColor = _useAvatarContent$bor === void 0 ? fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)" : _useAvatarContent$bor,
57
+ borderColor = _useAvatarContent$bor === void 0 ? "var(--ds-surface, #FFFFFF)" : _useAvatarContent$bor,
58
58
  href = _useAvatarContent.href,
59
59
  isDisabled = _useAvatarContent.isDisabled,
60
60
  label = _useAvatarContent.label,
package/dist/esm/avatar.js CHANGED
@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
15
15
  import { StatusWrapper } from './status';
16
16
  import { getCustomElement } from './utilities';
17
17
  var packageName = "@atlaskit/avatar";
18
- var packageVersion = "25.2.0";
18
+ var packageVersion = "0.0.0-development";
19
19
  var containerStyles = null;
20
20
 
21
21
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -49,6 +49,8 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
49
49
  testId = _ref.testId,
50
50
  _ref$as = _ref.as,
51
51
  AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
52
+ contentAs = _ref.contentAs,
53
+ containerRole = _ref.containerRole,
52
54
  _ref$isDecorative = _ref.isDecorative,
53
55
  isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative,
54
56
  imgLoading = _ref.imgLoading;
@@ -106,11 +108,12 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
106
108
  var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
107
109
  var isInteractive = onClick || href || isDisabled;
108
110
  var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
111
+ var avatarContainerRole = containerRole || (containerShouldBeImage ? 'img' : undefined);
109
112
  return /*#__PURE__*/React.createElement(EnsureIsInsideAvatarContext.Provider, {
110
113
  value: true
111
114
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
112
115
  "data-testid": testId,
113
- role: containerShouldBeImage ? 'img' : undefined,
116
+ role: avatarContainerRole,
114
117
  "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
115
118
  style: {
116
119
  zIndex: stackIndex
@@ -118,7 +121,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
118
121
  className: ax(["_12ji1r31 _1qu2glyw _12y3idpf _1e0c1o8l _kqswh2mm"])
119
122
  }, /*#__PURE__*/React.createElement(AvatarContentContext.Provider, {
120
123
  value: {
121
- as: getCustomElement(isDisabled, href, onClick),
124
+ as: contentAs || getCustomElement(isDisabled, href, onClick),
122
125
  appearance: appearance,
123
126
  borderColor: borderColor,
124
127
  href: href,
package/dist/esm/internal/avatar-image.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
2
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
3
4
  ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
4
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
6
6
  ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
7
7
  ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
15
15
  ._1o9zkb7n{flex-shrink:1}
16
16
  ._4t3i1osq{height:100%}
17
17
  ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
18
- ._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
19
18
  ._i0dl1osq{flex-basis:100%}
20
19
  ._w8l516xz svg{width:6pc}
21
20
  ._w8l51qr7 svg{width:8pc}
package/dist/esm/internal/avatar-image.js CHANGED
@@ -6,19 +6,16 @@ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useEffect, useState } from 'react';
7
7
  import PersonIcon from '@atlaskit/icon/core/migration/person';
8
8
  import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
9
  var styles = {
11
10
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
12
- icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
13
- iconBg: "_bfhkr4aa",
14
- iconBGVisualRefresh: "_bfhk1v33",
11
+ icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
15
12
  circle: "_2rko1rr0"
16
13
  };
17
14
  var borderRadiusMap = {
18
15
  xsmall: "_2rkolb4i",
19
16
  small: "_2rkolb4i",
20
- medium: "_2rkofajl",
21
- large: "_2rkofajl",
17
+ medium: "_2rko12b0",
18
+ large: "_2rko12b0",
22
19
  xlarge: "_2rko1qi0",
23
20
  xxlarge: "_2rkopb1k"
24
21
  };
@@ -55,16 +52,16 @@ var AvatarImage = function AvatarImage(_ref) {
55
52
  }, [src]);
56
53
  if (!src || hasImageErrored) {
57
54
  return /*#__PURE__*/React.createElement("span", {
58
- className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
55
+ className: ax([styles.icon, nestedSvgStylesMap[size]])
59
56
  }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
60
57
  label: alt,
61
- color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
58
+ color: "var(--ds-icon-subtle, #626F86)",
62
59
  testId: testId && "".concat(testId, "--person"),
63
60
  spacing: "spacious",
64
61
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
65
62
  }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
66
63
  label: alt,
67
- color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
64
+ color: "var(--ds-icon-subtle, #626F86)",
68
65
  testId: testId && "".concat(testId, "--ship"),
69
66
  spacing: "spacious",
70
67
  LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
package/dist/types/avatar.d.ts CHANGED
@@ -90,6 +90,15 @@ export interface AvatarPropTypes {
90
90
  * be used to wrap the element.
91
91
  */
92
92
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
93
+ /**
94
+ * Replace the wrapper of the content element. This accepts the name of a html tag which will
95
+ * be used to wrap the content element.
96
+ */
97
+ contentAs?: 'a' | 'button' | 'span';
98
+ /**
99
+ * Set the role of the container element
100
+ */
101
+ containerRole?: 'presentation' | 'img';
93
102
  /**
94
103
  * whether disable aria-labelledby for avatar img
95
104
  */
package/dist/types-ts4.5/avatar.d.ts CHANGED
@@ -90,6 +90,15 @@ export interface AvatarPropTypes {
90
90
  * be used to wrap the element.
91
91
  */
92
92
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
93
+ /**
94
+ * Replace the wrapper of the content element. This accepts the name of a html tag which will
95
+ * be used to wrap the content element.
96
+ */
97
+ contentAs?: 'a' | 'button' | 'span';
98
+ /**
99
+ * Set the role of the container element
100
+ */
101
+ containerRole?: 'presentation' | 'img';
93
102
  /**
94
103
  * whether disable aria-labelledby for avatar img
95
104
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.2.1",
3
+ "version": "25.3.1",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/css": "^0.14.0",
37
37
  "@atlaskit/ds-lib": "^5.1.0",
38
38
  "@atlaskit/focus-ring": "^3.0.0",
39
- "@atlaskit/icon": "^28.3.0",
39
+ "@atlaskit/icon": "^28.5.0",
40
40
  "@atlaskit/platform-feature-flags": "^1.1.0",
41
41
  "@atlaskit/primitives": "^14.15.0",
42
42
  "@atlaskit/theme": "^21.0.0",
@@ -51,7 +51,7 @@
51
51
  "@af/accessibility-testing": "workspace:^",
52
52
  "@af/integration-testing": "workspace:^",
53
53
  "@af/visual-regression": "workspace:^",
54
- "@atlaskit/button": "^23.4.0",
54
+ "@atlaskit/button": "^23.5.0",
55
55
  "@atlaskit/code": "^17.2.0",
56
56
  "@atlaskit/docs": "^11.1.0",
57
57
  "@atlaskit/form": "^14.2.0",
@@ -98,9 +98,6 @@
98
98
  "platform.design-system-team.avatar-item-font-size_830x6": {
99
99
  "type": "boolean"
100
100
  },
101
- "platform-component-visual-refresh": {
102
- "type": "boolean"
103
- },
104
101
  "platform-visual-refresh-icons": {
105
102
  "type": "boolean"
106
103
  },