@pingux/astro 2.199.0-alpha.0 → 2.200.0-alpha.0

package/lib/styles/themes/next-gen/forms.js

@@ -39,10 +39,9 @@ export var select = {
     color: 'text.primary'
   },
   arrow: {
-    width: '20px',
-    height: '20px',
     alignItems: 'center',
     justifyContent: 'center',
+    ml: 'xs',
     '& > svg': {
       minWidth: tShirtSizes.xs,
       width: tShirtSizes.xs,

package/lib/styles/themes/next-gen/variants/button.js

@@ -226,7 +226,7 @@ var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white'
 });
 var link = {
-  color: 'active',
+  color: astroTokens.color.font.link,
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
@@ -242,6 +242,26 @@ var link = {
     outline: 'none'
   }
 };
+var selectLink = _objectSpread(_objectSpread({}, link), {}, {
+  textDecoration: 'none',
+  px: '0',
+  '&.is-hovered': {
+    textDecoration: 'none'
+  },
+  '&.is-pressed': {
+    textDecoration: 'none'
+  },
+  '&.is-focused': {
+    textDecoration: 'none',
+    outline: 'none',
+    'span.link-select-field-placeholder': {
+      textDecoration: 'underline'
+    },
+    'span.material-symbols-outlined': {
+      textDecoration: 'none'
+    }
+  }
+});
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   px: '0px',
   py: '0px',
@@ -612,6 +632,7 @@ var buttons = {
   modalCloseButton: modalCloseButton,
   aiChat: aiChat,
   paginationMenu: paginationMenu,
-  ButtonInputGroupContentRight: ButtonInputGroupContentRight
+  ButtonInputGroupContentRight: ButtonInputGroupContentRight,
+  selectLink: selectLink
 };
 export default buttons;

package/lib/styles/themes/next-gen/variants/menu.js

@@ -1,8 +1,6 @@
 import { astroTokens } from '@pingux/onyx-tokens';
 export var menu = {
-  p: 'sm',
-  border: '1px solid',
-  borderColor: 'border.base'
+  p: 'sm'
 };
 export var menuSection = {
   sectionTitle: {

package/lib/styles/themes/next-gen/variants/popoverMenu.js

@@ -2,8 +2,11 @@ import { astroTokens } from '@pingux/onyx-tokens';
 var container = {
   minWidth: '150px',
   maxWidth: '260px',
-  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.18)',
   transition: 'opacity 200ms ease',
+  border: '1px solid',
+  borderColor: astroTokens.color.common.border,
+  borderRadius: astroTokens.radius.md,
   '&.animate': {
     opacity: 0
   },

package/lib/styles/themes/next-gen/variants/text.js

@@ -119,6 +119,9 @@ var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
 var modalTitle = _objectSpread(_objectSpread({}, hTags.H3), {}, {
   lineHeight: '2rem'
 });
+var label = {
+  fontSize: fontSizes.label
+};
 export var text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -241,5 +244,9 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   stepperTabContent: stepperTabContent,
-  stepperTabContentHeader: stepperTabContentHeader
+  stepperTabContentHeader: stepperTabContentHeader,
+  label: label,
+  linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
+    color: astroTokens.color.font.link
+  })
 });

package/lib/styles/themes/next-gen/variants/variants.js

@@ -150,34 +150,32 @@ var modal = {
 };
 var listBox = {
   container: {
-    pl: 'sm',
-    pr: 0,
-    py: 'xs'
+    p: astroTokens.spacing.sm
   },
   option: {
-    py: '.75rem',
-    pl: '.75rem',
-    pr: 'md',
-    mr: 'sm',
+    py: astroTokens.spacing['md-s'],
+    pl: astroTokens.spacing['md-s'],
+    pr: astroTokens.spacing.md,
     justifyContent: 'space-between',
-    borderRadius: '4px',
+    borderRadius: astroTokens.radius.md,
     lineHeight: 'body',
     color: 'gray-700',
     '&.is-focused': {
       color: 'font.hover',
       bg: 'gray-100',
-      borderRadius: '4px'
+      borderRadius: astroTokens.radius.md
     },
     '&.is-focus-visible': {
       boxShadow: 'inset 0 0 0 1px #1a73e8',
-      borderRadius: '4px',
+      borderRadius: astroTokens.radius.md,
       zIndex: 1
     },
     '&.is-selected': {
+      fontWeight: '0',
       color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
-      borderRadius: '4px',
+      borderRadius: astroTokens.radius.md,
       '&.is-focused': {
         color: 'text.primary'
       },
@@ -190,7 +188,7 @@ var listBox = {
       bg: 'lightblue'
     },
     '&.is-condensed': {
-      pl: 'md',
+      pl: astroTokens.spacing.md,
       bg: 'backgroundBase',
       color: 'gray-700',
       '&.is-selected': {

package/lib/utils/docUtils/iconSizeProps.js

@@ -1,12 +1,24 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+var _context;
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import PropTypes from 'prop-types';
-import { tShirtSizes } from '../devUtils/constants/tShirtSizes';
+var iconSizes = ['xxs', 'xs', 'sm', 'md'];
 export var sizeArgTypes = {
   size: {
-    control: 'select',
-    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xxs\", \"xs\", \"sm\" , \"md\" \n    rendering 9, 15, 20, and 25 pixel svg containers."
+    control: {
+      type: 'select'
+    },
+    options: iconSizes,
+    description: 'The size of the icon. Accepts a t-shirt size ("xxs", "xs", "sm", "md") or a number value in pixels. Rendered pixel size may vary by theme.',
+    table: {
+      type: {
+        summary: _mapInstanceProperty(iconSizes).call(iconSizes, function (k) {
+          return "\"".concat(k, "\"");
+        }).join(' | ')
+      }
+    }
   }
 };
 export var sizePropTypes = {
-  size: PropTypes.oneOf(_Object$keys(tShirtSizes))
+  size: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, iconSizes))
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.199.0-alpha.0",
+  "version": "2.200.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -44,7 +44,6 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@internationalized/date": "^3.5.3",
     "@internationalized/number": "^3.6.0",
-    "@material-symbols/font-400": "^0.40.2",
     "@monaco-editor/react": "4.4.2",
     "@pingux/mdi-react": "^1.2.0",
     "@pingux/onyx-tokens": "^0.18.0",
@@ -110,6 +109,7 @@
     "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",
     "lodash": "^4.17.23",
     "markdown-to-jsx": "^7.7.4",
+    "material-symbols": "^0.44.9",
     "monaco-editor": "0.34.1",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "1.2.1",