@atlaskit/editor-plugin-card 0.14.25 → 0.15.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 (10) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/ui/InlineCardOverlay/index.js +103 -105
  3. package/dist/cjs/ui/InlineCardOverlay/utils.js +9 -1
  4. package/dist/es2019/ui/InlineCardOverlay/index.js +104 -113
  5. package/dist/es2019/ui/InlineCardOverlay/utils.js +8 -0
  6. package/dist/esm/ui/InlineCardOverlay/index.js +106 -109
  7. package/dist/esm/ui/InlineCardOverlay/utils.js +8 -0
  8. package/dist/types/ui/InlineCardOverlay/utils.d.ts +2 -0
  9. package/dist/types-ts4.5/ui/InlineCardOverlay/utils.d.ts +2 -0
  10. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 0.15.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#64861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64861) [`87c2c502ea93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87c2c502ea93) - [UX] scale icon size based on font size in discoverability overlay
8
+ - [#64817](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64817) [`afa680b9f6bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/afa680b9f6bb) - change background color for active state of discoverability overlay to match color of smart link active state
9
+ - Updated dependencies
10
+
11
+ ## 0.15.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#64107](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64107) [`0372daafc639`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0372daafc639) - [ux] Refresh the inline card discoverability overlay design:
16
+
17
+ - changed color, text size, font, padding, overlay behaviour
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 0.14.25
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/ui/InlineCardOverlay/index.js CHANGED
@@ -16,103 +16,100 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
16
16
  var _reactIntlNext = require("react-intl-next");
17
17
  var _messages = require("@atlaskit/editor-common/messages");
18
18
  var _utils = require("@atlaskit/editor-common/utils");
19
- var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
20
- var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
19
+ var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
21
20
  var _colors = require("@atlaskit/theme/colors");
22
21
  var _utils2 = require("./utils");
23
22
  var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
23
+ var _active;
24
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
25
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
26
+ /** @jsx jsx */
24
27
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
27
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
28
29
  var DEBOUNCE_IN_MS = 5;
29
30
  var ESTIMATED_MIN_WIDTH_IN_PX = 16;
30
- var PADDING_IN_PX = 2;
31
- var ICON_WIDTH_IN_PX = 16;
32
- var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
31
+ var PADDING_IN_PX = 4;
32
+ var ICON_WIDTH_IN_PX = 14;
33
+ var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
33
34
  var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
35
+ var OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
34
36
  var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
35
37
  var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
38
+ var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(_colors.N0, ")");
39
+ var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(_colors.B100, ")");
40
+ var getGradientWithColor = function getGradientWithColor(color) {
41
+ return "linear-gradient(270deg, ".concat(color, " 0%, rgba(255, 255, 255, 0.00) 100%)");
42
+ };
36
43
  var containerStyles = (0, _react2.css)({
37
44
  position: 'relative',
38
- lineHeight: 'normal'
39
- });
40
- var linkStyles = (0, _react2.css)({
41
- color: "var(--ds-text, #172B4D)",
42
- textDecoration: 'none'
45
+ lineHeight: 'normal',
46
+ ':active': (_active = {}, (0, _defineProperty2.default)(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
47
+ background: SMART_LINK_ACTIVE_COLOR
48
+ }), (0, _defineProperty2.default)(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
49
+ background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
50
+ }), _active)
43
51
  });
44
52
  var overlayStyles = (0, _react2.css)({
45
53
  // Set default styling to be invisible but available in dom for width calculation.
46
- position: 'absolute',
47
54
  visibility: 'hidden',
48
- // Positioning
55
+ // Layout
56
+ position: 'absolute',
49
57
  display: 'inline-flex',
50
- flexWrap: 'nowrap',
58
+ justifyContent: 'flex-end',
51
59
  alignItems: 'center',
52
- alignSelf: 'stretch',
53
- height: 'inherit',
54
- lineHeight: 'initial',
55
- width: 'max-content',
56
- bottom: "var(--ds-space-0, 0)",
57
- right: 3,
58
- margin: "-1px ".concat("var(--ds-space-0, 0)"),
59
- padding: "var(--ds-space-0, 0)",
60
- // Styling
61
- fontSize: 'inherit',
62
- fontWeight: 'normal',
63
- color: "var(--ds-text, ".concat(_colors.N800, ")"),
64
- background: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")"),
65
- borderRadius: 3,
66
- // inline card border of 4px - 1px
67
-
68
- // Using `&` twice to increase specificity. (These are not nested styles.)
69
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
70
- '&&:link': _objectSpread({}, linkStyles),
71
- '&&:active': _objectSpread({}, linkStyles),
72
- '&&:focus': _objectSpread({}, linkStyles),
73
- '&&:hover': _objectSpread({}, linkStyles),
74
- '&&:visited': _objectSpread({}, linkStyles),
75
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
76
-
60
+ verticalAlign: 'text-top',
61
+ height: '1lh',
62
+ '@supports not (height: 1lh)': {
63
+ height: '1.2em'
64
+ },
65
+ overflow: 'hidden',
77
66
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
78
67
  zIndex: 2,
79
- // Fill lines, match heading and paragraph size
80
- '::before': {
81
- content: '" "',
82
- display: 'inline-block',
83
- verticalAlign: 'middle',
84
- width: "var(--ds-space-0, 0)",
85
- margin: "var(--ds-space-0, 0)",
86
- padding: "var(--ds-space-0, 0)"
87
- }
68
+ // Appearance
69
+ color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
70
+ // Using `&` twice to increase specificity. (These are not nested styles.)
71
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
72
+ color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
73
+ textDecoration: 'none'
74
+ },
75
+ pointerEvents: 'none'
88
76
  });
