@conveyorhq/arrow-ds 1.178.1 → 1.180.0
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.
- package/package.json +1 -1
- package/public/components/Icon/Icon.d.ts +2 -0
- package/public/components/Icon/Icon.js +5 -1
- package/public/components/Popover/Popover.d.ts +1 -0
- package/public/components/Popover/Popover.js +11 -4
- package/public/components/Tooltip/Tooltip.js +2 -1
- package/public/css/styles.css +0 -44
- package/public/css/styles.min.css +1 -1
- package/public/css/styles.min.css.map +1 -1
- package/src/components/Icon/Icon.tsx +6 -0
- package/src/components/Popover/Popover.stories.mdx +20 -0
- package/src/components/Popover/Popover.tsx +18 -1
- package/src/components/Popover/index.css +0 -7
- package/src/components/Tooltip/Tooltip.tsx +2 -0
- package/src/components/Tooltip/index.css +2 -36
package/package.json
CHANGED
|
@@ -102,6 +102,7 @@ export declare enum ICON_TYPE {
|
|
|
102
102
|
EYE_SLASH = "eye-slash",
|
|
103
103
|
FAST_BACKWARD = "fast-backward",
|
|
104
104
|
FAST_FORWARD = "fast-forward",
|
|
105
|
+
FEATHER_ALT = "feather-alt",
|
|
105
106
|
FILE = "file",
|
|
106
107
|
FILE_ALT = "file-alt",
|
|
107
108
|
FILE_EXPORT = "file-export",
|
|
@@ -187,6 +188,7 @@ export declare enum ICON_TYPE {
|
|
|
187
188
|
SUITCASE_ROLLING = "suitcase-rolling",
|
|
188
189
|
SYNC = "sync",
|
|
189
190
|
TABLE = "table",
|
|
191
|
+
TAG = "tag",
|
|
190
192
|
TASKS = "tasks",
|
|
191
193
|
TICKET_ALT = "ticket-alt",
|
|
192
194
|
TIMES = "times",
|
|
@@ -122,6 +122,7 @@ const faEye_1 = require("@fortawesome/free-solid-svg-icons/faEye");
|
|
|
122
122
|
const faEyeSlash_1 = require("@fortawesome/free-solid-svg-icons/faEyeSlash");
|
|
123
123
|
const faFastBackward_1 = require("@fortawesome/free-solid-svg-icons/faFastBackward");
|
|
124
124
|
const faFastForward_1 = require("@fortawesome/free-solid-svg-icons/faFastForward");
|
|
125
|
+
const faFeatherAlt_1 = require("@fortawesome/free-solid-svg-icons/faFeatherAlt");
|
|
125
126
|
const faFile_1 = require("@fortawesome/free-solid-svg-icons/faFile");
|
|
126
127
|
const faFileAlt_2 = require("@fortawesome/free-solid-svg-icons/faFileAlt");
|
|
127
128
|
const faCloudShowersHeavy_1 = require("@fortawesome/free-solid-svg-icons/faCloudShowersHeavy");
|
|
@@ -210,6 +211,7 @@ const faStar_2 = require("@fortawesome/free-solid-svg-icons/faStar");
|
|
|
210
211
|
const faSuitcaseRolling_1 = require("@fortawesome/free-solid-svg-icons/faSuitcaseRolling");
|
|
211
212
|
const faSync_1 = require("@fortawesome/free-solid-svg-icons/faSync");
|
|
212
213
|
const faTable_1 = require("@fortawesome/free-solid-svg-icons/faTable");
|
|
214
|
+
const faTag_1 = require("@fortawesome/free-solid-svg-icons/faTag");
|
|
213
215
|
const faTasks_1 = require("@fortawesome/free-solid-svg-icons/faTasks");
|
|
214
216
|
const faThLarge_1 = require("@fortawesome/free-solid-svg-icons/faThLarge");
|
|
215
217
|
const faThumbsDown_2 = require("@fortawesome/free-solid-svg-icons/faThumbsDown");
|
|
@@ -240,7 +242,7 @@ const types_1 = require("../../types");
|
|
|
240
242
|
const utilities_1 = require("../../utilities");
|
|
241
243
|
const ShieldCheck_1 = require("./svg/ShieldCheck");
|
|
242
244
|
const cn = (0, utilities_1.bemHOF)("Icon");
|
|
243
|
-
fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
|
|
245
|
+
fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowsAlt_1.faArrowsAlt, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBalanceScale_1.faBalanceScale, faBan_1.faBan, faBandAid_1.faBandAid, faBars_1.faBars, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBell_2.faBell, faBellSlash_1.faBellSlash, faBellSlash_2.faBellSlash, faBiohazard_1.faBiohazard, faBirthdayCake_1.faBirthdayCake, faBolt_1.faBolt, faBook_1.faBook, faBroom_1.faBroom, faBug_1.faBug, faBullhorn_1.faBullhorn, faBullseye_1.faBullseye, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCamera_1.faCamera, faCaretDown_1.faCaretDown, faCaretLeft_1.faCaretLeft, faCaretRight_1.faCaretRight, faCaretUp_1.faCaretUp, faChartBar_1.faChartBar, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faCheckSquare_1.faCheckSquare, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faClone_1.faClone, faCloudDownloadAlt_1.faCloudDownloadAlt, faCloudShowersHeavy_1.faCloudShowersHeavy, faCloudUploadAlt_1.faCloudUploadAlt, faCog_1.faCog, faCoins_1.faCoins, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompass_1.faCompass, faCompress_1.faCompress, faCompressArrowsAlt_1.faCompressArrowsAlt, faCopy_1.faCopy, faCrosshairs_1.faCrosshairs, faCrown_1.faCrown, faDoorClosed_1.faDoorClosed, faDoorOpen_1.faDoorOpen, faDungeon_1.faDungeon, faEdit_1.faEdit, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_2.faEnvelope, faEnvelope_1.faEnvelope, faEnvelopeOpenText_1.faEnvelopeOpenText, faEraser_1.faEraser, faExchangeAlt_1.faExchangeAlt, faExclamation_1.faExclamation, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExpandArrowsAlt_1.faExpandArrowsAlt, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFeatherAlt_1.faFeatherAlt, faFile_1.faFile, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileExport_1.faFileExport, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFillDrip_1.faFillDrip, faFilter_1.faFilter, faFlag_1.faFlag, faFlask_1.faFlask, faFolder_1.faFolder, faFolderOpen_1.faFolderOpen, faForward_1.faForward, faGlobeAmericas_1.faGlobeAmericas, faGlobeEurope_1.faGlobeEurope, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHandshake_1.faHandshake, faHashtag_1.faHashtag, faHeartBroken_1.faHeartBroken, faHighlighter_1.faHighlighter, faHistory_1.faHistory, faIdBadge_1.faIdBadge, faImage_1.faImage, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLaptop_1.faLaptop, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faLifeRing_1.faLifeRing, faLink_1.faLink, faListOl_1.faListOl, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapMarkerAlt_1.faMapMarkerAlt, faMapSigns_1.faMapSigns, faMeteor_1.faMeteor, faMinus_1.faMinus, faMoneyBill_1.faMoneyBill, faMoneyBillWave_1.faMoneyBillWave, faMoneyCheckAlt_1.faMoneyCheckAlt, faMousePointer_1.faMousePointer, faPalette_1.faPalette, faPaperclip_1.faPaperclip, faPaperPlane_1.faPaperPlane, faPaste_1.faPaste, faPause_1.faPause, faPen_1.faPen, faPencilRuler_1.faPencilRuler, faPlay_1.faPlay, faPlug_1.faPlug, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faRandom_1.faRandom, faRedo_1.faRedo, faReply_1.faReply, faRobot_1.faRobot, faRocket_1.faRocket, faSave_1.faSave, faScroll_1.faScroll, faSearch_1.faSearch, faSearchPlus_1.faSearchPlus, faSeedling_1.faSeedling, faServer_1.faServer, faShare_1.faShare, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignal_1.faSignal, faSignature_1.faSignature, faSignOutAlt_1.faSignOutAlt, faSitemap_1.faSitemap, faSkull_1.faSkull, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStamp_1.faStamp, faStar_1.faStar, faStar_2.faStar, faSuitcaseRolling_1.faSuitcaseRolling, faSync_1.faSync, faTable_1.faTable, faTag_1.faTag, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTimesCircle_2.faTimesCircle, faTools_1.faTools, faTrash_1.faTrash, faUndo_1.faUndo, faUnlink_1.faUnlink, faUnlock_1.faUnlock, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserFriends_1.faUserFriends, faUserLock_1.faUserLock, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserSecret_1.faUserSecret, faUserShield_1.faUserShield, faVial_1.faVial, faVideo_1.faVideo, faWrench_1.faWrench, faAward_1.faAward);
|
|
244
246
|
var CUSTOM_ICON_TYPE;
|
|
245
247
|
(function (CUSTOM_ICON_TYPE) {
|
|
246
248
|
CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
|
|
@@ -367,6 +369,7 @@ var ICON_TYPE;
|
|
|
367
369
|
ICON_TYPE["EYE_SLASH"] = "eye-slash";
|
|
368
370
|
ICON_TYPE["FAST_BACKWARD"] = "fast-backward";
|
|
369
371
|
ICON_TYPE["FAST_FORWARD"] = "fast-forward";
|
|
372
|
+
ICON_TYPE["FEATHER_ALT"] = "feather-alt";
|
|
370
373
|
ICON_TYPE["FILE"] = "file";
|
|
371
374
|
ICON_TYPE["FILE_ALT"] = "file-alt";
|
|
372
375
|
ICON_TYPE["FILE_EXPORT"] = "file-export";
|
|
@@ -452,6 +455,7 @@ var ICON_TYPE;
|
|
|
452
455
|
ICON_TYPE["SUITCASE_ROLLING"] = "suitcase-rolling";
|
|
453
456
|
ICON_TYPE["SYNC"] = "sync";
|
|
454
457
|
ICON_TYPE["TABLE"] = "table";
|
|
458
|
+
ICON_TYPE["TAG"] = "tag";
|
|
455
459
|
ICON_TYPE["TASKS"] = "tasks";
|
|
456
460
|
ICON_TYPE["TICKET_ALT"] = "ticket-alt";
|
|
457
461
|
ICON_TYPE["TIMES"] = "times";
|
|
@@ -14,6 +14,7 @@ interface PopoverDefaultProps extends PopoverTooltipSharedProps, InlineSharedPro
|
|
|
14
14
|
inline?: false;
|
|
15
15
|
showArrow?: boolean;
|
|
16
16
|
strategy?: "absolute" | "fixed";
|
|
17
|
+
color?: string;
|
|
17
18
|
}
|
|
18
19
|
interface PopoverInlineProps extends InlineSharedProps, BoxProps {
|
|
19
20
|
inline: true;
|
|
@@ -33,6 +33,7 @@ const react_popper_1 = require("react-popper");
|
|
|
33
33
|
const Box_1 = require("../Box");
|
|
34
34
|
const Portal_1 = require("../Portal");
|
|
35
35
|
const bem_1 = require("../../utilities/bem");
|
|
36
|
+
const tokens_1 = require("../../style-dictionary/dist/tokens");
|
|
36
37
|
const cn = (0, bem_1.bemHOF)("Popover");
|
|
37
38
|
const InlinePopover = (0, react_1.forwardRef)(({ className, hasPortal = false, removePadding, ...rest }, ref) => {
|
|
38
39
|
const Container = hasPortal ? Portal_1.Portal : react_1.default.Fragment;
|
|
@@ -41,13 +42,18 @@ const InlinePopover = (0, react_1.forwardRef)(({ className, hasPortal = false, r
|
|
|
41
42
|
[cn({ m: "padded" })]: !removePadding,
|
|
42
43
|
}), ...rest })));
|
|
43
44
|
});
|
|
44
|
-
const ChildrenWithArrow = ({ children, popperPlacement, arrowProps, update, showArrow, }) => {
|
|
45
|
+
const ChildrenWithArrow = ({ children, popperPlacement, arrowProps, update, showArrow, color, }) => {
|
|
45
46
|
(0, react_1.useLayoutEffect)(() => {
|
|
46
47
|
update();
|
|
47
48
|
}, [children, update]);
|
|
49
|
+
const { style, ...rest } = arrowProps;
|
|
50
|
+
const placement = popperPlacement.split("-")[0];
|
|
48
51
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
49
52
|
children,
|
|
50
|
-
showArrow && (react_1.default.createElement("div", { className: (0, classnames_1.default)(cn({ e: "arrow" })), "data-placement": popperPlacement,
|
|
53
|
+
showArrow && (react_1.default.createElement("div", { className: (0, classnames_1.default)(cn({ e: "arrow" })), "data-placement": popperPlacement, style: {
|
|
54
|
+
...style,
|
|
55
|
+
[`border-${placement}-color`]: color,
|
|
56
|
+
}, ...rest }))));
|
|
51
57
|
};
|
|
52
58
|
const Popover = ({ removePadding = false, ...props }) => {
|
|
53
59
|
if (props.inline) {
|
|
@@ -55,7 +61,7 @@ const Popover = ({ removePadding = false, ...props }) => {
|
|
|
55
61
|
return (react_1.default.createElement(InlinePopover, { "data-placement": placement, className: className, style: styleProp, removePadding: removePadding, ...rest }, children));
|
|
56
62
|
}
|
|
57
63
|
if (!props.inline) {
|
|
58
|
-
const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, strategy = "absolute", ...rest } = props;
|
|
64
|
+
const { referenceElement, popperModifiers, isVisible, placement, className, style: styleProp, children, inline, showArrow = false, strategy = "absolute", color = tokens_1.tokens.color.white, ...rest } = props;
|
|
59
65
|
const offset = [0, 8];
|
|
60
66
|
const defaultPopperModifiers = [
|
|
61
67
|
{
|
|
@@ -70,8 +76,9 @@ const Popover = ({ removePadding = false, ...props }) => {
|
|
|
70
76
|
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: {
|
|
71
77
|
...style,
|
|
72
78
|
...styleProp,
|
|
79
|
+
backgroundColor: color,
|
|
73
80
|
}, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding, ...rest },
|
|
74
|
-
react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow }, children))))),
|
|
81
|
+
react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow, color: color }, children))))),
|
|
75
82
|
react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => (0, react_1.cloneElement)(referenceElement, {
|
|
76
83
|
ref,
|
|
77
84
|
}))));
|
|
@@ -35,6 +35,7 @@ const Box_1 = require("../Box");
|
|
|
35
35
|
const Popover_1 = require("../Popover");
|
|
36
36
|
const types_1 = require("../../types");
|
|
37
37
|
const context_1 = require("./context");
|
|
38
|
+
const tokens_1 = require("../../style-dictionary/dist/tokens");
|
|
38
39
|
const DEFAULT_DELAY = 200;
|
|
39
40
|
const cn = "Tooltip";
|
|
40
41
|
exports.TooltipReference = react_1.default.forwardRef(({ children, ...props }, ref) => {
|
|
@@ -156,6 +157,6 @@ const Tooltip = (props) => {
|
|
|
156
157
|
isOpen: open,
|
|
157
158
|
}), [open]);
|
|
158
159
|
return children ? (react_1.default.createElement(context_1.TooltipContext.Provider, { value: context },
|
|
159
|
-
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);
|
|
160
|
+
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);
|
|
160
161
|
};
|
|
161
162
|
exports.Tooltip = Tooltip;
|
package/public/css/styles.css
CHANGED
|
@@ -5374,8 +5374,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
|
|
|
5374
5374
|
z-index: 400;
|
|
5375
5375
|
display: inline-block;
|
|
5376
5376
|
border-radius: 4px;
|
|
5377
|
-
--tw-bg-opacity: 1;
|
|
5378
|
-
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
5379
5377
|
--tw-shadow: 0 0 3px rgba(32, 65, 86, 0.1), 0 10px 20px rgba(32, 65, 86, 0.1);
|
|
5380
5378
|
--tw-shadow-colored: 0 0 3px var(--tw-shadow-color), 0 10px 20px var(--tw-shadow-color);
|
|
5381
5379
|
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 {
|
|
|
5396
5394
|
top: 0;
|
|
5397
5395
|
margin-top: -8px;
|
|
5398
5396
|
border-top-width: 0;
|
|
5399
|
-
|
|
5400
|
-
border-bottom-color: #dee7ee;
|
|
5401
5397
|
}
|
|
5402
5398
|
|
|
5403
5399
|
.ads-Popover-arrow[data-placement*="top"] {
|
|
5404
5400
|
margin-bottom: -8px;
|
|
5405
|
-
border-top-color: #dee7ee;
|
|
5406
5401
|
top: 100%;
|
|
5407
5402
|
}
|
|
5408
5403
|
|
|
5409
5404
|
.ads-Popover-arrow[data-placement*="left"] {
|
|
5410
5405
|
margin-right: -8px;
|
|
5411
|
-
border-left-color: #dee7ee;
|
|
5412
5406
|
left: 100%;
|
|
5413
5407
|
}
|
|
5414
5408
|
|
|
@@ -5416,8 +5410,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
|
|
|
5416
5410
|
left: 0;
|
|
5417
5411
|
margin-left: -8px;
|
|
5418
5412
|
border-left-width: 0;
|
|
5419
|
-
|
|
5420
|
-
border-right-color: #dee7ee;
|
|
5421
5413
|
}
|
|
5422
5414
|
|
|
5423
5415
|
.ads-PopoverMenu {
|
|
@@ -8002,15 +7994,11 @@ button.ads-DateRangePicker-preset--isSelected:hover {
|
|
|
8002
7994
|
}
|
|
8003
7995
|
|
|
8004
7996
|
.ads-Tooltip--dark {
|
|
8005
|
-
--tw-bg-opacity: 1;
|
|
8006
|
-
background-color: rgb(0 27 40 / var(--tw-bg-opacity));
|
|
8007
7997
|
--tw-text-opacity: 1;
|
|
8008
7998
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
8009
7999
|
}
|
|
8010
8000
|
|
|
8011
8001
|
.ads-Tooltip--light {
|
|
8012
|
-
--tw-bg-opacity: 1;
|
|
8013
|
-
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
8014
8002
|
--tw-text-opacity: 1;
|
|
8015
8003
|
color: rgb(71 104 125 / var(--tw-text-opacity));
|
|
8016
8004
|
}
|
|
@@ -8019,38 +8007,6 @@ button.ads-DateRangePicker-preset--isSelected:hover {
|
|
|
8019
8007
|
border-width: 4px;
|
|
8020
8008
|
}
|
|
8021
8009
|
|
|
8022
|
-
.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="bottom"] {
|
|
8023
|
-
border-bottom-color: #001b28;
|
|
8024
|
-
}
|
|
8025
|
-
|
|
8026
|
-
.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="top"] {
|
|
8027
|
-
border-top-color: #001b28;
|
|
8028
|
-
}
|
|
8029
|
-
|
|
8030
|
-
.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="left"] {
|
|
8031
|
-
border-left-color: #001b28;
|
|
8032
|
-
}
|
|
8033
|
-
|
|
8034
|
-
.ads-Tooltip--dark .ads-Popover-arrow[data-placement*="right"] {
|
|
8035
|
-
border-right-color: #001b28;
|
|
8036
|
-
}
|
|
8037
|
-
|
|
8038
|
-
.ads-Tooltip--light .ads-Popover-arrow[data-placement*="bottom"] {
|
|
8039
|
-
border-bottom-color: #ffffff;
|
|
8040
|
-
}
|
|
8041
|
-
|
|
8042
|
-
.ads-Tooltip--light .ads-Popover-arrow[data-placement*="top"] {
|
|
8043
|
-
border-top-color: #ffffff;
|
|
8044
|
-
}
|
|
8045
|
-
|
|
8046
|
-
.ads-Tooltip--light .ads-Popover-arrow[data-placement*="left"] {
|
|
8047
|
-
border-left-color: #ffffff;
|
|
8048
|
-
}
|
|
8049
|
-
|
|
8050
|
-
.ads-Tooltip--light .ads-Popover-arrow[data-placement*="right"] {
|
|
8051
|
-
border-right-color: #ffffff;
|
|
8052
|
-
}
|
|
8053
|
-
|
|
8054
8010
|
.ads-Tooltip-trigger {
|
|
8055
8011
|
display: inline-flex;
|
|
8056
8012
|
}
|