@atlaskit/editor-plugin-card 5.4.2 → 5.4.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/OpenButtonOverlay/index.js +36 -22
  3. package/dist/es2019/ui/OpenButtonOverlay/index.js +36 -22
  4. package/dist/esm/ui/OpenButtonOverlay/index.js +36 -22
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#131428](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131428)
8
+ [`3aa1f96909918`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aa1f96909918) -
9
+ [ux] Update OpenButtonOverlay to fix styles.
10
+
3
11
  ## 5.4.2
4
12
 
5
13
  ### Patch Changes
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/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/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.3",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",