@atlaskit/editor-plugin-card 5.4.2 → 5.4.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 (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/AwarenessWrapper/index.js +15 -11
  3. package/dist/cjs/ui/OpenButtonOverlay/index.js +36 -22
  4. package/dist/es2019/ui/AwarenessWrapper/index.js +11 -7
  5. package/dist/es2019/ui/OpenButtonOverlay/index.js +36 -22
  6. package/dist/esm/ui/AwarenessWrapper/index.js +15 -11
  7. package/dist/esm/ui/OpenButtonOverlay/index.js +36 -22
  8. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#132051](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132051)
8
+ [`d4b3a24694bb8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4b3a24694bb8) -
9
+ [ux] [ED-27252] Hide open link overlay in editor view mode
10
+
11
+ ## 5.4.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [#131428](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131428)
16
+ [`3aa1f96909918`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aa1f96909918) -
17
+ [ux] Update OpenButtonOverlay to fix styles.
18
+
3
19
  ## 5.4.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/AwarenessWrapper/index.js CHANGED
@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
9
9
  var _react = require("react");
10
10
  var _react2 = require("@emotion/react");
11
11
  var _analyticsNext = require("@atlaskit/analytics-next");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
14
  var _utils = require("../../pm-plugins/utils");
14
15
  var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
@@ -102,17 +103,20 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
102
103
  return children;
103
104
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
104
105
  var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
105
- return (0, _react2.jsx)(_OpenButtonOverlay.default, {
106
- isVisible: isResolvedViewRendered && isHovered,
107
- onMouseEnter: function onMouseEnter() {
108
- return handleOverlayChange(true);
109
- },
110
- onMouseLeave: function onMouseLeave() {
111
- return handleOverlayChange(false);
112
- },
113
- url: url
114
- }, children);
115
- }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
106
+ if (shouldShowLinkOverlay || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
107
+ return (0, _react2.jsx)(_OpenButtonOverlay.default, {
108
+ isVisible: isResolvedViewRendered && isHovered,
109
+ onMouseEnter: function onMouseEnter() {
110
+ return handleOverlayChange(true);
111
+ },
112
+ onMouseLeave: function onMouseLeave() {
113
+ return handleOverlayChange(false);
114
+ },
115
+ url: url
116
+ }, children);
117
+ }
118
+ return children;
119
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
116
120
  var isInline = appearance === 'inline';
117
121
  return (0, _react.useMemo)(function () {
118
122
  var _cardContext$value;
package/dist/cjs/ui/OpenButtonOverlay/index.js CHANGED
@@ -11,8 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _react2 = require("@emotion/react");
14
- var _new = require("@atlaskit/button/new");
15
14
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
15
+ var _primitives = require("@atlaskit/primitives");
16
16
  var _excluded = ["children", "isVisible", "url"];
17
17
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
18
18
  /* eslint-disable @atlaskit/design-system/prefer-primitives */
@@ -27,23 +27,33 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
27
27
  var containerStyles = (0, _react2.css)({
28
28
  position: 'relative'
29
29
  });
30
- var overlayStyles = (0, _react2.css)({
30
+ var iconWrapperStyles = (0, _primitives.xcss)({
31
+ display: 'inline-flex',
32
+ justifyContent: 'center',
33
+ alignItems: 'center',
34
+ height: '17px',
35
+ width: '17px'
36
+ });
37
+ var linkStyles = (0, _primitives.xcss)({
31
38
  position: 'absolute',
32
- left: '2px',
33
- top: 0,
34
- backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
35
- borderRadius: "var(--ds-border-radius, 3px)",
39
+ left: 'space.025',
40
+ top: '-1px',
36
41
  display: 'inline-flex',
37
- justifyContent: 'flex-start',
38
42
  alignItems: 'center',
39
- verticalAlign: 'text-top',
40
- height: '19px',
43
+ verticalAlign: 'middle',
44
+ paddingBlock: 'space.025',
45
+ paddingInline: 'space.050',
46
+ gap: 'space.025',
41
47
  overflow: 'hidden',
42
- // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
43
- zIndex: 2,
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
45
- a: {
46
- padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
48
+ zIndex: 'card',
49
+ backgroundColor: 'color.background.accent.gray.subtlest',
50
+ borderRadius: "var(--ds-border-radius, 3px)",
51
+ color: 'color.text.subtle',
52
+ textDecoration: 'none',
53
+ ':hover': {
54
+ backgroundColor: 'elevation.surface.hovered',
55
+ color: 'color.text.subtle',
56
+ textDecoration: 'none'
47
57
  }
48
58
  });
49
59
  var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
@@ -83,16 +93,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
83
93
  }, props, {
84
94
  css: containerStyles,
85
95
  onDoubleClick: handleDoubleClick
86
- }), children, isVisible && (0, _react2.jsx)("div", {
96
+ }), children, isVisible && (0, _react2.jsx)(_primitives.Anchor, {
87
97
  ref: openButtonRef,
88
- css: [overlayStyles]
89
- }, (0, _react2.jsx)(_new.LinkButton, {
90
- spacing: "compact",
98
+ xcss: linkStyles,
91
99
  href: url,
92
- target: "_blank",
93
- iconBefore: _linkExternal.default,
94
- appearance: "default"
95
- }, showLabel ? label : '')))
100
+ target: "_blank"
101
+ }, (0, _react2.jsx)(_primitives.Box, {
102
+ xcss: iconWrapperStyles
103
+ }, (0, _react2.jsx)(_linkExternal.default, {
104
+ label: ""
105
+ })), showLabel && (0, _react2.jsx)(_primitives.Text, {
106
+ size: "small",
107
+ color: "color.text.subtle",
108
+ maxLines: 1
109
+ }, label)))
96
110
  );
97
111
  };
98
112
  var _default = exports.default = OpenButtonOverlay;
package/dist/es2019/ui/AwarenessWrapper/index.js CHANGED
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { AnalyticsContext } from '@atlaskit/analytics-next';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
12
  import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
12
13
  import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
@@ -88,13 +89,16 @@ export const AwarenessWrapper = ({
88
89
  return children;
89
90
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
90
91
  const cardWithOpenButtonOverlay = useMemo(() => {
91
- return jsx(OpenButtonOverlay, {
92
- isVisible: isResolvedViewRendered && isHovered,
93
- onMouseEnter: () => handleOverlayChange(true),
94
- onMouseLeave: () => handleOverlayChange(false),
95
- url: url
96
- }, children);
97
- }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
92
+ if (shouldShowLinkOverlay || !fg('platform_editor_controls_patch_1')) {
93
+ return jsx(OpenButtonOverlay, {
94
+ isVisible: isResolvedViewRendered && isHovered,
95
+ onMouseEnter: () => handleOverlayChange(true),
96
+ onMouseLeave: () => handleOverlayChange(false),
97
+ url: url
98
+ }, children);
99
+ }
100
+ return children;
101
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
98
102
  const isInline = appearance === 'inline';
99
103
  return useMemo(() => {
100
104
  var _cardContext$value;
package/dist/es2019/ui/OpenButtonOverlay/index.js CHANGED
@@ -9,28 +9,38 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
9
9
  import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
- import { LinkButton } from '@atlaskit/button/new';
13
12
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
13
+ import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
14
14
  const containerStyles = css({
15
15
  position: 'relative'
16
16
  });
17
- const overlayStyles = css({
17
+ const iconWrapperStyles = xcss({
18
+ display: 'inline-flex',
19
+ justifyContent: 'center',
20
+ alignItems: 'center',
21
+ height: '17px',
22
+ width: '17px'
23
+ });
24
+ const linkStyles = xcss({
18
25
  position: 'absolute',
19
- left: '2px',
20
- top: 0,
21
- backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
22
- borderRadius: "var(--ds-border-radius, 3px)",
26
+ left: 'space.025',
27
+ top: '-1px',
23
28
  display: 'inline-flex',
24
- justifyContent: 'flex-start',
25
29
  alignItems: 'center',
26
- verticalAlign: 'text-top',
27
- height: '19px',
30
+ verticalAlign: 'middle',
31
+ paddingBlock: 'space.025',
32
+ paddingInline: 'space.050',
33
+ gap: 'space.025',
28
34
  overflow: 'hidden',
29
- // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
30
- zIndex: 2,
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
32
- a: {
33
- padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
35
+ zIndex: 'card',
36
+ backgroundColor: 'color.background.accent.gray.subtlest',
37
+ borderRadius: "var(--ds-border-radius, 3px)",
38
+ color: 'color.text.subtle',
39
+ textDecoration: 'none',
40
+ ':hover': {
41
+ backgroundColor: 'elevation.surface.hovered',
42
+ color: 'color.text.subtle',
43
+ textDecoration: 'none'
34
44
  }
35
45
  });
36
46
  const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
@@ -67,16 +77,20 @@ const OpenButtonOverlay = ({
67
77
  }, props, {
68
78
  css: containerStyles,
69
79
  onDoubleClick: handleDoubleClick
70
- }), children, isVisible && jsx("div", {
80
+ }), children, isVisible && jsx(Anchor, {
71
81
  ref: openButtonRef,
72
- css: [overlayStyles]
73
- }, jsx(LinkButton, {
74
- spacing: "compact",
82
+ xcss: linkStyles,
75
83
  href: url,
76
- target: "_blank",
77
- iconBefore: LinkExternalIcon,
78
- appearance: "default"
79
- }, showLabel ? label : '')))
84
+ target: "_blank"
85
+ }, jsx(Box, {
86
+ xcss: iconWrapperStyles
87
+ }, jsx(LinkExternalIcon, {
88
+ label: ""
89
+ })), showLabel && jsx(Text, {
90
+ size: "small",
91
+ color: "color.text.subtle",
92
+ maxLines: 1
93
+ }, label)))
80
94
  );
81
95
  };
82
96
  export default OpenButtonOverlay;
package/dist/esm/ui/AwarenessWrapper/index.js CHANGED
@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { AnalyticsContext } from '@atlaskit/analytics-next';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
13
  import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
13
14
  import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
@@ -94,17 +95,20 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
94
95
  return children;
95
96
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
96
97
  var cardWithOpenButtonOverlay = useMemo(function () {
97
- return jsx(OpenButtonOverlay, {
98
- isVisible: isResolvedViewRendered && isHovered,
99
- onMouseEnter: function onMouseEnter() {
100
- return handleOverlayChange(true);
101
- },
102
- onMouseLeave: function onMouseLeave() {
103
- return handleOverlayChange(false);
104
- },
105
- url: url
106
- }, children);
107
- }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
98
+ if (shouldShowLinkOverlay || !fg('platform_editor_controls_patch_1')) {
99
+ return jsx(OpenButtonOverlay, {
100
+ isVisible: isResolvedViewRendered && isHovered,
101
+ onMouseEnter: function onMouseEnter() {
102
+ return handleOverlayChange(true);
103
+ },
104
+ onMouseLeave: function onMouseLeave() {
105
+ return handleOverlayChange(false);
106
+ },
107
+ url: url
108
+ }, children);
109
+ }
110
+ return children;
111
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
108
112
  var isInline = appearance === 'inline';
109
113
  return useMemo(function () {
110
114
  var _cardContext$value;
package/dist/esm/ui/OpenButtonOverlay/index.js CHANGED
@@ -12,28 +12,38 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
12
12
  import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
13
13
 
14
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
- import { LinkButton } from '@atlaskit/button/new';
16
15
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
16
+ import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
17
17
  var containerStyles = css({
18
18
  position: 'relative'
19
19
  });
20
- var overlayStyles = css({
20
+ var iconWrapperStyles = xcss({
21
+ display: 'inline-flex',
22
+ justifyContent: 'center',
23
+ alignItems: 'center',
24
+ height: '17px',
25
+ width: '17px'
26
+ });
27
+ var linkStyles = xcss({
21
28
  position: 'absolute',
22
- left: '2px',
23
- top: 0,
24
- backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
25
- borderRadius: "var(--ds-border-radius, 3px)",
29
+ left: 'space.025',
30
+ top: '-1px',
26
31
  display: 'inline-flex',
27
- justifyContent: 'flex-start',
28
32
  alignItems: 'center',
29
- verticalAlign: 'text-top',
30
- height: '19px',
33
+ verticalAlign: 'middle',
34
+ paddingBlock: 'space.025',
35
+ paddingInline: 'space.050',
36
+ gap: 'space.025',
31
37
  overflow: 'hidden',
32
- // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
33
- zIndex: 2,
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
- a: {
36
- padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
38
+ zIndex: 'card',
39
+ backgroundColor: 'color.background.accent.gray.subtlest',
40
+ borderRadius: "var(--ds-border-radius, 3px)",
41
+ color: 'color.text.subtle',
42
+ textDecoration: 'none',
43
+ ':hover': {
44
+ backgroundColor: 'elevation.surface.hovered',
45
+ color: 'color.text.subtle',
46
+ textDecoration: 'none'
37
47
  }
38
48
  });
39
49
  var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
@@ -73,16 +83,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
73
83
  }, props, {
74
84
  css: containerStyles,
75
85
  onDoubleClick: handleDoubleClick
76
- }), children, isVisible && jsx("div", {
86
+ }), children, isVisible && jsx(Anchor, {
77
87
  ref: openButtonRef,
78
- css: [overlayStyles]
79
- }, jsx(LinkButton, {
80
- spacing: "compact",
88
+ xcss: linkStyles,
81
89
  href: url,
82
- target: "_blank",
83
- iconBefore: LinkExternalIcon,
84
- appearance: "default"
85
- }, showLabel ? label : '')))
90
+ target: "_blank"
91
+ }, jsx(Box, {
92
+ xcss: iconWrapperStyles
93
+ }, jsx(LinkExternalIcon, {
94
+ label: ""
95
+ })), showLabel && jsx(Text, {
96
+ size: "small",
97
+ color: "color.text.subtle",
98
+ maxLines: 1
99
+ }, label)))
86
100
  );
87
101
  };
88
102
  export default OpenButtonOverlay;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.4.2",
3
+ "version": "5.4.4",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-prosemirror": "7.0.0",
52
52
  "@atlaskit/editor-shared-styles": "^3.4.0",
53
53
  "@atlaskit/frontend-utilities": "^3.0.0",
54
- "@atlaskit/icon": "^25.0.0",
54
+ "@atlaskit/icon": "^25.1.0",
55
55
  "@atlaskit/link-analytics": "^9.1.0",
56
56
  "@atlaskit/link-client-extension": "^4.0.0",
57
57
  "@atlaskit/link-datasource": "^4.1.0",
@@ -60,7 +60,7 @@
60
60
  "@atlaskit/menu": "^3.1.0",
61
61
  "@atlaskit/platform-feature-flags": "^1.1.0",
62
62
  "@atlaskit/primitives": "^14.2.0",
63
- "@atlaskit/smart-card": "^36.0.0",
63
+ "@atlaskit/smart-card": "^36.1.0",
64
64
  "@atlaskit/theme": "^18.0.0",
65
65
  "@atlaskit/tmp-editor-statsig": "^4.4.0",
66
66
  "@atlaskit/tokens": "^4.5.0",
@@ -148,6 +148,9 @@
148
148
  },
149
149
  "platform_ssr_smartlinks_editor": {
150
150
  "type": "boolean"
151
+ },
152
+ "platform_editor_controls_patch_1": {
153
+ "type": "boolean"
151
154
  }
152
155
  },
153
156
  "stricter": {