@atlaskit/avatar 23.0.0 → 24.0.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 (14) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/avatar-item.js +115 -98
  3. package/dist/cjs/avatar.js +1 -1
  4. package/dist/es2019/avatar-item.js +107 -130
  5. package/dist/es2019/avatar.js +1 -1
  6. package/dist/esm/avatar-item.js +117 -102
  7. package/dist/esm/avatar.js +1 -1
  8. package/dist/types/avatar-item.d.ts +1 -19
  9. package/dist/types/entry-points/avatar-item.d.ts +1 -1
  10. package/dist/types/index.d.ts +1 -1
  11. package/dist/types-ts4.5/avatar-item.d.ts +1 -19
  12. package/dist/types-ts4.5/entry-points/avatar-item.d.ts +1 -1
  13. package/dist/types-ts4.5/index.d.ts +1 -1
  14. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 24.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#119746](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119746)
8
+ [`42617a5e15cd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42617a5e15cd2) -
9
+ Removes the `children` prop from `AvatarItem`, along with the `CustomAvatarItemProps` type.
10
+ Limiting the amount of customization that can be applied. This change is in preparation for the
11
+ migration from `@emotion/react` to Compiled CSS-in-JS.
12
+
3
13
  ## 23.0.0
4
14
 
5
15
  ### Major Changes
package/dist/cjs/avatar-item.js CHANGED
@@ -5,55 +5,92 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
10
  var _react = require("react");
11
11
  var _react2 = require("@emotion/react");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
13
  var _primitives = require("@atlaskit/primitives");
14
14
  var _colors = require("@atlaskit/theme/colors");
15
- var _constants = require("@atlaskit/theme/constants");
16
- var _constants2 = require("./constants");
17
15
  var _utilities = require("./utilities");
18
- var _templateObject;
19
16
  /**
20
17
  * @jsxRuntime classic
21
18
  * @jsx jsx
22
19
  */
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
- 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; }
25
- 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; }
26
- var avatarItemStyles = (0, _react2.css)({
27
- minWidth: 0,
28
- maxWidth: '100%',
29
- flex: '1 1 100%',
30
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
31
- lineHeight: '1.4',
32
- paddingInlineStart: "var(--ds-space-100, 8px)"
33
- });
34
- var secondaryTextOldStyles = (0, _react2.css)({
35
- color: "var(--ds-text-subtlest, #626F86)",
36
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
37
- fontSize: '0.85em'
38
- });
39
- var baseTextStyles = (0, _react2.css)({
40
- display: 'block',
41
- color: "var(--ds-text, #172B4D)"
42
- });
43
- var truncationStyles = (0, _react2.css)({
44
- overflowX: 'hidden',
45
- textOverflow: 'ellipsis',
46
- whiteSpace: 'nowrap'
47
- });
48
- var getStyles = function getStyles(css, _ref) {
49
- var backgroundColor = _ref.backgroundColor,
50
- isInteractive = _ref.isInteractive,
51
- isDisabled = _ref.isDisabled;
52
- return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
53
- css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\talign-items: center;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", "px;\n\t\tborder: ", "px solid transparent;\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tfont-size: inherit;\n\t\tfont-style: normal;\n\t\tfont-weight: ", ";\n\t\tline-height: 1;\n\t\toutline: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\t\ttext-align: left;\n\t\ttext-decoration: none;\n\t\twidth: 100%;\n\n\t\t", "\n\n\t\t", "\n\t"])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-font-weight-regular, 400)", "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n "))
54
- );
55
- };
56
20
 
21
+ var bgColorCssVar = '--avatar-item-bg-color';
22
+ var styles = {
23
+ root: (0, _react2.css)({
24
+ display: 'flex',
25
+ boxSizing: 'border-box',
26
+ width: '100%',
27
+ alignItems: 'center',
28
+ backgroundColor: "var(".concat(bgColorCssVar, ")"),
29
+ borderColor: 'transparent',
30
+ borderRadius: '3px',
31
+ borderStyle: 'solid',
32
+ borderWidth: "var(--ds-border-width-outline, 2px)",
33
+ color: 'inherit',
34
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
35
+ fontSize: 'inherit',
36
+ fontStyle: 'normal',
37
+ fontWeight: "var(--ds-font-weight-regular, 400)",
38
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
39
+ lineHeight: '1',
40
+ marginBlockEnd: "var(--ds-space-0, 0px)",
41
+ marginBlockStart: "var(--ds-space-0, 0px)",
42
+ marginInlineEnd: "var(--ds-space-0, 0px)",
43
+ marginInlineStart: "var(--ds-space-0, 0px)",
44
+ outline: 'none',
45
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
46
+ paddingBlockStart: "var(--ds-space-050, 4px)",
47
+ paddingInlineEnd: "var(--ds-space-050, 4px)",
48
+ paddingInlineStart: "var(--ds-space-050, 4px)",
49
+ textAlign: 'left',
50
+ textDecoration: 'none'
51
+ }),
52
+ rootDisabled: (0, _react2.css)({
53
+ cursor: 'not-allowed',
54
+ opacity: "var(--ds-opacity-disabled, 0.5)",
55
+ pointerEvents: 'none'
56
+ }),
57
+ rootInteractive: (0, _react2.css)({
58
+ '&:hover': {
59
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
60
+ cursor: 'pointer',
61
+ textDecoration: 'none'
62
+ },
63
+ '&:focus': {
64
+ borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
65
+ outline: 'none'
66
+ },
67
+ '&:active': {
68
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
69
+ }
70
+ }),
71
+ avatarItem: (0, _react2.css)({
72
+ minWidth: 0,
73
+ maxWidth: '100%',
74
+ flex: '1 1 100%',
75
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
76
+ lineHeight: '1.4',
77
+ paddingInlineStart: "var(--ds-space-100, 8px)"
78
+ }),
79
+ baseText: (0, _react2.css)({
80
+ display: 'block',
81
+ color: "var(--ds-text, #172B4D)"
82
+ }),
83
+ truncation: (0, _react2.css)({
84
+ overflowX: 'hidden',
85
+ textOverflow: 'ellipsis',
86
+ whiteSpace: 'nowrap'
87
+ }),
88
+ secondaryTextLegacy: (0, _react2.css)({
89
+ color: "var(--ds-text-subtlest, #626F86)",
90
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
91
+ fontSize: '0.85em'
92
+ })
93
+ };
57
94
  /**
58
95
  * __Avatar item__
59
96
  *
@@ -62,67 +99,47 @@ var getStyles = function getStyles(css, _ref) {
62
99
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
63
100
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
64
101
  */
65
- var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
66
- var avatar = _ref2.avatar,
67
- _ref2$backgroundColor = _ref2.backgroundColor,
68
- backgroundColor = _ref2$backgroundColor === void 0 ? 'transparent' : _ref2$backgroundColor,
69
- children = _ref2.children,
70
- isTruncationDisabled = _ref2.isTruncationDisabled,
71
- href = _ref2.href,
72
- isDisabled = _ref2.isDisabled,
73
- onClick = _ref2.onClick,
74
- primaryText = _ref2.primaryText,
75
- secondaryText = _ref2.secondaryText,
76
- target = _ref2.target,
77
- testId = _ref2.testId,
78
- label = _ref2.label;
79
- var getTestId = function getTestId(testId, children) {
80
- return !children ? {
81
- 'data-testid': "".concat(testId, "--itemInner")
82
- } : {
83
- testId: "".concat(testId, "--itemInner")
84
- };
85
- };
86
- var componentProps = function componentProps() {
87
- if (isDisabled) {
88
- return {
89
- disabled: true
90
- };
91
- }
92
-
93
- // return only relevant props for either anchor or button elements
94
- return _objectSpread(_objectSpread({}, href && (0, _utilities.getLinkProps)(href, target)), onClick && !href ? (0, _utilities.getButtonProps)(onClick) : {
95
- onClick: onClick
96
- });
97
- };
98
- return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
99
- var css = _ref3.css;
100
- var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
101
- ref: ref,
102
- className: getStyles(css, {
103
- backgroundColor: backgroundColor,
104
- isInteractive: Boolean(onClick || href),
105
- isDisabled: isDisabled
106
- })
107
- }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
108
- 'aria-label': label
109
- }), {}, {
110
- children: (0, _react2.jsx)(_react.Fragment, null, avatar, (0, _react2.jsx)("div", {
111
- css: avatarItemStyles
112
- }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
113
- maxLines: isTruncationDisabled ? undefined : 1
114
- }, primaryText), (0, _react2.jsx)(_primitives.Text, {
115
- color: "color.text.subtlest",
116
- maxLines: isTruncationDisabled ? undefined : 1,
117
- size: "UNSAFE_small"
118
- }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
119
- css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
120
- }, primaryText), (0, _react2.jsx)("span", {
121
- css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
122
- }, secondaryText))))
123
- });
124
- return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
125
- });
102
+ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
103
+ var avatar = _ref.avatar,
104
+ _ref$backgroundColor = _ref.backgroundColor,
105
+ backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
106
+ isTruncationDisabled = _ref.isTruncationDisabled,
107
+ href = _ref.href,
108
+ isDisabled = _ref.isDisabled,
109
+ onClick = _ref.onClick,
110
+ primaryText = _ref.primaryText,
111
+ secondaryText = _ref.secondaryText,
112
+ target = _ref.target,
113
+ testId = _ref.testId,
114
+ label = _ref.label;
115
+ var Container = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
116
+ var isInteractive = Boolean(onClick || href);
117
+ return (0, _react2.jsx)(Container, (0, _extends2.default)({
118
+ css: [styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled],
119
+ style: (0, _defineProperty2.default)({}, bgColorCssVar, backgroundColor),
120
+ ref: ref,
121
+ "aria-label": isInteractive ? label : undefined,
122
+ onClick: onClick,
123
+ disabled: isDisabled,
124
+ "data-testid": testId ? "".concat(testId, "--itemInner") : undefined,
125
+ type: Container === 'button' ? 'button' : undefined
126
+ }, href && {
127
+ href: href,
128
+ target: target,
129
+ rel: target === '_blank' ? 'noopener noreferrer' : undefined
130
+ }), avatar, (0, _react2.jsx)("div", {
131
+ css: styles.avatarItem
132
+ }, (0, _platformFeatureFlags.fg)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
133
+ maxLines: isTruncationDisabled ? undefined : 1
134
+ }, primaryText), (0, _react2.jsx)(_primitives.Text, {
135
+ color: "color.text.subtlest",
136
+ maxLines: isTruncationDisabled ? undefined : 1,
137
+ size: "UNSAFE_small"
138
+ }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
139
+ css: [styles.baseText, !isTruncationDisabled && styles.truncation]
140
+ }, primaryText), (0, _react2.jsx)("span", {
141
+ css: [styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation]
142
+ }, secondaryText))));
126
143
  });
127
144
  AvatarItem.displayName = 'AvatarItem';
128
145
  var _default = exports.default = AvatarItem;
package/dist/cjs/avatar.js CHANGED
@@ -22,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
22
22
  * @jsx jsx
23
23
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
24
  var packageName = "@atlaskit/avatar";
25
- var packageVersion = "23.0.0";
25
+ var packageVersion = "24.0.0";
26
26
  var containerStyles = (0, _react2.css)({
27
27
  display: 'inline-block',
28
28
  position: 'relative',
package/dist/es2019/avatar-item.js CHANGED
@@ -1,88 +1,87 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /**
2
3
  * @jsxRuntime classic
3
4
  * @jsx jsx
4
5
  */
5
- import { createElement, forwardRef, Fragment } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { ClassNames, css, jsx } from '@emotion/react';
6
+ import { forwardRef, Fragment } from 'react';
7
+ import { css, jsx } from '@emotion/react';
9
8
  import { fg } from '@atlaskit/platform-feature-flags';
10
9
  import { Text } from '@atlaskit/primitives';
11
10
  import { B200, B50, N30 } from '@atlaskit/theme/colors';
12
- import { borderRadius } from '@atlaskit/theme/constants';
13
- import { BORDER_WIDTH } from './constants';
14
- import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
15
- const avatarItemStyles = css({
16
- minWidth: 0,
17
- maxWidth: '100%',
18
- flex: '1 1 100%',
19
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
20
- lineHeight: '1.4',
21
- paddingInlineStart: "var(--ds-space-100, 8px)"
22
- });
23
- const secondaryTextOldStyles = css({
24
- color: "var(--ds-text-subtlest, #626F86)",
25
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
26
- fontSize: '0.85em'
27
- });
28
- const baseTextStyles = css({
29
- display: 'block',
30
- color: "var(--ds-text, #172B4D)"
31
- });
32
- const truncationStyles = css({
33
- overflowX: 'hidden',
34
- textOverflow: 'ellipsis',
35
- whiteSpace: 'nowrap'
36
- });
37
- const getStyles = (css, {
38
- backgroundColor,
39
- isInteractive,
40
- isDisabled
41
- }) =>
42
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
43
- css`
44
- align-items: center;
45
- background-color: ${backgroundColor};
46
- border-radius: ${borderRadius()}px;
47
- border: ${BORDER_WIDTH}px solid transparent;
48
- box-sizing: border-box;
49
- color: inherit;
50
- display: flex;
51
- font-size: inherit;
52
- font-style: normal;
53
- font-weight: ${"var(--ds-font-weight-regular, 400)"};
54
- line-height: 1;
55
- outline: none;
56
- margin: ${"var(--ds-space-0, 0px)"};
57
- padding: ${"var(--ds-space-050, 4px)"};
58
- text-align: left;
59
- text-decoration: none;
60
- width: 100%;
61
-
62
- ${isInteractive && `
63
- :hover {
64
- background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
65
- cursor: pointer;
66
- text-decoration: none;
67
- }
68
-
69
- :focus {
70
- outline: none;
71
- border-color: ${`var(--ds-border-focused, ${B200})`};
72
- }
73
-
74
- :active {
75
- background-color: ${`var(--ds-background-neutral-subtle-pressed, ${B50})`};
76
- }
77
- `}
78
-
79
- ${isDisabled && `
80
- cursor: not-allowed;
81
- opacity: ${"var(--ds-opacity-disabled, 0.5)"};
82
- pointer-events: none;
83
- `}
84
- `;
85
-
11
+ import { getCustomElement } from './utilities';
12
+ const bgColorCssVar = '--avatar-item-bg-color';
13
+ const styles = {
14
+ root: css({
15
+ display: 'flex',
16
+ boxSizing: 'border-box',
17
+ width: '100%',
18
+ alignItems: 'center',
19
+ backgroundColor: `var(${bgColorCssVar})`,
20
+ borderColor: 'transparent',
21
+ borderRadius: '3px',
22
+ borderStyle: 'solid',
23
+ borderWidth: "var(--ds-border-width-outline, 2px)",
24
+ color: 'inherit',
25
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
26
+ fontSize: 'inherit',
27
+ fontStyle: 'normal',
28
+ fontWeight: "var(--ds-font-weight-regular, 400)",
29
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
30
+ lineHeight: '1',
31
+ marginBlockEnd: "var(--ds-space-0, 0px)",
32
+ marginBlockStart: "var(--ds-space-0, 0px)",
33
+ marginInlineEnd: "var(--ds-space-0, 0px)",
34
+ marginInlineStart: "var(--ds-space-0, 0px)",
35
+ outline: 'none',
36
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
37
+ paddingBlockStart: "var(--ds-space-050, 4px)",
38
+ paddingInlineEnd: "var(--ds-space-050, 4px)",
39
+ paddingInlineStart: "var(--ds-space-050, 4px)",
40
+ textAlign: 'left',
41
+ textDecoration: 'none'
42
+ }),
43
+ rootDisabled: css({
44
+ cursor: 'not-allowed',
45
+ opacity: "var(--ds-opacity-disabled, 0.5)",
46
+ pointerEvents: 'none'
47
+ }),
48
+ rootInteractive: css({
49
+ '&:hover': {
50
+ backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
51
+ cursor: 'pointer',
52
+ textDecoration: 'none'
53
+ },
54
+ '&:focus': {
55
+ borderColor: `var(--ds-border-focused, ${B200})`,
56
+ outline: 'none'
57
+ },
58
+ '&:active': {
59
+ backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
60
+ }
61
+ }),
62
+ avatarItem: css({
63
+ minWidth: 0,
64
+ maxWidth: '100%',
65
+ flex: '1 1 100%',
66
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
67
+ lineHeight: '1.4',
68
+ paddingInlineStart: "var(--ds-space-100, 8px)"
69
+ }),
70
+ baseText: css({
71
+ display: 'block',
72
+ color: "var(--ds-text, #172B4D)"
73
+ }),
74
+ truncation: css({
75
+ overflowX: 'hidden',
76
+ textOverflow: 'ellipsis',
77
+ whiteSpace: 'nowrap'
78
+ }),
79
+ secondaryTextLegacy: css({
80
+ color: "var(--ds-text-subtlest, #626F86)",
81
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
82
+ fontSize: '0.85em'
83
+ })
84
+ };
86
85
  /**
87
86
  * __Avatar item__
88
87
  *
@@ -94,7 +93,6 @@ css`
94
93
  const AvatarItem = /*#__PURE__*/forwardRef(({
95
94
  avatar,
96
95
  backgroundColor = 'transparent',
97
- children,
98
96
  isTruncationDisabled,
99
97
  href,
100
98
  isDisabled,
@@ -105,57 +103,36 @@ const AvatarItem = /*#__PURE__*/forwardRef(({
105
103
  testId,
106
104
  label
107
105
  }, ref) => {
108
- const getTestId = (testId, children) => !children ? {
109
- 'data-testid': `${testId}--itemInner`
110
- } : {
111
- testId: `${testId}--itemInner`
112
- };
113
- const componentProps = () => {
114
- if (isDisabled) {
115
- return {
116
- disabled: true
117
- };
118
- }
119
-
120
- // return only relevant props for either anchor or button elements
121
- return {
122
- ...(href && getLinkProps(href, target)),
123
- ...(onClick && !href ? getButtonProps(onClick) : {
124
- onClick
125
- })
126
- };
127
- };
128
- return jsx(ClassNames, null, ({
129
- css
130
- }) => {
131
- const props = {
132
- ref,
133
- className: getStyles(css, {
134
- backgroundColor,
135
- isInteractive: Boolean(onClick || href),
136
- isDisabled
137
- }),
138
- ...componentProps(),
139
- ...(testId && getTestId(testId, children)),
140
- ...((onClick || href) && {
141
- 'aria-label': label
142
- }),
143
- children: jsx(Fragment, null, avatar, jsx("div", {
144
- css: avatarItemStyles
145
- }, fg('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
146
- maxLines: isTruncationDisabled ? undefined : 1
147
- }, primaryText), jsx(Text, {
148
- color: "color.text.subtlest",
149
- maxLines: isTruncationDisabled ? undefined : 1,
150
- size: "UNSAFE_small"
151
- }, secondaryText)) : jsx(Fragment, null, jsx("span", {
152
- css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
153
- }, primaryText), jsx("span", {
154
- css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
155
- }, secondaryText))))
156
- };
157
- return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
158
- });
106
+ const Container = getCustomElement(isDisabled, href, onClick);
107
+ const isInteractive = Boolean(onClick || href);
108
+ return jsx(Container, _extends({
109
+ css: [styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled],
110
+ style: {
111
+ [bgColorCssVar]: backgroundColor
112
+ },
113
+ ref: ref,
114
+ "aria-label": isInteractive ? label : undefined,
115
+ onClick: onClick,
116
+ disabled: isDisabled,
117
+ "data-testid": testId ? `${testId}--itemInner` : undefined,
118
+ type: Container === 'button' ? 'button' : undefined
119
+ }, href && {
120
+ href,
121
+ target,
122
+ rel: target === '_blank' ? 'noopener noreferrer' : undefined
123
+ }), avatar, jsx("div", {
124
+ css: styles.avatarItem
125
+ }, fg('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
126
+ maxLines: isTruncationDisabled ? undefined : 1
127
+ }, primaryText), jsx(Text, {
128
+ color: "color.text.subtlest",
129
+ maxLines: isTruncationDisabled ? undefined : 1,
130
+ size: "UNSAFE_small"
131
+ }, secondaryText)) : jsx(Fragment, null, jsx("span", {
132
+ css: [styles.baseText, !isTruncationDisabled && styles.truncation]
133
+ }, primaryText), jsx("span", {
134
+ css: [styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation]
135
+ }, secondaryText))));
159
136
  });
