@atlaskit/avatar 21.4.5 → 21.4.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 21.4.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#70213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70213) [`31068e587071`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/31068e587071) - [ux] Removes decorative images of presence and status from view of assistive technologies. The presence and status are announced as part of the labeling of the parent component and therefore no longer necessary.
8
+
3
9
  ## 21.4.5
4
10
 
5
11
  ### Patch Changes
@@ -23,7 +23,7 @@ var _templateObject;
23
23
  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; }
24
24
  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; }
25
25
  var packageName = "@atlaskit/avatar";
26
- var packageVersion = "21.4.5";
26
+ var packageVersion = "21.4.6";
27
27
 
28
28
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
29
29
 
@@ -42,13 +42,11 @@ var getStyles = function getStyles(css, _ref) {
42
42
  };
43
43
 
44
44
  /**
45
- * __Avatar__
46
- *
47
45
  * An avatar is a visual representation of a user or entity.
48
46
  *
49
47
  * - [Examples](https://atlassian.design/components/avatar/examples)
50
48
  * - [Code](https://atlassian.design/components/avatar/code)
51
- * - [Usage](https://atlassian.design/components/avatar/usage)
49
+ * - [Usage](https://atlassian.design/components/avatar/usage).
52
50
  */
53
51
  var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
54
52
  var analyticsContext = _ref2.analyticsContext,
@@ -107,7 +105,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
107
105
  analyticsEvent.context.push(context);
108
106
 
109
107
  /**
110
- * Replicating the logic in the `withAnalyticsEvents` HOC
108
+ * Replicating the logic in the `withAnalyticsEvents` HOC.
111
109
  */
112
110
  var clone = analyticsEvent.clone();
