@conveyorhq/arrow-ds 1.178.1 → 1.179.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.178.1",
+  "version": "1.179.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Popover/Popover.d.ts

@@ -14,6 +14,7 @@ interface PopoverDefaultProps extends PopoverTooltipSharedProps, InlineSharedPro
     inline?: false;
     showArrow?: boolean;
     strategy?: "absolute" | "fixed";
+    color?: string;
 }
 interface PopoverInlineProps extends InlineSharedProps, BoxProps {
     inline: true;

package/public/components/Popover/Popover.js

@@ -33,6 +33,7 @@ const react_popper_1 = require("react-popper");
 const Box_1 = require("../Box");
 const Portal_1 = require("../Portal");
 const bem_1 = require("../../utilities/bem");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const cn = (0, bem_1.bemHOF)("Popover");
 const InlinePopover = (0, react_1.forwardRef)(({ className, hasPortal = false, removePadding, ...rest }, ref) => {
     const Container = hasPortal ? Portal_1.Portal : react_1.default.Fragment;
@@ -41,13 +42,18 @@ const InlinePopover = (0, react_1.forwardRef)(({ className, hasPortal = false, r
                 [cn({ m: "padded" })]: !removePadding,
             }), ...rest })));
 });
-const ChildrenWithArrow = ({ children, popperPlacement, arrowProps, update, showArrow, }) => {
+const ChildrenWithArrow = ({ children, popperPlacement, arrowProps, update, showArrow, color, }) => {
     (0, react_1.useLayoutEffect)(() => {
         update();
     }, [children, update]);
+    const { style, ...rest } = arrowProps;
+    const placement = popperPlacement.split("-")[0];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         children,
-        showArrow && (react_1.default.createElement("div", { className: (0, classnames_1.default)(cn({ e: "arrow" })), "data-placement": popperPlacement, ...arrowProps }))));
+        showArrow && (react_1.default.createElement("div", { className: (0, classnames_1.default)(cn({ e: "arrow" })), "data-placement": popperPlacement, style: {
+                ...style,
+                [`border-${placement}-color`]: color,
+            }, ...rest }))));
 };
 const Popover = ({ removePadding = false, ...props }) => {
     if (props.inline) {
@@ -55,7 +61,7 @@ const Popover = ({ removePadding = false, ...props }) => {
         return (react_1.default.createElement(InlinePopover, { "data-placement": placement, className: className, style: styleProp, removePadding: removePadding, ...rest }, children));
     }
     if (!props.inline) {
-        const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, strategy = "absolute", ...rest } = props;
+        const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, strategy = "absolute", color = tokens_1.tokens.color.white, ...rest } = props;
         const offset = [0, 8];
         const defaultPopperModifiers = [
             {
@@ -70,8 +76,9 @@ const Popover = ({ removePadding = false, ...props }) => {
             isVisible && (react_1.default.createElement(react_popper_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers], strategy: strategy }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, { ref: ref, style: {
                     ...style,
                     ...styleProp,
+                    backgroundColor: color,
                 }, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding, ...rest },
-                react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow }, children))))),
+                react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow, color: color }, children))))),
             react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => (0, react_1.cloneElement)(referenceElement, {
                 ref,
             }))));

package/public/components/Tooltip/Tooltip.js

@@ -35,6 +35,7 @@ const Box_1 = require("../Box");
 const Popover_1 = require("../Popover");
 const types_1 = require("../../types");
 const context_1 = require("./context");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const DEFAULT_DELAY = 200;
 const cn = "Tooltip";
 exports.TooltipReference = react_1.default.forwardRef(({ children, ...props }, ref) => {
@@ -156,6 +157,6 @@ const Tooltip = (props) => {
         isOpen: open,
     }), [open]);
     return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
-        react_1.default.createElement(Popover_1.Popover, { showArrow: !hideArrow, isVisible: open, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: (0, classnames_1.default)([(0, bem_1.bem)(cn), (0, bem_1.bem)(cn, { m: theme }), className]), onMouseEnter: !isVisibleInitial ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleInitial ? handlePopoverMouseLeave : undefined, style: style, ...rest }, children))) : (referenceElement);
+        react_1.default.createElement(Popover_1.Popover, { color: theme === "dark" ? tokens_1.tokens.color.gray[900] : tokens_1.tokens.color.white, showArrow: !hideArrow, isVisible: open, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: (0, classnames_1.default)([(0, bem_1.bem)(cn), (0, bem_1.bem)(cn, { m: theme }), className]), onMouseEnter: !isVisibleInitial ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleInitial ? handlePopoverMouseLeave : undefined, style: style, ...rest }, children))) : (referenceElement);
 };
 exports.Tooltip = Tooltip;

package/public/css/styles.css

@@ -5374,8 +5374,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   z-index: 400;
   display: inline-block;
   border-radius: 4px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-shadow: 0 0 3px rgba(32, 65, 86, 0.1), 0 10px 20px rgba(32, 65, 86, 0.1);
   --tw-shadow-colored: 0 0 3px var(--tw-shadow-color), 0 10px 20px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -5396,19 +5394,15 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   top: 0;
   margin-top: -8px;
   border-top-width: 0;
-
-  border-bottom-color: #dee7ee;
 }
 
 .ads-Popover-arrow[data-placement*="top"] {
   margin-bottom: -8px;
-  border-top-color: #dee7ee;
   top: 100%;
 }
 
 .ads-Popover-arrow[data-placement*="left"] {
   margin-right: -8px;
-  border-left-color: #dee7ee;
   left: 100%;
 }
 
@@ -5416,8 +5410,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   left: 0;
   margin-left: -8px;
   border-left-width: 0;
-
-  border-right-color: #dee7ee;
 }
 
 .ads-PopoverMenu {
@@ -8002,15 +7994,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
 }
 
 .ads-Tooltip--dark {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 27 40 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .ads-Tooltip--light {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(71 104 125 / var(--tw-text-opacity));
 }
@@ -8019,38 +8007,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
   border-width: 4px;
 }
 
-.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="bottom"] {
-  border-bottom-color: #001b28;
-}
-
-.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="top"] {
-  border-top-color: #001b28;
-}
-
-.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="left"] {
-  border-left-color: #001b28;
-}
-
-.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="right"] {
-  border-right-color: #001b28;
-}
-
-.ads-Tooltip--light .ads-Popover-arrow[data-placement*="bottom"] {
-  border-bottom-color: #ffffff;
-}
-
-.ads-Tooltip--light .ads-Popover-arrow[data-placement*="top"] {
-  border-top-color: #ffffff;
-}
-
-.ads-Tooltip--light .ads-Popover-arrow[data-placement*="left"] {
-  border-left-color: #ffffff;
-}
-
-.ads-Tooltip--light .ads-Popover-arrow[data-placement*="right"] {
-  border-right-color: #ffffff;
-}
-
 .ads-Tooltip-trigger {
   display: inline-flex;
 }