89
77
  var showOverlayStyles = (0, _react2.css)({
90
78
  position: 'relative',
91
79
  visibility: 'visible'
92
80
  });
93
- var safariOverlayStyles = (0, _react2.css)({
94
- height: '1.1em',
95
- paddingBottom: "var(--ds-space-025, 2px)",
96
- right: 3
97
- });
98
- var textStyles = (0, _react2.css)({
99
- paddingLeft: "var(--ds-space-050, 4px)"
100
- });
101
81
  var iconStyles = (0, _react2.css)({
102
82
  // Position icon in the middle
103
- display: 'inline-grid',
104
- // We want to position the icon in the middle of large text type like heading 1
105
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
106
83
  span: {
107
- display: 'inline-grid'
84
+ display: 'flex'
108
85
  }
109
86
  });
110
- var markerStyles = (0, _react2.css)({
111
- height: "var(--ds-space-0, 0)",
112
- width: "var(--ds-space-0, 0)",
113
- margin: "var(--ds-space-0, 0)",
114
- padding: "var(--ds-space-0, 0)",
115
- whiteSpace: 'nowrap'
87
+ var labelStyles = (0, _react2.css)({
88
+ fontSize: '0.875em',
89
+ fontWeight: '600',
90
+ width: 'max-content'
91
+ });
92
+ var iconAndLabelStyles = (0, _react2.css)({
93
+ background: SMART_LINK_BACKGROUND_COLOR,
94
+ display: 'flex',
95
+ alignItems: 'center',
96
+ height: '100%',
97
+ gap: "var(--ds-space-050, 4px)",
98
+ paddingRight: "var(--ds-space-050, 4px)",
99
+ // Margin to avoid the background covering the link border
100
+ marginRight: "var(--ds-space-025, 2px)"
101
+ });
102
+ var overflowingContainerStyles = (0, _react2.css)({
103
+ display: 'flex',
104
+ flexDirection: 'row-reverse',
105
+ alignItems: 'center',
106
+ width: 'max-content',
107
+ height: '100%'
108
+ });
109
+ var gradientStyles = (0, _react2.css)({
110
+ width: '2.5rem',
111
+ height: '100%',
112
+ background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
116
113
  });
117
114
  var InlineCardOverlay = function InlineCardOverlay(_ref) {
118
115
  var children = _ref.children,
@@ -132,13 +129,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
132
129
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
133
130
  showLabel = _useState4[0],
134
131
  setShowLabel = _useState4[1];
135
- var _useState5 = (0, _react.useState)(0),
132
+ var _useState5 = (0, _react.useState)(undefined),
136
133
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
137
- overlayWidth = _useState6[0],
138
- setOverlayWidth = _useState6[1];
134
+ availableWidth = _useState6[0],
135
+ setAvailableWidth = _useState6[1];
139
136
  var maxOverlayWidth = (0, _react.useRef)(0);
140
137
  var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
141
138
  var parentWidth = (0, _react.useRef)(0);
139
+ var iconSize = (0, _react.useRef)('small');
142
140
  var containerRef = (0, _react.useRef)(null);
143
141
  var setVisibility = (0, _react.useCallback)(function () {
144
142
  if (!containerRef.current || !maxOverlayWidth.current) {
@@ -154,26 +152,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
154
152
  // Get the width of the available space to display overlay.
155
153
  // This is the width of the inline link itself. If the inline
156
154
  // is wrapped to the next line, this is width of the last line.
157
- var availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
155
+ var _availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
158
156
  // Always leave at least the icon visible
159
157
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
160
-
161
- // If available width is less than the min width of overlay, don't show overlay.
162
- var canShowOverlay = availableWidth > minOverlayWidth.current;
163
- setShowOverlay(canShowOverlay);
164
- if (!canShowOverlay) {
165
- return;
166
- }
167
-
168
- // Otherwise, check if overlay can be show in full context with label and icon.
169
- var canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
158
+ setAvailableWidth(_availableWidth);
159
+ var canShowLabel = _availableWidth > maxOverlayWidth.current;
170
160
  setShowLabel(canShowLabel);
171
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
161
+ var canShowOverlay = _availableWidth > minOverlayWidth.current && !isSelected;
162
+ setShowOverlay(canShowOverlay);
172
163
  } catch (_unused) {
173
164
  // If something goes wrong, hide the overlay all together.
174
165
  setShowOverlay(false);
175
166
  }
176
- }, []);
167
+ }, [isSelected]);
177
168
  (0, _react.useLayoutEffect)(function () {
178
169
  // Using useLayoutEffect here.
179
170
  // 1) We want all to be able to determine whether to display label before
@@ -183,17 +174,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
183
174
  if (!containerRef.current) {
184
175
  return;
185
176
  }
177
+
178
+ // This should run only once
186
179
  if (!maxOverlayWidth.current) {
187
- var overlay = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_CLASSNAME));
180
+ var iconAndLabel = (0, _utils2.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
188
181
  var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
189
- if (overlay && _label) {
182
+ if (iconAndLabel && _label) {
190
183
  // Set overlay max (label + icon) and min (icon only) width.
191
- // This should run only once.
192
- var _getOverlayWidths = (0, _utils2.getOverlayWidths)(overlay, _label),
184
+ var _getOverlayWidths = (0, _utils2.getOverlayWidths)(iconAndLabel, _label),
193
185
  max = _getOverlayWidths.max,
194
186
  min = _getOverlayWidths.min;
195
187
  maxOverlayWidth.current = max;
196
188
  minOverlayWidth.current = min;
189
+ iconSize.current = (0, _utils2.getIconSize)(_label);
197
190
  }
198
191
  }
199
192
  if (isVisible) {
@@ -233,26 +226,18 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
233
226
  }, [isVisible, setVisibility]);
234
227
  var intl = (0, _reactIntlNext.useIntl)();
235
228
  var label = intl.formatMessage(_messages.cardMessages.inlineOverlay);
236
- var icon = (0, _react.useMemo)(function () {
237
- var IconComponent = isSelected ? _chevronUp.default : _chevronDown.default;
238
- return (0, _react2.jsx)(IconComponent, {
239
- label: label,
240
- size: "small",
241
- testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
242
- });
243
- }, [isSelected, label, testId]);
244
229
  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
245
230
  css: containerStyles,
246
231
  ref: containerRef
247
232
  }), children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
