@atlaskit/renderer 114.7.2 → 114.7.3

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 +9 -0
  2. package/dist/cjs/ui/Renderer/index.js +1 -1
  3. package/dist/cjs/ui/annotations/element/mark.js +14 -1
  4. package/dist/es2019/ui/Renderer/index.js +1 -1
  5. package/dist/es2019/ui/annotations/element/mark.js +17 -1
  6. package/dist/esm/ui/Renderer/index.js +1 -1
  7. package/dist/esm/ui/annotations/element/mark.js +14 -1
  8. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 114.7.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#136245](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136245)
8
+ [`3574c1c351625`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3574c1c351625) -
9
+ EDITOR-195 Fixes issues where overlapping annotations on marks would visually break into separate
10
+ annotations. Changes behind platform_renderer_nested_annotation_styling
11
+
3
12
  ## 114.7.2
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
67
67
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
68
68
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
69
69
  var packageName = "@atlaskit/renderer";
70
- var packageVersion = "114.7.2";
70
+ var packageVersion = "114.7.3";
71
71
  var setAsQueryContainerStyles = (0, _react2.css)({
72
72
  containerName: 'ak-renderer-wrapper',
73
73
  containerType: 'inline-size',
package/dist/cjs/ui/annotations/element/mark.js CHANGED
@@ -44,6 +44,19 @@ var markStylesNew = (0, _react2.css)((0, _defineProperty2.default)({
44
44
  cursor: 'pointer'
45
45
  }
46
46
  }));
47
+ var markStylesLayeringFix = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
48
+ // Only apply transparency to nested marks when parent is focused
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
+ '&[data-has-focus="true"] mark': {
51
+ backgroundColor: 'transparent'
52
+ },
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
54
+ '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
55
+ background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
56
+ borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
57
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
58
+ }
59
+ }));
47
60
  var markStylesWithUpdatedShadow = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
48
61
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
62
  '&:focus, &[data-has-focus="true"]': {
@@ -216,7 +229,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
216
229
  return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
217
230
  id: id
218
231
  }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
219
- css: [markStylesNew, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, (0, _platformFeatureFlags.fg)('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
232
+ css: [markStylesNew, (0, _platformFeatureFlags.fg)('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, (0, _platformFeatureFlags.fg)('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
220
233
  style: {
221
234
  '--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
222
235
  '--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
48
48
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
49
49
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
50
50
  const packageName = "@atlaskit/renderer";
51
- const packageVersion = "114.7.2";
51
+ const packageVersion = "114.7.3";
52
52
  const setAsQueryContainerStyles = css({
53
53
  containerName: 'ak-renderer-wrapper',
54
54
  containerType: 'inline-size',
package/dist/es2019/ui/annotations/element/mark.js CHANGED
@@ -49,6 +49,22 @@ const markStylesNew = css({
49
49
  }
50
50
  }
51
51
  });
52
+ const markStylesLayeringFix = css({
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
54
+ [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
55
+ // Only apply transparency to nested marks when parent is focused
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
57
+ '&[data-has-focus="true"] mark': {
58
+ backgroundColor: 'transparent'
59
+ },
60
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
61
+ '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
62
+ background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
63
+ borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
64
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
65
+ }
66
+ }
67
+ });
52
68
  const markStylesWithUpdatedShadow = css({
53
69
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
54
70
  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
@@ -232,7 +248,7 @@ export const MarkComponent = ({
232
248
  ...accessibility,
233
249
  ...overriddenData,
234
250
  ...(!useBlockLevel && {
235
- css: [markStylesNew, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
251
+ css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
236
252
  style: {
237
253
  '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
238
254
  '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
57
57
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
58
58
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
59
59
  var packageName = "@atlaskit/renderer";
60
- var packageVersion = "114.7.2";
60
+ var packageVersion = "114.7.3";
61
61
  var setAsQueryContainerStyles = css({
62
62
  containerName: 'ak-renderer-wrapper',
63
63
  containerType: 'inline-size',
package/dist/esm/ui/annotations/element/mark.js CHANGED
@@ -38,6 +38,19 @@ var markStylesNew = css(_defineProperty({
38
38
  cursor: 'pointer'
39
39
  }
40
40
  }));
41
+ var markStylesLayeringFix = css(_defineProperty({}, "&[data-mark-annotation-state='".concat(AnnotationMarkStates.ACTIVE, "']"), {
42
+ // Only apply transparency to nested marks when parent is focused
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
44
+ '&[data-has-focus="true"] mark': {
45
+ backgroundColor: 'transparent'
46
+ },
47
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
48
+ '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
49
+ background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
50
+ borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
51
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
52
+ }
53
+ }));
41
54
  var markStylesWithUpdatedShadow = css(_defineProperty({}, "&[data-mark-annotation-state='".concat(AnnotationMarkStates.ACTIVE, "']"), {
42
55
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
43
56
  '&:focus, &[data-has-focus="true"]': {
@@ -210,7 +223,7 @@ export var MarkComponent = function MarkComponent(_ref) {
210
223
  return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
211
224
  id: id
212
225
  }, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
213
- css: [markStylesNew, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
226
+ css: [markStylesNew, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew, fg('inline_comment_shadow_update') && markStylesWithUpdatedShadow],
214
227
  style: {
215
228
  '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
216
229
  '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "114.7.2",
3
+ "version": "114.7.3",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -206,6 +206,9 @@
206
206
  },
207
207
  "platform_renderer_isPresentational": {
208
208
  "type": "boolean"
209
+ },
210
+ "platform_renderer_nested_annotation_styling": {
211
+ "type": "boolean"
209
212
  }
210
213
  },
211
214
  "af:exports": {