160
137
  AvatarItem.displayName = 'AvatarItem';
161
138
  export default AvatarItem;
package/dist/es2019/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
  const packageName = "@atlaskit/avatar";
18
- const packageVersion = "23.0.0";
18
+ const packageVersion = "24.0.0";
19
19
  const containerStyles = css({
20
20
  display: 'inline-block',
21
21
  position: 'relative',
package/dist/esm/avatar-item.js CHANGED
@@ -1,53 +1,88 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject;
4
- 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; }
5
- 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) { _defineProperty(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; }
6
3
  /**
7
4
  * @jsxRuntime classic
8
5
  * @jsx jsx
9
6
  */
10
- import { createElement, forwardRef, Fragment } from 'react';
11
-
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
- import { ClassNames, css, jsx } from '@emotion/react';
7
+ import { forwardRef, Fragment } from 'react';
8
+ import { css, jsx } from '@emotion/react';
14
9
  import { fg } from '@atlaskit/platform-feature-flags';
15
10
  import { Text } from '@atlaskit/primitives';
16
11
  import { B200, B50, N30 } from '@atlaskit/theme/colors';
17
- import { borderRadius } from '@atlaskit/theme/constants';
18
- import { BORDER_WIDTH } from './constants';
19
- import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
20
- var avatarItemStyles = css({
21
- minWidth: 0,
22
- maxWidth: '100%',
23
- flex: '1 1 100%',
24
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
25
- lineHeight: '1.4',
26
- paddingInlineStart: "var(--ds-space-100, 8px)"
27
- });
28
- var secondaryTextOldStyles = css({
29
- color: "var(--ds-text-subtlest, #626F86)",
30
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
31
- fontSize: '0.85em'
32
- });
33
- var baseTextStyles = css({
34
- display: 'block',
35
- color: "var(--ds-text, #172B4D)"
36
- });
37
- var truncationStyles = css({
38
- overflowX: 'hidden',
39
- textOverflow: 'ellipsis',
40
- whiteSpace: 'nowrap'
41
- });
42
- var getStyles = function getStyles(css, _ref) {
43
- var backgroundColor = _ref.backgroundColor,
44
- isInteractive = _ref.isInteractive,
45
- isDisabled = _ref.isDisabled;
46
- return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
47
- css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\talign-items: center;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", "px;\n\t\tborder: ", "px solid transparent;\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tfont-size: inherit;\n\t\tfont-style: normal;\n\t\tfont-weight: ", ";\n\t\tline-height: 1;\n\t\toutline: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\t\ttext-align: left;\n\t\ttext-decoration: none;\n\t\twidth: 100%;\n\n\t\t", "\n\n\t\t", "\n\t"])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-font-weight-regular, 400)", "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n :hover {\n background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), ";\n cursor: pointer;\n text-decoration: none;\n }\n\n :focus {\n outline: none;\n border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n }\n\n :active {\n background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"), ";\n }\n "), isDisabled && "\n cursor: not-allowed;\n opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n pointer-events: none;\n "))
48
- );
12
+ import { getCustomElement } from './utilities';
13
+ var bgColorCssVar = '--avatar-item-bg-color';
14
+ var styles = {
15
+ root: css({
16
+ display: 'flex',
17
+ boxSizing: 'border-box',
18
+ width: '100%',
19
+ alignItems: 'center',
20
+ backgroundColor: "var(".concat(bgColorCssVar, ")"),
21
+ borderColor: 'transparent',
22
+ borderRadius: '3px',
23
+ borderStyle: 'solid',
24
+ borderWidth: "var(--ds-border-width-outline, 2px)",
25
+ color: 'inherit',
26
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
27
+ fontSize: 'inherit',
28
+ fontStyle: 'normal',
29
+ fontWeight: "var(--ds-font-weight-regular, 400)",
30
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
31
+ lineHeight: '1',
32
+ marginBlockEnd: "var(--ds-space-0, 0px)",
33
+ marginBlockStart: "var(--ds-space-0, 0px)",
34
+ marginInlineEnd: "var(--ds-space-0, 0px)",
35
+ marginInlineStart: "var(--ds-space-0, 0px)",
36
+ outline: 'none',
37
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
38
+ paddingBlockStart: "var(--ds-space-050, 4px)",
39
+ paddingInlineEnd: "var(--ds-space-050, 4px)",
40
+ paddingInlineStart: "var(--ds-space-050, 4px)",
41
+ textAlign: 'left',
42
+ textDecoration: 'none'
43
+ }),
44
+ rootDisabled: css({
45
+ cursor: 'not-allowed',
46
+ opacity: "var(--ds-opacity-disabled, 0.5)",
47
+ pointerEvents: 'none'
48
+ }),
49
+ rootInteractive: css({
50
+ '&:hover': {
51
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
52
+ cursor: 'pointer',
53
+ textDecoration: 'none'
54
+ },
55
+ '&:focus': {
56
+ borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
57
+ outline: 'none'
58
+ },
59
+ '&:active': {
60
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
61
+ }
62
+ }),
63
+ avatarItem: css({
64
+ minWidth: 0,
65
+ maxWidth: '100%',
66
+ flex: '1 1 100%',
67
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
68
+ lineHeight: '1.4',
69
+ paddingInlineStart: "var(--ds-space-100, 8px)"
70
+ }),
71
+ baseText: css({
72
+ display: 'block',
73
+ color: "var(--ds-text, #172B4D)"
74
+ }),
75
+ truncation: css({
76
+ overflowX: 'hidden',
77
+ textOverflow: 'ellipsis',
78
+ whiteSpace: 'nowrap'
79
+ }),
80
+ secondaryTextLegacy: css({
81
+ color: "var(--ds-text-subtlest, #626F86)",
82
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
83
+ fontSize: '0.85em'
84
+ })
49
85
  };