248
233
  "aria-hidden": "true",
249
- className: OVERLAY_MARKER_CLASSNAME,
250
- css: markerStyles
234
+ className: OVERLAY_MARKER_CLASSNAME
251
235
  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
252
- className: OVERLAY_CLASSNAME,
253
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, _utils.browser.safari && safariOverlayStyles],
236
+ css: [overlayStyles, showOverlay && showOverlayStyles],
254
237
  style: {
255
- marginLeft: -overlayWidth
238
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
239
+ marginLeft: availableWidth && -availableWidth,
240
+ width: availableWidth
256
241
  },
257
242
  "data-testid": testId,
258
243
  href: url,
@@ -260,12 +245,25 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
260
245
  return e.preventDefault();
261
246
  },
262
247
  tabIndex: -1
263
- }, showLabel && (0, _react2.jsx)("span", {
248
+ }, (0, _react2.jsx)("span", {
249
+ css: overflowingContainerStyles
250
+ }, (0, _react2.jsx)("span", {
251
+ css: iconAndLabelStyles,
252
+ className: ICON_AND_LABEL_CLASSNAME
253
+ }, (0, _react2.jsx)("span", {
254
+ css: iconStyles
255
+ }, (0, _react2.jsx)(_preferences.default, {
256
+ label: label,
257
+ size: iconSize.current,
258
+ testId: "".concat(testId, "-icon")
259
+ })), showLabel && (0, _react2.jsx)("span", {
260
+ css: labelStyles,
264
261
  className: OVERLAY_LABEL_CLASSNAME,
265
- css: textStyles,
266
262
  "data-testid": "".concat(testId, "-label")
267
- }, label), (0, _react2.jsx)("span", {
268
- css: iconStyles
269
- }, icon))));
263
+ }, label)), (0, _react2.jsx)("span", {
264
+ css: gradientStyles,
265
+ className: OVERLAY_GRADIENT_CLASSNAME,
266
+ "data-testid": "".concat(testId, "-gradient")
267
+ })))));
270
268
  };
271
269
  var _default = exports.default = InlineCardOverlay;
package/dist/cjs/ui/InlineCardOverlay/utils.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.isOneLine = exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getChildElement = void 0;
6
+ exports.isOneLine = exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getIconSize = exports.getChildElement = void 0;
7
7
  /**
8
8
  * Find a child element inside a ref.
9
9
  */
@@ -37,4 +37,12 @@ var getOverlayWidths = exports.getOverlayWidths = function getOverlayWidths(over
37
37
  max: max,
38
38
  min: min
39
39
  };
40
+ };
41
+ var getIconSize = exports.getIconSize = function getIconSize(labelEl) {
42
+ var h2FontSizePx = 20;
43
+ var fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
44
+ if (!fontSize || fontSize < h2FontSizePx) {
45
+ return 'small';
46
+ }
47
+ return 'medium';
40
48
  };
package/dist/es2019/ui/InlineCardOverlay/index.js CHANGED
@@ -1,114 +1,104 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
3
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
2
4
  /** @jsx jsx */
3
5
 
4
- import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
6
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
5
7
  import { css, jsx } from '@emotion/react';
6
8
  import debounce from 'lodash/debounce';
7
9
  import { useIntl } from 'react-intl-next';
8
10
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
9
- import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
10
- import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
11
- import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
12
- import { N20A, N800 } from '@atlaskit/theme/colors';
13
- import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
11
+ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
12
+ import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
13
+ import { B100, N0, N700 } from '@atlaskit/theme/colors';
14
+ import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
14
15
  const DEBOUNCE_IN_MS = 5;
15
16
  const ESTIMATED_MIN_WIDTH_IN_PX = 16;
16
- const PADDING_IN_PX = 2;
17
- const ICON_WIDTH_IN_PX = 16;
18
- const OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
17
+ const PADDING_IN_PX = 4;
18
+ const ICON_WIDTH_IN_PX = 14;
19
+ const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
19
20
  const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
21
+ const OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
20
22
  const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
21
23
  const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
24
+ const SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
25
+ const SMART_LINK_ACTIVE_COLOR = `var(--ds-background-selected, ${B100})`;
26
+ const getGradientWithColor = color => {
27
+ return `linear-gradient(270deg, ${color} 0%, rgba(255, 255, 255, 0.00) 100%)`;
28
+ };
22
29
  const containerStyles = css({
23
30
  position: 'relative',
24
- lineHeight: 'normal'
25
- });
26
- const linkStyles = css({
27
- color: "var(--ds-text, #172B4D)",
28
- textDecoration: 'none'
31
+ lineHeight: 'normal',
32
+ ':active': {
33
+ [`.${ICON_AND_LABEL_CLASSNAME}`]: {
34
+ background: SMART_LINK_ACTIVE_COLOR
35
+ },
36
+ [`.${OVERLAY_GRADIENT_CLASSNAME}`]: {
37
+ background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
38
+ }
39
+ }
29
40
  });
