@conveyorhq/arrow-ds 1.71.0 → 1.72.2

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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/public/components/Tooltip/Tooltip.d.ts +1 -0
  3. package/public/components/Tooltip/Tooltip.js +2 -2
  4. package/public/css/styles.css +32 -6
  5. package/public/css/styles.min.css +1 -1
  6. package/public/css/styles.min.css.map +1 -1
  7. package/src/components/Tooltip/Tooltip.story.mdx +21 -0
  8. package/src/components/Tooltip/Tooltip.tsx +6 -1
  9. package/src/components/Tooltip/index.css +31 -7
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@conveyorhq/arrow-ds",
3
3
  "author": "Conveyor",
4
4
  "license": "MIT",
5
- "version": "1.71.0",
5
+ "version": "1.72.2",
6
6
  "description": "Arrow Design System",
7
7
  "repository": "https://github.com/conveyor/arrow-ds",
8
8
  "publishConfig": {
package/public/components/Tooltip/Tooltip.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { PopoverTooltipSharedProps } from "../Popover";
2
2
  export interface TooltipProps extends PopoverTooltipSharedProps {
3
3
  delay?: number;
4
+ theme?: "light" | "dark";
4
5
  }
5
6
  export declare const Tooltip: (props: TooltipProps) => JSX.Element;
package/public/components/Tooltip/Tooltip.js CHANGED
@@ -32,7 +32,7 @@ const types_1 = require("../../types");
32
32
  const context_1 = require("./context");
33
33
  const cn = "Tooltip";
34
34
  const Tooltip = (props) => {
35
- const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, style, ...rest } = props;
35
+ const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", style, ...rest } = props;
36
36
  const { isOpen, onOpen, onClose } = hooks_1.useDisclosure(isVisibleProp);
37
37
  const isHoveringReferenceRef = react_1.useRef(false);
38
38
  const isHoveringPopoverRef = react_1.useRef(false);
@@ -126,6 +126,6 @@ const Tooltip = (props) => {
126
126
  isOpen,
127
127
  }), [isOpen]);
128
128
  return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
129
- react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default(bem_1.bem(cn), className), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
129
+ react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default([bem_1.bem(cn), bem_1.bem(cn, { m: theme }), className]), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children))) : (referenceElement);
130
130
  };
131
131
  exports.Tooltip = Tooltip;
package/public/css/styles.css CHANGED
@@ -7658,8 +7658,6 @@ override built-in Image component classes */
7658
7658
  display: inline-flex;
7659
7659
  max-width: 256px;
7660
7660
  align-items: center;
7661
- --tw-bg-opacity: 1;
7662
- background-color: rgb(0 27 40 / var(--tw-bg-opacity));
7663
7661
  padding-top: 4px;
7664
7662
  padding-bottom: 4px;
7665
7663
  padding-left: 6px;
@@ -7667,30 +7665,58 @@ override built-in Image component classes */
7667
7665
  text-align: center;
7668
7666
  font-size: 12px;
7669
7667
  line-height: 1.25;
7668
+ }
7669
+
7670
+ .ads-Tooltip--dark {
7671
+ --tw-bg-opacity: 1;
7672
+ background-color: rgb(0 27 40 / var(--tw-bg-opacity));
7670
7673
  --tw-text-opacity: 1;
7671
7674
  color: rgb(255 255 255 / var(--tw-text-opacity));
7672
7675
  }
7673
7676
 
7677
+ .ads-Tooltip--light {
7678
+ --tw-bg-opacity: 1;
7679
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
7680
+ --tw-text-opacity: 1;
7681
+ color: rgb(71 104 125 / var(--tw-text-opacity));
7682
+ }
7683
+
7674
7684
  .ads-Tooltip .ads-Popover-arrow {
7675
7685
  border-width: 4px;
7676
7686
  }
7677
7687
 
7678
- .ads-Tooltip .ads-Popover-arrow[data-placement*="bottom"] {
7688
+ .ads-Tooltip--dark .ads-Popover-arrow[data-placement*="bottom"] {
7679
7689
  border-bottom-color: #001b28;
7680
7690
  }
7681
7691
 
7682
- .ads-Tooltip .ads-Popover-arrow[data-placement*="top"] {
7692
+ .ads-Tooltip--dark .ads-Popover-arrow[data-placement*="top"] {
7683
7693
  border-top-color: #001b28;
7684
7694
  }
7685
7695
 
7686
- .ads-Tooltip .ads-Popover-arrow[data-placement*="left"] {
7696
+ .ads-Tooltip--dark .ads-Popover-arrow[data-placement*="left"] {
7687
7697
  border-left-color: #001b28;
7688
7698
  }
7689
7699
 
7690
- .ads-Tooltip .ads-Popover-arrow[data-placement*="right"] {
7700
+ .ads-Tooltip--dark .ads-Popover-arrow[data-placement*="right"] {
7691
7701
  border-right-color: #001b28;
7692
7702
  }
7693
7703
 
7704
+ .ads-Tooltip--light .ads-Popover-arrow[data-placement*="bottom"] {
7705
+ border-bottom-color: #ffffff;
7706
+ }
7707
+
7708
+ .ads-Tooltip--light .ads-Popover-arrow[data-placement*="top"] {
7709
+ border-top-color: #ffffff;
7710
+ }
7711
+
7712
+ .ads-Tooltip--light .ads-Popover-arrow[data-placement*="left"] {
7713
+ border-left-color: #ffffff;
7714
+ }
7715
+
7716
+ .ads-Tooltip--light .ads-Popover-arrow[data-placement*="right"] {
7717
+ border-right-color: #ffffff;
7718
+ }
7719
+
7694
7720
  .ads-Tooltip-trigger {
7695
7721
  display: inline-flex;
7696
7722
  }