@atlaskit/editor-plugin-card 5.4.8 → 5.4.10

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.4.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#135796](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135796)
8
+ [`6cec67e75af40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6cec67e75af40) -
9
+ [ux] Fix open button text not display consistantly
10
+ - Updated dependencies
11
+
12
+ ## 5.4.9
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 5.4.8
4
19
 
5
20
  ### Patch Changes
@@ -35,6 +35,12 @@ var iconWrapperStyles = (0, _primitives.xcss)({
35
35
  height: '17px',
36
36
  width: '17px'
37
37
  });
38
+ var hiddenTextStyle = (0, _react2.css)({
39
+ overflow: 'hidden',
40
+ whiteSpace: 'nowrap',
41
+ position: 'absolute',
42
+ visibility: 'hidden'
43
+ });
38
44
  var linkStyles = (0, _primitives.xcss)({
39
45
  position: 'absolute',
40
46
  left: 'space.025',
@@ -58,6 +64,9 @@ var linkStyles = (0, _primitives.xcss)({
58
64
  }
59
65
  });
60
66
  var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
67
+ var ICON_WIDTH = 16;
68
+ var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
69
+
61
70
  var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
62
71
  var children = _ref.children,
63
72
  _ref$isVisible = _ref.isVisible,
@@ -68,6 +77,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
68
77
  var label = 'Open';
69
78
  var containerRef = (0, _react.useRef)(null);
70
79
  var openButtonRef = (0, _react.useRef)(null);
80
+ var hiddenTextRef = (0, _react.useRef)(null);
71
81
  var _useState = (0, _react.useState)(true),
72
82
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
73
83
  showLabel = _useState2[0],
@@ -76,10 +86,26 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
76
86
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
77
87
  isHovered = _useState4[0],
78
88
  setHovered = _useState4[1];
89
+ var openTextWidthRef = (0, _react.useRef)(DEFAULT_OPEN_TEXT_WIDTH);
79
90
  var handleDoubleClick = function handleDoubleClick() {
80
91
  // Double click opens the link in a new tab
81
92
  window.open(url, '_blank');
82
93
  };
94
+ (0, _react.useLayoutEffect)(function () {
95
+ var hiddenText = hiddenTextRef.current;
96
+ if (!hiddenText) {
97
+ return;
98
+ }
99
+ // Measure the width of the hidden text
100
+ // Temporarily make the element visible to measure its width
101
+ hiddenText.style.visibility = 'hidden';
102
+ hiddenText.style.display = 'inline';
103
+ openTextWidthRef.current = hiddenText.offsetWidth;
104
+
105
+ // Reset the hiddenText's display property
106
+ hiddenText.style.display = 'none';
107
+ hiddenText.style.visibility = 'inherit';
108
+ }, []);
83
109
  (0, _react.useLayoutEffect)(function () {
84
110
  var _containerRef$current, _openButtonRef$curren;
85
111
  if (!isVisible || !isHovered) {
@@ -87,12 +113,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
87
113
  }
88
114
  var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
89
115
  var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
90
- var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
116
+ if (!cardWidth || !openButtonWidth) {
117
+ return;
118
+ }
119
+ var canShowLabel = true;
120
+ if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
121
+ canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
122
+ } else {
123
+ canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
124
+ }
91
125
  setShowLabel(canShowLabel);
92
126
  }, [isVisible, isHovered]);
93
- var handleOverlayChange = (0, _react.useCallback)(function (isHovered) {
127
+ var handleOverlayChange = function handleOverlayChange(isHovered) {
94
128
  setHovered(isHovered);
95
- }, []);
129
+ };
96
130
  if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
97
131
  return (
98
132
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -106,13 +140,21 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
106
140
  onMouseLeave: function onMouseLeave() {
107
141
  return handleOverlayChange(false);
108
142
  }
109
- }, children, isHovered && (0, _react2.jsx)(_primitives.Anchor, {
143
+ }, children, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && (0, _react2.jsx)("span", {
144
+ css: hiddenTextStyle,
145
+ "aria-hidden": "true"
146
+ }, (0, _react2.jsx)(_primitives.Text, {
147
+ ref: hiddenTextRef,
148
+ size: "small",
149
+ maxLines: 1
150
+ }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
110
151
  ref: openButtonRef,
111
152
  xcss: linkStyles,
112
153
  href: url,
113
154
  target: "_blank"
114
155
  }, (0, _react2.jsx)(_primitives.Box, {
115
- xcss: iconWrapperStyles
156
+ xcss: iconWrapperStyles,
157
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
116
158
  }, (0, _react2.jsx)(_linkExternal.default, {
117
159
  label: ""
118
160
  })), showLabel && (0, _react2.jsx)(_primitives.Text, {
@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
5
5
  * @jsxRuntime classic
6
6
  * @jsx jsx
7
7
  */
8
- import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
8
+ 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
@@ -22,6 +22,12 @@ const iconWrapperStyles = xcss({
22
22
  height: '17px',
23
23
  width: '17px'
24
24
  });
25
+ const hiddenTextStyle = css({
26
+ overflow: 'hidden',
27
+ whiteSpace: 'nowrap',
28
+ position: 'absolute',
29
+ visibility: 'hidden'
30
+ });
25
31
  const linkStyles = xcss({
26
32
  position: 'absolute',
27
33
  left: 'space.025',
@@ -45,6 +51,9 @@ const linkStyles = xcss({
45
51
  }
46
52
  });
47
53
  const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
54
+ const ICON_WIDTH = 16;
55
+ const DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
56
+
48
57
  const OpenButtonOverlay = ({
49
58
  children,
50
59
  isVisible = false,
@@ -55,12 +64,29 @@ const OpenButtonOverlay = ({
55
64
  const label = 'Open';
56
65
  const containerRef = useRef(null);
57
66
  const openButtonRef = useRef(null);
67
+ const hiddenTextRef = useRef(null);
58
68
  const [showLabel, setShowLabel] = useState(true);
59
69
  const [isHovered, setHovered] = useState(false);
70
+ const openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
60
71
  const handleDoubleClick = () => {
61
72
  // Double click opens the link in a new tab
62
73
  window.open(url, '_blank');
63
74
  };
75
+ useLayoutEffect(() => {
76
+ const hiddenText = hiddenTextRef.current;
77
+ if (!hiddenText) {
78
+ return;
79
+ }
80
+ // Measure the width of the hidden text
81
+ // Temporarily make the element visible to measure its width
82
+ hiddenText.style.visibility = 'hidden';
83
+ hiddenText.style.display = 'inline';
84
+ openTextWidthRef.current = hiddenText.offsetWidth;
85
+
86
+ // Reset the hiddenText's display property
87
+ hiddenText.style.display = 'none';
88
+ hiddenText.style.visibility = 'inherit';
89
+ }, []);
64
90
  useLayoutEffect(() => {
65
91
  var _containerRef$current, _openButtonRef$curren;
66
92
  if (!isVisible || !isHovered) {
@@ -68,12 +94,20 @@ const OpenButtonOverlay = ({
68
94
  }
69
95
  const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
70
96
  const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
71
- const canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
97
+ if (!cardWidth || !openButtonWidth) {
98
+ return;
99
+ }
100
+ let canShowLabel = true;
101
+ if (fg('platform_editor_controls_patch_2')) {
102
+ canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
103
+ } else {
104
+ canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
105
+ }
72
106
  setShowLabel(canShowLabel);
73
107
  }, [isVisible, isHovered]);
74
- const handleOverlayChange = useCallback(isHovered => {
108
+ const handleOverlayChange = isHovered => {
75
109
  setHovered(isHovered);
76
- }, []);
110
+ };
77
111
  if (fg('platform_editor_controls_patch_1')) {
78
112
  return (
79
113
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -83,13 +117,21 @@ const OpenButtonOverlay = ({
83
117
  onDoubleClick: handleDoubleClick,
84
118
  onMouseEnter: () => handleOverlayChange(true),
85
119
  onMouseLeave: () => handleOverlayChange(false)
86
- }, children, isHovered && jsx(Anchor, {
120
+ }, children, fg('platform_editor_controls_patch_2') && jsx("span", {
121
+ css: hiddenTextStyle,
122
+ "aria-hidden": "true"
123
+ }, jsx(Text, {
124
+ ref: hiddenTextRef,
125
+ size: "small",
126
+ maxLines: 1
127
+ }, label)), isHovered && jsx(Anchor, {
87
128
  ref: openButtonRef,
88
129
  xcss: linkStyles,
89
130
  href: url,
90
131
  target: "_blank"
91
132
  }, jsx(Box, {
92
- xcss: iconWrapperStyles
133
+ xcss: iconWrapperStyles,
134
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
93
135
  }, jsx(LinkExternalIcon, {
94
136
  label: ""
95
137
  })), showLabel && jsx(Text, {
@@ -8,7 +8,7 @@ var _excluded = ["children", "isVisible", "url"];
8
8
  * @jsxRuntime classic
9
9
  * @jsx jsx
10
10
  */
11
- import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
11
+ 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
@@ -25,6 +25,12 @@ var iconWrapperStyles = xcss({
25
25
  height: '17px',
26
26
  width: '17px'
27
27
  });
28
+ var hiddenTextStyle = css({
29
+ overflow: 'hidden',
30
+ whiteSpace: 'nowrap',
31
+ position: 'absolute',
32
+ visibility: 'hidden'
33
+ });
28
34
  var linkStyles = xcss({
29
35
  position: 'absolute',
30
36
  left: 'space.025',
@@ -48,6 +54,9 @@ var linkStyles = xcss({
48
54
  }
49
55
  });
50
56
  var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
57
+ var ICON_WIDTH = 16;
58
+ var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
59
+
51
60
  var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
52
61
  var children = _ref.children,
53
62
  _ref$isVisible = _ref.isVisible,
@@ -58,6 +67,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
58
67
  var label = 'Open';
59
68
  var containerRef = useRef(null);
60
69
  var openButtonRef = useRef(null);
70
+ var hiddenTextRef = useRef(null);
61
71
  var _useState = useState(true),
62
72
  _useState2 = _slicedToArray(_useState, 2),
63
73
  showLabel = _useState2[0],
@@ -66,10 +76,26 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
66
76
  _useState4 = _slicedToArray(_useState3, 2),
67
77
  isHovered = _useState4[0],
68
78
  setHovered = _useState4[1];
79
+ var openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
69
80
  var handleDoubleClick = function handleDoubleClick() {
70
81
  // Double click opens the link in a new tab
71
82
  window.open(url, '_blank');
72
83
  };
84
+ useLayoutEffect(function () {
85
+ var hiddenText = hiddenTextRef.current;
86
+ if (!hiddenText) {
87
+ return;
88
+ }
89
+ // Measure the width of the hidden text
90
+ // Temporarily make the element visible to measure its width
91
+ hiddenText.style.visibility = 'hidden';
92
+ hiddenText.style.display = 'inline';
93
+ openTextWidthRef.current = hiddenText.offsetWidth;
94
+
95
+ // Reset the hiddenText's display property
96
+ hiddenText.style.display = 'none';
97
+ hiddenText.style.visibility = 'inherit';
98
+ }, []);
73
99
  useLayoutEffect(function () {
74
100
  var _containerRef$current, _openButtonRef$curren;
75
101
  if (!isVisible || !isHovered) {
@@ -77,12 +103,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
77
103
  }
78
104
  var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
79
105
  var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
80
- var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
106
+ if (!cardWidth || !openButtonWidth) {
107
+ return;
108
+ }
109
+ var canShowLabel = true;
110
+ if (fg('platform_editor_controls_patch_2')) {
111
+ canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
112
+ } else {
113
+ canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
114
+ }
81
115
  setShowLabel(canShowLabel);
82
116
  }, [isVisible, isHovered]);
83
- var handleOverlayChange = useCallback(function (isHovered) {
117
+ var handleOverlayChange = function handleOverlayChange(isHovered) {
84
118
  setHovered(isHovered);
85
- }, []);
119
+ };
86
120
  if (fg('platform_editor_controls_patch_1')) {
87
121
  return (
88
122
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -96,13 +130,21 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
96
130
  onMouseLeave: function onMouseLeave() {
97
131
  return handleOverlayChange(false);
98
132
  }
99
- }, children, isHovered && jsx(Anchor, {
133
+ }, children, fg('platform_editor_controls_patch_2') && jsx("span", {
134
+ css: hiddenTextStyle,
135
+ "aria-hidden": "true"
136
+ }, jsx(Text, {
137
+ ref: hiddenTextRef,
138
+ size: "small",
139
+ maxLines: 1
140
+ }, label)), isHovered && jsx(Anchor, {
100
141
  ref: openButtonRef,
101
142
  xcss: linkStyles,
102
143
  href: url,
103
144
  target: "_blank"
104
145
  }, jsx(Box, {
105
- xcss: iconWrapperStyles
146
+ xcss: iconWrapperStyles,
147
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
106
148
  }, jsx(LinkExternalIcon, {
107
149
  label: ""
108
150
  })), showLabel && jsx(Text, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.4.8",
3
+ "version": "5.4.10",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,9 +35,9 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
- "@atlaskit/button": "^22.0.0",
38
+ "@atlaskit/button": "^23.0.0",
39
39
  "@atlaskit/custom-steps": "^0.11.0",
40
- "@atlaskit/editor-common": "^102.15.0",
40
+ "@atlaskit/editor-common": "^102.18.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
42
42
  "@atlaskit/editor-plugin-base": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -51,19 +51,19 @@
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.3.0",
54
+ "@atlaskit/icon": "^25.5.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",
58
58
  "@atlaskit/linking-common": "^8.0.0",
59
- "@atlaskit/linking-types": "^9.6.0",
59
+ "@atlaskit/linking-types": "^9.7.0",
60
60
  "@atlaskit/menu": "^3.2.0",
61
61
  "@atlaskit/platform-feature-flags": "^1.1.0",
62
- "@atlaskit/primitives": "^14.2.0",
62
+ "@atlaskit/primitives": "^14.3.0",
63
63
  "@atlaskit/smart-card": "^36.2.0",
64
64
  "@atlaskit/theme": "^18.0.0",
65
65
  "@atlaskit/tmp-editor-statsig": "^4.6.0",
66
- "@atlaskit/tokens": "^4.5.0",
66
+ "@atlaskit/tokens": "^4.6.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",
69
69
  "lodash": "^4.17.21",
@@ -145,6 +145,9 @@
145
145
  },
146
146
  "platform_editor_controls_patch_1": {
147
147
  "type": "boolean"
148
+ },
149
+ "platform_editor_controls_patch_2": {
150
+ "type": "boolean"
148
151
  }
149
152
  },
150
153
  "stricter": {