30
41
  const overlayStyles = css({
31
42
  // Set default styling to be invisible but available in dom for width calculation.
32
- position: 'absolute',
33
43
  visibility: 'hidden',
34
- // Positioning
44
+ // Layout
45
+ position: 'absolute',
35
46
  display: 'inline-flex',
36
- flexWrap: 'nowrap',
47
+ justifyContent: 'flex-end',
37
48
  alignItems: 'center',
38
- alignSelf: 'stretch',
39
- height: 'inherit',
40
- lineHeight: 'initial',
41
- width: 'max-content',
42
- bottom: "var(--ds-space-0, 0)",
43
- right: 3,
44
- margin: `-1px ${"var(--ds-space-0, 0)"}`,
45
- padding: "var(--ds-space-0, 0)",
46
- // Styling
47
- fontSize: 'inherit',
48
- fontWeight: 'normal',
49
- color: `var(--ds-text, ${N800})`,
50
- background: `var(--ds-background-accent-gray-subtlest, ${N20A})`,
51
- borderRadius: 3,
52
- // inline card border of 4px - 1px
53
-
54
- // Using `&` twice to increase specificity. (These are not nested styles.)
55
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
56
- '&&:link': {
57
- ...linkStyles
58
- },
59
- '&&:active': {
60
- ...linkStyles
61
- },
62
- '&&:focus': {
63
- ...linkStyles
64
- },
65
- '&&:hover': {
66
- ...linkStyles
67
- },
68
- '&&:visited': {
69
- ...linkStyles
49
+ verticalAlign: 'text-top',
50
+ height: '1lh',
51
+ '@supports not (height: 1lh)': {
52
+ height: '1.2em'
70
53
  },
71
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
72
-
54
+ overflow: 'hidden',
73
55
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
74
56
  zIndex: 2,
75
- // Fill lines, match heading and paragraph size
76
- '::before': {
77
- content: '" "',
78
- display: 'inline-block',
79
- verticalAlign: 'middle',
80
- width: "var(--ds-space-0, 0)",
81
- margin: "var(--ds-space-0, 0)",
82
- padding: "var(--ds-space-0, 0)"
83
- }
57
+ // Appearance
58
+ color: `var(--ds-text-subtlest, ${N700})`,
59
+ // Using `&` twice to increase specificity. (These are not nested styles.)
60
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
61
+ color: `var(--ds-text-subtlest, ${N700})`,
62
+ textDecoration: 'none'
63
+ },
64
+ pointerEvents: 'none'
84
65
  });
85
66
  const showOverlayStyles = css({
86
67
  position: 'relative',
87
68
  visibility: 'visible'
88
69
  });
89
- const safariOverlayStyles = css({
90
- height: '1.1em',
91
- paddingBottom: "var(--ds-space-025, 2px)",
92
- right: 3
93
- });
94
- const textStyles = css({
95
- paddingLeft: "var(--ds-space-050, 4px)"
96
- });
97
70
  const iconStyles = css({
98
71
  // Position icon in the middle
99
- display: 'inline-grid',
100
- // We want to position the icon in the middle of large text type like heading 1
101
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
102
72
  span: {
103
- display: 'inline-grid'
73
+ display: 'flex'
104
74
  }
105
75
  });
