@atlaskit/avatar 25.8.4 → 25.9.0

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 (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/avatar-content.compiled.css +3 -8
  3. package/dist/cjs/avatar-content.js +5 -11
  4. package/dist/cjs/avatar.js +1 -1
  5. package/dist/cjs/skeleton.compiled.css +1 -5
  6. package/dist/cjs/skeleton.js +1 -10
  7. package/dist/es2019/avatar-content.compiled.css +3 -8
  8. package/dist/es2019/avatar-content.js +5 -11
  9. package/dist/es2019/avatar.js +1 -1
  10. package/dist/es2019/skeleton.compiled.css +1 -5
  11. package/dist/es2019/skeleton.js +1 -10
  12. package/dist/esm/avatar-content.compiled.css +3 -8
  13. package/dist/esm/avatar-content.js +5 -11
  14. package/dist/esm/avatar.js +1 -1
  15. package/dist/esm/skeleton.compiled.css +1 -5
  16. package/dist/esm/skeleton.js +1 -10
  17. package/package.json +4 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`a3d111d3b5a28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3d111d3b5a28) -
8
+ [ux] Cleans up platform_dst_avatar_tile and platform_dst_avatar_tile_stage2 feature gates as they
9
+ are fully rolled out now.
10
+
11
+ ### Patch Changes
12
+
13
+ - [`0511c5b5930bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0511c5b5930bb) -
14
+ Adjust the hexagonal appearance Avatar's width and height to be aligned with other Avatars behind
15
+ fg platform_dst_hexagon_avatar_unified_size
16
+
3
17
  ## 25.8.4
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/avatar-content.compiled.css CHANGED
@@ -1,27 +1,22 @@
1
1
 
2
- ._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
3
- ._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
5
3
  ._14mjidpf:after{border-radius:0}
6
- ._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
8
4
  ._19itglyw{border:none}
9
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
10
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
11
5
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
12
6
  ._2rkoidpf{border-radius:0}
13
7
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
14
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
15
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
16
8
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
17
9
  ._qc5o1p41:after{transition:opacity .2s}
18
10
  ._v564ieh6{transition:transform .2s,opacity .2s}
19
11
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
20
12
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
13
+ ._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
21
14
  ._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
22
15
  ._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
23
16
  ._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
24
17
  ._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
18
+ ._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
19
+ ._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
25
20
  ._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
26
21
  ._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
27
22
  ._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
package/dist/cjs/avatar-content.js CHANGED
@@ -28,7 +28,9 @@ var styles = {
28
28
  var unboundStyles = {
29
29
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
30
30
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
31
+ hexagonFocusContainerMarginFg: "_195g1ksc",
31
32
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
33
+ hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
32
34
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
33
35
  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
34
36
  };
@@ -48,14 +50,6 @@ var marginAdjustmentMap = {
48
50
  xlarge: "_195g8ocb",
49
51
  xxlarge: "_195g1ukp"
50
52
  };
51
- var borderRadiusMap = {
52
- xsmall: "_2rkolb4i _14mjlb4i",
53
- small: "_2rkolb4i _14mjlb4i",
54
- medium: "_2rko12b0 _14mj12b0",
55
- large: "_2rko12b0 _14mj12b0",
56
- xlarge: "_2rko1qi0 _14mj1qi0",
57
- xxlarge: "_2rkopb1k _14mjpb1k"
58
- };
59
53
  /**
60
54
  * __Avatar content__
61
55
  *
@@ -106,7 +100,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
106
100
  target: target,
107
101
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
108
102
  }, {
109
- className: (0, _runtime.ax)([unboundStyles.root, styles.root, !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile_stage2') && borderRadiusMap[size], appearance === 'square' && ((0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') || (0, _platformFeatureFlags.fg)('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
103
+ className: (0, _runtime.ax)([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
110
104
  }), children || avatarImage);
111
105
  if (appearance !== 'hexagon') {
112
106
  return renderedContent;
@@ -117,9 +111,9 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
117
111
  return /*#__PURE__*/React.createElement("div", {
118
112
  style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
119
113
  "data-testid": testId ? "".concat(testId, "-hexagon-focus-container") : 'hexagon-focus-container',
120
- className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
114
+ className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, !(0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
121
115
  }, /*#__PURE__*/React.createElement("div", {
122
116
  "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
123
- className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer])
117
+ className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
124
118
  }, renderedContent));
