@atlaskit/avatar 25.9.2 → 25.11.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 +14 -0
  2. package/dist/cjs/avatar-content.compiled.css +3 -0
  3. package/dist/cjs/avatar-content.js +6 -3
  4. package/dist/cjs/avatar.js +1 -1
  5. package/dist/es2019/avatar-content.compiled.css +3 -0
  6. package/dist/es2019/avatar-content.js +6 -3
  7. package/dist/es2019/avatar.js +1 -1
  8. package/dist/esm/avatar-content.compiled.css +3 -0
  9. package/dist/esm/avatar-content.js +6 -3
  10. package/dist/esm/avatar.js +1 -1
  11. package/package.json +16 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2596f105ed08c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2596f105ed08c) -
8
+ [ux] Added motion on hover for interactive Avatar behind fg platform-dst-motion-uplift
9
+
10
+ ## 25.10.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`bab17fe0fd7cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bab17fe0fd7cf) -
15
+ Allow avatar border to accept non colour values like css calculated values
16
+
3
17
  ## 25.9.2
4
18
 
5
19
  ### 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}
@@ -7,6 +8,7 @@
7
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
8
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
9
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
10
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
11
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
12
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -82,5 +84,6 @@
82
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
83
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
84
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
85
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
86
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/cjs/avatar-content.js CHANGED
@@ -27,13 +27,16 @@ 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",
36
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
38
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
39
+ interactiveMotion: "_v564155l _1llweo6y"
37
40
  };
38
41
  var widthHeightMap = {
39
42
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -101,7 +104,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
101
104
  target: target,
102
105
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
103
106
  }, {
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])
107
+ 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, isInteractive && !isDisabled && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
105
108
  }), children || avatarImage);
106
109
  if (appearance !== 'hexagon') {
107
110
  return renderedContent;
@@ -115,6 +118,6 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
115
118
  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
119
  }, /*#__PURE__*/React.createElement("div", {
117
120
  "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])
121
+ 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
122
  }, renderedContent));
120
123
  });
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.10.0";
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}
@@ -7,6 +8,7 @@
7
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
8
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
9
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
10
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
11
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
12
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -82,5 +84,6 @@
82
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
83
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
84
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
85
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
86
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/es2019/avatar-content.js CHANGED
@@ -17,13 +17,16 @@ 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",
26
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
28
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
29
+ interactiveMotion: "_v564155l _1llweo6y"
27
30
  };
28
31
  const widthHeightMap = {
29
32
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -95,7 +98,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
95
98
  target,
96
99
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
97
100
  }, {
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])
101
+ 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, isInteractive && !isDisabled && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
99
102
  }), children || avatarImage);
100
103
  if (appearance !== 'hexagon') {
101
104
  return renderedContent;
@@ -112,6 +115,6 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
112
115
  className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
113
116
  }, /*#__PURE__*/React.createElement("div", {
114
117
  "data-testid": testId ? `${testId}-hexagon-border-container` : 'hexagon-border-container',
115
- className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
118
+ className: ax([unboundStyles.hexagonBorderContainer, fg('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
116
119
  }, renderedContent));
117
120
  });
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.10.0";
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}
@@ -7,6 +8,7 @@
7
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
8
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
9
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
10
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
11
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
12
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -82,5 +84,6 @@
82
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
83
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
84
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
85
88
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._4dave4h9:focus-visible{outline-width:var(--ds-border-width,1px)}._4davidpf:focus-visible{outline-width:0}}
86
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/esm/avatar-content.js CHANGED
@@ -18,13 +18,16 @@ 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",
27
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
29
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
30
+ interactiveMotion: "_v564155l _1llweo6y"
28
31
  };
29
32
  var widthHeightMap = {
30
33
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -92,7 +95,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
92
95
  target: target,
93
96
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
94
97
  }, {
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])
98
+ 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, isInteractive && !isDisabled && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
96
99
  }), children || avatarImage);
97
100
  if (appearance !== 'hexagon') {
98
101
  return renderedContent;
@@ -106,6 +109,6 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
106
109
  className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
107
110
  }, /*#__PURE__*/React.createElement("div", {
108
111
  "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])
112
+ className: ax([unboundStyles.hexagonBorderContainer, fg('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
110
113
  }, renderedContent));
111
114
  });
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.10.0";
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.11.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/"
@@ -32,14 +32,14 @@
32
32
  }
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/analytics-next": "^11.1.0",
35
+ "@atlaskit/analytics-next": "^11.2.0",
36
36
  "@atlaskit/css": "^0.19.0",
37
37
  "@atlaskit/ds-lib": "^6.0.0",
38
- "@atlaskit/icon": "^33.0.0",
38
+ "@atlaskit/icon": "^33.1.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
- "@atlaskit/primitives": "^18.0.0",
40
+ "@atlaskit/primitives": "^18.1.0",
41
41
  "@atlaskit/theme": "^22.0.0",
42
- "@atlaskit/tokens": "^11.1.0",
42
+ "@atlaskit/tokens": "^11.4.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@compiled/react": "^0.20.0"
45
45
  },
@@ -53,14 +53,17 @@
53
53
  "@atlaskit/button": "^23.10.0",
54
54
  "@atlaskit/code": "^17.4.0",
55
55
  "@atlaskit/docs": "^11.7.0",
56
- "@atlaskit/form": "^15.4.0",
56
+ "@atlaskit/form": "^15.5.0",
57
57
  "@atlaskit/heading": "^5.3.0",
58
58
  "@atlaskit/link": "^3.3.0",
59
59
  "@atlaskit/range": "^10.0.0",
60
60
  "@atlaskit/section-message": "^8.12.0",
61
61
  "@atlaskit/textfield": "^8.2.0",
62
- "@atlaskit/tooltip": "^20.14.0",
62
+ "@atlaskit/tooltip": "^21.0.0",
63
+ "@atlassian/feature-flags-test-utils": "^1.0.0",
63
64
  "@atlassian/ssr-tests": "workspace:^",
65
+ "@atlassian/structured-docs-types": "workspace:^",
66
+ "@atlassian/testing-library": "^0.4.0",
64
67
  "@testing-library/react": "^16.3.0",
65
68
  "@testing-library/user-event": "^14.4.3",
66
69
  "jest-in-case": "^1.0.2",
@@ -96,9 +99,15 @@
96
99
  "platform.design-system-team.avatar-item-font-size_830x6": {
97
100
  "type": "boolean"
98
101
  },
102
+ "avatar-custom-border": {
103
+ "type": "boolean"
104
+ },
99
105
  "platform_dst_hexagon_avatar_unified_size": {
100
106
  "type": "boolean",
101
107
  "showOnWebsiteForTransitiveDependencies": true
108
+ },
109
+ "platform-dst-motion-uplift": {
110
+ "type": "boolean"
102
111
  }
103
112
  }
104
113
  }