106
- const markerStyles = css({
107
- height: "var(--ds-space-0, 0)",
108
- width: "var(--ds-space-0, 0)",
109
- margin: "var(--ds-space-0, 0)",
110
- padding: "var(--ds-space-0, 0)",
111
- whiteSpace: 'nowrap'
76
+ const labelStyles = css({
77
+ fontSize: '0.875em',
78
+ fontWeight: '600',
79
+ width: 'max-content'
80
+ });
81
+ const iconAndLabelStyles = css({
82
+ background: SMART_LINK_BACKGROUND_COLOR,
83
+ display: 'flex',
84
+ alignItems: 'center',
85
+ height: '100%',
86
+ gap: "var(--ds-space-050, 4px)",
87
+ paddingRight: "var(--ds-space-050, 4px)",
88
+ // Margin to avoid the background covering the link border
89
+ marginRight: "var(--ds-space-025, 2px)"
90
+ });
91
+ const overflowingContainerStyles = css({
92
+ display: 'flex',
93
+ flexDirection: 'row-reverse',
94
+ alignItems: 'center',
95
+ width: 'max-content',
96
+ height: '100%'
97
+ });
98
+ const gradientStyles = css({
99
+ width: '2.5rem',
100
+ height: '100%',
101
+ background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
112
102
  });
113
103
  const InlineCardOverlay = ({
114
104
  children,
@@ -120,10 +110,11 @@ const InlineCardOverlay = ({
120
110
  }) => {
121
111
  const [showOverlay, setShowOverlay] = useState(false);
122
112
  const [showLabel, setShowLabel] = useState(true);
123
- const [overlayWidth, setOverlayWidth] = useState(0);
113
+ const [availableWidth, setAvailableWidth] = useState(undefined);
124
114
  const maxOverlayWidth = useRef(0);
125
115
  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
126
116
  const parentWidth = useRef(0);
117
+ const iconSize = useRef('small');
127
118
  const containerRef = useRef(null);
128
119
  const setVisibility = useCallback(() => {
129
120
  if (!containerRef.current || !maxOverlayWidth.current) {
@@ -142,23 +133,16 @@ const InlineCardOverlay = ({
142
133
  const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
143
134
  // Always leave at least the icon visible
144
135
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
145
-
146
- // If available width is less than the min width of overlay, don't show overlay.
147
- const canShowOverlay = availableWidth > minOverlayWidth.current;
148
- setShowOverlay(canShowOverlay);
149
- if (!canShowOverlay) {
150
- return;
151
- }
152
-
153
- // Otherwise, check if overlay can be show in full context with label and icon.
154
- const canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
136
+ setAvailableWidth(availableWidth);
137
+ const canShowLabel = availableWidth > maxOverlayWidth.current;
155
138
  setShowLabel(canShowLabel);
156
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
139
+ const canShowOverlay = availableWidth > minOverlayWidth.current && !isSelected;
140
+ setShowOverlay(canShowOverlay);
157
141
  } catch {
158
142
  // If something goes wrong, hide the overlay all together.
159
143
  setShowOverlay(false);
160
144
  }
161
- }, []);
145
+ }, [isSelected]);
162
146
  useLayoutEffect(() => {
163
147
  // Using useLayoutEffect here.
164
148
  // 1) We want all to be able to determine whether to display label before
@@ -168,18 +152,20 @@ const InlineCardOverlay = ({
168
152
  if (!containerRef.current) {
169
153
  return;
170
154
  }
155
+
156
+ // This should run only once
171
157
  if (!maxOverlayWidth.current) {
172
- const overlay = getChildElement(containerRef, `.${OVERLAY_CLASSNAME}`);
158
+ const iconAndLabel = getChildElement(containerRef, `.${ICON_AND_LABEL_CLASSNAME}`);
173
159
  const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
174
- if (overlay && label) {
160
+ if (iconAndLabel && label) {
175
161
  // Set overlay max (label + icon) and min (icon only) width.
176
- // This should run only once.
177
162
  const {
178
163
  max,
179
164
  min
180
- } = getOverlayWidths(overlay, label);
165
+ } = getOverlayWidths(iconAndLabel, label);
181
166
  maxOverlayWidth.current = max;
182
167
  minOverlayWidth.current = min;
168
+ iconSize.current = getIconSize(label);
183
169
  }
184
170
  }
185
171
  if (isVisible) {
@@ -219,37 +205,42 @@ const InlineCardOverlay = ({
219
205
  }, [isVisible, setVisibility]);
220
206
  const intl = useIntl();
221
207
  const label = intl.formatMessage(messages.inlineOverlay);
222
- const icon = useMemo(() => {
223
- const IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
224
- return jsx(IconComponent, {
225
- label: label,
226
- size: "small",
227
- testId: `${testId}-${isSelected ? 'open' : 'close'}`
228
- });
229
- }, [isSelected, label, testId]);
230
208
  return jsx("span", _extends({}, props, {
231
209
  css: containerStyles,
232
210
  ref: containerRef
233
211
  }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
234
212
  "aria-hidden": "true",
235
- className: OVERLAY_MARKER_CLASSNAME,
236
- css: markerStyles
213
+ className: OVERLAY_MARKER_CLASSNAME
237
214
  }, ZERO_WIDTH_JOINER), jsx("a", {
238
- className: OVERLAY_CLASSNAME,
239
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
215
+ css: [overlayStyles, showOverlay && showOverlayStyles],
240
216
  style: {
241
- marginLeft: -overlayWidth
217
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
218
+ marginLeft: availableWidth && -availableWidth,
219
+ width: availableWidth
242
220
  },
243
221
  "data-testid": testId,
244
222
  href: url,
245
223
  onClick: e => e.preventDefault(),
246
224
  tabIndex: -1
247
- }, showLabel && jsx("span", {
225
+ }, jsx("span", {
226
+ css: overflowingContainerStyles
227
+ }, jsx("span", {
228
+ css: iconAndLabelStyles,
229
+ className: ICON_AND_LABEL_CLASSNAME
230
+ }, jsx("span", {
231
+ css: iconStyles
232
+ }, jsx(PreferencesIcon, {
233
+ label: label,
234
+ size: iconSize.current,
235
+ testId: `${testId}-icon`
236
+ })), showLabel && jsx("span", {
237
+ css: labelStyles,
248
238
  className: OVERLAY_LABEL_CLASSNAME,
249
- css: textStyles,
250
239
  "data-testid": `${testId}-label`
251
- }, label), jsx("span", {
252
- css: iconStyles
253
- }, icon))));
240
+ }, label)), jsx("span", {
241
+ css: gradientStyles,
242
+ className: OVERLAY_GRADIENT_CLASSNAME,
243
+ "data-testid": `${testId}-gradient`
244
+ })))));
254
245
  };
255
246
  export default InlineCardOverlay;
package/dist/es2019/ui/InlineCardOverlay/utils.js CHANGED
@@ -29,4 +29,12 @@ export const getOverlayWidths = (overlayEl, labelEl) => {
29
29
  max,
30
30
  min
31
31
  };
32
+ };
33
+ export const getIconSize = labelEl => {
34
+ const h2FontSizePx = 20;
35
+ const fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
36
+ if (!fontSize || fontSize < h2FontSizePx) {
37
+ return 'small';
38
+ }
39
+ return 'medium';
32
40
  };
package/dist/esm/ui/InlineCardOverlay/index.js CHANGED
@@ -3,108 +3,104 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
6
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ var _active;
7
+ /* eslint-disable @atlaskit/design-system/no-nested-styles */
8
+ /* eslint-disable @atlaskit/design-system/prefer-primitives */
8
9
  /** @jsx jsx */
9
10
 
10
- import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
11
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
11
12
  import { css, jsx } from '@emotion/react';
12
13
  import debounce from 'lodash/debounce';
13
14
  import { useIntl } from 'react-intl-next';
14
15
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
15
- import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
16
- import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
17
- import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
18
- import { N20A, N800 } from '@atlaskit/theme/colors';
19
- import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
16
+ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
17
+ import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
18
+ import { B100, N0, N700 } from '@atlaskit/theme/colors';
19
+ import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
20
20
  var DEBOUNCE_IN_MS = 5;
21
21
  var ESTIMATED_MIN_WIDTH_IN_PX = 16;
22
- var PADDING_IN_PX = 2;
23
- var ICON_WIDTH_IN_PX = 16;
24
- var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
22
+ var PADDING_IN_PX = 4;
23
+ var ICON_WIDTH_IN_PX = 14;
24
+ var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
25
25
  var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
26
+ var OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
26
27
  var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
27
28
  var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
29
+ var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
30
+ var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(B100, ")");
31
+ var getGradientWithColor = function getGradientWithColor(color) {
32
+ return "linear-gradient(270deg, ".concat(color, " 0%, rgba(255, 255, 255, 0.00) 100%)");
33
+ };
28
34
  var containerStyles = css({
29
35
  position: 'relative',
30
- lineHeight: 'normal'
31
- });
32
- var linkStyles = css({
33
- color: "var(--ds-text, #172B4D)",
34
- textDecoration: 'none'
36
+ lineHeight: 'normal',
37
+ ':active': (_active = {}, _defineProperty(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
38
+ background: SMART_LINK_ACTIVE_COLOR
39
+ }), _defineProperty(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
40
+ background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
41
+ }), _active)
35
42
  });
