@atlaskit/editor-plugin-avatar-group 1.0.0 → 1.0.2

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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/avatars.js +1 -1
  3. package/dist/cjs/ui/invite-to-edit.js +1 -1
  4. package/dist/cjs/ui/styles.js +41 -7
  5. package/dist/es2019/ui/avatars.js +2 -2
  6. package/dist/es2019/ui/invite-to-edit.js +2 -2
  7. package/dist/es2019/ui/styles.js +38 -42
  8. package/dist/esm/ui/avatars.js +2 -2
  9. package/dist/esm/ui/invite-to-edit.js +2 -2
  10. package/dist/esm/ui/styles.js +39 -5
  11. package/dist/types/ui/styles.d.ts +2 -2
  12. package/dist/types-ts4.5/ui/styles.d.ts +2 -2
  13. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-avatar-group
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#77259](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77259) [`9086164a5b62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9086164a5b62) - Use spacing tokens instead of hardcoded values
8
+
9
+ ## 1.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.0.0
4
16
 
5
17
  ### Major Changes
package/dist/cjs/ui/avatars.js CHANGED
@@ -51,7 +51,7 @@ var Avatars = exports.Avatars = /*#__PURE__*/_react.default.memo(function (props
51
51
  return (
52
52
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
53
53
  (0, _react2.jsx)("div", {
54
- css: _styles.avatarContainer
54
+ css: _styles.avatarContainerStyles
55
55
  }, (0, _react2.jsx)(_avatarGroup.default, {
56
56
  appearance: "stack",
57
57
  size: "medium",
package/dist/cjs/ui/invite-to-edit.js CHANGED
@@ -35,7 +35,7 @@ var InviteToEditButton = exports.InviteToEditButton = function InviteToEditButto
35
35
  return (
36
36
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
37
37
  (0, _react2.jsx)("div", {
38
- css: _styles.inviteTeamWrapper
38
+ css: _styles.inviteTeamWrapperStyles
39
39
  }, (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
40
40
  className: "invite-to-edit",
41
41
  onClick: onClick,
package/dist/cjs/ui/styles.js CHANGED
@@ -1,17 +1,51 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
- exports.inviteTeamWrapper = exports.badge = exports.avatarContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
6
+ exports.inviteTeamWrapperStyles = exports.badge = exports.avatarContainerStyles = void 0;
9
7
  var _react = require("@emotion/react");
10
8
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
9
  var _colors = require("@atlaskit/theme/colors");
12
- var _templateObject, _templateObject2, _templateObject3;
13
- var inviteTeamWrapper = exports.inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: 50%;\n min-width: ", ";\n margin-left: ", ";\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-negative-050, -4px)");
14
- var avatarContainer = exports.avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: ", ";\n display: flex;\n align-items: center;\n\n // ED-13102: This is to override list styles that come from the\n // .wiki-content class in Confluence that should not apply within\n // the toolbar. Has to be extra specific to override.\n && > ul {\n list-style-type: none;\n }\n\n div:last-child button.invite-to-edit {\n border-radius: 50%;\n height: 32px;\n width: 32px;\n padding: ", ";\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)");
10
+ /* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles */
11
+
12
+ var inviteTeamWrapperStyles = exports.inviteTeamWrapperStyles = (0, _react.css)({
13
+ background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
14
+ borderRadius: '50%',
15
+ minWidth: "var(--ds-space-400, 32px)",
16
+ marginLeft: "var(--ds-space-negative-050, -4px)"
17
+ });
18
+ var avatarContainerStyles = exports.avatarContainerStyles = (0, _react.css)({
19
+ marginRight: "var(--ds-space-100, 8px)",
20
+ display: 'flex',
21
+ alignItems: 'center',
22
+ '&& > ul': {
23
+ listStyleType: 'none'
24
+ },
25
+ 'div:last-child button.invite-to-edit': {
26
+ borderRadius: '50%',
27
+ height: '32px',
28
+ width: '32px',
29
+ padding: "var(--ds-space-025, 2px)"
30
+ }
31
+ });
15
32
  var badge = exports.badge = function badge(color) {
16
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n position: absolute;\n right: 1px;\n bottom: 1px;\n width: 13px;\n height: 13px;\n z-index: ", ";\n border-radius: 3px;\n background: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 0;\n padding-top: 7px;\n text-align: center;\n box-shadow: 0 0 1px ", ";\n box-sizing: border-box;\n"])), _editorSharedStyles.akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-border-inverse, #fff)");
33
+ return (0, _react.css)({
34
+ display: 'block',
35
+ position: 'absolute',
36
+ right: "var(--ds-space-025, 2px)",
37
+ bottom: "var(--ds-space-025, 2px)",
38
+ width: "var(--ds-space-150, 12px)",
39
+ height: "var(--ds-space-150, 12px)",
40
+ zIndex: _editorSharedStyles.akEditorSmallZIndex,
41
+ borderRadius: '3px',
42
+ background: color,
43
+ color: "var(--ds-text-inverse, #fff)",
44
+ fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(9),
45
+ lineHeight: 0,
46
+ paddingTop: "var(--ds-space-075, 6px)",
47
+ textAlign: 'center',
48
+ boxShadow: "0 0 1px ".concat("var(--ds-border-inverse, #fff)"),
49
+ boxSizing: 'border-box'
50
+ });
17
51
  };
package/dist/es2019/ui/avatars.js CHANGED
@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
5
5
  import AvatarGroup from '@atlaskit/avatar-group';
6
6
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
7
7
  import { Selection } from '@atlaskit/editor-prosemirror/state';
8
- import { avatarContainer } from './styles';
8
+ import { avatarContainerStyles } from './styles';
9
9
  import toAvatar from './to-avatar';
10
10
  export const scrollToCollabCursor = (editorView, participants, sessionId, index, editorAnalyticsAPI) => {
11
11
  const selectedUser = participants[index];
@@ -44,7 +44,7 @@ export const Avatars = /*#__PURE__*/React.memo(props => {
44
44
  return (
45
45
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
46
46
  jsx("div", {
47
- css: avatarContainer
47
+ css: avatarContainerStyles
48
48
  }, jsx(AvatarGroup, {
49
49
  appearance: "stack",
50
50
  size: "medium",
package/dist/es2019/ui/invite-to-edit.js CHANGED
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
5
5
  import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
6
- import { inviteTeamWrapper } from './styles';
6
+ import { inviteTeamWrapperStyles } from './styles';
7
7
  const ID = props => jsx(Fragment, null, props.children);
8
8
  export const InviteToEditButton = props => {
9
9
  const {
@@ -22,7 +22,7 @@ export const InviteToEditButton = props => {
22
22
  return (
23
23
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
24
24
  jsx("div", {
25
- css: inviteTeamWrapper
25
+ css: inviteTeamWrapperStyles
26
26
  }, jsx(Wrapper, null, jsx(ToolbarButton, {
27
27
  className: "invite-to-edit",
28
28
  onClick: onClick,
package/dist/es2019/ui/styles.js CHANGED
@@ -1,46 +1,42 @@
1
+ /* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles */
1
2
  import { css } from '@emotion/react';
2
3
  import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
3
4
  import { N20 } from '@atlaskit/theme/colors';
4
- export const inviteTeamWrapper = css`
5
- background: ${`var(--ds-background-neutral, ${N20})`};
6
- border-radius: 50%;
7
- min-width: ${"var(--ds-space-400, 32px)"};
8
- margin-left: ${"var(--ds-space-negative-050, -4px)"};
9
- `;
10
- export const avatarContainer = css`
11
- margin-right: ${"var(--ds-space-100, 8px)"};
12
- display: flex;
13
- align-items: center;
14
-
15
- // ED-13102: This is to override list styles that come from the
16
- // .wiki-content class in Confluence that should not apply within
17
- // the toolbar. Has to be extra specific to override.
18
- && > ul {
19
- list-style-type: none;
5
+ export const inviteTeamWrapperStyles = css({
6
+ background: `var(--ds-background-neutral, ${N20})`,
7
+ borderRadius: '50%',
8
+ minWidth: "var(--ds-space-400, 32px)",
9
+ marginLeft: "var(--ds-space-negative-050, -4px)"
10
+ });
11
+ export const avatarContainerStyles = css({
12
+ marginRight: "var(--ds-space-100, 8px)",
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ '&& > ul': {
16
+ listStyleType: 'none'
17
+ },
18
+ 'div:last-child button.invite-to-edit': {
19
+ borderRadius: '50%',
20
+ height: '32px',
21
+ width: '32px',
22
+ padding: "var(--ds-space-025, 2px)"
20
23
  }
21
-
22
- div:last-child button.invite-to-edit {
23
- border-radius: 50%;
24
- height: 32px;
25
- width: 32px;
26
- padding: ${"var(--ds-space-025, 2px)"};
27
- }
28
- `;
29
- export const badge = color => css`
30
- display: block;
31
- position: absolute;
32
- right: 1px;
33
- bottom: 1px;
34
- width: 13px;
35
- height: 13px;
36
- z-index: ${akEditorSmallZIndex};
37
- border-radius: 3px;
38
- background: ${color};
39
- color: ${"var(--ds-text-inverse, #fff)"};
40
- font-size: ${relativeFontSizeToBase16(9)};
41
- line-height: 0;
42
- padding-top: 7px;
43
- text-align: center;
44
- box-shadow: 0 0 1px ${"var(--ds-border-inverse, #fff)"};
45
- box-sizing: border-box;
46
- `;
24
+ });
25
+ export const badge = color => css({
26
+ display: 'block',
27
+ position: 'absolute',
28
+ right: "var(--ds-space-025, 2px)",
29
+ bottom: "var(--ds-space-025, 2px)",
30
+ width: "var(--ds-space-150, 12px)",
31
+ height: "var(--ds-space-150, 12px)",
32
+ zIndex: akEditorSmallZIndex,
33
+ borderRadius: '3px',
34
+ background: color,
35
+ color: "var(--ds-text-inverse, #fff)",
36
+ fontSize: relativeFontSizeToBase16(9),
37
+ lineHeight: 0,
38
+ paddingTop: "var(--ds-space-075, 6px)",
39
+ textAlign: 'center',
40
+ boxShadow: `0 0 1px ${"var(--ds-border-inverse, #fff)"}`,
41
+ boxSizing: 'border-box'
42
+ });
package/dist/esm/ui/avatars.js CHANGED
@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
5
5
  import AvatarGroup from '@atlaskit/avatar-group';
6
6
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
7
7
  import { Selection } from '@atlaskit/editor-prosemirror/state';
8
- import { avatarContainer } from './styles';
8
+ import { avatarContainerStyles } from './styles';
9
9
  import toAvatar from './to-avatar';
10
10
  export var scrollToCollabCursor = function scrollToCollabCursor(editorView, participants, sessionId, index, editorAnalyticsAPI) {
11
11
  var selectedUser = participants[index];
@@ -44,7 +44,7 @@ export var Avatars = /*#__PURE__*/React.memo(function (props) {
44
44
  return (
45
45
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
46
46
  jsx("div", {
47
- css: avatarContainer
47
+ css: avatarContainerStyles
48
48
  }, jsx(AvatarGroup, {
49
49
  appearance: "stack",
50
50
  size: "medium",
package/dist/esm/ui/invite-to-edit.js CHANGED
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
5
5
  import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
6
- import { inviteTeamWrapper } from './styles';
6
+ import { inviteTeamWrapperStyles } from './styles';
7
7
  var ID = function ID(props) {
8
8
  return jsx(Fragment, null, props.children);
9
9
  };
@@ -24,7 +24,7 @@ export var InviteToEditButton = function InviteToEditButton(props) {
24
24
  return (
25
25
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
26
26
  jsx("div", {
27
- css: inviteTeamWrapper
27
+ css: inviteTeamWrapperStyles
28
28
  }, jsx(Wrapper, null, jsx(ToolbarButton, {
29
29
  className: "invite-to-edit",
30
30
  onClick: onClick,
package/dist/esm/ui/styles.js CHANGED
@@ -1,10 +1,44 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3;
1
+ /* eslint-disable @repo/internal/styles/no-exported-styles, @atlaskit/design-system/no-nested-styles */
3
2
  import { css } from '@emotion/react';
4
3
  import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
5
4
  import { N20 } from '@atlaskit/theme/colors';
6
- export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 50%;\n min-width: ", ";\n margin-left: ", ";\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-negative-050, -4px)");
7
- export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-right: ", ";\n display: flex;\n align-items: center;\n\n // ED-13102: This is to override list styles that come from the\n // .wiki-content class in Confluence that should not apply within\n // the toolbar. Has to be extra specific to override.\n && > ul {\n list-style-type: none;\n }\n\n div:last-child button.invite-to-edit {\n border-radius: 50%;\n height: 32px;\n width: 32px;\n padding: ", ";\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)");
5
+ export var inviteTeamWrapperStyles = css({
6
+ background: "var(--ds-background-neutral, ".concat(N20, ")"),
7
+ borderRadius: '50%',
8
+ minWidth: "var(--ds-space-400, 32px)",
9
+ marginLeft: "var(--ds-space-negative-050, -4px)"
10
+ });
11
+ export var avatarContainerStyles = css({
12
+ marginRight: "var(--ds-space-100, 8px)",
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ '&& > ul': {
16
+ listStyleType: 'none'
17
+ },
18
+ 'div:last-child button.invite-to-edit': {
19
+ borderRadius: '50%',
20
+ height: '32px',
21
+ width: '32px',
22
+ padding: "var(--ds-space-025, 2px)"
23
+ }
24
+ });
8
25
  export var badge = function badge(color) {
9
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: block;\n position: absolute;\n right: 1px;\n bottom: 1px;\n width: 13px;\n height: 13px;\n z-index: ", ";\n border-radius: 3px;\n background: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 0;\n padding-top: 7px;\n text-align: center;\n box-shadow: 0 0 1px ", ";\n box-sizing: border-box;\n"])), akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", relativeFontSizeToBase16(9), "var(--ds-border-inverse, #fff)");
26
+ return css({
27
+ display: 'block',
28
+ position: 'absolute',
29
+ right: "var(--ds-space-025, 2px)",
30
+ bottom: "var(--ds-space-025, 2px)",
31
+ width: "var(--ds-space-150, 12px)",
32
+ height: "var(--ds-space-150, 12px)",
33
+ zIndex: akEditorSmallZIndex,
34
+ borderRadius: '3px',
35
+ background: color,
36
+ color: "var(--ds-text-inverse, #fff)",
37
+ fontSize: relativeFontSizeToBase16(9),
38
+ lineHeight: 0,
39
+ paddingTop: "var(--ds-space-075, 6px)",
40
+ textAlign: 'center',
41
+ boxShadow: "0 0 1px ".concat("var(--ds-border-inverse, #fff)"),
42
+ boxSizing: 'border-box'
43
+ });
10
44
  };
package/dist/types/ui/styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const inviteTeamWrapper: import("@emotion/react").SerializedStyles;
2
- export declare const avatarContainer: import("@emotion/react").SerializedStyles;
1
+ export declare const inviteTeamWrapperStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const avatarContainerStyles: import("@emotion/react").SerializedStyles;
3
3
  export declare const badge: (color: string) => import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const inviteTeamWrapper: import("@emotion/react").SerializedStyles;
2
- export declare const avatarContainer: import("@emotion/react").SerializedStyles;
1
+ export declare const inviteTeamWrapperStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const avatarContainerStyles: import("@emotion/react").SerializedStyles;
3
3
  export declare const badge: (color: string) => import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-avatar-group",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Avatar Group plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,15 +38,15 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@atlaskit/avatar-group": "^9.5.0",
41
- "@atlaskit/editor-common": "^77.4.0",
41
+ "@atlaskit/editor-common": "^78.8.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
43
- "@atlaskit/editor-plugin-collab-edit": "^1.0.0",
43
+ "@atlaskit/editor-plugin-collab-edit": "^1.1.0",
44
44
  "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
45
45
  "@atlaskit/editor-prosemirror": "3.0.0",
46
46
  "@atlaskit/editor-shared-styles": "^2.9.0",
47
- "@atlaskit/icon": "^22.0.0",
47
+ "@atlaskit/icon": "^22.1.0",
48
48
  "@atlaskit/theme": "^12.6.0",
49
- "@atlaskit/tokens": "^1.36.0",
49
+ "@atlaskit/tokens": "^1.38.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@emotion/react": "^11.7.1",
52
52
  "memoize-one": "^6.0.0",