@atlaskit/avatar 25.0.2 → 25.0.4

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/avatar.js +5 -3
  3. package/dist/cjs/internal/avatar-image.js +7 -20
  4. package/dist/es2019/avatar.js +4 -3
  5. package/dist/es2019/internal/avatar-image.js +10 -23
  6. package/dist/esm/avatar.js +5 -3
  7. package/dist/esm/internal/avatar-image.js +10 -23
  8. package/dist/types/avatar.d.ts +4 -0
  9. package/dist/types-ts4.5/avatar.d.ts +4 -0
  10. package/package.json +15 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 25.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#146865](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146865)
8
+ [`944d9adf63995`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/944d9adf63995) -
9
+ add isDecorative attribute in the Avatar
10
+
11
+ ## 25.0.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [#142181](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142181)
16
+ [`d6934885b334e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d6934885b334e) -
17
+ Fixed some new icons that were enabled with the incorrect feature flag.
18
+
3
19
  ## 25.0.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/avatar.js CHANGED
@@ -25,7 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
25
25
  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; }
26
26
  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; }
27
27
  var packageName = "@atlaskit/avatar";
28
- var packageVersion = "25.0.2";
28
+ var packageVersion = "25.0.4";
29
29
  var containerStyles = null;
30
30
 
31
31
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -58,7 +58,9 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
58
58
  target = _ref.target,
59
59
  testId = _ref.testId,
60
60
  _ref$as = _ref.as,
61
- AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as;
61
+ AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
62
+ _ref$isDecorative = _ref.isDecorative,
63
+ isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative;
62
64
  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
63
65
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
64
66
  var context = (0, _context.useAvatarContext)();
@@ -118,7 +120,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
118
120
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
119
121
  "data-testid": testId,
120
122
  role: containerShouldBeImage ? 'img' : undefined,
121
- "aria-labelledby": containerShouldBeImage ? labelId : undefined,
123
+ "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
122
124
  style: {
123
125
  zIndex: stackIndex
124
126
  },
package/dist/cjs/internal/avatar-image.js CHANGED
@@ -14,10 +14,7 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var _person = _interopRequireDefault(require("@atlaskit/icon/core/migration/person"));
16
16
  var _releaseShip = _interopRequireDefault(require("@atlaskit/icon/core/migration/release--ship"));
17
- var _person2 = _interopRequireDefault(require("@atlaskit/icon/core/person"));
18
- var _release = _interopRequireDefault(require("@atlaskit/icon/core/release"));
19
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
- var _colors = require("@atlaskit/theme/colors");
21
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
20
  var styles = {
@@ -68,28 +65,18 @@ var AvatarImage = function AvatarImage(_ref) {
68
65
  if (!src || hasImageErrored) {
69
66
  return /*#__PURE__*/React.createElement("span", {
70
67
  className: (0, _runtime.ax)([styles.icon, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
71
- }, appearance === 'circle' ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(_person2.default, {
68
+ }, appearance === 'circle' ? /*#__PURE__*/React.createElement(_person.default, {
72
69
  label: alt,
73
- color: "var(--ds-icon-subtle, #626F86)",
70
+ color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
74
71
  testId: testId && "".concat(testId, "--person"),
75
- spacing: "spacious"
76
- }) : /*#__PURE__*/React.createElement(_person.default, {
77
- label: alt,
78
- color: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
79
- LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
80
- testId: testId && "".concat(testId, "--person"),
81
- spacing: "spacious"
82
- }) : (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(_release.default, {
83
- label: alt,
84
- color: "var(--ds-icon-subtle, #626F86)",
85
- testId: testId && "".concat(testId, "--ship"),
86
- spacing: "spacious"
72
+ spacing: "spacious",
73
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
87
74
  }) : /*#__PURE__*/React.createElement(_releaseShip.default, {
88
75
  label: alt,
89
- color: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
90
- LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
76
+ color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
91
77
  testId: testId && "".concat(testId, "--ship"),
92
- spacing: "spacious"
78
+ spacing: "spacious",
79
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
93
80
  }));
94
81
  }
95
82
  return /*#__PURE__*/React.createElement("img", {
package/dist/es2019/avatar.js CHANGED
@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
12
12
  import { StatusWrapper } from './status';
13
13
  import { getCustomElement } from './utilities';
14
14
  const packageName = "@atlaskit/avatar";
15
- const packageVersion = "25.0.2";
15
+ const packageVersion = "25.0.4";
16
16
  const containerStyles = null;
17
17
 
18
18
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -43,7 +43,8 @@ const Avatar = /*#__PURE__*/forwardRef(({
43
43
  status,
44
44
  target,
45
45
  testId,
46
- as: AvatarContainer = 'div'
46
+ as: AvatarContainer = 'div',
47
+ isDecorative = false
47
48
  }, ref) => {
48
49
  const {
49
50
  createAnalyticsEvent
@@ -106,7 +107,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
106
107
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
107
108
  "data-testid": testId,
108
109
  role: containerShouldBeImage ? 'img' : undefined,
109
- "aria-labelledby": containerShouldBeImage ? labelId : undefined,
110
+ "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
110
111
  style: {
111
112
  zIndex: stackIndex
112
113
  },
package/dist/es2019/internal/avatar-image.js CHANGED
@@ -3,12 +3,9 @@ import "./avatar-image.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useEffect, useState } from 'react';
6
- import PersonIconLegacy from '@atlaskit/icon/core/migration/person';
7
- import ReleaseIconMigration from '@atlaskit/icon/core/migration/release--ship';
8
- import PersonIcon from '@atlaskit/icon/core/person';
9
- import ReleaseIcon from '@atlaskit/icon/core/release';
6
+ import PersonIcon from '@atlaskit/icon/core/migration/person';
7
+ import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
10
8
  import { fg } from '@atlaskit/platform-feature-flags';
11
- import { N0, N90 } from '@atlaskit/theme/colors';
12
9
  const styles = {
13
10
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
14
11
  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
@@ -54,28 +51,18 @@ const AvatarImage = ({
54
51
  if (!src || hasImageErrored) {
55
52
  return /*#__PURE__*/React.createElement("span", {
56
53
  className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
57
- }, appearance === 'circle' ? fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(PersonIcon, {
54
+ }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
58
55
  label: alt,
59
- color: "var(--ds-icon-subtle, #626F86)",
56
+ color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
60
57
  testId: testId && `${testId}--person`,
61
- spacing: "spacious"
62
- }) : /*#__PURE__*/React.createElement(PersonIconLegacy, {
58
+ spacing: "spacious",
59
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
60
+ }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
63
61
  label: alt,
64
- color: `var(--ds-icon-inverse, ${N0})`,
65
- LEGACY_secondaryColor: `var(--ds-icon-subtle, ${N90})`,
66
- testId: testId && `${testId}--person`,
67
- spacing: "spacious"
68
- }) : fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(ReleaseIcon, {
69
- label: alt,
70
- color: "var(--ds-icon-subtle, #626F86)",
71
- testId: testId && `${testId}--ship`,
72
- spacing: "spacious"
73
- }) : /*#__PURE__*/React.createElement(ReleaseIconMigration, {
74
- label: alt,
75
- color: `var(--ds-icon-inverse, ${N0})`,
76
- LEGACY_secondaryColor: `var(--ds-icon-subtle, ${N90})`,
62
+ color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
77
63
  testId: testId && `${testId}--ship`,
78
- spacing: "spacious"
64
+ spacing: "spacious",
65
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
79
66
  }));
80
67
  }
81
68
  return /*#__PURE__*/React.createElement("img", {
package/dist/esm/avatar.js CHANGED
@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
15
15
  import { StatusWrapper } from './status';
16
16
  import { getCustomElement } from './utilities';
17
17
  var packageName = "@atlaskit/avatar";
18
- var packageVersion = "25.0.2";
18
+ var packageVersion = "25.0.4";
19
19
  var containerStyles = null;
20
20
 
21
21
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -48,7 +48,9 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
48
48
  target = _ref.target,
49
49
  testId = _ref.testId,
50
50
  _ref$as = _ref.as,
51
- AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as;
51
+ AvatarContainer = _ref$as === void 0 ? 'div' : _ref$as,
52
+ _ref$isDecorative = _ref.isDecorative,
53
+ isDecorative = _ref$isDecorative === void 0 ? false : _ref$isDecorative;
52
54
  var _useAnalyticsEvents = useAnalyticsEvents(),
53
55
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
54
56
  var context = useAvatarContext();
@@ -108,7 +110,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
108
110
  }, /*#__PURE__*/React.createElement(AvatarContainer, {
109
111
  "data-testid": testId,
110
112
  role: containerShouldBeImage ? 'img' : undefined,
111
- "aria-labelledby": containerShouldBeImage ? labelId : undefined,
113
+ "aria-labelledby": containerShouldBeImage && !isDecorative ? labelId : undefined,
112
114
  style: {
113
115
  zIndex: stackIndex
114
116
  },
package/dist/esm/internal/avatar-image.js CHANGED
@@ -4,12 +4,9 @@ import "./avatar-image.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useEffect, useState } from 'react';
7
- import PersonIconLegacy from '@atlaskit/icon/core/migration/person';
8
- import ReleaseIconMigration from '@atlaskit/icon/core/migration/release--ship';
9
- import PersonIcon from '@atlaskit/icon/core/person';
10
- import ReleaseIcon from '@atlaskit/icon/core/release';
7
+ import PersonIcon from '@atlaskit/icon/core/migration/person';
8
+ import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
11
9
  import { fg } from '@atlaskit/platform-feature-flags';
12
- import { N0, N90 } from '@atlaskit/theme/colors';
13
10
  var styles = {
14
11
  image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
15
12
  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
@@ -58,28 +55,18 @@ var AvatarImage = function AvatarImage(_ref) {
58
55
  if (!src || hasImageErrored) {
59
56
  return /*#__PURE__*/React.createElement("span", {
60
57
  className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
61
- }, appearance === 'circle' ? fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(PersonIcon, {
58
+ }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
62
59
  label: alt,
63
- color: "var(--ds-icon-subtle, #626F86)",
60
+ color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
64
61
  testId: testId && "".concat(testId, "--person"),
65
- spacing: "spacious"
66
- }) : /*#__PURE__*/React.createElement(PersonIconLegacy, {
62
+ spacing: "spacious",
63
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
64
+ }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
67
65
  label: alt,
68
- color: "var(--ds-icon-inverse, ".concat(N0, ")"),
69
- LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
70
- testId: testId && "".concat(testId, "--person"),
71
- spacing: "spacious"
72
- }) : fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(ReleaseIcon, {
73
- label: alt,
74
- color: "var(--ds-icon-subtle, #626F86)",
75
- testId: testId && "".concat(testId, "--ship"),
76
- spacing: "spacious"
77
- }) : /*#__PURE__*/React.createElement(ReleaseIconMigration, {
78
- label: alt,
79
- color: "var(--ds-icon-inverse, ".concat(N0, ")"),
80
- LEGACY_secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
66
+ color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
81
67
  testId: testId && "".concat(testId, "--ship"),
82
- spacing: "spacious"
68
+ spacing: "spacious",
69
+ LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
83
70
  }));
84
71
  }
85
72
  return /*#__PURE__*/React.createElement("img", {
package/dist/types/avatar.d.ts CHANGED
@@ -90,6 +90,10 @@ export interface AvatarPropTypes {
90
90
  * be used to wrap the element.
91
91
  */
92
92
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
93
+ /**
94
+ * whether disable aria-labelledby for avatar img
95
+ */
96
+ isDecorative?: boolean;
93
97
  }
94
98
  /**
95
99
  * __Avatar__
package/dist/types-ts4.5/avatar.d.ts CHANGED
@@ -90,6 +90,10 @@ export interface AvatarPropTypes {
90
90
  * be used to wrap the element.
91
91
  */
92
92
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
93
+ /**
94
+ * whether disable aria-labelledby for avatar img
95
+ */
96
+ isDecorative?: boolean;
93
97
  }
94
98
  /**
95
99
  * __Avatar__
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "25.0.2",
3
+ "version": "25.0.4",
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,11 +46,11 @@
46
46
  "@atlaskit/css": "^0.10.0",
47
47
  "@atlaskit/ds-lib": "^4.0.0",
48
48
  "@atlaskit/focus-ring": "^3.0.0",
49
- "@atlaskit/icon": "^25.0.0",
49
+ "@atlaskit/icon": "^25.6.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
- "@atlaskit/primitives": "^14.2.0",
51
+ "@atlaskit/primitives": "^14.4.0",
52
52
  "@atlaskit/theme": "^18.0.0",
53
- "@atlaskit/tokens": "^4.5.0",
53
+ "@atlaskit/tokens": "^4.8.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@compiled/react": "^0.18.3"
56
56
  },
@@ -58,21 +58,21 @@
58
58
  "react": "^18.2.0"
59
59
  },
60
60
  "devDependencies": {
61
- "@af/accessibility-testing": "^2.0.0",
62
- "@af/integration-testing": "^0.5.0",
63
- "@af/visual-regression": "^1.3.0",
64
- "@atlaskit/button": "^21.1.0",
65
- "@atlaskit/code": "^16.0.0",
61
+ "@af/accessibility-testing": "workspace:^",
62
+ "@af/integration-testing": "workspace:^",
63
+ "@af/visual-regression": "workspace:^",
64
+ "@atlaskit/button": "^23.0.0",
65
+ "@atlaskit/code": "^17.1.0",
66
66
  "@atlaskit/docs": "^10.0.0",
67
67
  "@atlaskit/form": "^12.0.0",
68
- "@atlaskit/heading": "^5.1.0",
69
- "@atlaskit/link": "^3.0.0",
68
+ "@atlaskit/heading": "^5.2.0",
69
+ "@atlaskit/link": "^3.1.0",
70
70
  "@atlaskit/range": "^9.0.0",
71
71
  "@atlaskit/section-message": "^8.2.0",
72
- "@atlaskit/ssr": "^0.4.0",
73
72
  "@atlaskit/textfield": "^8.0.0",
74
73
  "@atlaskit/tooltip": "^20.0.0",
75
74
  "@atlassian/feature-flags-test-utils": "^0.3.0",
75
+ "@atlassian/ssr-tests": "^0.2.0",
76
76
  "@testing-library/react": "^13.4.0",
77
77
  "@testing-library/user-event": "^14.4.3",
78
78
  "jest-in-case": "^1.0.2",
@@ -111,6 +111,9 @@
111
111
  },
112
112
  "platform-component-visual-refresh": {
113
113
  "type": "boolean"
114
+ },
115
+ "platform-visual-refresh-icons": {
116
+ "type": "boolean"
114
117
  }
115
118
  }
116
119
  }