@pingux/astro 2.177.5-alpha.0 → 2.177.7-alpha.0

package/lib/cjs/components/Label/Label.styles.js

@@ -27,6 +27,8 @@ var label = exports.label = _objectSpread(_objectSpread({}, _Text.text.label), {
   display: 'block',
   mb: 'xs',
   alignItems: 'center',
+  // added to override text-transform from being set to uppercase when used with ui-library
+  textTransform: 'inherit',
   '&.is-float-label': {
     textOverflow: 'ellipsis',
     display: 'flex',
@@ -55,7 +57,6 @@ var label = exports.label = _objectSpread(_objectSpread({}, _Text.text.label), {
 });
 
 // Variants below
-
 label.indicator = {
   color: 'critical.bright',
   ml: 5
@@ -63,7 +64,8 @@ label.indicator = {
 label.radio = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   cursor: 'pointer',
   alignItems: 'center',
-  mb: 'xs'
+  mb: 'xs',
+  textTransform: 'inherit'
 });
 
 // NOTE: ThemeUI label adds 'flex' after other styles, so we have to use !important to override it
@@ -75,11 +77,13 @@ label.checkbox = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   width: 'max-content',
   alignItems: 'center',
   cursor: 'pointer',
+  textTransform: 'inherit',
   '&.is-disabled': {
     opacity: '1',
     color: 'rgba(37, 55, 70, 0.5)'
   }
 });
 label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
-  fontWeight: 1
+  fontWeight: 1,
+  textTransform: 'inherit'
 });

package/lib/cjs/components/TooltipTrigger/Tooltip.js

@@ -28,8 +28,7 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var tooltipRef = (0, _hooks.useLocalOrForwardRef)(ref);
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: tooltipRef,
-    variant: "variants.tooltip.container",
-    p: "sm"
+    variant: "variants.tooltip.container"
   }, tooltipProps, others), children);
 });
 var _default = exports["default"] = Tooltip;

package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js

@@ -23,6 +23,7 @@ var container = exports.container = {
   overflow: 'visible',
   wordBreak: 'break-word',
   display: 'flex',
+  p: 'sm',
   '.is-right > * > &, .is-left > * > &': {
     maxWidth: '24em',
     maxHeight: '6.5em',
@@ -44,11 +45,7 @@ var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
 var button = exports.button = {
   cursor: 'default',
   '&.is-hovered, &.is-pressed': {
-    backgroundColor: 'inherit',
-    cursor: 'default',
-    path: {
-      fill: 'neutral.20'
-    }
+    cursor: 'default'
   }
 };
 var inline = _objectSpread(_objectSpread({}, _Buttons.text), {}, {

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -6,11 +6,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.customWidth = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.BadgeWithTooltip = void 0;
+var _reverse = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reverse"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _AccountOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountOutlineIcon"));
 var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _TooltipTrigger = _interopRequireDefault(require("./TooltipTrigger.mdx"));
@@ -66,25 +69,41 @@ var IconWithTooltip = exports.IconWithTooltip = function IconWithTooltip(args) {
   }, (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.IconButton, {
     variant: "tooltip.button"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AccountIcon["default"],
+    icon: _AccountOutlineIcon["default"],
     title: {
       name: 'Account Icon'
     }
   })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 var BadgeWithTooltip = exports.BadgeWithTooltip = function BadgeWithTooltip(args) {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    _useGetTheme$themeSta = _useGetTheme.themeState,
+    isAstro = _useGetTheme$themeSta.isAstro,
+    isOnyxDark = _useGetTheme$themeSta.isOnyxDark;
+  var getBackground = function getBackground() {
+    if (isAstro) {
+      return 'neutral.10';
+    }
+    return isOnyxDark ? _onyxTokens.astroTokens.color.gray.light : _onyxTokens.astroTokens.color.gray.dark;
+  };
+  var getTextColor = function getTextColor() {
+    if (isAstro) {
+      return 'white';
+    }
+    return isOnyxDark ? (0, _reverse["default"])(_onyxTokens.astroTokensDark.color.font) : (0, _reverse["default"])(_onyxTokens.astroTokens.color.font);
+  };
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, args, (0, _react2.jsx)(_index.Button, {
     variant: "variants.tooltip.badge",
-    bg: "neutral.10"
+    bg: getBackground()
   }, (0, _react2.jsx)(_index.Text, {
     variant: "label",
-    sx: {
+    sx: isAstro ? {
       textTransform: 'uppercase'
-    },
-    color: "white"
-  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, {
+    } : {},
+    color: getTextColor()
+  }, "Some Text")), (0, _react2.jsx)(_index.Tooltip, {
     variant: "variants.tooltip.badgeTooltipContainer"
   }, "Useful tooltip")));
 };

package/lib/cjs/libs/astro/src/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -318,6 +318,26 @@ declare const buttons: {
                 };
             };
         };