50
-
51
86
  /**
52
87
  * __Avatar item__
53
88
  *
@@ -56,67 +91,47 @@ var getStyles = function getStyles(css, _ref) {
56
91
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
57
92
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
58
93
  */
59
- var AvatarItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
60
- var avatar = _ref2.avatar,
61
- _ref2$backgroundColor = _ref2.backgroundColor,
62
- backgroundColor = _ref2$backgroundColor === void 0 ? 'transparent' : _ref2$backgroundColor,
63
- children = _ref2.children,
64
- isTruncationDisabled = _ref2.isTruncationDisabled,
65
- href = _ref2.href,
66
- isDisabled = _ref2.isDisabled,
67
- onClick = _ref2.onClick,
68
- primaryText = _ref2.primaryText,
69
- secondaryText = _ref2.secondaryText,
70
- target = _ref2.target,
71
- testId = _ref2.testId,
72
- label = _ref2.label;
73
- var getTestId = function getTestId(testId, children) {
74
- return !children ? {
75
- 'data-testid': "".concat(testId, "--itemInner")
76
- } : {
77
- testId: "".concat(testId, "--itemInner")
78
- };
79
- };
80
- var componentProps = function componentProps() {
81
- if (isDisabled) {
82
- return {
83
- disabled: true
84
- };
85
- }
86
-
87
- // return only relevant props for either anchor or button elements
88
- return _objectSpread(_objectSpread({}, href && getLinkProps(href, target)), onClick && !href ? getButtonProps(onClick) : {
89
- onClick: onClick
90
- });
91
- };
92
- return jsx(ClassNames, null, function (_ref3) {
93
- var css = _ref3.css;
94
- var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
95
- ref: ref,
96
- className: getStyles(css, {
97
- backgroundColor: backgroundColor,
98
- isInteractive: Boolean(onClick || href),
99
- isDisabled: isDisabled
100
- })
101
- }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
102
- 'aria-label': label
103
- }), {}, {
104
- children: jsx(Fragment, null, avatar, jsx("div", {
105
- css: avatarItemStyles
106
- }, fg('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
107
- maxLines: isTruncationDisabled ? undefined : 1
108
- }, primaryText), jsx(Text, {
109
- color: "color.text.subtlest",
110
- maxLines: isTruncationDisabled ? undefined : 1,
111
- size: "UNSAFE_small"
112
- }, secondaryText)) : jsx(Fragment, null, jsx("span", {
113
- css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
114
- }, primaryText), jsx("span", {
115
- css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
116
- }, secondaryText))))
117
- });
118
- return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
119
- });
94
+ var AvatarItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
95
+ var avatar = _ref.avatar,
96
+ _ref$backgroundColor = _ref.backgroundColor,
97
+ backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
98
+ isTruncationDisabled = _ref.isTruncationDisabled,
99
+ href = _ref.href,
100
+ isDisabled = _ref.isDisabled,
101
+ onClick = _ref.onClick,
102
+ primaryText = _ref.primaryText,
103
+ secondaryText = _ref.secondaryText,
104
+ target = _ref.target,
105
+ testId = _ref.testId,
106
+ label = _ref.label;
107
+ var Container = getCustomElement(isDisabled, href, onClick);
108
+ var isInteractive = Boolean(onClick || href);
109
+ return jsx(Container, _extends({
110
+ css: [styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled],
111
+ style: _defineProperty({}, bgColorCssVar, backgroundColor),
112
+ ref: ref,
113
+ "aria-label": isInteractive ? label : undefined,
114
+ onClick: onClick,
115
+ disabled: isDisabled,
116
+ "data-testid": testId ? "".concat(testId, "--itemInner") : undefined,
117
+ type: Container === 'button' ? 'button' : undefined
118
+ }, href && {
119
+ href: href,
120
+ target: target,
121
+ rel: target === '_blank' ? 'noopener noreferrer' : undefined
122
+ }), avatar, jsx("div", {
123
+ css: styles.avatarItem
124
+ }, fg('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
125
+ maxLines: isTruncationDisabled ? undefined : 1
126
+ }, primaryText), jsx(Text, {
127
+ color: "color.text.subtlest",
128
+ maxLines: isTruncationDisabled ? undefined : 1,
129
+ size: "UNSAFE_small"
130
+ }, secondaryText)) : jsx(Fragment, null, jsx("span", {
131
+ css: [styles.baseText, !isTruncationDisabled && styles.truncation]
132
+ }, primaryText), jsx("span", {
133
+ css: [styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation]
134
+ }, secondaryText))));
120
135
  });
121
136
  AvatarItem.displayName = 'AvatarItem';
122
137
  export default AvatarItem;
package/dist/esm/avatar.js CHANGED
@@ -18,7 +18,7 @@ import { PresenceWrapper } from './presence';
18
18
  import { StatusWrapper } from './status';
19
19
  import { getCustomElement } from './utilities';
20
20
  var packageName = "@atlaskit/avatar";
21
- var packageVersion = "23.0.0";
21
+ var packageVersion = "24.0.0";
22
22
  var containerStyles = css({
23
23
  display: 'inline-block',
24
24
  position: 'relative',
package/dist/types/avatar-item.d.ts CHANGED
@@ -2,22 +2,8 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
5
+ import { type ReactNode } from 'react';
6
6
  import { type AvatarClickEventHandler } from './types';
7
- export interface CustomAvatarItemProps {
8
- testId?: string;
9
- onClick?: MouseEventHandler;
10
- className?: string;
11
- href?: string;
12
- children: ReactNode;
13
- ref: Ref<HTMLElement>;
14
- /**
15
- * This is used in render props so is okay to be defined.
16
- * eslint-disable-next-line consistent-props-definitions
17
- */
18
- 'aria-label'?: string;
19
- 'aria-disabled'?: boolean | 'false' | 'true' | undefined;
20
- }
21
7
  export interface AvatarItemProps {
22
8
  /**
23
9
  * Used to provide better content to screen readers when using presence/status. Rather
@@ -33,10 +19,6 @@ export interface AvatarItemProps {
33
19
  * Change background color.
34
20
  */
35
21
  backgroundColor?: string;
36
- /**
37
- * Use a custom component instead of the default span.
38
- */
39
- children?: (props: CustomAvatarItemProps) => ReactNode;
40
22
  /**
41
23
  * URL for avatars being used as a link.
42
24
  */
package/dist/types/entry-points/avatar-item.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default } from '../avatar-item';
2
- export type { AvatarItemProps, CustomAvatarItemProps } from '../avatar-item';
2
+ export type { AvatarItemProps } from '../avatar-item';
package/dist/types/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { default } from './avatar';
2
2
  export type { AvatarPropTypes } from './avatar';
3
3
  export { AvatarContent } from './avatar-content';
4
4
  export { default as AvatarItem } from './avatar-item';
5
- export type { AvatarItemProps, CustomAvatarItemProps } from './avatar-item';
5
+ export type { AvatarItemProps } from './avatar-item';
6
6
  export { default as Presence } from './presence';
7
7
  export type { PresenceProps } from './presence';
8
8
  export { default as Status } from './status';
package/dist/types-ts4.5/avatar-item.d.ts CHANGED
@@ -2,22 +2,8 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
5
+ import { type ReactNode } from 'react';
6
6
  import { type AvatarClickEventHandler } from './types';
7
- export interface CustomAvatarItemProps {
8
- testId?: string;
9
- onClick?: MouseEventHandler;
10
- className?: string;
11
- href?: string;
12
- children: ReactNode;
13
- ref: Ref<HTMLElement>;
14
- /**
15
- * This is used in render props so is okay to be defined.
16
- * eslint-disable-next-line consistent-props-definitions
17
- */
18
- 'aria-label'?: string;
19
- 'aria-disabled'?: boolean | 'false' | 'true' | undefined;
20
- }
21
7
  export interface AvatarItemProps {
22
8
  /**
23
9
  * Used to provide better content to screen readers when using presence/status. Rather
@@ -33,10 +19,6 @@ export interface AvatarItemProps {
33
19
  * Change background color.
34
20
  */
35
21
  backgroundColor?: string;
36
- /**
37
- * Use a custom component instead of the default span.
38
- */
39
- children?: (props: CustomAvatarItemProps) => ReactNode;
40
22
  /**
41
23
  * URL for avatars being used as a link.
42
24
  */
package/dist/types-ts4.5/entry-points/avatar-item.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default } from '../avatar-item';
2
- export type { AvatarItemProps, CustomAvatarItemProps } from '../avatar-item';
2
+ export type { AvatarItemProps } from '../avatar-item';
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { default } from './avatar';
2
2
  export type { AvatarPropTypes } from './avatar';
3
3
  export { AvatarContent } from './avatar-content';
4
4
  export { default as AvatarItem } from './avatar-item';
5
- export type { AvatarItemProps, CustomAvatarItemProps } from './avatar-item';
5
+ export type { AvatarItemProps } from './avatar-item';
6
6
  export { default as Presence } from './presence';
7
7
  export type { PresenceProps } from './presence';
8
8
  export { default as Status } from './status';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "23.0.0",
3
+ "version": "24.0.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/"
@@ -45,11 +45,11 @@
45
45
  "@atlaskit/analytics-next": "^11.0.0",
46
46
  "@atlaskit/ds-lib": "^4.0.0",
47
47
  "@atlaskit/focus-ring": "^3.0.0",
48
- "@atlaskit/icon": "^24.0.0",
48
+ "@atlaskit/icon": "^24.1.0",
49
49
  "@atlaskit/platform-feature-flags": "^1.1.0",
50
- "@atlaskit/primitives": "^14.0.0",
50
+ "@atlaskit/primitives": "^14.1.0",
51
51
  "@atlaskit/theme": "^17.0.0",
52
- "@atlaskit/tokens": "^4.1.0",
52
+ "@atlaskit/tokens": "^4.2.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1",
55
55
  "@emotion/serialize": "^1.1.0"
@@ -65,7 +65,7 @@
65
65
  "@atlaskit/code": "^16.0.0",
66
66
  "@atlaskit/docs": "*",
67
67
  "@atlaskit/form": "^12.0.0",
68
- "@atlaskit/heading": "^5.0.0",
68
+ "@atlaskit/heading": "^5.1.0",
69
69
  "@atlaskit/link": "*",
70
70
  "@atlaskit/range": "^9.0.0",
71
71
  "@atlaskit/section-message": "*",