@atlaskit/teams-avatar 2.3.25 → 2.4.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 (23) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ui/teams-avatar/index.js +5 -2
  3. package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css +5 -1
  4. package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.js +5 -2
  5. package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.compiled.css +4 -0
  6. package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js +9 -4
  7. package/dist/es2019/ui/teams-avatar/index.js +3 -1
  8. package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css +5 -1
  9. package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.js +5 -2
  10. package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.compiled.css +4 -0
  11. package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js +8 -4
  12. package/dist/esm/ui/teams-avatar/index.js +5 -2
  13. package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css +5 -1
  14. package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.js +5 -2
  15. package/dist/esm/ui/teams-avatar/teams-avatar-image/index.compiled.css +4 -0
  16. package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js +9 -4
  17. package/dist/types/ui/teams-avatar/index.d.ts +2 -1
  18. package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts +3 -1
  19. package/dist/types/ui/teams-avatar/teams-avatar-image/index.d.ts +2 -1
  20. package/dist/types-ts4.5/ui/teams-avatar/index.d.ts +2 -1
  21. package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts +3 -1
  22. package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/index.d.ts +2 -1
  23. package/package.json +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/teams-avatar
2
2
 
3
+ ## 2.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`9b64a2eecf044`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b64a2eecf044) -
8
+ Add prop for compact usage
9
+
3
10
  ## 2.3.25
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ui/teams-avatar/index.js CHANGED
@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
12
12
  var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
13
13
  var _colors = require("@atlaskit/theme/colors");
14
14
  var _teamsAvatarImage = require("./teams-avatar-image");
15
- var _excluded = ["testId", "src", "size", "teamId"];
15
+ var _excluded = ["testId", "src", "size", "teamId", "compact"];
16
16
  /*
17
17
  * The component accepts src and teamId as input params. Order of preference:
18
18
  * If src is provided, use that directly.
@@ -29,6 +29,8 @@ function TeamAvatar(_ref) {
29
29
  size = _ref$size === void 0 ? 'medium' : _ref$size,
30
30
  _ref$teamId = _ref.teamId,
31
31
  teamId = _ref$teamId === void 0 ? '' : _ref$teamId,
32
+ _ref$compact = _ref.compact,
33
+ compact = _ref$compact === void 0 ? false : _ref$compact,
32
34
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
33
35
  // Strip ARI in case the teamId was given in that format
34
36
  teamId = teamId.replace('ari:cloud:identity::team/', '');
@@ -42,6 +44,7 @@ function TeamAvatar(_ref) {
42
44
  src: src,
43
45
  size: size,
44
46
  testId: testId,
45
- teamId: teamId
47
+ teamId: teamId,
48
+ compact: compact
46
49
  }));
47
50
  }
package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css CHANGED
@@ -1,5 +1,9 @@
1
1
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
2
+ ._18u0ze3t{margin-left:var(--ds-space-0,0)}
2
3
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
3
5
  ._1e0c1txw{display:flex}
4
6
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
5
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
7
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
8
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.js CHANGED
@@ -10,13 +10,16 @@ require("./index.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
12
  var _react = _interopRequireDefault(require("react"));
13
+ var _css = require("@atlaskit/css");
13
14
  var _compiled = require("@atlaskit/primitives/compiled");
14
15
  var styles = {
15
- wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
16
+ wrapper: "_1e0c1txw",
17
+ wrapperSpacing: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o",
18
+ compactWrapperSpacing: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t"
16
19
  };
17
20
  function FallbackAvatar(props) {
18
21
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
19
- xcss: styles.wrapper
22
+ xcss: (0, _css.cx)(styles.wrapper, props.compact ? styles.compactWrapperSpacing : styles.wrapperSpacing)
20
23
  }, /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
21
24
  width: "32",
22
25
  height: "32",
package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
9
9
  ._12ji1r31{outline-color:currentColor}
10
10
  ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
11
+ ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
11
12
  ._12y31o36{outline-width:medium}
12
13
  ._16jlkb7n{flex-grow:1}
13
14
  ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
@@ -28,6 +29,7 @@
28
29
  ._1peqidpf:after{opacity:0}
29
30
  ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
30
31
  ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
32
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
31
33
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
32
34
  ._1qu2glyw{outline-style:none}
33
35
  ._1reo15vq{overflow-x:hidden}
@@ -42,12 +44,14 @@
42
44
  ._4t3izwfg{height:2pc}
43
45
  ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
44
46
  ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
47
+ ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
45
48
  ._80om13gf{cursor:not-allowed}
46
49
  ._80om1kw7{cursor:inherit}
47
50
  ._80omtlke{cursor:pointer}
48
51
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
49
52
  ._aetrf705:after{content:" "}
50
53
  ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
54
+ ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
51
55
  ._bfhkcxp3{background-color:var(--avatar-bg-color)}
52
56
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
53
57
  ._eeh8kb7n:active:after{opacity:1}
package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -23,7 +23,9 @@ var bgColorCssVar = '--avatar-bg-color';
23
23
  * After that we can return to wrapping in <AvatarContent> rather than span
24
24
  */