36
43
  var overlayStyles = css({
37
44
  // Set default styling to be invisible but available in dom for width calculation.
38
- position: 'absolute',
39
45
  visibility: 'hidden',
40
- // Positioning
46
+ // Layout
47
+ position: 'absolute',
41
48
  display: 'inline-flex',
42
- flexWrap: 'nowrap',
49
+ justifyContent: 'flex-end',
43
50
  alignItems: 'center',
44
- alignSelf: 'stretch',
45
- height: 'inherit',
46
- lineHeight: 'initial',
47
- width: 'max-content',
48
- bottom: "var(--ds-space-0, 0)",
49
- right: 3,
50
- margin: "-1px ".concat("var(--ds-space-0, 0)"),
51
- padding: "var(--ds-space-0, 0)",
52
- // Styling
53
- fontSize: 'inherit',
54
- fontWeight: 'normal',
55
- color: "var(--ds-text, ".concat(N800, ")"),
56
- background: "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")"),
57
- borderRadius: 3,
58
- // inline card border of 4px - 1px
59
-
60
- // Using `&` twice to increase specificity. (These are not nested styles.)
61
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
62
- '&&:link': _objectSpread({}, linkStyles),
63
- '&&:active': _objectSpread({}, linkStyles),
64
- '&&:focus': _objectSpread({}, linkStyles),
65
- '&&:hover': _objectSpread({}, linkStyles),
66
- '&&:visited': _objectSpread({}, linkStyles),
67
- /* eslint-enable @atlaskit/design-system/no-nested-styles */
68
-
51
+ verticalAlign: 'text-top',
52
+ height: '1lh',
53
+ '@supports not (height: 1lh)': {
54
+ height: '1.2em'
55
+ },
56
+ overflow: 'hidden',
69
57
  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
70
58
  zIndex: 2,
71
- // Fill lines, match heading and paragraph size
72
- '::before': {
73
- content: '" "',
74
- display: 'inline-block',
75
- verticalAlign: 'middle',
76
- width: "var(--ds-space-0, 0)",
77
- margin: "var(--ds-space-0, 0)",
78
- padding: "var(--ds-space-0, 0)"
79
- }
59
+ // Appearance
60
+ color: "var(--ds-text-subtlest, ".concat(N700, ")"),
61
+ // Using `&` twice to increase specificity. (These are not nested styles.)
62
+ '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
63
+ color: "var(--ds-text-subtlest, ".concat(N700, ")"),
64
+ textDecoration: 'none'
65
+ },
66
+ pointerEvents: 'none'
80
67
  });
81
68
  var showOverlayStyles = css({
82
69
  position: 'relative',
83
70
  visibility: 'visible'
84
71
  });
85
- var safariOverlayStyles = css({
86
- height: '1.1em',
87
- paddingBottom: "var(--ds-space-025, 2px)",
88
- right: 3
89
- });
90
- var textStyles = css({
91
- paddingLeft: "var(--ds-space-050, 4px)"
92
- });
93
72
  var iconStyles = css({
94
73
  // Position icon in the middle
95
- display: 'inline-grid',
96
- // We want to position the icon in the middle of large text type like heading 1
97
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
98
74
  span: {
99
- display: 'inline-grid'
75
+ display: 'flex'
100
76
  }
101
77
  });