125
119
  });
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.8.3";
27
+ var packageVersion = "25.8.4";
28
28
  var containerStyles = null;
29
29
 
30
30
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/cjs/skeleton.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
5
- ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
6
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
3
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
8
4
  ._1dqonqa1{border-style:solid}
9
5
  ._1h6d1j28{border-color:transparent}
10
6
  ._1bsb16xz{width:6pc}
package/dist/cjs/skeleton.js CHANGED
@@ -11,7 +11,6 @@ require("./skeleton.compiled.css");
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
14
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
14
  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); }
16
15
  var bgColorCssVar = '--avatar-skeleton-background-color';
17
16
  var styles = {
@@ -28,14 +27,6 @@ var sizeStyles = {
28
27
  xlarge: "_1bsb16xz _4t3i16xz",
29
28
  xxlarge: "_1bsb1qr7 _4t3i1qr7"
30
29
  };
31
- var borderRadiusMap = {
32
- xsmall: "_2rkolb4i",
33
- small: "_2rkolb4i",
34
- medium: "_2rko12b0",
35
- large: "_2rko12b0",
36
- xlarge: "_2rko1qi0",
37
- xxlarge: "_2rkopb1k"
38
- };
39
30
 
40
31
  /**
41
32
  * __Skeleton__
@@ -52,7 +43,7 @@ var Skeleton = function Skeleton(_ref) {
52
43
  weight = _ref.weight;
53
44
  return /*#__PURE__*/React.createElement("div", {
54
45
  style: (0, _defineProperty2.default)({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
55
- className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') && !(0, _platformFeatureFlags.fg)('platform_dst_avatar_tile_stage2') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && ((0, _platformFeatureFlags.fg)('platform_dst_avatar_tile') || (0, _platformFeatureFlags.fg)('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
46
+ className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
56
47
  });
57
48
  };
58
49
  var _default = exports.default = Skeleton;
package/dist/es2019/avatar-content.compiled.css CHANGED
@@ -1,27 +1,22 @@
1
1
 
2
- ._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
3
- ._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
5
3
  ._14mjidpf:after{border-radius:0}
6
- ._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
8
4
  ._19itglyw{border:none}
9
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
10
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
11
5
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
12
6
  ._2rkoidpf{border-radius:0}
13
7
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
14
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
15
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
16
8
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
17
9
  ._qc5o1p41:after{transition:opacity .2s}
18
10
  ._v564ieh6{transition:transform .2s,opacity .2s}
19
11
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
20
12
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
13
+ ._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
21
14
  ._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
22
15
  ._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
23
16
  ._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
24
17
  ._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
18
+ ._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
19
+ ._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
25
20
  ._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
26
21
  ._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
27
22
  ._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
package/dist/es2019/avatar-content.js CHANGED
@@ -18,7 +18,9 @@ const styles = {
18
18
  const unboundStyles = {
19
19
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
20
20
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
21
+ hexagonFocusContainerMarginFg: "_195g1ksc",
21
22
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
23
+ hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
22
24
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
23
25
  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
24
26
  };
@@ -38,14 +40,6 @@ const marginAdjustmentMap = {
38
40
  xlarge: "_195g8ocb",
39
41
  xxlarge: "_195g1ukp"
40
42
  };
41
- const borderRadiusMap = {
42
- xsmall: "_2rkolb4i _14mjlb4i",
43
- small: "_2rkolb4i _14mjlb4i",
44
- medium: "_2rko12b0 _14mj12b0",
45
- large: "_2rko12b0 _14mj12b0",
46
- xlarge: "_2rko1qi0 _14mj1qi0",
47
- xxlarge: "_2rkopb1k _14mjpb1k"
48
- };
49
43
  /**
50
44
  * __Avatar content__
51
45
  *
@@ -100,7 +94,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
100
94
  target,
101
95
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
102
96
  }, {
103
- className: ax([unboundStyles.root, styles.root, !fg('platform_dst_avatar_tile') && !fg('platform_dst_avatar_tile_stage2') && borderRadiusMap[size], appearance === 'square' && (fg('platform_dst_avatar_tile') || fg('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
97
+ className: ax([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
104
98
  }), children || avatarImage);
105
99
  if (appearance !== 'hexagon') {
106
100
  return renderedContent;
@@ -114,9 +108,9 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
114
108
  [boxShadowCssVar]: `0 0 0 2px ${borderColor}`
115
109
  },
116
110
  "data-testid": testId ? `${testId}-hexagon-focus-container` : 'hexagon-focus-container',
117
- className: ax([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
111
+ className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
118
112
  }, /*#__PURE__*/React.createElement("div", {
119
113
  "data-testid": testId ? `${testId}-hexagon-border-container` : 'hexagon-border-container',
120
- className: ax([unboundStyles.hexagonBorderContainer])
114
+ className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
121
115
  }, renderedContent));
122
116
  });
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.8.3";
15
+ const packageVersion = "25.8.4";
16
16
  const containerStyles = null;
