@atlaskit/avatar 25.9.2 → 25.10.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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/avatar-content.compiled.css +1 -0
  3. package/dist/cjs/avatar-content.js +4 -2
  4. package/dist/cjs/avatar.js +1 -1
  5. package/dist/es2019/avatar-content.compiled.css +1 -0
  6. package/dist/es2019/avatar-content.js +4 -2
  7. package/dist/es2019/avatar.js +1 -1
  8. package/dist/esm/avatar-content.compiled.css +1 -0
  9. package/dist/esm/avatar-content.js +4 -2
  10. package/dist/esm/avatar.js +1 -1
  11. package/package.json +6 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`bab17fe0fd7cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bab17fe0fd7cf) -
8
+ Allow avatar border to accept non colour values like css calculated values
9
+
3
10
  ## 25.9.2
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/avatar-content.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._11q7cxp3{background:var(--avatar-bg-color)}
2
3
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
3
4
  ._14mjidpf:after{border-radius:0}
4
5
  ._19itglyw{border:none}
package/dist/cjs/avatar-content.js CHANGED
@@ -27,9 +27,11 @@ var styles = {
27
27
  disabled: "_80om13gf _1hfkvuon _1peqs237"
28
28
  };
29
29
  var unboundStyles = {
30
+ rootCustomBorder: "_11q7cxp3",
30
31
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
31
32
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
32
33
  hexagonFocusContainerMarginFg: "_195g1ksc",
34
+ hexagonBorderContainerCustomBorder: "_11q7cxp3",
33
35
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
34
36
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
35
37
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
@@ -101,7 +103,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
101
103
  target: target,
102
104
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
103
105
  }, {
104
- 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])
106
+ className: (0, _runtime.ax)([unboundStyles.root, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.rootCustomBorder, 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])
105
107
  }), children || avatarImage);
106
108
  if (appearance !== 'hexagon') {
107
109
  return renderedContent;
@@ -115,6 +117,6 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
115
117
  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])
116
118
  }, /*#__PURE__*/React.createElement("div", {
117
119
  "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
118
- className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
120
+ className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
119
121
  }, renderedContent));
120
122
  });
package/dist/cjs/avatar.js CHANGED
@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
26
26
  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; }
27
27
  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; }
28
28
  var packageName = "@atlaskit/avatar";
29
- var packageVersion = "0.0.0-development";
29
+ var packageVersion = "25.9.2";
30
30
  var containerStyles = null;
31
31
 
32
32
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/es2019/avatar-content.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._11q7cxp3{background:var(--avatar-bg-color)}
2
3
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
3
4
  ._14mjidpf:after{border-radius:0}
4
5
  ._19itglyw{border:none}
package/dist/es2019/avatar-content.js CHANGED
@@ -17,9 +17,11 @@ const styles = {
17
17
  disabled: "_80om13gf _1hfkvuon _1peqs237"
18
18
  };
19
19
  const unboundStyles = {
20
+ rootCustomBorder: "_11q7cxp3",
20
21
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
21
22
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
22
23
  hexagonFocusContainerMarginFg: "_195g1ksc",
24
+ hexagonBorderContainerCustomBorder: "_11q7cxp3",
23
25
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
24
26
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
25
27
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
@@ -95,7 +97,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
95
97
  target,
96
98
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
97
99
  }, {
98
- 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])
100
+ className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, 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])
99
101
  }), children || avatarImage);
100
102
  if (appearance !== 'hexagon') {
101
103
  return renderedContent;
@@ -112,6 +114,6 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
112
114
  className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
113
115
  }, /*#__PURE__*/React.createElement("div", {
114
116
  "data-testid": testId ? `${testId}-hexagon-border-container` : 'hexagon-border-container',
115
- className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
117
+ className: ax([unboundStyles.hexagonBorderContainer, fg('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
116
118
  }, renderedContent));
117
119
  });
package/dist/es2019/avatar.js CHANGED
@@ -14,7 +14,7 @@ import getCustomElement from './internal/get-custom-element';
14
14
  import PresenceWrapper from './internal/presence-wrapper';
15
15
  import StatusWrapper from './internal/status-wrapper';
16
16
  const packageName = "@atlaskit/avatar";
17
- const packageVersion = "0.0.0-development";
17
+ const packageVersion = "25.9.2";
18
18
  const containerStyles = null;
19
19
 
20
20
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/esm/avatar-content.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._11q7cxp3{background:var(--avatar-bg-color)}
2
3
  ._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
3
4
  ._14mjidpf:after{border-radius:0}
4
5
  ._19itglyw{border:none}
package/dist/esm/avatar-content.js CHANGED
@@ -18,9 +18,11 @@ var styles = {
18
18
  disabled: "_80om13gf _1hfkvuon _1peqs237"
19
19
  };
20
20
  var unboundStyles = {
21
+ rootCustomBorder: "_11q7cxp3",
21
22
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
22
23
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
23
24
  hexagonFocusContainerMarginFg: "_195g1ksc",
25
+ hexagonBorderContainerCustomBorder: "_11q7cxp3",
24
26
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
25
27
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
26
28
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
@@ -92,7 +94,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
92
94
  target: target,
93
95
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
94
96
  }, {
95
- 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])
97
+ className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, 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])
96
98
  }), children || avatarImage);
97
99
  if (appearance !== 'hexagon') {
98
100
  return renderedContent;
@@ -106,6 +108,6 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
106
108
  className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
107
109
  }, /*#__PURE__*/React.createElement("div", {
108
110
  "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
109
- className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
111
+ className: ax([unboundStyles.hexagonBorderContainer, fg('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
110
112
  }, renderedContent));
111
113
  });
package/dist/esm/avatar.js CHANGED
@@ -17,7 +17,7 @@ import getCustomElement from './internal/get-custom-element';
17
17
  import PresenceWrapper from './internal/presence-wrapper';
18
18
  import StatusWrapper from './internal/status-wrapper';
19
19
  var packageName = "@atlaskit/avatar";
20
- var packageVersion = "0.0.0-development";
20
+ var packageVersion = "25.9.2";
21
21
  var containerStyles = null;
22
22
 
23
23
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.9.2",
3
+ "version": "25.10.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/"
@@ -60,7 +60,9 @@
60
60
  "@atlaskit/section-message": "^8.12.0",
61
61
  "@atlaskit/textfield": "^8.2.0",
62
62
  "@atlaskit/tooltip": "^20.14.0",
63
+ "@atlassian/feature-flags-test-utils": "^1.0.0",
63
64
  "@atlassian/ssr-tests": "workspace:^",
65
+ "@atlassian/testing-library": "^0.4.0",
64
66
  "@testing-library/react": "^16.3.0",
65
67
  "@testing-library/user-event": "^14.4.3",
66
68
  "jest-in-case": "^1.0.2",
@@ -96,6 +98,9 @@
96
98
  "platform.design-system-team.avatar-item-font-size_830x6": {
97
99
  "type": "boolean"
98
100
  },
101
+ "avatar-custom-border": {
102
+ "type": "boolean"
103
+ },
99
104
  "platform_dst_hexagon_avatar_unified_size": {
100
105
  "type": "boolean",
101
106
  "showOnWebsiteForTransitiveDependencies": true