@atlaskit/tooltip 17.5.3 → 17.5.6

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,26 @@
1
1
  # @atlaskit/tooltip
2
2
 
3
+ ## 17.5.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 17.5.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`d0eed99c3e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0eed99c3e3) - ED-14264 Moved styles to emotion css
14
+ - [`6007e4f9a97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6007e4f9a97) - Internal styling has been refactored in preparation for @compiled/react
15
+ - Updated dependencies
16
+
17
+ ## 17.5.4
18
+
19
+ ### Patch Changes
20
+
21
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
22
+ - Updated dependencies
23
+
3
24
  ## 17.5.3
4
25
 
5
26
  ### Patch Changes
@@ -54,7 +54,7 @@ var tooltipZIndex = _constants.layers.tooltip();
54
54
  var analyticsAttributes = {
55
55
  componentName: 'tooltip',
56
56
  packageName: "@atlaskit/tooltip",
57
- packageVersion: "17.5.3"
57
+ packageVersion: "17.5.6"
58
58
  };
59
59
 
60
60
  function noop() {}
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
10
  var _react = require("react");
13
11
 
14
12
  var _core = require("@emotion/core");
@@ -21,10 +19,33 @@ var _constants = require("@atlaskit/theme/constants");
21
19
 
22
20
  var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
23
21
 
24
- var _templateObject, _templateObject2, _templateObject3;
25
-
26
- var baseCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", "px;\n box-sizing: border-box;\n font-size: 12px;\n left: 0;\n line-height: 1.3;\n max-width: 240px;\n padding: 2px 6px;\n top: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n"])), (0, _constants.borderRadius)());
27
- var truncateCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n max-width: 420px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
22
+ /** @jsx jsx */
23
+ var baseStyles = (0, _core.css)({
24
+ boxSizing: 'border-box',
25
+ maxWidth: '240px',
26
+ padding: '2px 6px',
27
+ top: 0,
28
+ left: 0,
29
+ borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
30
+ fontSize: '12px',
31
+ lineHeight: 1.3,
32
+ overflowWrap: 'break-word',
33
+ wordWrap: 'break-word'
34
+ });
35
+ var truncateStyles = (0, _core.css)({
36
+ maxWidth: '420px',
37
+ overflow: 'hidden',
38
+ textOverflow: 'ellipsis',
39
+ whiteSpace: 'nowrap'
40
+ });
41
+ var lightStyles = (0, _core.css)({
42
+ backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
43
+ color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
44
+ });
45
+ var darkStyles = (0, _core.css)({
46
+ backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
47
+ color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
48
+ });
28
49
  var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
29
50
  var style = _ref.style,
30
51
  className = _ref.className,
@@ -47,7 +68,7 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
47
68
  id: id,
48
69
  onMouseOut: onMouseOut,
49
70
  onMouseOver: onMouseOver,
50
- css: [baseCss, truncate ? truncateCss : null, (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n color: ", ";\n "])), mode === 'light' ? "var(--ds-background-boldNeutral-resting, ".concat(_colors.N800, ")") : "var(--ds-background-boldNeutral-resting, ".concat(_colors.DN0, ")"), mode === 'light' ? "var(--ds-text-onBold, ".concat(_colors.N0, ")") : "var(--ds-text-onBold, ".concat(_colors.DN600, ")"))]
71
+ css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
51
72
  }, children)
52
73
  );
53
74
  });
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
12
  var _react = require("react");
13
13
 
@@ -15,9 +15,15 @@ var _core = require("@emotion/core");
15
15
 
16
16
  var _constants = require("@atlaskit/theme/constants");
17
17
 
18
- var _templateObject;
18
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
19
 
20
- var primitiveCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n z-index: ", ";\n cursor: default;\n"])), _constants.layers.tooltip());
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
+
22
+ var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
23
+ var primitiveStyles = (0, _core.css)({
24
+ zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
25
+ cursor: "default"
26
+ });
21
27
  var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimitive(_ref, ref) {
22
28
  var style = _ref.style,
23
29
  className = _ref.className,
@@ -27,15 +33,18 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
27
33
  onMouseOut = _ref.onMouseOut,
28
34
  onMouseOver = _ref.onMouseOver,
29
35
  id = _ref.id;
36
+
37
+ var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
38
+
30
39
  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
31
40
  (0, _core.jsx)("div", {
32
41
  role: "tooltip",
33
42
  ref: ref,
34
- style: style,
43
+ style: styleWithZIndex,
35
44
  className: className,
36
45
  onMouseOut: onMouseOut,
37
46
  onMouseOver: onMouseOver,
38
- css: primitiveCss,
47
+ css: primitiveStyles,
39
48
  "data-placement": placement,
40
49
  "data-testid": testId,
41
50
  id: id
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tooltip",
3
- "version": "17.5.3",
3
+ "version": "17.5.6",
4
4
  "sideEffects": false
5
5
  }
@@ -18,7 +18,7 @@ const tooltipZIndex = layers.tooltip();
18
18
  const analyticsAttributes = {
19
19
  componentName: 'tooltip',
20
20
  packageName: "@atlaskit/tooltip",
21
- packageVersion: "17.5.3"
21
+ packageVersion: "17.5.6"
22
22
  };
23
23
 
24
24
  function noop() {}
@@ -5,24 +5,32 @@ import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
5
5
  import GlobalTheme from '@atlaskit/theme/components';
6
6
  import { borderRadius } from '@atlaskit/theme/constants';
7
7
  import TooltipPrimitive from './TooltipPrimitive';
8
- const baseCss = css`
9
- border-radius: ${borderRadius()}px;
10
- box-sizing: border-box;
11
- font-size: 12px;
12
- left: 0;
13
- line-height: 1.3;
14
- max-width: 240px;
15
- padding: 2px 6px;
16
- top: 0;
17
- word-wrap: break-word;
18
- overflow-wrap: break-word;
19
- `;
20
- const truncateCss = css`
21
- max-width: 420px;
22
- overflow: hidden;
23
- text-overflow: ellipsis;
24
- white-space: nowrap;
25
- `;
8
+ const baseStyles = css({
9
+ boxSizing: 'border-box',
10
+ maxWidth: '240px',
11
+ padding: '2px 6px',
12
+ top: 0,
13
+ left: 0,
14
+ borderRadius: `${borderRadius()}px`,
15
+ fontSize: '12px',
16
+ lineHeight: 1.3,
17
+ overflowWrap: 'break-word',
18
+ wordWrap: 'break-word'
19
+ });
20
+ const truncateStyles = css({
21
+ maxWidth: '420px',
22
+ overflow: 'hidden',
23
+ textOverflow: 'ellipsis',
24
+ whiteSpace: 'nowrap'
25
+ });
26
+ const lightStyles = css({
27
+ backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
28
+ color: `var(--ds-text-inverse, ${N0})`
29
+ });
30
+ const darkStyles = css({
31
+ backgroundColor: `var(--ds-background-neutral-bold, ${DN0})`,
32
+ color: `var(--ds-text-inverse, ${DN600})`
33
+ });
26
34
  const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
27
35
  style,
28
36
  className,
@@ -46,10 +54,7 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
46
54
  id: id,
47
55
  onMouseOut: onMouseOut,
48
56
  onMouseOver: onMouseOver,
49
- css: [baseCss, truncate ? truncateCss : null, css`
50
- background-color: ${mode === 'light' ? `var(--ds-background-boldNeutral-resting, ${N800})` : `var(--ds-background-boldNeutral-resting, ${DN0})`};
51
- color: ${mode === 'light' ? `var(--ds-text-onBold, ${N0})` : `var(--ds-text-onBold, ${DN600})`};
52
- `]
57
+ css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
53
58
  }, children));
54
59
  });
55
60
  TooltipContainer.displayName = 'TooltipContainer';
@@ -2,10 +2,11 @@
2
2
  import { forwardRef } from 'react';
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import { layers } from '@atlaskit/theme/constants';
5
- const primitiveCss = css`
6
- z-index: ${layers.tooltip()};
7
- cursor: default;
8
- `;
5
+ const VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
6
+ const primitiveStyles = css({
7
+ zindex: `var(${VAR_PRIMITIVE_ZINDEX})`,
8
+ cursor: `default`
9
+ });
9
10
  const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
10
11
  style,
11
12
  className,
@@ -16,15 +17,18 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
16
17
  onMouseOver,
17
18
  id
18
19
  }, ref) {
20
+ const styleWithZIndex = { ...style,
21
+ [VAR_PRIMITIVE_ZINDEX]: layers.tooltip()
22
+ };
19
23
  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
20
24
  jsx("div", {
21
25
  role: "tooltip",
22
26
  ref: ref,
23
- style: style,
27
+ style: styleWithZIndex,
24
28
  className: className,
25
29
  onMouseOut: onMouseOut,
26
30
  onMouseOver: onMouseOver,
27
- css: primitiveCss,
31
+ css: primitiveStyles,
28
32
  "data-placement": placement,
29
33
  "data-testid": testId,
30
34
  id: id
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tooltip",
3
- "version": "17.5.3",
3
+ "version": "17.5.6",
4
4
  "sideEffects": false
5
5
  }
@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
24
24
  var analyticsAttributes = {
25
25
  componentName: 'tooltip',
26
26
  packageName: "@atlaskit/tooltip",
27
- packageVersion: "17.5.3"
27
+ packageVersion: "17.5.6"
28
28
  };
29
29
 
30
30
  function noop() {}
@@ -1,7 +1,3 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
-
3
- var _templateObject, _templateObject2, _templateObject3;
4
-
5
1
  /** @jsx jsx */
6
2
  import { forwardRef } from 'react';
7
3
  import { css, jsx } from '@emotion/core';
@@ -9,8 +5,32 @@ import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
9
5
  import GlobalTheme from '@atlaskit/theme/components';
10
6
  import { borderRadius } from '@atlaskit/theme/constants';
11
7
  import TooltipPrimitive from './TooltipPrimitive';
12
- var baseCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: ", "px;\n box-sizing: border-box;\n font-size: 12px;\n left: 0;\n line-height: 1.3;\n max-width: 240px;\n padding: 2px 6px;\n top: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n"])), borderRadius());
13
- var truncateCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-width: 420px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
8
+ var baseStyles = css({
9
+ boxSizing: 'border-box',
10
+ maxWidth: '240px',
11
+ padding: '2px 6px',
12
+ top: 0,
13
+ left: 0,
14
+ borderRadius: "".concat(borderRadius(), "px"),
15
+ fontSize: '12px',
16
+ lineHeight: 1.3,
17
+ overflowWrap: 'break-word',
18
+ wordWrap: 'break-word'
19
+ });
20
+ var truncateStyles = css({
21
+ maxWidth: '420px',
22
+ overflow: 'hidden',
23
+ textOverflow: 'ellipsis',
24
+ whiteSpace: 'nowrap'
25
+ });
26
+ var lightStyles = css({
27
+ backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
28
+ color: "var(--ds-text-inverse, ".concat(N0, ")")
29
+ });
30
+ var darkStyles = css({
31
+ backgroundColor: "var(--ds-background-neutral-bold, ".concat(DN0, ")"),
32
+ color: "var(--ds-text-inverse, ".concat(DN600, ")")
33
+ });
14
34
  var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, ref) {
15
35
  var style = _ref.style,
16
36
  className = _ref.className,
@@ -33,7 +53,7 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
33
53
  id: id,
34
54
  onMouseOut: onMouseOut,
35
55
  onMouseOver: onMouseOver,
36
- css: [baseCss, truncate ? truncateCss : null, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n "])), mode === 'light' ? "var(--ds-background-boldNeutral-resting, ".concat(N800, ")") : "var(--ds-background-boldNeutral-resting, ".concat(DN0, ")"), mode === 'light' ? "var(--ds-text-onBold, ".concat(N0, ")") : "var(--ds-text-onBold, ".concat(DN600, ")"))]
56
+ css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
37
57
  }, children)
38
58
  );
39
59
  });
@@ -1,12 +1,18 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
 
3
- var _templateObject;
3
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
+
5
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
6
 
5
7
  /** @jsx jsx */
6
8
  import { forwardRef } from 'react';
7
9
  import { css, jsx } from '@emotion/core';
8
10
  import { layers } from '@atlaskit/theme/constants';
9
- var primitiveCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n z-index: ", ";\n cursor: default;\n"])), layers.tooltip());
11
+ var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
12
+ var primitiveStyles = css({
13
+ zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
14
+ cursor: "default"
15
+ });
10
16
  var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, ref) {
11
17
  var style = _ref.style,
12
18
  className = _ref.className,
@@ -16,15 +22,18 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
16
22
  onMouseOut = _ref.onMouseOut,
17
23
  onMouseOver = _ref.onMouseOver,
18
24
  id = _ref.id;
25
+
26
+ var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, VAR_PRIMITIVE_ZINDEX, layers.tooltip()));
27
+
19
28
  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
20
29
  jsx("div", {
21
30
  role: "tooltip",
22
31
  ref: ref,
23
- style: style,
32
+ style: styleWithZIndex,
24
33
  className: className,
25
34
  onMouseOut: onMouseOut,
26
35
  onMouseOver: onMouseOver,
27
- css: primitiveCss,
36
+ css: primitiveStyles,
28
37
  "data-placement": placement,
29
38
  "data-testid": testId,
30
39
  id: id
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tooltip",
3
- "version": "17.5.3",
3
+ "version": "17.5.6",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tooltip",
3
- "version": "17.5.3",
3
+ "version": "17.5.6",
4
4
  "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,12 +24,12 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/analytics-next": "^8.2.0",
27
- "@atlaskit/ds-lib": "^1.3.0",
27
+ "@atlaskit/ds-lib": "^1.4.0",
28
28
  "@atlaskit/motion": "^1.0.0",
29
29
  "@atlaskit/popper": "^5.0.0",
30
30
  "@atlaskit/portal": "^4.1.0",
31
31
  "@atlaskit/theme": "^12.1.0",
32
- "@atlaskit/tokens": "^0.5.0",
32
+ "@atlaskit/tokens": "^0.8.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/core": "^10.0.9",
35
35
  "bind-event-listener": "^1.0.2",
@@ -40,7 +40,7 @@
40
40
  "react-dom": "^16.8.0"
41
41
  },
42
42
  "devDependencies": {
43
- "@atlaskit/button": "^16.1.0",
43
+ "@atlaskit/button": "^16.2.0",
44
44
  "@atlaskit/docs": "*",
45
45
  "@atlaskit/icon": "^21.10.0",
46
46
  "@atlaskit/section-message": "^6.1.0",
@@ -73,7 +73,8 @@
73
73
  "theming": "tokens",
74
74
  "deprecation": "no-deprecated-imports",
75
75
  "styling": [
76
- "emotion"
76
+ "emotion",
77
+ "static"
77
78
  ]
78
79
  }
79
80
  },