@octopusdeploy/design-system-components
Version:
The design systems component library.
63 lines (62 loc) • 3.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = Tooltip;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_tippy_1 = require("react-tippy");
// This requires noUncheckedSideEffectImports in tsconfig to be disabled. We can reverse this if this import is removed
require("react-tippy/dist/tippy.css");
function Tooltip({ content, className, children, position = "top", open, trigger, distance, display, isContentMarkdown = false }) {
const contentClassName = (0, css_1.cx)(tooltipContentStyles, isContentMarkdown && markdownTooltipStyles);
return ((0, jsx_runtime_1.jsx)(react_tippy_1.Tooltip, { className: (0, css_1.cx)(tooltipContainerStyles, className), open: open, trigger: trigger, arrow: true, position: position, useContext: true, html: (0, jsx_runtime_1.jsx)("span", { className: contentClassName, children: content }), size: "small", style: { display: display ?? "inline-block" }, distance: distance, popperOptions: {
modifiers: {
preventOverflow: { boundariesElement: "window" },
},
}, children: children }));
}
const tooltipContainerStyles = (0, css_1.css)({
maxWidth: "100%",
// react-tippy adds an empty div element immediately after the container when the useContext prop is true, the empty div causes extra space or line when the container is hovered,
// therefore using the adjacent sibling selector here to remove the side effect.
"+ div:empty": {
display: "none",
},
});
const tooltipContentStyles = (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
font: design_system_tokens_1.text.body.regular.xSmall,
maxWidth: "400px", // this value is coming from tippy internal styles
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-word",
});
// When Tooltip renders markdown, the Markdown component creates <p>, <h1..6> and <li> tags. The style above is overridden by the markdown css,
// so adding following block to apply our custom css when the tooltip content is using markdown.
const markdownTooltipStyles = (0, css_1.css)({
"p, h1, h2, h3, h4, h5, h6, li": {
backgroundColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
},
});
// There is no way to gain more granular control of popper styles other than to leverage the class names attached to tippy-tooltip elements
(0, css_1.injectGlobal)({
".tippy-popper .tippy-tooltip": {
backgroundColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
// Globally change text to follow the background, so that we "play nice with others" on the same page
color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
},
'.tippy-popper[x-placement^="right"] .arrow-regular[x-arrow]': {
borderRightColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
},
'.tippy-popper[x-placement^="left"] .arrow-regular[x-arrow]': {
borderLeftColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
},
'.tippy-popper[x-placement^="top"] .arrow-regular[x-arrow]': {
borderTopColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
},
'.tippy-popper[x-placement^="bottom"] .arrow-regular[x-arrow]': {
borderBottomColor: design_system_tokens_1.themeTokens.color.background.inverse.primary,
},
});