@atlaskit/tooltip 17.8.10 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tooltip
 
+## 18.0.0
+
+### Major Changes
+
+- [#41881](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41881) [`1de74609c13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1de74609c13) - Removed all remaining legacy theming logic from the Tag, Toggle and Tooltip components.
+
 ## 17.8.10
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -32,7 +32,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.0.0"
 };
 
 // Inverts motion direction

package/dist/cjs/TooltipContainer.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
 /** @jsx jsx */
 
@@ -22,7 +21,9 @@ var baseStyles = (0, _react2.css)({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
+  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
 });
 var truncateStyles = (0, _react2.css)({
   maxWidth: '420px',
@@ -30,14 +31,6 @@ var truncateStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var darkStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
-});
 var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
   var style = _ref.style,
     className = _ref.className,
@@ -48,20 +41,17 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(_TooltipPrimitive.default, {
-      ref: ref,
-      style: style,
-      className: className,
-      placement: placement,
-      testId: testId,
-      id: id,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-    }, children);
-  });
+  return (0, _react2.jsx)(_TooltipPrimitive.default, {
+    ref: ref,
+    style: style,
+    className: className,
+    placement: placement,
+    testId: testId,
+    id: id,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 var _default = exports.default = TooltipContainer;

package/dist/cjs/TooltipPrimitive.js

@@ -32,9 +32,12 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
   }, (0, _react2.jsx)("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/es2019/Tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.0.0"
 };
 
 // Inverts motion direction

package/dist/es2019/TooltipContainer.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './TooltipPrimitive';
 const baseStyles = css({
   boxSizing: 'border-box',
@@ -14,7 +13,9 @@ const baseStyles = css({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
+  color: `var(--ds-text-inverse, ${N0})`
 });
 const truncateStyles = css({
   maxWidth: '420px',
@@ -22,14 +23,6 @@ const truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const lightStyles = css({
-  backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const darkStyles = css({
-  backgroundColor: `var(--ds-background-neutral-bold, ${DN0})`,
-  color: `var(--ds-text-inverse, ${DN600})`
-});
 const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   style,
   className,
@@ -41,9 +34,7 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   onMouseOver,
   id
 }, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(TooltipPrimitive, {
+  return jsx(TooltipPrimitive, {
     ref: ref,
     style: style,
     className: className,
@@ -52,8 +43,8 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-  }, children));
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 export default TooltipContainer;

package/dist/es2019/TooltipPrimitive.js

@@ -27,9 +27,12 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
     "data-testid": testId ? `${testId}--wrapper` : undefined
   }, jsx("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/esm/Tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.0.0"
 };
 
 // Inverts motion direction

package/dist/esm/TooltipContainer.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './TooltipPrimitive';
 var baseStyles = css({
   boxSizing: 'border-box',
@@ -14,7 +13,9 @@ var baseStyles = css({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
+  color: "var(--ds-text-inverse, ".concat(N0, ")")
 });
 var truncateStyles = css({
   maxWidth: '420px',
@@ -22,14 +23,6 @@ var truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = css({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var darkStyles = css({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(DN0, ")"),
-  color: "var(--ds-text-inverse, ".concat(DN600, ")")
-});
 var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, ref) {
   var style = _ref.style,
     className = _ref.className,
@@ -40,20 +33,17 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(TooltipPrimitive, {
-      ref: ref,
-      style: style,
-      className: className,
-      placement: placement,
-      testId: testId,
-      id: id,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-    }, children);
-  });
+  return jsx(TooltipPrimitive, {
+    ref: ref,
+    style: style,
+    className: className,
+    placement: placement,
+    testId: testId,
+    id: id,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 export default TooltipContainer;

package/dist/esm/TooltipPrimitive.js

@@ -26,9 +26,12 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
   }, jsx("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.8.10",
+  "version": "18.0.0",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.13.0",
+    "@atlaskit/button": "^16.16.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",