+        tooltip: {
+            button: {
+                '&.is-hovered': {
+                    path: {
+                        fill: string;
+                    };
+                    backgroundColor: string;
+                };
+                path: {
+                    fill: string;
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
+        };
     };
     searchNavTabLabel: {
         color: string;

package/lib/cjs/libs/astro/src/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -577,6 +577,9 @@ declare const _default: {
     tooltip: {
         inline: {
             color: string;
+            '&.is-hovered': {
+                color: string;
+            };
         };
     };
     popoverMenu: {

package/lib/cjs/libs/astro/src/styles/themes/next-gen/next-gen.d.ts

@@ -1615,6 +1615,38 @@ declare const _default: {
                 boxShadow: string;
                 alignSelf: string;
             };
+            tooltip: {
+                button: {
+                    '&.is-hovered': {
+                        path: {
+                            fill: string;
+                        };
+                        backgroundColor: string;
+                    };
+                    path: {
+                        fill: string;
+                    };
+                    '&.is-pressed': {
+                        backgroundColor: string;
+                        path: {
+                            fill: string;
+                        };
+                    };
+                    '&.is-focused': {
+                        outline: string;
+                        outlineColor: string;
+                        outlineOffset: string;
+                    };
+                    p: string;
+                    transition: string;
+                    outline: string;
+                    borderRadius: string;
+                    border: string;
+                    cursor: string;
+                    boxShadow: string;
+                    alignSelf: string;
+                };
+            };
         };
         modalCloseButton: {
             path: {
@@ -5943,7 +5975,6 @@ declare const _default: {
         };
         popoverMenu: {
             container: {
-                minWidth: string;
                 transition: string;
                 '&.animate': {
                     opacity: number;
@@ -5951,6 +5982,23 @@ declare const _default: {
                 '&.animate.is-mounted.is-transitioning': {
                     opacity: string;
                 };
+                '&.is-dark-mode': {
+                    color: string;
+                    alignItems: string;
+                    bg: string;
+                    '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+                        borderTopColor: string;
+                    };
+                    '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+                        borderBottomColor: string;
+                    };
+                    '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+                        borderLeftColor: string;
+                    };
+                    '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+                        borderRightColor: string;
+                    };
+                };
             };
             arrow: {
                 color: string;
@@ -6674,6 +6722,32 @@ declare const _default: {
                 borderRadius: string;
                 fontSize: string;
                 fontFamily: string;
+                lineHeight: string;
+                p: string;
+                px: string;
+                py: string;
+            };
+            badge: {
+                borderRadius: string;
+                position: string;
+                '&.is-focused:before': {
+                    position: string;
+                    content: string;
+                    width: string;
+                    height: string;
+                    padding: string;
+                    borderRadius: string;
+                    border: string;
+                    borderColor: string;
+                };
+            };
+            inline: {
+                color: string;
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
             };
         };
     };

package/lib/cjs/libs/astro/src/styles/themes/next-gen/variants/button.d.ts

@@ -1316,6 +1316,38 @@ declare const buttons: {
             boxShadow: string;
             alignSelf: string;
         };
+        tooltip: {
+            button: {
+                '&.is-hovered': {
+                    path: {
+                        fill: string;
+                    };
+                    backgroundColor: string;
+                };
+                path: {
+                    fill: string;
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                p: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                border: string;
+                cursor: string;
+                boxShadow: string;
+                alignSelf: string;
+            };
+        };
     };
     modalCloseButton: {
         path: {

package/lib/cjs/libs/astro/src/styles/themes/next-gen/variants/popoverMenu.d.ts

@@ -1,6 +1,5 @@
 declare const _default: {
     container: {
-        minWidth: string;
         transition: string;
         '&.animate': {
             opacity: number;
@@ -8,6 +7,23 @@ declare const _default: {
         '&.animate.is-mounted.is-transitioning': {
             opacity: string;
         };
+        '&.is-dark-mode': {
+            color: string;
+            alignItems: string;
+            bg: string;
+            '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+                borderTopColor: string;
+            };
+            '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+                borderBottomColor: string;
+            };
+            '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+                borderLeftColor: string;
+            };
+            '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+                borderRightColor: string;
+            };
+        };
     };
     arrow: {
         color: string;

package/lib/cjs/libs/astro/src/styles/themes/next-gen/variants/tooltip.d.ts

@@ -4,6 +4,32 @@ declare const _default: {
         borderRadius: string;
         fontSize: string;
         fontFamily: string;
+        lineHeight: string;
+        p: string;
+        px: string;
+        py: string;
+    };
+    badge: {
+        borderRadius: string;
+        position: string;
+        '&.is-focused:before': {
+            position: string;
+            content: string;
+            width: string;
+            height: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+        };
+    };
+    inline: {
+        color: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
     };
 };
 export default _default;

package/lib/cjs/libs/astro/src/styles/themes/next-gen/variants/variants.d.ts

@@ -1391,7 +1391,6 @@ declare const _default: {
     };
     popoverMenu: {
         container: {
-            minWidth: string;
             transition: string;
             '&.animate': {
                 opacity: number;
@@ -1399,6 +1398,23 @@ declare const _default: {
             '&.animate.is-mounted.is-transitioning': {
                 opacity: string;
             };
+            '&.is-dark-mode': {
+                color: string;
+                alignItems: string;
+                bg: string;
+                '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+                    borderTopColor: string;
+                };
+                '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+                    borderBottomColor: string;
+                };
+                '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+                    borderLeftColor: string;
+                };
+                '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+                    borderRightColor: string;
+                };
+            };
         };
         arrow: {
             color: string;
@@ -2122,6 +2138,32 @@ declare const _default: {
             borderRadius: string;
             fontSize: string;
             fontFamily: string;
+            lineHeight: string;
+            p: string;
+            px: string;
+            py: string;
+        };
+        badge: {
+            borderRadius: string;
+            position: string;
+            '&.is-focused:before': {
+                position: string;
+                content: string;
+                width: string;
+                height: string;
+                padding: string;
+                borderRadius: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+        inline: {
+            color: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
         };
     };
 };