113
111
  if (clone) {
@@ -54,13 +54,11 @@ function getPresence(presence) {
54
54
  }
55
55
 
56
56
  /**
57
- * __Avatar presence__
58
- *
59
57
  * A presence shows an avatar’s availability.
60
58
  *
61
59
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
62
60
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
63
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
61
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
64
62
  */
65
63
  var AvatarPresence = function AvatarPresence(_ref) {
66
64
  var borderColor = _ref.borderColor,
@@ -78,8 +76,6 @@ var AvatarPresence = function AvatarPresence(_ref) {
78
76
  };
79
77
  var _default = exports.default = AvatarPresence;
80
78
  /**
81
- * __Presence wrapper__
82
- *
83
79
  * A presence wrapper is used internally to position presence ontop of the avatar.
84
80
  */
85
81
  var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
@@ -91,6 +87,7 @@ var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2)
91
87
  testId = _ref2.testId;
92
88
  var position = appearance === 'square' ? -4 : _constants.ICON_OFFSET[size];
93
89
  return /*#__PURE__*/_react.default.createElement("span", {
90
+ "aria-hidden": "true",
94
91
  "data-testid": testId && "".concat(testId, "--presence"),
95
92
  style: {
96
93
  pointerEvents: 'none',
@@ -53,12 +53,10 @@ function getStatus(status) {
53
53
  }
54
54
 
55
55
  /**
56
- * __Avatar status__
57
- *
58
56
  * An avatar status shows contextual information, such as if someone approves or declines something.
59
57
  *
60
58
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
61
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
59
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
62
60
  */
63
61
  var AvatarStatus = function AvatarStatus(_ref) {
64
62
  var borderColor = _ref.borderColor,
@@ -76,9 +74,7 @@ var AvatarStatus = function AvatarStatus(_ref) {
76
74
  };
77
75
  var _default = exports.default = AvatarStatus;
78
76
  /**
79
- * Status wrapper**
80
- *
81
- * A status wrapper is used internally to position status ontop of the avatar.
77
+ * A status wrapper is used internally to position status on top of the avatar.
82
78
  */
83
79
  var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
84
80
  var size = _ref2.size,
@@ -89,6 +85,7 @@ var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
89
85
  testId = _ref2.testId;
90
86
  var position = appearance === 'square' ? 0 : _constants.ICON_OFFSET[size];
91
87
  return /*#__PURE__*/_react.default.createElement("span", {
88
+ "aria-hidden": "true",
92
89
  "data-testid": testId && "".concat(testId, "--status"),
93
90
  style: {
94
91
  position: 'absolute',
@@ -11,7 +11,7 @@ import { PresenceWrapper } from './Presence';
11
11
  import { StatusWrapper } from './Status';
12
12
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
13
13
  const packageName = "@atlaskit/avatar";
14
- const packageVersion = "21.4.5";
14
+ const packageVersion = "21.4.6";
15
15
 
16
16
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
17
17
 
@@ -117,13 +117,11 @@ css`
117
117
  `;
118
118
 
119
119
  /**
120
- * __Avatar__
121
- *
122
120
  * An avatar is a visual representation of a user or entity.
123
121
  *
124
122
  * - [Examples](https://atlassian.design/components/avatar/examples)
125
123
  * - [Code](https://atlassian.design/components/avatar/code)
126
- * - [Usage](https://atlassian.design/components/avatar/usage)
124
+ * - [Usage](https://atlassian.design/components/avatar/usage).
127
125
  */
128
126
  const Avatar = /*#__PURE__*/forwardRef(({
129
127
  analyticsContext,
@@ -182,7 +180,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
182
180
  analyticsEvent.context.push(context);
183
181
 
184
182
  /**
185
- * Replicating the logic in the `withAnalyticsEvents` HOC
183
+ * Replicating the logic in the `withAnalyticsEvents` HOC.
186
184
  */
187
185
  const clone = analyticsEvent.clone();
188
186
  if (clone) {
@@ -43,13 +43,11 @@ function getPresence(presence) {
43
43
  }
44
44
 
45
45
  /**
46
- * __Avatar presence__
47
- *
48
46
  * A presence shows an avatar’s availability.
49
47
  *
50
48
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
51
49
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
52
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
50
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
53
51
  */
54
52
  const AvatarPresence = ({
55
53
  borderColor,
@@ -66,8 +64,6 @@ const AvatarPresence = ({
66
64
  }, getPresence(presence)) : children);
67
65
  export default AvatarPresence;
68
66
  /**
69
- * __Presence wrapper__
70
- *
71
67
  * A presence wrapper is used internally to position presence ontop of the avatar.
72
68
  */
73
69
  export const PresenceWrapper = ({
@@ -80,6 +76,7 @@ export const PresenceWrapper = ({
80
76
  }) => {
81
77
  const position = appearance === 'square' ? -4 : ICON_OFFSET[size];
82
78
  return /*#__PURE__*/React.createElement("span", {
79
+ "aria-hidden": "true",
83
80
  "data-testid": testId && `${testId}--presence`,
84
81
  style: {
85
82
  pointerEvents: 'none',
@@ -42,12 +42,10 @@ function getStatus(status) {
42
42
  }
43
43
 
44
44
  /**
45
- * __Avatar status__
46
- *
47
45
  * An avatar status shows contextual information, such as if someone approves or declines something.
48
46
  *
49
47
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
50
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
48
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
51
49
  */
52
50
  const AvatarStatus = ({
53
51
  borderColor,
@@ -64,9 +62,7 @@ const AvatarStatus = ({
64
62
  }, getStatus(status)) : children);
65
63
  export default AvatarStatus;
66
64
  /**
67
- * Status wrapper**
68
- *
69
- * A status wrapper is used internally to position status ontop of the avatar.
65
+ * A status wrapper is used internally to position status on top of the avatar.
70
66
  */
71
67
  export const StatusWrapper = ({
72
68
  size,
@@ -78,6 +74,7 @@ export const StatusWrapper = ({
78
74
  }) => {
79
75
  const position = appearance === 'square' ? 0 : ICON_OFFSET[size];
80
76
  return /*#__PURE__*/React.createElement("span", {
77
+ "aria-hidden": "true",
81
78
  "data-testid": testId && `${testId}--status`,
82
79
  style: {
83
80
  position: 'absolute',
@@ -16,7 +16,7 @@ import { PresenceWrapper } from './Presence';
16
16
  import { StatusWrapper } from './Status';
17
17
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
18
18
  var packageName = "@atlaskit/avatar";
19
- var packageVersion = "21.4.5";
19
+ var packageVersion = "21.4.6";
20
20
 
21
21
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
22
22
 
@@ -35,13 +35,11 @@ var getStyles = function getStyles(css, _ref) {
35
35
  };
36
36
 
37
37
  /**
38
- * __Avatar__
39
- *
40
38
  * An avatar is a visual representation of a user or entity.
41
39
  *
42
40
  * - [Examples](https://atlassian.design/components/avatar/examples)
43
41
  * - [Code](https://atlassian.design/components/avatar/code)
44
- * - [Usage](https://atlassian.design/components/avatar/usage)
42
+ * - [Usage](https://atlassian.design/components/avatar/usage).
45
43
  */
46
44
  var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
47
45
  var analyticsContext = _ref2.analyticsContext,
@@ -100,7 +98,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
100
98
  analyticsEvent.context.push(context);
101
99
 
102
100
  /**
103
- * Replicating the logic in the `withAnalyticsEvents` HOC
101
+ * Replicating the logic in the `withAnalyticsEvents` HOC.
104
102
  */
105
103
  var clone = analyticsEvent.clone();
106
104
  if (clone) {
@@ -43,13 +43,11 @@ function getPresence(presence) {
43
43
  }
44
44
 
45
45
  /**
46
- * __Avatar presence__
47
- *
48
46
  * A presence shows an avatar’s availability.
49
47
  *
50
48
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
51
49
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
52
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
50
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
53
51
  */
54
52
  var AvatarPresence = function AvatarPresence(_ref) {
55
53
  var borderColor = _ref.borderColor,
@@ -67,8 +65,6 @@ var AvatarPresence = function AvatarPresence(_ref) {
67
65
  };
68
66
  export default AvatarPresence;
69
67
  /**
70
- * __Presence wrapper__
71
- *
72
68
  * A presence wrapper is used internally to position presence ontop of the avatar.
73
69
  */
74
70
  export var PresenceWrapper = function PresenceWrapper(_ref2) {
@@ -80,6 +76,7 @@ export var PresenceWrapper = function PresenceWrapper(_ref2) {
80
76
  testId = _ref2.testId;
81
77
  var position = appearance === 'square' ? -4 : ICON_OFFSET[size];
82
78
  return /*#__PURE__*/React.createElement("span", {
79
+ "aria-hidden": "true",
83
80
  "data-testid": testId && "".concat(testId, "--presence"),
84
81
  style: {
85
82
  pointerEvents: 'none',
@@ -42,12 +42,10 @@ function getStatus(status) {
42
42
  }
43
43
 
44
44
  /**
45
- * __Avatar status__
46
- *
47
45
  * An avatar status shows contextual information, such as if someone approves or declines something.
48
46
  *
49
47
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
50
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
48
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
51
49
  */
52
50
  var AvatarStatus = function AvatarStatus(_ref) {
53
51
  var borderColor = _ref.borderColor,
@@ -65,9 +63,7 @@ var AvatarStatus = function AvatarStatus(_ref) {
65
63
  };
66
64
  export default AvatarStatus;
67
65
  /**
68
- * Status wrapper**
69
- *
70
- * A status wrapper is used internally to position status ontop of the avatar.
66
+ * A status wrapper is used internally to position status on top of the avatar.
71
67
  */
72
68
  export var StatusWrapper = function StatusWrapper(_ref2) {
73
69
  var size = _ref2.size,
@@ -78,6 +74,7 @@ export var StatusWrapper = function StatusWrapper(_ref2) {
78
74
  testId = _ref2.testId;
79
75
  var position = appearance === 'square' ? 0 : ICON_OFFSET[size];
80
76
  return /*#__PURE__*/React.createElement("span", {
77
+ "aria-hidden": "true",
81
78
  "data-testid": testId && "".concat(testId, "--status"),
82
79
  style: {
83
80
  position: 'absolute',
@@ -4,7 +4,6 @@ import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } f
4
4
  export interface CustomAvatarProps {
5
5
  /**
6
6
  * This is used in render props so is okay to be defined.
7
- * eslint-disable-next-line consistent-props-definitions
8
7
  */
9
8
  'aria-label'?: string;
10
9
  tabIndex?: number;
@@ -99,13 +98,11 @@ export interface AvatarPropTypes {
99
98
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
100
99
  }
101
100
  /**
102
- * __Avatar__
103
- *
104
101
  * An avatar is a visual representation of a user or entity.
105
102
  *
106
103
  * - [Examples](https://atlassian.design/components/avatar/examples)
107
104
  * - [Code](https://atlassian.design/components/avatar/code)
108
- * - [Usage](https://atlassian.design/components/avatar/usage)
105
+ * - [Usage](https://atlassian.design/components/avatar/usage).
109
106
  */
110
107
  declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
111
108
  export default Avatar;
@@ -12,22 +12,16 @@ export interface PresenceProps {
12
12
  */
13
13
  children?: ReactNode;
14
14
  /**
15
- * The type of presence indicator to show
15
+ * The type of presence indicator to show.
16
16
  */
17
17
  presence?: Presence;
18
- /**
19
- * Test Id
20
- */
21
- testId?: string;
22
18
  }
23
19
  /**
24
- * __Avatar presence__
25
- *
26
20
  * A presence shows an avatar’s availability.
27
21
  *
28
22
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
29
23
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
30
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
24
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
31
25
  */
32
26
  declare const AvatarPresence: FC<PresenceProps>;
33
27
  export default AvatarPresence;
@@ -37,8 +31,6 @@ export interface PresenceWrapperProps extends PresenceProps {
37
31
  testId?: string;
38
32
  }
39
33
  /**
40
- * __Presence wrapper__
41
- *
42
34
  * A presence wrapper is used internally to position presence ontop of the avatar.
43
35
  */
44
36
  export declare const PresenceWrapper: FC<PresenceWrapperProps>;
@@ -12,30 +12,24 @@ export interface StatusProps {
12
12
  */
13
13
  children?: ReactNode;
14
14
  /**
15
- * Content to use as a custom status indicator. Not needed if consuming
16
- * `Status` separate to `Avatar`.
15
+ * The type of status indicator to show.
17
16
  */
18
17
  status?: Status;
19
18
  }
20
19
  /**
21
- * __Avatar status__
22
- *
23
20
  * An avatar status shows contextual information, such as if someone approves or declines something.
24
21
  *
25
22
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
26
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
23
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
27
24
  */
28
25
  declare const AvatarStatus: FC<StatusProps>;
29
26
  export default AvatarStatus;
30
27
  interface StatusWrapperProps extends StatusProps {
31
28
  appearance: AppearanceType;
32
29
  size: IndicatorSizeType;
33
- children: ReactNode;
34
30
  testId?: string;
35
31
  }
36
32
  /**
37
- * Status wrapper**
38
- *
39
- * A status wrapper is used internally to position status ontop of the avatar.
33
+ * A status wrapper is used internally to position status on top of the avatar.
40
34
  */
41
35
  export declare const StatusWrapper: FC<StatusWrapperProps>;
@@ -4,7 +4,6 @@ import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } f
4
4
  export interface CustomAvatarProps {
5
5
  /**
6
6
  * This is used in render props so is okay to be defined.
7
- * eslint-disable-next-line consistent-props-definitions
8
7
  */
9
8
  'aria-label'?: string;
10
9
  tabIndex?: number;
@@ -99,13 +98,11 @@ export interface AvatarPropTypes {
99
98
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
100
99
  }
101
100
  /**
102
- * __Avatar__
103
- *
104
101
  * An avatar is a visual representation of a user or entity.
105
102
  *
106
103
  * - [Examples](https://atlassian.design/components/avatar/examples)
107
104
  * - [Code](https://atlassian.design/components/avatar/code)
108
- * - [Usage](https://atlassian.design/components/avatar/usage)
105
+ * - [Usage](https://atlassian.design/components/avatar/usage).
109
106
  */
110
107
  declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
111
108
  export default Avatar;
@@ -12,22 +12,16 @@ export interface PresenceProps {
12
12
  */
13
13
  children?: ReactNode;
14
14
  /**
15
- * The type of presence indicator to show
15
+ * The type of presence indicator to show.
16
16
  */
17
17
  presence?: Presence;
18
- /**
19
- * Test Id
20
- */
21
- testId?: string;
22
18
  }
23
19
  /**
24
- * __Avatar presence__
25
- *
26
20
  * A presence shows an avatar’s availability.
27
21
  *
28
22
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
29
23
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
30
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
24
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
31
25
  */
32
26
  declare const AvatarPresence: FC<PresenceProps>;
33
27
  export default AvatarPresence;
@@ -37,8 +31,6 @@ export interface PresenceWrapperProps extends PresenceProps {
37
31
  testId?: string;
38
32
  }
39
33
  /**
40
- * __Presence wrapper__
41
- *
42
34
  * A presence wrapper is used internally to position presence ontop of the avatar.
43
35
  */
44
36
  export declare const PresenceWrapper: FC<PresenceWrapperProps>;
@@ -12,30 +12,24 @@ export interface StatusProps {
12
12
  */
13
13
  children?: ReactNode;
14
14
  /**
15
- * Content to use as a custom status indicator. Not needed if consuming
16
- * `Status` separate to `Avatar`.
15
+ * The type of status indicator to show.
17
16
  */
18
17
  status?: Status;
19
18
  }
20
19
  /**
21
- * __Avatar status__
22
- *
23
20
  * An avatar status shows contextual information, such as if someone approves or declines something.
24
21
  *
25
22
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
26
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
23
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
27
24
  */
28
25
  declare const AvatarStatus: FC<StatusProps>;
29
26
  export default AvatarStatus;
30
27
  interface StatusWrapperProps extends StatusProps {
31
28
  appearance: AppearanceType;
32
29
  size: IndicatorSizeType;
33
- children: ReactNode;
34
30
  testId?: string;
35
31
  }
36
32
  /**
37
- * Status wrapper**
38
- *
39
- * A status wrapper is used internally to position status ontop of the avatar.
33
+ * A status wrapper is used internally to position status on top of the avatar.
40
34
  */
41
35
  export declare const StatusWrapper: FC<StatusWrapperProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "21.4.5",
3
+ "version": "21.4.6",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/analytics-next": "^9.1.0",
47
47
  "@atlaskit/icon": "^22.0.0",
48
48
  "@atlaskit/theme": "^12.6.0",
49
- "@atlaskit/tokens": "^1.34.0",
49
+ "@atlaskit/tokens": "^1.35.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@emotion/react": "^11.7.1",
52
52
  "@emotion/serialize": "^1.1.0",