@atlaskit/editor-plugin-show-diff 22.0.0 → 22.0.1

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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js +1 -1
  3. package/dist/cjs/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  4. package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js +1 -1
  5. package/dist/es2019/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  6. package/dist/esm/ui/ContributorTag/buildContributorTagDom.js +1 -1
  7. package/dist/esm/ui/ContributorTag/contributorAvatarRenderer.js +17 -4
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-show-diff
2
2
 
3
+ ## 22.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6b392a68c0802`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b392a68c0802) -
8
+ Improve the visibility of agent contributor-tag icons with an icon-shaped drop shadow.
9
+ - Updated dependencies
10
+
3
11
  ## 22.0.0
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -110,7 +110,7 @@ var constraintStyle = (0, _lazyNodeView.convertToInlineCss)({
110
110
  var tagStyle = (0, _lazyNodeView.convertToInlineCss)({
111
111
  display: 'inline-flex',
112
112
  alignItems: 'center',
113
- gap: "var(--ds-space-050, 4px)",
113
+ gap: "var(--ds-space-025, 2px)",
114
114
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
115
115
  maxWidth: '100%',
116
116
  minWidth: 0,
package/dist/cjs/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -46,6 +46,17 @@ var boxStyle = (0, _lazyNodeView.convertToInlineCss)({
46
46
  width: "".concat(AVATAR_BOX_SIZE, "px"),
47
47
  height: "".concat(AVATAR_BOX_SIZE, "px")
48
48
  });
49
+
50
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
51
+ var agentBoxStyle = (0, _lazyNodeView.convertToInlineCss)({
52
+ display: 'inline-flex',
53
+ alignItems: 'center',
54
+ justifyContent: 'center',
55
+ flexShrink: 0,
56
+ boxSizing: 'border-box',
57
+ width: "".concat(AVATAR_SIZE, "px"),
58
+ height: "".concat(AVATAR_SIZE, "px")
59
+ });
49
60
  var shapeStyle = (0, _lazyNodeView.convertToInlineCss)({
50
61
  display: 'flex',
51
62
  alignItems: 'center',
@@ -56,6 +67,10 @@ var shapeStyle = (0, _lazyNodeView.convertToInlineCss)({
56
67
  aspectRatio: '1/1',
57
68
  overflow: 'hidden'
58
69
  });
70
+ var agentShadowStyle = (0, _lazyNodeView.convertToInlineCss)({
71
+ // No clip-path on `element`, so the blur isn't cut off.
72
+ filter: "drop-shadow(0 5px 5px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 1px 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 0 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ")")
73
+ });
59
74
  var imageStyle = (0, _lazyNodeView.convertToInlineCss)({
60
75
  display: 'block',
61
76
  width: '100%',
@@ -88,7 +103,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
88
103
  stackIndex = _ref.stackIndex;
89
104
  var isAgent = contributor.kind === 'agent';
90
105
  var element = doc.createElement('span');
91
- element.setAttribute('style', boxStyle);
106
+ element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
92
107
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
93
108
  // announcement comes from.
94
109
  element.setAttribute('aria-hidden', 'true');
@@ -99,7 +114,6 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
99
114
  shape.setAttribute('style', shapeStyle);
100
115
  element.appendChild(shape);
101
116
  if (isAgent) {
102
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
103
117
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
104
118
  } else {
105
119
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -148,8 +162,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
148
162
  }
149
163
  var setRingColor = function setRingColor(nextRingColor) {
150
164
  if (isAgent) {
151
- element.style.setProperty('background', nextRingColor);
152
- // Shows through wherever the artwork is transparent, as the avatar background did.
165
+ // No ring; shows through wherever the artwork is transparent, as before.
153
166
  shape.style.setProperty('background', nextRingColor);
154
167
  return;
155
168
  }
package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -102,7 +102,7 @@ const constraintStyle = convertToInlineCss({
102
102
  const tagStyle = convertToInlineCss({
103
103
  display: 'inline-flex',
104
104
  alignItems: 'center',
105
- gap: "var(--ds-space-050, 4px)",
105
+ gap: "var(--ds-space-025, 2px)",
106
106
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
107
107
  maxWidth: '100%',
108
108
  minWidth: 0,
package/dist/es2019/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -41,6 +41,17 @@ const boxStyle = convertToInlineCss({
41
41
  width: `${AVATAR_BOX_SIZE}px`,
42
42
  height: `${AVATAR_BOX_SIZE}px`
43
43
  });
44
+
45
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
46
+ const agentBoxStyle = convertToInlineCss({
47
+ display: 'inline-flex',
48
+ alignItems: 'center',
49
+ justifyContent: 'center',
50
+ flexShrink: 0,
51
+ boxSizing: 'border-box',
52
+ width: `${AVATAR_SIZE}px`,
53
+ height: `${AVATAR_SIZE}px`
54
+ });
44
55
  const shapeStyle = convertToInlineCss({
45
56
  display: 'flex',
46
57
  alignItems: 'center',
@@ -51,6 +62,10 @@ const shapeStyle = convertToInlineCss({
51
62
  aspectRatio: '1/1',
52
63
  overflow: 'hidden'
53
64
  });
65
+ const agentShadowStyle = convertToInlineCss({
66
+ // No clip-path on `element`, so the blur isn't cut off.
67
+ filter: `drop-shadow(0 5px 5px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"}) drop-shadow(0 1px 2px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"}) drop-shadow(0 0 2px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"})`
68
+ });
54
69
  const imageStyle = convertToInlineCss({
55
70
  display: 'block',
56
71
  width: '100%',
@@ -84,7 +99,7 @@ export const contributorAvatarRenderer = ({
84
99
  }) => {
85
100
  const isAgent = contributor.kind === 'agent';
86
101
  const element = doc.createElement('span');
87
- element.setAttribute('style', boxStyle);
102
+ element.setAttribute('style', isAgent ? `${agentBoxStyle} ${agentShadowStyle}` : boxStyle);
88
103
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
89
104
  // announcement comes from.
90
105
  element.setAttribute('aria-hidden', 'true');
@@ -95,7 +110,6 @@ export const contributorAvatarRenderer = ({
95
110
  shape.setAttribute('style', shapeStyle);
96
111
  element.appendChild(shape);
97
112
  if (isAgent) {
98
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
99
113
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
100
114
  } else {
101
115
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -144,8 +158,7 @@ export const contributorAvatarRenderer = ({
144
158
  }
145
159
  const setRingColor = nextRingColor => {
146
160
  if (isAgent) {
147
- element.style.setProperty('background', nextRingColor);
148
- // Shows through wherever the artwork is transparent, as the avatar background did.
161
+ // No ring; shows through wherever the artwork is transparent, as before.
149
162
  shape.style.setProperty('background', nextRingColor);
150
163
  return;
151
164
  }
package/dist/esm/ui/ContributorTag/buildContributorTagDom.js CHANGED
@@ -103,7 +103,7 @@ var constraintStyle = convertToInlineCss({
103
103
  var tagStyle = convertToInlineCss({
104
104
  display: 'inline-flex',
105
105
  alignItems: 'center',
106
- gap: "var(--ds-space-050, 4px)",
106
+ gap: "var(--ds-space-025, 2px)",
107
107
  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
108
108
  maxWidth: '100%',
109
109
  minWidth: 0,
package/dist/esm/ui/ContributorTag/contributorAvatarRenderer.js CHANGED
@@ -41,6 +41,17 @@ var boxStyle = convertToInlineCss({
41
41
  width: "".concat(AVATAR_BOX_SIZE, "px"),
42
42
  height: "".concat(AVATAR_BOX_SIZE, "px")
43
43
  });
44
+
45
+ /** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
46
+ var agentBoxStyle = convertToInlineCss({
47
+ display: 'inline-flex',
48
+ alignItems: 'center',
49
+ justifyContent: 'center',
50
+ flexShrink: 0,
51
+ boxSizing: 'border-box',
52
+ width: "".concat(AVATAR_SIZE, "px"),
53
+ height: "".concat(AVATAR_SIZE, "px")
54
+ });
44
55
  var shapeStyle = convertToInlineCss({
45
56
  display: 'flex',
46
57
  alignItems: 'center',
@@ -51,6 +62,10 @@ var shapeStyle = convertToInlineCss({
51
62
  aspectRatio: '1/1',
52
63
  overflow: 'hidden'
53
64
  });
65
+ var agentShadowStyle = convertToInlineCss({
66
+ // No clip-path on `element`, so the blur isn't cut off.
67
+ filter: "drop-shadow(0 5px 5px ".concat("var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 1px 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ") drop-shadow(0 0 2px ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ")")
68
+ });
54
69
  var imageStyle = convertToInlineCss({
55
70
  display: 'block',
56
71
  width: '100%',
@@ -83,7 +98,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
83
98
  stackIndex = _ref.stackIndex;
84
99
  var isAgent = contributor.kind === 'agent';
85
100
  var element = doc.createElement('span');
86
- element.setAttribute('style', boxStyle);
101
+ element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
87
102
  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
88
103
  // announcement comes from.
89
104
  element.setAttribute('aria-hidden', 'true');
@@ -94,7 +109,6 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
94
109
  shape.setAttribute('style', shapeStyle);
95
110
  element.appendChild(shape);
96
111
  if (isAgent) {
97
- element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
98
112
  shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
99
113
  } else {
100
114
  shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
@@ -143,8 +157,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
143
157
  }
144
158
  var setRingColor = function setRingColor(nextRingColor) {
145
159
  if (isAgent) {
146
- element.style.setProperty('background', nextRingColor);
147
- // Shows through wherever the artwork is transparent, as the avatar background did.
160
+ // No ring; shows through wherever the artwork is transparent, as before.
148
161
  shape.style.setProperty('background', nextRingColor);
149
162
  return;
150
163
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-show-diff",
3
- "version": "22.0.0",
3
+ "version": "22.0.1",
4
4
  "description": "ShowDiff plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",