17
17
 
18
18
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/es2019/skeleton.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
5
- ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
6
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
3
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
8
4
  ._1dqonqa1{border-style:solid}
9
5
  ._1h6d1j28{border-color:transparent}
10
6
  ._1bsb16xz{width:6pc}
package/dist/es2019/skeleton.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import "./skeleton.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
5
  const bgColorCssVar = '--avatar-skeleton-background-color';
7
6
  const styles = {
8
7
  root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
@@ -18,14 +17,6 @@ const sizeStyles = {
18
17
  xlarge: "_1bsb16xz _4t3i16xz",
19
18
  xxlarge: "_1bsb1qr7 _4t3i1qr7"
20
19
  };
21
- const borderRadiusMap = {
22
- xsmall: "_2rkolb4i",
23
- small: "_2rkolb4i",
24
- medium: "_2rko12b0",
25
- large: "_2rko12b0",
26
- xlarge: "_2rko1qi0",
27
- xxlarge: "_2rkopb1k"
28
- };
29
20
 
30
21
  /**
31
22
  * __Skeleton__
@@ -44,6 +35,6 @@ const Skeleton = ({
44
35
  style: {
45
36
  [bgColorCssVar]: color !== null && color !== void 0 ? color : 'currentColor'
46
37
  },
47
- className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !fg('platform_dst_avatar_tile') && !fg('platform_dst_avatar_tile_stage2') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && (fg('platform_dst_avatar_tile') || fg('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
38
+ className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
48
39
  });
49
40
  export default Skeleton;
package/dist/esm/avatar-content.compiled.css CHANGED
@@ -1,27 +1,22 @@
1
1
 
2
- ._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
3
- ._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
5
3
  ._14mjidpf:after{border-radius:0}
6
- ._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
8
4
  ._19itglyw{border:none}
9
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
10
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
11
5
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
12
6
  ._2rkoidpf{border-radius:0}
13
7
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
14
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
15
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
16
8
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
17
9
  ._qc5o1p41:after{transition:opacity .2s}
18
10
  ._v564ieh6{transition:transform .2s,opacity .2s}
19
11
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
20
12
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
13
+ ._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
21
14
  ._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
22
15
  ._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
23
16
  ._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
24
17
  ._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
18
+ ._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
19
+ ._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
25
20
  ._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
26
21
  ._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
27
22
  ._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
package/dist/esm/avatar-content.js CHANGED
@@ -19,7 +19,9 @@ var styles = {
19
19
  var unboundStyles = {
20
20
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
21
21
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
22
+ hexagonFocusContainerMarginFg: "_195g1ksc",
22
23
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
24
+ hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
23
25
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
24
26
  interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
25
27
  };
@@ -39,14 +41,6 @@ var marginAdjustmentMap = {
39
41
  xlarge: "_195g8ocb",
40
42
  xxlarge: "_195g1ukp"
41
43
  };
42
- var borderRadiusMap = {
43
- xsmall: "_2rkolb4i _14mjlb4i",
44
- small: "_2rkolb4i _14mjlb4i",
45
- medium: "_2rko12b0 _14mj12b0",
46
- large: "_2rko12b0 _14mj12b0",
47
- xlarge: "_2rko1qi0 _14mj1qi0",
48
- xxlarge: "_2rkopb1k _14mjpb1k"
49
- };
50
44
  /**
51
45
  * __Avatar content__
52
46
  *
@@ -97,7 +91,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
97
91
  target: target,
98
92
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
99
93
  }, {
100
- className: ax([unboundStyles.root, styles.root, !fg('platform_dst_avatar_tile') && !fg('platform_dst_avatar_tile_stage2') && borderRadiusMap[size], appearance === 'square' && (fg('platform_dst_avatar_tile') || fg('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
94
+ className: ax([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
101
95
  }), children || avatarImage);
102
96
  if (appearance !== 'hexagon') {
103
97
  return renderedContent;
@@ -108,9 +102,9 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
108
102
  return /*#__PURE__*/React.createElement("div", {
109
103
  style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
110
104
  "data-testid": testId ? "".concat(testId, "-hexagon-focus-container") : 'hexagon-focus-container',
111
- className: ax([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
105
+ className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
112
106
  }, /*#__PURE__*/React.createElement("div", {
113
107
  "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
114
- className: ax([unboundStyles.hexagonBorderContainer])
108
+ className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
115
109
  }, renderedContent));
116
110
  });
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.8.3";
18
+ var packageVersion = "25.8.4";
19
19
  var containerStyles = null;
20
20
 
21
21
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/esm/skeleton.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
- ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
2
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
5
- ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
6
- ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
7
- ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
3
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
8
4
  ._1dqonqa1{border-style:solid}
9
5
  ._1h6d1j28{border-color:transparent}
10
6
  ._1bsb16xz{width:6pc}
package/dist/esm/skeleton.js CHANGED
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import "./skeleton.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { fg } from '@atlaskit/platform-feature-flags';
7
6
  var bgColorCssVar = '--avatar-skeleton-background-color';
8
7
  var styles = {
9
8
  root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
@@ -19,14 +18,6 @@ var sizeStyles = {
19
18
  xlarge: "_1bsb16xz _4t3i16xz",
20
19
  xxlarge: "_1bsb1qr7 _4t3i1qr7"
21
20
  };
22
- var borderRadiusMap = {
23
- xsmall: "_2rkolb4i",
24
- small: "_2rkolb4i",
25
- medium: "_2rko12b0",
26
- large: "_2rko12b0",
27
- xlarge: "_2rko1qi0",
28
- xxlarge: "_2rkopb1k"
29
- };
30
21
 
31
22
  /**
32
23
  * __Skeleton__
@@ -43,7 +34,7 @@ var Skeleton = function Skeleton(_ref) {
43
34
  weight = _ref.weight;
44
35
  return /*#__PURE__*/React.createElement("div", {
45
36
  style: _defineProperty({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
46
- className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && !fg('platform_dst_avatar_tile') && !fg('platform_dst_avatar_tile_stage2') && borderRadiusMap[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && (fg('platform_dst_avatar_tile') || fg('platform_dst_avatar_tile_stage2')) && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
37
+ className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
47
38
  });
48
39
  };
49
40
  export default Skeleton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.8.4",
3
+ "version": "25.9.0",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -96,11 +96,9 @@
96
96
  "platform.design-system-team.avatar-item-font-size_830x6": {
97
97
  "type": "boolean"
98
98
  },
99
- "platform_dst_avatar_tile": {
100
- "type": "boolean"
101
- },
102
- "platform_dst_avatar_tile_stage2": {
103
- "type": "boolean"
99
+ "platform_dst_hexagon_avatar_unified_size": {
100
+ "type": "boolean",
101
+ "showOnWebsiteForTransitiveDependencies": true
104
102
  }
105
103
  }
106
104
  }