@pingux/astro 1.39.2 → 1.40.0-alpha.0

package/lib/cjs/components/Chip/Badge.js

@@ -28,6 +28,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -48,7 +50,7 @@ var colors = _interopRequireWildcard(require("../../styles/colors"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["align", "bg", "children", "isUppercase", "label", "sx", "slots", "textColor", "textProps"];
+var _excluded = ["align", "bg", "children", "isUppercase", "label", "sx", "slots", "textColor", "textProps", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -73,6 +75,7 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       slots = props.slots,
       textColor = props.textColor,
       textProps = props.textProps,
+      variant = props.variant,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var badgeSx = _objectSpread(_objectSpread(_objectSpread({}, isUppercase && {
@@ -88,16 +91,21 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     ref: ref,
     textColor: textColor,
     sx: badgeSx
-  }, others);
+  }, others); // The following is to correct a visual regression released in 1.39.0 https://jira.pingidentity.com/browse/UIP-5907.
+  // TODO : Remove in Astro V2 with theme remapping roll out.
+
 
+  var oldVariantPaths = ['boxes.countChip', 'boxes.countNeutral', 'boxes.itemChipWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentChip', 'boxes.readOnlyChip', 'boxes.selectedItemChip'];
+  var fixedVariant = (0, _includes["default"])(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
   return (0, _react2.jsx)(_BadgeContext.BadgeContext.Provider, {
     value: {
       bg: bg
     }
   }, (0, _react2.jsx)(_themeUi.Badge, (0, _extends2["default"])({
-    isRow: true,
-    variant: "variants.boxes.chip"
-  }, badgeProps), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && (0, _react2.jsx)(_.Box, {
+    isRow: true
+  }, badgeProps, {
+    variant: props.variant ? fixedVariant : 'variants.boxes.chip'
+  }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && (0, _react2.jsx)(_.Box, {
     mr: "xs"
   }, slots.leftIcon), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "label",
@@ -135,7 +143,10 @@ Badge.propTypes = {
   align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
 
   /** JSX styling that is passed into the component. */
-  sx: _propTypes["default"].shape({})
+  sx: _propTypes["default"].shape({}),
+
+  /** The variant of the badge */
+  variant: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
 };
 Badge.defaultProps = {
   textColor: 'white',

package/lib/cjs/components/Chip/Badge.test.js

@@ -36,9 +36,9 @@ var getComponent = function getComponent() {
 test('renders Chip component', function () {
   getComponent();
 
-  var separator = _react2.screen.getByTestId(testId);
+  var chip = _react2.screen.getByTestId(testId);
 
-  expect(separator).toBeInTheDocument();
+  expect(chip).toBeInTheDocument();
 });
 test('renders children within Chip component', function () {
   var children = (0, _react3.jsx)(_Button["default"], null);

package/lib/cjs/styles/variants/navBar.js

@@ -59,7 +59,32 @@ var sectionContainer = {
   pt: 'sm',
   height: '100%',
   maxHeight: '100%',
-  overflowY: 'auto'
+  overflowY: 'auto',
+  // these rules are for webkit browsers: chrome, safari, edge
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: '4px'
+  },
+  '&::-webkit-scrollbar': {
+    width: 10
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'accent.10'
+  },
+  // this is a newer standard that only ff supports for now
+  scrollbarColor: 'rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1)',
+  // can't use theme values here, unfortunately
+  // different colors while hovering over the nav bar
+  '&:hover': {
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(255, 255, 255, 0.7)',
+      borderRadius: '4px'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'accent.5'
+    },
+    scrollbarColor: 'rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2)'
+  }
 };
 
 var sectionBody = _objectSpread(_objectSpread({}, _accordion["default"].accordionGridBody), {}, {

package/lib/components/Chip/Badge.js

@@ -9,7 +9,8 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "bg", "children", "isUppercase", "label", "sx", "slots", "textColor", "textProps"];
+var _excluded = ["align", "bg", "children", "isUppercase", "label", "sx", "slots", "textColor", "textProps", "variant"];
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -38,6 +39,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
       slots = props.slots,
       textColor = props.textColor,
       textProps = props.textProps,
+      variant = props.variant,
       others = _objectWithoutProperties(props, _excluded);
 
   var badgeSx = _objectSpread(_objectSpread(_objectSpread({}, isUppercase && {
@@ -53,16 +55,21 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     textColor: textColor,
     sx: badgeSx
-  }, others);
+  }, others); // The following is to correct a visual regression released in 1.39.0 https://jira.pingidentity.com/browse/UIP-5907.
+  // TODO : Remove in Astro V2 with theme remapping roll out.
 
+
+  var oldVariantPaths = ['boxes.countChip', 'boxes.countNeutral', 'boxes.itemChipWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentChip', 'boxes.readOnlyChip', 'boxes.selectedItemChip'];
+  var fixedVariant = _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
   return ___EmotionJSX(BadgeContext.Provider, {
     value: {
       bg: bg
     }
   }, ___EmotionJSX(ThemeUIBadge, _extends({
-    isRow: true,
-    variant: "variants.boxes.chip"
-  }, badgeProps), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
+    isRow: true
+  }, badgeProps, {
+    variant: props.variant ? fixedVariant : 'variants.boxes.chip'
+  }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
     mr: "xs"
   }, slots.leftIcon), ___EmotionJSX(Text, _extends({
     variant: "label",
@@ -99,7 +106,10 @@ Badge.propTypes = {
   align: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
   /** JSX styling that is passed into the component. */
-  sx: PropTypes.shape({})
+  sx: PropTypes.shape({}),
+
+  /** The variant of the badge */
+  variant: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 Badge.defaultProps = {
   textColor: 'white',

package/lib/components/Chip/Badge.test.js

@@ -22,8 +22,8 @@ var getComponent = function getComponent() {
 axeTest(getComponent);
 test('renders Chip component', function () {
   getComponent();
-  var separator = screen.getByTestId(testId);
-  expect(separator).toBeInTheDocument();
+  var chip = screen.getByTestId(testId);
+  expect(chip).toBeInTheDocument();
 });
 test('renders children within Chip component', function () {
   var children = ___EmotionJSX(Button, null);

package/lib/styles/variants/navBar.js

@@ -40,7 +40,32 @@ var sectionContainer = {
   pt: 'sm',
   height: '100%',
   maxHeight: '100%',
-  overflowY: 'auto'
+  overflowY: 'auto',
+  // these rules are for webkit browsers: chrome, safari, edge
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: '4px'
+  },
+  '&::-webkit-scrollbar': {
+    width: 10
+  },
+  '&::-webkit-scrollbar-track': {
+    backgroundColor: 'accent.10'
+  },
+  // this is a newer standard that only ff supports for now
+  scrollbarColor: 'rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1)',
+  // can't use theme values here, unfortunately
+  // different colors while hovering over the nav bar
+  '&:hover': {
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(255, 255, 255, 0.7)',
+      borderRadius: '4px'
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'accent.5'
+    },
+    scrollbarColor: 'rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2)'
+  }
 };
 
 var sectionBody = _objectSpread(_objectSpread({}, accordion.accordionGridBody), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.39.2",
+  "version": "1.40.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",