@pingux/astro 2.145.0-alpha.0 → 2.145.0-alpha.2

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -44,6 +44,9 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     helperText = props.helperText;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
@@ -69,7 +72,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
     variant: "label",
-    color: "active"
+    color: isOnyx ? 'font.link' : 'active'
   }, placeholder), (0, _react2.jsx)(_.Box, {
     isRow: true
   }, isLoadingInitial && (0, _react2.jsx)(_.Loader, {

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

@@ -383,6 +383,9 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));
@@ -419,6 +422,9 @@ var WithCharts = function WithCharts(_ref7) {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, (0, _react2.jsx)(_2.ListViewItemChart, {
       containerRef: chartContainerRef,
@@ -565,6 +571,9 @@ var OnLoadPrev = function OnLoadPrev() {
       data: {
         text: item.name,
         icon: _FormSelectIcon["default"]
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));

package/lib/cjs/components/ListView/stories/ListViewNextGenComponent.js

@@ -126,6 +126,9 @@ var ListViewNextGen = function ListViewNextGen() {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, (0, _react2.jsx)(_2.ListViewItemChart, {
       containerRef: chartContainerRef,

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -71,7 +71,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "cyan"
+    color: "white"
   }, iconWrapperProps)) : (0, _react2.jsx)(_.Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -16,6 +16,7 @@ export declare const colors: {
             yellow: string;
             teal: string;
             blue: string;
+            white: string;
             indigo: string;
             lightBlue: string;
             lightPink: string;
@@ -79,6 +80,7 @@ export declare const colors: {
     font: {
         base: string;
         light: string;
+        link: string;
     };
     badge: {
         background: string;
@@ -106,6 +108,7 @@ export declare const colors: {
             yellow: string;
             teal: string;
             blue: string;
+            white: string;
             indigo: string;
             lightBlue: string;
             lightPink: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.overrides = exports.colors = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _colors = require("../../colors");
 var _colorTokens = require("../../themes/next-gen/tokens/colorTokens");
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -27,7 +28,8 @@ var overrides = {
 exports.overrides = overrides;
 var font = {
   base: _colorTokens.nextGenColors['gray-100'],
-  light: _colorTokens.nextGenColors['gray-400']
+  light: _colorTokens.nextGenColors['gray-400'],
+  link: _colorTokens.nextGenColors['blue-400']
 };
 var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {
@@ -52,6 +54,7 @@ var twoTone = {
     yellow: _colorTokens.nextGenColors['yellow-500'],
     teal: _colorTokens.nextGenColors['teal-500'],
     blue: _colorTokens.nextGenColors['blue-500'],
+    white: _colors.white,
     indigo: _colorTokens.nextGenColors['indigo-500'],
     lightBlue: _colorTokens.nextGenColors['blue-600'],
     lightPink: _colorTokens.nextGenColors['pink-600'],

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -17,7 +17,7 @@ import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
-import { usePropWarning, useSelectField } from '../../hooks';
+import { useGetTheme, usePropWarning, useSelectField } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -33,6 +33,9 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     helperText = props.helperText;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -58,7 +61,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
-    color: "active"
+    color: isOnyx ? 'font.link' : 'active'
   }, placeholder), ___EmotionJSX(Box, {
     isRow: true
   }, isLoadingInitial && ___EmotionJSX(Loader, {

package/lib/components/ListView/ListView.stories.js

@@ -367,6 +367,9 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, ___EmotionJSX(Controls, null)));
   }));
@@ -402,6 +405,9 @@ export var WithCharts = function WithCharts(_ref7) {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, ___EmotionJSX(ListViewItemChart, {
       containerRef: chartContainerRef,
@@ -547,6 +553,9 @@ export var OnLoadPrev = function OnLoadPrev() {
       data: {
         text: item.name,
         icon: FormSelectIcon
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, ___EmotionJSX(Controls, null)));
   }));

package/lib/components/ListView/stories/ListViewNextGenComponent.js

@@ -113,6 +113,9 @@ export var ListViewNextGen = function ListViewNextGen() {
       },
       iconProps: {
         color: 'text.secondary'
+      },
+      iconWrapperProps: {
+        color: 'cyan'
       }
     }, ___EmotionJSX(ListViewItemChart, {
       containerRef: chartContainerRef,

package/lib/components/ListViewItem/ListViewItem.js

@@ -57,7 +57,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    color: "cyan"
+    color: "white"
   }, iconWrapperProps)) : ___EmotionJSX(Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import chroma from 'chroma-js';
+import { white } from '../../colors';
 import { nextGenColors } from '../../themes/next-gen/tokens/colorTokens';
 export var overrides = {
   neutral: {
@@ -19,7 +20,8 @@ export var overrides = {
 };
 var font = {
   base: nextGenColors['gray-100'],
-  light: nextGenColors['gray-400']
+  light: nextGenColors['gray-400'],
+  link: nextGenColors['blue-400']
 };
 var hoverDark = chroma.mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {
@@ -44,6 +46,7 @@ var twoTone = {
     yellow: nextGenColors['yellow-500'],
     teal: nextGenColors['teal-500'],
     blue: nextGenColors['blue-500'],
+    white: white,
     indigo: nextGenColors['indigo-500'],
     lightBlue: nextGenColors['blue-600'],
     lightPink: nextGenColors['pink-600'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.145.0-alpha.0",
+  "version": "2.145.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -205,7 +205,8 @@
     "jest-canvas-mock": "^2.3.0",
     "jest-emotion": "^11.0.0",
     "jest-pnp-resolver": "^1.2.2",
-    "msw": "^2.10.5",
+    "msw": "^2.11.3",
+    "msw-storybook-addon": "^2.0.5",
     "mutationobserver-shim": "^0.3.7",
     "react": "18",
     "react-dom": "18",