25
25
  var containerStyles = {
26
- root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
26
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
27
+ nonCompactSpacing: "_6rthv77o _1pfhv77o _12l2v77o _ahbqv77o",
28
+ compactSpacing: "_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t",
27
29
  circle: "_2rko1qll _14mj1qll",
28
30
  positionRelative: "_kqswh2mm",
29
31
  disabled: "_80om13gf _1hfkvuon _1peqs237"
@@ -71,7 +73,9 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
71
73
  src = _ref.src,
72
74
  size = _ref.size,
73
75
  testId = _ref.testId,
74
- teamId = _ref.teamId;
76
+ teamId = _ref.teamId,
77
+ _ref$compact = _ref.compact,
78
+ compact = _ref$compact === void 0 ? false : _ref$compact;
75
79
  var _useState = (0, _react.useState)(false),
76
80
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
77
81
  hasImageErrored = _useState2[0],
@@ -87,13 +91,14 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
87
91
  "aria-label": alt,
88
92
  width: SIZES[size],
89
93
  height: SIZES[size],
90
- "data-testid": testId
94
+ "data-testid": testId,
95
+ compact: compact
91
96
  });
92
97
  }
93
98
  return /*#__PURE__*/React.createElement("span", {
94
99
  "data-testid": testId,
95
100
  "aria-label": alt,
96
- className: (0, _runtime.ax)([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
101
+ className: (0, _runtime.ax)([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size], compact ? containerStyles.compactSpacing : containerStyles.nonCompactSpacing])
97
102
  }, /*#__PURE__*/React.createElement("img", {
98
103
  src: avatarSrc,
99
104
  alt: alt,
package/dist/es2019/ui/teams-avatar/index.js CHANGED
@@ -18,6 +18,7 @@ export default function TeamAvatar({
18
18
  src,
19
19
  size = 'medium',
20
20
  teamId = '',
21
+ compact = false,
21
22
  ...props
22
23
  }) {
23
24
  // Strip ARI in case the teamId was given in that format
@@ -32,6 +33,7 @@ export default function TeamAvatar({
32
33
  src: src,
33
34
  size: size,
34
35
  testId: testId,
35
- teamId: teamId
36
+ teamId: teamId,
37
+ compact: compact
36
38
  }));
37
39
  }
package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css CHANGED
@@ -1,5 +1,9 @@
1
1
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
2
+ ._18u0ze3t{margin-left:var(--ds-space-0,0)}
2
3
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
3
5
  ._1e0c1txw{display:flex}
4
6
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
5
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
7
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
8
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.js CHANGED
@@ -3,13 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./index.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React from 'react';
6
+ import { cx } from '@atlaskit/css';
6
7
  import { Box } from '@atlaskit/primitives/compiled';
7
8
  const styles = {
8
- wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
9
+ wrapper: "_1e0c1txw",
10
+ wrapperSpacing: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o",
11
+ compactWrapperSpacing: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t"
9
12
  };
10
13
  export function FallbackAvatar(props) {
11
14
  return /*#__PURE__*/React.createElement(Box, {
12
- xcss: styles.wrapper
15
+ xcss: cx(styles.wrapper, props.compact ? styles.compactWrapperSpacing : styles.wrapperSpacing)
13
16
  }, /*#__PURE__*/React.createElement("svg", _extends({
14
17
  width: "32",
15
18
  height: "32",
package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
9
9
  ._12ji1r31{outline-color:currentColor}
10
10
  ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
11
+ ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
11
12
  ._12y31o36{outline-width:medium}
12
13
  ._16jlkb7n{flex-grow:1}
13
14
  ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
@@ -28,6 +29,7 @@
28
29
  ._1peqidpf:after{opacity:0}
29
30
  ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
30
31
  ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
32
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
31
33
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
32
34
  ._1qu2glyw{outline-style:none}
33
35
  ._1reo15vq{overflow-x:hidden}
@@ -42,12 +44,14 @@
42
44
  ._4t3izwfg{height:2pc}
43
45
  ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
44
46
  ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
47
+ ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
45
48
  ._80om13gf{cursor:not-allowed}
46
49
  ._80om1kw7{cursor:inherit}
47
50
  ._80omtlke{cursor:pointer}
48
51
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
49
52
  ._aetrf705:after{content:" "}
50
53
  ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
54
+ ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
51
55
  ._bfhkcxp3{background-color:var(--avatar-bg-color)}
52
56
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
53
57
  ._eeh8kb7n:active:after{opacity:1}
package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -13,7 +13,9 @@ const bgColorCssVar = '--avatar-bg-color';
13
13
  * After that we can return to wrapping in <AvatarContent> rather than span
14
14
  */
15
15
  const containerStyles = {
16
- root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
16
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
17
+ nonCompactSpacing: "_6rthv77o _1pfhv77o _12l2v77o _ahbqv77o",
18
+ compactSpacing: "_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t",
17
19
  circle: "_2rko1qll _14mj1qll",
18
20
  positionRelative: "_kqswh2mm",
19
21
  disabled: "_80om13gf _1hfkvuon _1peqs237"
@@ -60,7 +62,8 @@ export const TeamAvatarImage = ({
60
62
  src,
61
63
  size,
62
64
  testId,
63
- teamId
65
+ teamId,
66
+ compact = false
64
67
  }) => {
65
68
  const [hasImageErrored, setHasImageErrored] = useState(false);
66
69
  const avatarSrc = getTeamAvatarSrc(src, teamId);
@@ -74,13 +77,14 @@ export const TeamAvatarImage = ({
74
77
  "aria-label": alt,
75
78
  width: SIZES[size],
76
79
  height: SIZES[size],
77
- "data-testid": testId
80
+ "data-testid": testId,
81
+ compact: compact
78
82
  });
79
83
  }
80
84
  return /*#__PURE__*/React.createElement("span", {
81
85
  "data-testid": testId,
82
86
  "aria-label": alt,
83
- className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
87
+ className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size], compact ? containerStyles.compactSpacing : containerStyles.nonCompactSpacing])
84
88
  }, /*#__PURE__*/React.createElement("img", {
85
89
  src: avatarSrc,
86
90
  alt: alt,
package/dist/esm/ui/teams-avatar/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["testId", "src", "size", "teamId"];
3
+ var _excluded = ["testId", "src", "size", "teamId", "compact"];
4
4
  import React from 'react';
5
5
  import Avatar from '@atlaskit/avatar';
6
6
  import { N0, N90 } from '@atlaskit/theme/colors';
@@ -22,6 +22,8 @@ export default function TeamAvatar(_ref) {
22
22
  size = _ref$size === void 0 ? 'medium' : _ref$size,
23
23
  _ref$teamId = _ref.teamId,
24
24
  teamId = _ref$teamId === void 0 ? '' : _ref$teamId,
25
+ _ref$compact = _ref.compact,
26
+ compact = _ref$compact === void 0 ? false : _ref$compact,
25
27
  props = _objectWithoutProperties(_ref, _excluded);
26
28
  // Strip ARI in case the teamId was given in that format
27
29
  teamId = teamId.replace('ari:cloud:identity::team/', '');
@@ -35,6 +37,7 @@ export default function TeamAvatar(_ref) {
35
37
  src: src,
36
38
  size: size,
37
39
  testId: testId,
38
- teamId: teamId
40
+ teamId: teamId,
41
+ compact: compact
39
42
  }));
40
43
  }
package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css CHANGED
@@ -1,5 +1,9 @@
1
1
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
2
+ ._18u0ze3t{margin-left:var(--ds-space-0,0)}
2
3
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
3
5
  ._1e0c1txw{display:flex}
4
6
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
5
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
7
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
8
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.js CHANGED
@@ -3,13 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./index.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React from 'react';
6
+ import { cx } from '@atlaskit/css';
6
7
  import { Box } from '@atlaskit/primitives/compiled';
7
8
  var styles = {
8
- wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
9
+ wrapper: "_1e0c1txw",
10
+ wrapperSpacing: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o",
11
+ compactWrapperSpacing: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t"
9
12
  };
10
13
  export function FallbackAvatar(props) {
11
14
  return /*#__PURE__*/React.createElement(Box, {
12
- xcss: styles.wrapper
15
+ xcss: cx(styles.wrapper, props.compact ? styles.compactWrapperSpacing : styles.wrapperSpacing)
13
16
  }, /*#__PURE__*/React.createElement("svg", _extends({
14
17
  width: "32",
15
18
  height: "32",
package/dist/esm/ui/teams-avatar/teams-avatar-image/index.compiled.css CHANGED
@@ -8,6 +8,7 @@
8
8
  ._v564ieh6{transition:transform .2s,opacity .2s}._11fnglyw:after{pointer-events:none}
9
9
  ._12ji1r31{outline-color:currentColor}
10
10
  ._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
11
+ ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
11
12
  ._12y31o36{outline-width:medium}
12
13
  ._16jlkb7n{flex-grow:1}
13
14
  ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
@@ -28,6 +29,7 @@
28
29
  ._1peqidpf:after{opacity:0}
29
30
  ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
30
31
  ._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
32
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
31
33
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
32
34
  ._1qu2glyw{outline-style:none}
33
35
  ._1reo15vq{overflow-x:hidden}
@@ -42,12 +44,14 @@
42
44
  ._4t3izwfg{height:2pc}
43
45
  ._4tpu1g4v:hover:after{background-color:var(--ds-interaction-hovered,rgba(9,30,66,.36))}
44
46
  ._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
47
+ ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
45
48
  ._80om13gf{cursor:not-allowed}
46
49
  ._80om1kw7{cursor:inherit}
47
50
  ._80omtlke{cursor:pointer}
48
51
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
49
52
  ._aetrf705:after{content:" "}
50
53
  ._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
54
+ ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
51
55
  ._bfhkcxp3{background-color:var(--avatar-bg-color)}
52
56
  ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
53
57
  ._eeh8kb7n:active:after{opacity:1}
package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -14,7 +14,9 @@ var bgColorCssVar = '--avatar-bg-color';
14
14
  * After that we can return to wrapping in <AvatarContent> rather than span
15
15
  */
16
16
  var containerStyles = {
17
- root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
17
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw",
18
+ nonCompactSpacing: "_6rthv77o _1pfhv77o _12l2v77o _ahbqv77o",
19
+ compactSpacing: "_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t",
18
20
  circle: "_2rko1qll _14mj1qll",
19
21
  positionRelative: "_kqswh2mm",
20
22
  disabled: "_80om13gf _1hfkvuon _1peqs237"
@@ -62,7 +64,9 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
62
64
  src = _ref.src,
63
65
  size = _ref.size,
64
66
  testId = _ref.testId,
65
- teamId = _ref.teamId;
67
+ teamId = _ref.teamId,
68
+ _ref$compact = _ref.compact,
69
+ compact = _ref$compact === void 0 ? false : _ref$compact;
66
70
  var _useState = useState(false),
67
71
  _useState2 = _slicedToArray(_useState, 2),
68
72
  hasImageErrored = _useState2[0],
@@ -78,13 +82,14 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
78
82
  "aria-label": alt,
79
83
  width: SIZES[size],
80
84
  height: SIZES[size],
81
- "data-testid": testId
85
+ "data-testid": testId,
86
+ compact: compact
82
87
  });
83
88
  }
84
89
  return /*#__PURE__*/React.createElement("span", {
85
90
  "data-testid": testId,
86
91
  "aria-label": alt,
87
- className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size]])
92
+ className: ax([unboundStyles.root, containerStyles.root, borderRadiusMap[size], widthHeightMap[size], compact ? containerStyles.compactSpacing : containerStyles.nonCompactSpacing])
88
93
  }, /*#__PURE__*/React.createElement("img", {
89
94
  src: avatarSrc,
90
95
  alt: alt,
package/dist/types/ui/teams-avatar/index.d.ts CHANGED
@@ -2,7 +2,8 @@ import React from 'react';
2
2
  import { type AvatarPropTypes } from '@atlaskit/avatar';
3
3
  export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'> & {
4
4
  teamId?: string;
5
+ compact?: boolean;
5
6
  };
6
7
  export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
7
8
  export declare const ICON_COLOR: "var(--ds-icon-subtle)";
8
- export default function TeamAvatar({ testId, src, size, teamId, ...props }: TeamAvatarProps): React.JSX.Element;
9
+ export default function TeamAvatar({ testId, src, size, teamId, compact, ...props }: TeamAvatarProps): React.JSX.Element;
package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import React from 'react';
2
- export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
2
+ export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement> & {
3
+ compact?: boolean;
4
+ }): React.JSX.Element;
package/dist/types/ui/teams-avatar/teams-avatar-image/index.d.ts CHANGED
@@ -9,11 +9,12 @@ type AvatarImageProps = {
9
9
  src?: string;
10
10
  testId?: string;
11
11
  teamId?: string;
12
+ compact?: boolean;
12
13
  };
13
14
  /**
14
15
  * __Avatar image__
15
16
  *
16
17
  * An avatar image is an internal component used to control the rendering phases of an image.
17
18
  */
18
- export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId }: AvatarImageProps) => JSX.Element;
19
+ export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId, compact, }: AvatarImageProps) => JSX.Element;
19
20
  export {};
package/dist/types-ts4.5/ui/teams-avatar/index.d.ts CHANGED
@@ -2,7 +2,8 @@ import React from 'react';
2
2
  import { type AvatarPropTypes } from '@atlaskit/avatar';
3
3
  export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'> & {
4
4
  teamId?: string;
5
+ compact?: boolean;
5
6
  };
6
7
  export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
7
8
  export declare const ICON_COLOR: "var(--ds-icon-subtle)";
8
- export default function TeamAvatar({ testId, src, size, teamId, ...props }: TeamAvatarProps): React.JSX.Element;
9
+ export default function TeamAvatar({ testId, src, size, teamId, compact, ...props }: TeamAvatarProps): React.JSX.Element;
package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import React from 'react';
2
- export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
2
+ export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement> & {
3
+ compact?: boolean;
4
+ }): React.JSX.Element;
package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/index.d.ts CHANGED
@@ -9,11 +9,12 @@ type AvatarImageProps = {
9
9
  src?: string;
10
10
  testId?: string;
11
11
  teamId?: string;
12
+ compact?: boolean;
12
13
  };
13
14
  /**
14
15
  * __Avatar image__
15
16
  *
16
17
  * An avatar image is an internal component used to control the rendering phases of an image.
17
18
  */
18
- export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId }: AvatarImageProps) => JSX.Element;
19
+ export declare const TeamAvatarImage: ({ alt, src, size, testId, teamId, compact, }: AvatarImageProps) => JSX.Element;
19
20
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/teams-avatar",
3
- "version": "2.3.25",
3
+ "version": "2.4.0",
4
4
  "description": "A team avatar is a visual representation of a team.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,15 +35,14 @@
35
35
  "test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/teams-avatar/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-avatar/src/**\", \"!packages/people-and-teams/teams-avatar/src/**/**/types.ts\", \"!packages/people-and-teams/teams-avatar/src/ui/**/styled.tsx\"]')"
36
36
  },
37
37
  "dependencies": {
38
- "@atlaskit/avatar": "^25.4.0",
38
+ "@atlaskit/avatar": "^25.5.0",
39
39
  "@atlaskit/css": "^0.15.0",
40
40
  "@atlaskit/icon": "^28.5.0",
41
- "@atlaskit/primitives": "^16.0.0",
41
+ "@atlaskit/primitives": "^16.1.0",
42
42
  "@atlaskit/theme": "^21.0.0",
43
- "@atlaskit/tokens": "^7.0.0",
43
+ "@atlaskit/tokens": "^7.1.0",
44
44
  "@babel/runtime": "^7.0.0",
45
- "@compiled/react": "^0.18.6",
46
- "@emotion/react": "^11.7.1"
45
+ "@compiled/react": "^0.18.6"
47
46
  },
48
47
  "peerDependencies": {
49
48
  "react": "^18.2.0"