carbon-react 102.9.2 → 102.10.0

package/lib/components/tooltip/tooltip-pointer.style.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const pointerColor = (type, theme, bgColor) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
-  return type === "error" ? theme.colors.error : theme.colors.black;
+  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 
 const StyledTooltipPointer = _styledComponents.default.div`
@@ -39,7 +39,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid ${pointerColor(type, theme, bgColor)};
-      bottom: -${theme.spacing}px;
+      bottom: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         bottom: -7px;
       }
@@ -49,7 +49,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-bottom: 8px solid ${pointerColor(type, theme, bgColor)};
-      top: -${theme.spacing}px;
+      top: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         top: -7px;
       }
@@ -59,7 +59,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       border-right: 8px solid ${pointerColor(type, theme, bgColor)};
-      left: -${theme.spacing}px;
+      left: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         left: -7px;
       }
@@ -69,7 +69,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       border-left: 8px solid ${pointerColor(type, theme, bgColor)};
-      right: -${theme.spacing}px;
+      right: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         right: -7px;
       }
@@ -83,7 +83,8 @@ StyledTooltipPointer.defaultProps = {
 StyledTooltipPointer.propTypes = {
   position: _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
   theme: _propTypes.default.object,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  bgColor: _propTypes.default.string
 };
 var _default = StyledTooltipPointer;
 exports.default = _default;

package/lib/components/tooltip/tooltip.component.js

@@ -11,12 +11,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
 
+var _styledComponents = require("styled-components");
+
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -43,10 +47,12 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const tooltipRef = (0, _react.useRef)(ref || null);
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
+      className: (0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name),
       "data-element": "tooltip",
       role: "tooltip",
       tabIndex: "-1",

package/lib/components/tooltip/tooltip.style.js

@@ -31,7 +31,7 @@ const fadeIn = (0, _styledComponents.keyframes)`
 
 const tooltipColor = (type, theme, bgColor) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
-  return type === "error" ? theme.colors.error : theme.colors.black;
+  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 
 const tooltipOffset = (position, inputSize, isPartOfInput) => {
@@ -84,9 +84,9 @@ const StyledTooltipWrapper = _styledComponents.default.div`
     max-width: 300px;
     position: relative;
     animation: ${fadeIn} 0.2s linear;
-    z-index: ${theme.zIndex.popover};
+    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
     text-align: left;
-    color: ${fontColor ? (0, _color.toColor)(theme, fontColor) : theme.colors.white};
+    color: ${fontColor ? (0, _color.toColor)(theme, fontColor) : "var(--colorsSemanticNeutralYang100)"};
     display: inline-block;
     padding: 8px 12px;
     word-break: break-word;
@@ -99,8 +99,14 @@ const StyledTooltipWrapper = _styledComponents.default.div`
   `}
 `;
 StyledTooltipWrapper.propTypes = {
+  position: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+  size: _propTypes.default.oneOf(["medium", "large"]),
+  theme: _propTypes.default.object,
   type: _propTypes.default.string,
-  size: _propTypes.default.oneOf(["medium", "large"])
+  isPartOfInput: _propTypes.default.bool,
+  inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
+  bgColor: _propTypes.default.string,
+  fontColor: _propTypes.default.string
 };
 StyledTooltipWrapper.defaultProps = {
   theme: _base.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.9.2",
+  "version": "102.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {