@atlaskit/avatar 25.10.0 → 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 +7 -0
  2. package/dist/cjs/avatar-content.compiled.css +2 -0
  3. package/dist/cjs/avatar-content.js +3 -2
  4. package/dist/cjs/avatar.js +1 -1
  5. package/dist/es2019/avatar-content.compiled.css +2 -0
  6. package/dist/es2019/avatar-content.js +3 -2
  7. package/dist/es2019/avatar.js +1 -1
  8. package/dist/esm/avatar-content.compiled.css +2 -0
  9. package/dist/esm/avatar-content.js +3 -2
  10. package/dist/esm/avatar.js +1 -1
  11. package/package.json +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
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
+
3
10
  ## 25.10.0
4
11
 
5
12
  ### Minor Changes
package/dist/cjs/avatar-content.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
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}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/cjs/avatar-content.js CHANGED
@@ -35,7 +35,8 @@ var unboundStyles = {
35
35
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
36
36
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
37
37
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
38
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
38
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
39
+ interactiveMotion: "_v564155l _1llweo6y"
39
40
  };
40
41
  var widthHeightMap = {
41
42
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -103,7 +104,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
103
104
  target: target,
104
105
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
105
106
  }, {
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])
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])
107
108
  }), children || avatarImage);
108
109
  if (appearance !== 'hexagon') {
109
110
  return renderedContent;
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 = "25.9.2";
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
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
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}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/es2019/avatar-content.js CHANGED
@@ -25,7 +25,8 @@ const unboundStyles = {
25
25
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
26
26
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
27
27
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
28
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
28
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
29
+ interactiveMotion: "_v564155l _1llweo6y"
29
30
  };
30
31
  const widthHeightMap = {
31
32
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -97,7 +98,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
97
98
  target,
98
99
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
99
100
  }, {
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])
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])
101
102
  }), children || avatarImage);
102
103
  if (appearance !== 'hexagon') {
103
104
  return renderedContent;
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 = "25.9.2";
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
@@ -8,6 +8,7 @@
8
8
  ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._qc5o1p41:after{transition:opacity .2s}
11
+ ._v564155l{transition:var(--ds-avatar-hovered,transform .1s cubic-bezier(.32,0,.67,0))}
11
12
  ._v564ieh6{transition:transform .2s,opacity .2s}
12
13
  ._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
13
14
  ._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
@@ -83,5 +84,6 @@
83
84
  ._1ejjn7od:focus-visible{box-shadow:unset}
84
85
  ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
85
86
  ._ra3xnqa1:focus-visible{outline-style:solid}
87
+ ._1llweo6y:hover{transform:scale(1.12)}
86
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}}
87
89
  @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/esm/avatar-content.js CHANGED
@@ -26,7 +26,8 @@ var unboundStyles = {
26
26
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
27
27
  hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
28
28
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
29
- interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
29
+ interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y",
30
+ interactiveMotion: "_v564155l _1llweo6y"
30
31
  };
31
32
  var widthHeightMap = {
32
33
  xsmall: "_1bsb7vkz _4t3i7vkz",
@@ -94,7 +95,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
94
95
  target: target,
95
96
  rel: target === '_blank' ? 'noopener noreferrer' : undefined
96
97
  }, {
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])
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])
98
99
  }), children || avatarImage);
99
100
  if (appearance !== 'hexagon') {
100
101
  return renderedContent;
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 = "25.9.2";
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.10.0",
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,15 +53,16 @@
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
63
  "@atlassian/feature-flags-test-utils": "^1.0.0",
64
64
  "@atlassian/ssr-tests": "workspace:^",
65
+ "@atlassian/structured-docs-types": "workspace:^",
65
66
  "@atlassian/testing-library": "^0.4.0",
66
67
  "@testing-library/react": "^16.3.0",
67
68
  "@testing-library/user-event": "^14.4.3",
@@ -104,6 +105,9 @@
104
105
  "platform_dst_hexagon_avatar_unified_size": {
105
106
  "type": "boolean",
106
107
  "showOnWebsiteForTransitiveDependencies": true
108
+ },
109
+ "platform-dst-motion-uplift": {
110
+ "type": "boolean"
107
111
  }
108
112
  }
109
113
  }