102
- var markerStyles = css({
103
- height: "var(--ds-space-0, 0)",
104
- width: "var(--ds-space-0, 0)",
105
- margin: "var(--ds-space-0, 0)",
106
- padding: "var(--ds-space-0, 0)",
107
- whiteSpace: 'nowrap'
78
+ var labelStyles = css({
79
+ fontSize: '0.875em',
80
+ fontWeight: '600',
81
+ width: 'max-content'
82
+ });
83
+ var iconAndLabelStyles = css({
84
+ background: SMART_LINK_BACKGROUND_COLOR,
85
+ display: 'flex',
86
+ alignItems: 'center',
87
+ height: '100%',
88
+ gap: "var(--ds-space-050, 4px)",
89
+ paddingRight: "var(--ds-space-050, 4px)",
90
+ // Margin to avoid the background covering the link border
91
+ marginRight: "var(--ds-space-025, 2px)"
92
+ });
93
+ var overflowingContainerStyles = css({
94
+ display: 'flex',
95
+ flexDirection: 'row-reverse',
96
+ alignItems: 'center',
97
+ width: 'max-content',
98
+ height: '100%'
99
+ });
100
+ var gradientStyles = css({
101
+ width: '2.5rem',
102
+ height: '100%',
103
+ background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
108
104
  });
109
105
  var InlineCardOverlay = function InlineCardOverlay(_ref) {
110
106
  var children = _ref.children,
@@ -124,13 +120,14 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
124
120
  _useState4 = _slicedToArray(_useState3, 2),
125
121
  showLabel = _useState4[0],
126
122
  setShowLabel = _useState4[1];
127
- var _useState5 = useState(0),
123
+ var _useState5 = useState(undefined),
128
124
  _useState6 = _slicedToArray(_useState5, 2),
129
- overlayWidth = _useState6[0],
130
- setOverlayWidth = _useState6[1];
125
+ availableWidth = _useState6[0],
126
+ setAvailableWidth = _useState6[1];
131
127
  var maxOverlayWidth = useRef(0);
132
128
  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
133
129
  var parentWidth = useRef(0);
130
+ var iconSize = useRef('small');
134
131
  var containerRef = useRef(null);
135
132
  var setVisibility = useCallback(function () {
136
133
  if (!containerRef.current || !maxOverlayWidth.current) {
@@ -146,26 +143,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
146
143
  // Get the width of the available space to display overlay.
147
144
  // This is the width of the inline link itself. If the inline
148
145
  // is wrapped to the next line, this is width of the last line.
149
- var availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
146
+ var _availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
150
147
  // Always leave at least the icon visible
151
148
  oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
152
-
153
- // If available width is less than the min width of overlay, don't show overlay.
154
- var canShowOverlay = availableWidth > minOverlayWidth.current;
155
- setShowOverlay(canShowOverlay);
156
- if (!canShowOverlay) {
157
- return;
158
- }
159
-
160
- // Otherwise, check if overlay can be show in full context with label and icon.
161
- var canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
149
+ setAvailableWidth(_availableWidth);
150
+ var canShowLabel = _availableWidth > maxOverlayWidth.current;
162
151
  setShowLabel(canShowLabel);
163
- setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
152
+ var canShowOverlay = _availableWidth > minOverlayWidth.current && !isSelected;
153
+ setShowOverlay(canShowOverlay);
164
154
  } catch (_unused) {
165
155
  // If something goes wrong, hide the overlay all together.
166
156
  setShowOverlay(false);
167
157
  }
168
- }, []);
158
+ }, [isSelected]);
169
159
  useLayoutEffect(function () {
170
160
  // Using useLayoutEffect here.
171
161
  // 1) We want all to be able to determine whether to display label before
@@ -175,17 +165,19 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
175
165
  if (!containerRef.current) {
176
166
  return;
177
167
  }
168
+
169
+ // This should run only once
178
170
  if (!maxOverlayWidth.current) {
179
- var overlay = getChildElement(containerRef, ".".concat(OVERLAY_CLASSNAME));
171
+ var iconAndLabel = getChildElement(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
180
172
  var _label = getChildElement(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
181
- if (overlay && _label) {
173
+ if (iconAndLabel && _label) {
182
174
  // Set overlay max (label + icon) and min (icon only) width.
183
- // This should run only once.
184
- var _getOverlayWidths = getOverlayWidths(overlay, _label),
175
+ var _getOverlayWidths = getOverlayWidths(iconAndLabel, _label),
185
176
  max = _getOverlayWidths.max,
186
177
  min = _getOverlayWidths.min;
187
178
  maxOverlayWidth.current = max;
188
179
  minOverlayWidth.current = min;
180
+ iconSize.current = getIconSize(_label);
189
181
  }
190
182
  }
191
183
  if (isVisible) {
@@ -225,26 +217,18 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
225
217
  }, [isVisible, setVisibility]);
226
218
  var intl = useIntl();
227
219
  var label = intl.formatMessage(messages.inlineOverlay);
228
- var icon = useMemo(function () {
229
- var IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
230
- return jsx(IconComponent, {
231
- label: label,
232
- size: "small",
233
- testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
234
- });
235
- }, [isSelected, label, testId]);
236
220
  return jsx("span", _extends({}, props, {
237
221
  css: containerStyles,
238
222
  ref: containerRef
239
223
  }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
240
224
  "aria-hidden": "true",
241
- className: OVERLAY_MARKER_CLASSNAME,
242
- css: markerStyles
225
+ className: OVERLAY_MARKER_CLASSNAME
243
226
  }, ZERO_WIDTH_JOINER), jsx("a", {
244
- className: OVERLAY_CLASSNAME,
245
- css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
227
+ css: [overlayStyles, showOverlay && showOverlayStyles],
246
228
  style: {
247
- marginLeft: -overlayWidth
229
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
230
+ marginLeft: availableWidth && -availableWidth,
231
+ width: availableWidth
248
232
  },
249
233
  "data-testid": testId,
250
234
  href: url,
@@ -252,12 +236,25 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
252
236
  return e.preventDefault();
253
237
  },
254
238
  tabIndex: -1
255
- }, showLabel && jsx("span", {
239
+ }, jsx("span", {
240
+ css: overflowingContainerStyles
241
+ }, jsx("span", {
242
+ css: iconAndLabelStyles,
243
+ className: ICON_AND_LABEL_CLASSNAME
244
+ }, jsx("span", {
245
+ css: iconStyles
246
+ }, jsx(PreferencesIcon, {
247
+ label: label,
248
+ size: iconSize.current,
249
+ testId: "".concat(testId, "-icon")
250
+ })), showLabel && jsx("span", {
251
+ css: labelStyles,
256
252
  className: OVERLAY_LABEL_CLASSNAME,
257
- css: textStyles,
258
253
  "data-testid": "".concat(testId, "-label")
259
- }, label), jsx("span", {
260
- css: iconStyles
261
- }, icon))));
254
+ }, label)), jsx("span", {
255
+ css: gradientStyles,
256
+ className: OVERLAY_GRADIENT_CLASSNAME,
257
+ "data-testid": "".concat(testId, "-gradient")
258
+ })))));
262
259
  };
