@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 +6 -0
- package/dist/cjs/Avatar.js +3 -5
- package/dist/cjs/Presence.js +2 -5
- package/dist/cjs/Status.js +3 -6
- package/dist/es2019/Avatar.js +3 -5
- package/dist/es2019/Presence.js +2 -5
- package/dist/es2019/Status.js +3 -6
- package/dist/esm/Avatar.js +3 -5
- package/dist/esm/Presence.js +2 -5
- package/dist/esm/Status.js +3 -6
- package/dist/types/Avatar.d.ts +1 -4
- package/dist/types/Presence.d.ts +2 -10
- package/dist/types/Status.d.ts +3 -9
- package/dist/types-ts4.5/Avatar.d.ts +1 -4
- package/dist/types-ts4.5/Presence.d.ts +2 -10
- package/dist/types-ts4.5/Status.d.ts +3 -9
- package/package.json +2 -2
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
|
package/dist/cjs/Avatar.js
CHANGED
|
@@ -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.
|
|
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) {
|
package/dist/cjs/Presence.js
CHANGED
|
@@ -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',
|
package/dist/cjs/Status.js
CHANGED
|
@@ -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
|
-
*
|
|
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',
|
package/dist/es2019/Avatar.js
CHANGED
|
@@ -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.
|
|
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) {
|
package/dist/es2019/Presence.js
CHANGED
|
@@ -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',
|
package/dist/es2019/Status.js
CHANGED
|
@@ -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
|
-
*
|
|
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',
|
package/dist/esm/Avatar.js
CHANGED
|
@@ -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.
|
|
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) {
|
package/dist/esm/Presence.js
CHANGED
|
@@ -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',
|
package/dist/esm/Status.js
CHANGED
|
@@ -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
|
-
*
|
|
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',
|
package/dist/types/Avatar.d.ts
CHANGED
|
@@ -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;
|
package/dist/types/Presence.d.ts
CHANGED
|
@@ -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>;
|
package/dist/types/Status.d.ts
CHANGED
|
@@ -12,30 +12,24 @@ export interface StatusProps {
|
|
|
12
12
|
*/
|
|
13
13
|
children?: ReactNode;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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.
|
|
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.
|
|
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",
|