@pingux/astro 2.163.1-alpha.3 → 2.163.1-alpha.5

package/lib/cjs/styles/themes/next-gen/variants/badges.d.ts

@@ -33,7 +33,7 @@ export declare const badges: {
     baseBadge: {
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -69,7 +69,7 @@ export declare const badges: {
     default: {
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -107,7 +107,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -144,7 +144,7 @@ export declare const badges: {
         '& span': {
             color: string;
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -182,7 +182,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -219,7 +219,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -256,7 +256,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -293,7 +293,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -330,7 +330,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -367,7 +367,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -404,7 +404,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -441,8 +441,8 @@ export declare const badges: {
         paddingRight: string;
         '& span': {
             color: string;
-            fontWeight: number;
             fontSize: string;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -477,10 +477,13 @@ export declare const badges: {
     };
     readOnlyBadge: {
         border: string;
+        borderColor: string;
+        backgroundColor: string;
         '& span': {
             color: string;
-            fontWeight: number;
+            lineHeight: string;
             fontSize: string;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -516,10 +519,13 @@ export declare const badges: {
     readOnlyFieldBadge: {
         '& span': {
             color: string;
+            lineHeight: string;
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         border: string;
+        borderColor: string;
+        backgroundColor: string;
         '& button': {
             alignSelf: string;
             p: string;
@@ -558,7 +564,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -597,7 +603,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -636,7 +642,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -675,7 +681,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -714,7 +720,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -778,17 +784,17 @@ export declare const badges: {
         boxShadow: string;
     };
     itemBadgeWithSlot: {
-        bg: string;
-        fontWeight: number;
+        border: string;
         '& span': {
             color: string;
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& svg': {
             fill: string;
         };
-        border: string;
+        backgroundColor: string;
+        paddingRight: string;
         '& button': {
             alignSelf: string;
             p: string;
@@ -821,7 +827,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -858,7 +864,7 @@ export declare const badges: {
         color: string;
         '& span': {
             fontSize: string;
-            fontWeight: number;
+            fontWeight: string;
         };
         '& button': {
             alignSelf: string;

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

@@ -18,8 +18,8 @@ var _button = _interopRequireDefault(require("./button"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var badgeFont = {
-  fontSize: '12px',
-  fontWeight: 2
+  fontSize: 'tiny',
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -50,7 +50,7 @@ var baseBadge = _objectSpread({
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
-  fontSize: '12px',
+  fontSize: 'tiny',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
@@ -88,30 +88,31 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'text.primary',
-    fontWeight: 400
+    color: 'text.primary'
   })
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  border: 'none',
+  border: '1px solid',
+  borderColor: 'border.hairline',
+  backgroundColor: '#FFFFFF !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary',
-    fontWeight: 2
+    lineHeight: 'xs'
   })
 });
 var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
+    color: 'text.primary',
+    lineHeight: 'xs'
   })
 });
-var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#EAF2FD !important',
-  fontWeight: 2,
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
+  border: 'none',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
   }),
   '& svg': {
-    fill: 'gray-900'
+    fill: 'text.primary'
   }
 });
 var badgeDeleteButton = exports.badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {

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

@@ -766,6 +766,9 @@ declare const _default: {
             pl: string;
             pr: string;
             justifyContent: string;
+            borderRadius: string;
+            lineHeight: string;
+            color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -795,14 +798,25 @@ declare const _default: {
             '&.is-condensed': {
                 pl: string;
                 bg: string;
+                color: string;
                 '&.is-selected': {
                     bg: string;
                 };
                 '&.is-focused': {
                     bg: string;
+                    color: string;
                 };
             };
         };
+        sectionTitle: {
+            color: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            textTransform: string;
+            letterSpacing: string;
+            ml: string;
+        };
     };
     listView: {
         container: {

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

@@ -158,8 +158,11 @@ var listBox = {
     pl: '.75rem',
     pr: 'md',
     justifyContent: 'space-between',
+    borderRadius: '4px',
+    lineHeight: 'body',
+    color: 'gray-700',
     '&.is-focused': {
-      color: 'text.primary',
+      color: 'font.hover',
       bg: 'gray-100',
       borderRadius: '4px'
     },
@@ -187,13 +190,24 @@ var listBox = {
     '&.is-condensed': {
       pl: 'md',
       bg: 'backgroundBase',
+      color: 'gray-700',
       '&.is-selected': {
         bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'backgroundBase'
+        bg: 'backgroundBase',
+        color: 'font.hover'
       }
     }
+  },
+  sectionTitle: {
+    color: 'font.light',
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'xs',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    ml: 'md'
   }
 };
 var separator = {

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -31,17 +31,19 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = props.isDisabled,
     status = props.status,
     helperText = props.helperText,
-    hasInlineLoader = props.hasInlineLoader;
+    hasInlineLoader = props.hasInlineLoader,
+    popoverWidth = props.popoverWidth;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
+    linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
     themeState = _useGetTheme.themeState;
   var isOnyx = themeState.isOnyx;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
       listboxStyle: {
-        width: '10em'
+        width: popoverWidth || linkSelectFieldWidth
       }
     }, props), {}, {
       // Need this for not applying is-default class
@@ -152,7 +154,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onSelectionChange: PropTypes.func,
   /** Display an inline loader inside the select trigger while loading. */
-  hasInlineLoader: PropTypes.bool
+  hasInlineLoader: PropTypes.bool,
+  /** Width of the popover menu. Accepts any valid CSS unit. */
+  popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = _objectSpread({
   placeholder: 'Select',

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -315,4 +315,23 @@ export var AsyncLoading = function AsyncLoading() {
       key: item.id
     }, item.name.given);
   }));
+};
+export var WithPopoverWidth = function WithPopoverWidth(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {
+    width: "100%",
+    popoverWidth: "20rem"
+  }), ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Extra long goes here")));
+};
+WithPopoverWidth.parameters = {
+  docs: {
+    description: {
+      story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
+    }
+  }
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -57,18 +57,35 @@ var countNeutral = {
     color: 'white'
   }
 };
-var itemBadgeWithSlot = {
-  bg: '#455469 !important',
-  fontWeight: 2,
+var readOnlyBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
   '& span': {
     color: 'gray-100'
-  },
+  }
+};
+var readOnlyFieldBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var selectedItemBadge = {
+  backgroundColor: '#155CBA !important',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
   '& svg': {
     path: {
       fill: 'gray-100'
     }
   }
-};
+});
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -83,24 +100,11 @@ var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  readOnlyFieldBadge: {
-    backgroundColor: '#F6F8FA !important',
-    '& span': {
-      color: 'black'
-    }
-  },
-  selectedItemBadge: {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    }
-  },
   countBadge: countBadge,
   countNeutral: countNeutral,
+  selectedItemBadge: selectedItemBadge,
+  readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   errorCalloutBadge: {
     backgroundColor: '#23282e !important',

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

@@ -18,15 +18,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
+    color: 'gray-400',
     '&.is-focused': {
-      color: 'text.primary',
-      bg: 'gray-800'
+      color: 'gray-200',
+      bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'text.primary',
-      bg: 'gray-800',
+      color: 'gray-200',
+      bg: '#2C323A',
       '&.is-focused': {
-        color: 'text.primary'
+        color: 'gray-200'
+      }
+    },
+    '&.is-condensed': {
+      color: 'gray-400',
+      '&.is-focused': {
+        color: 'gray-200'
       }
     },
     '&.is-focus-visible': {

package/lib/styles/themes/astro/customProperties/index.js

@@ -16,6 +16,7 @@ var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
 var defaultIconSize = 'sm';
+var linkSelectFieldWidth = '10em';
 var calendarIconSize = 25;
 export var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -37,5 +38,6 @@ export var astroThemeValues = {
   defaultIconColor: defaultIconColor,
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
-  buttonLoaderSize: buttonLoaderSize
+  buttonLoaderSize: buttonLoaderSize,
+  linkSelectFieldWidth: linkSelectFieldWidth
 };

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -21,6 +21,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
 var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
+var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
 export var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -36,5 +37,6 @@ export var nextGenThemeValues = _objectSpread({
   rockerButtonGap: '0px',
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
-  buttonLoaderSize: buttonLoaderSize
+  buttonLoaderSize: buttonLoaderSize,
+  linkSelectFieldWidth: linkSelectFieldWidth
 }, customSizes);

package/lib/styles/themes/next-gen/tokens/colorTokens.js

@@ -123,7 +123,8 @@ export var nextGenColors = {
     'light': '#5e6d82',
     'link': '#1a73e8',
     'label': '#5e6d82',
-    'reverse': '#ffffff'
+    'reverse': '#ffffff',
+    'hover': '#121518'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',

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

@@ -11,8 +11,8 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import buttons from './button';
 var badgeFont = {
-  fontSize: '12px',
-  fontWeight: 2
+  fontSize: 'tiny',
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -43,7 +43,7 @@ var baseBadge = _objectSpread({
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
-  fontSize: '12px',
+  fontSize: 'tiny',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
@@ -81,30 +81,31 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'text.primary',
-    fontWeight: 400
+    color: 'text.primary'
   })
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  border: 'none',
+  border: '1px solid',
+  borderColor: 'border.hairline',
+  backgroundColor: '#FFFFFF !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary',
-    fontWeight: 2
+    lineHeight: 'xs'
   })
 });
 var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
+    color: 'text.primary',
+    lineHeight: 'xs'
   })
 });
-var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#EAF2FD !important',
-  fontWeight: 2,
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
+  border: 'none',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
   }),
   '& svg': {
-    fill: 'gray-900'
+    fill: 'text.primary'
   }
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {

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

@@ -148,8 +148,11 @@ var listBox = {
     pl: '.75rem',
     pr: 'md',
     justifyContent: 'space-between',
+    borderRadius: '4px',
+    lineHeight: 'body',
+    color: 'gray-700',
     '&.is-focused': {
-      color: 'text.primary',
+      color: 'font.hover',
       bg: 'gray-100',
       borderRadius: '4px'
     },
@@ -177,13 +180,24 @@ var listBox = {
     '&.is-condensed': {
       pl: 'md',
       bg: 'backgroundBase',
+      color: 'gray-700',
       '&.is-selected': {
         bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'backgroundBase'
+        bg: 'backgroundBase',
+        color: 'font.hover'
       }
     }
+  },
+  sectionTitle: {
+    color: 'font.light',
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'xs',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    ml: 'md'
   }
 };
 var separator = {