263
260
  export default InlineCardOverlay;
package/dist/esm/ui/InlineCardOverlay/utils.js CHANGED
@@ -31,4 +31,12 @@ export var getOverlayWidths = function getOverlayWidths(overlayEl, labelEl) {
31
31
  max: max,
32
32
  min: min
33
33
  };
34
+ };
35
+ export var getIconSize = function getIconSize(labelEl) {
36
+ var h2FontSizePx = 20;
37
+ var fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
38
+ if (!fontSize || fontSize < h2FontSizePx) {
39
+ return 'small';
40
+ }
41
+ return 'medium';
34
42
  };
package/dist/types/ui/InlineCardOverlay/utils.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Size } from '@atlaskit/icon';
1
2
  /**
2
3
  * Find a child element inside a ref.
3
4
  */
@@ -16,3 +17,4 @@ export declare const getOverlayWidths: (overlayEl: HTMLElement, labelEl: HTMLEle
16
17
  max: number;
17
18
  min: number;
18
19
  };
20
+ export declare const getIconSize: (labelEl: HTMLElement) => Size;
package/dist/types-ts4.5/ui/InlineCardOverlay/utils.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Size } from '@atlaskit/icon';
1
2
  /**
2
3
  * Find a child element inside a ref.
3
4
  */
@@ -16,3 +17,4 @@ export declare const getOverlayWidths: (overlayEl: HTMLElement, labelEl: HTMLEle
16
17
  max: number;
17
18
  min: number;
18
19
  };
20
+ export declare const getIconSize: (labelEl: HTMLElement) => Size;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "0.14.25",
3
+ "version": "0.15.1",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/adf-schema": "^35.2.0",
36
36
  "@atlaskit/analytics-next": "^9.1.0",
37
37
  "@atlaskit/custom-steps": "^0.0.10",
38
- "@atlaskit/editor-common": "^76.31.0",
38
+ "@atlaskit/editor-common": "^76.34.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
40
40
  "@atlaskit/editor-plugin-decorations": "^0.2.0",
41
41
  "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -44,19 +44,19 @@
44
44
  "@atlaskit/editor-plugin-hyperlink": "^0.6.0",
45
45
  "@atlaskit/editor-plugin-width": "^0.2.0",
46
46
  "@atlaskit/editor-prosemirror": "1.1.0",
47
- "@atlaskit/editor-shared-styles": "^2.8.0",
47
+ "@atlaskit/editor-shared-styles": "^2.9.0",
48
48
  "@atlaskit/frontend-utilities": "^2.7.0",
49
49
  "@atlaskit/icon": "^22.0.0",
50
50
  "@atlaskit/link-analytics": "^8.3.0",
51
51
  "@atlaskit/link-client-extension": "^1.8.0",
52
52
  "@atlaskit/link-datasource": "^1.19.0",
53
- "@atlaskit/linking-common": "^5.1.0",
53
+ "@atlaskit/linking-common": "^5.3.0",
54
54
  "@atlaskit/linking-types": "^8.5.0",
55
55
  "@atlaskit/platform-feature-flags": "^0.2.0",
56
- "@atlaskit/primitives": "^1.15.0",
56
+ "@atlaskit/primitives": "^1.16.0",
57
57
  "@atlaskit/smart-card": "^26.43.0",
58
58
  "@atlaskit/theme": "^12.6.0",
59
- "@atlaskit/tokens": "^1.32.0",
59
+ "@atlaskit/tokens": "^1.33.0",
60
60
  "@babel/runtime": "^7.0.0",
61
61
  "@emotion/react": "^11.7.1",
62
62
  "lodash": "^4.17.21",
@@ -78,6 +78,7 @@
78
78
  "@atlaskit/webdriver-runner": "*",
79
79
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
80
80
  "@atlassian/feature-flags-test-utils": "*",
81
+ "@emotion/jest": "^11.8.0",
81
82
  "@testing-library/dom": "^8.17.1",
82
83
  "@testing-library/react": "^12.1.5",
83
84
  "@testing-library/react-hooks": "^8.0.1",