@pingux/astro 1.0.0-alpha.10 → 1.0.0-alpha.14

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.14](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.13...@pingux/astro@1.0.0-alpha.14) (2022-01-10)
+
+
+### Bug Fixes
+
+* [UIP-4953] Chip component cleanup ([d2f10ec](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d2f10ece82749d723ac35b6262c1b918f81abba1))
+
+
+
+
+
+# [1.0.0-alpha.13](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.12...@pingux/astro@1.0.0-alpha.13) (2022-01-10)
+
+
+### Bug Fixes
+
+* [UIP-5063] Inline Button Text Size ([6f03c64](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6f03c64b13dc2237d09acb565282394effd419b8))
+
+
+
+
+
+# [1.0.0-alpha.12](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.11...@pingux/astro@1.0.0-alpha.12) (2022-01-10)
+
+
+### Bug Fixes
+
+* [UIP-5061] hide variants that aren't used for <Button> specifically ([85a494c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/85a494cc3fa656a2fc6bb37dc0e718bdcfee7829))
+
+
+
+
+
+# [1.0.0-alpha.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.10...@pingux/astro@1.0.0-alpha.11) (2022-01-08)
+
+
+### Features
+
+* [UIP-4887] ListView hides Separators on zoom ([92ca2bb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/92ca2bb40bb49ce9a69eb097cc88b5e210acce8a))
+
+
+
+
+
 # [1.0.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.9...@pingux/astro@1.0.0-alpha.10) (2022-01-07)
 
 

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

@@ -10,10 +10,6 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
 
-var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
-
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
@@ -30,13 +26,13 @@ var _variants = require("../../utils/devUtils/constants/variants");
 
 var _react2 = require("@emotion/react");
 
-var _context;
-
 // removing the iconButton variants from this story.
 var variants = _variants.buttonVariants;
 delete variants.ICON;
 delete variants.ICON_BUTTON;
-delete variants.INVERTED;
+delete variants.INVERTED; // add designer approved variants for devs to use here
+
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
   component: _["default"],
@@ -44,11 +40,9 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: (0, _values["default"])(variants)
+        options: variantOptions
       },
-      defaultValue: (0, _find["default"])(_context = (0, _values["default"])(variants)).call(_context, function (value) {
-        return value === 'default';
-      })
+      defaultValue: 'default'
     },
     children: {
       description: 'Button text.',

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

@@ -18,6 +18,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _ChipContext = require("./ChipContext");
+
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
 var _Text = _interopRequireDefault(require("../Text/Text"));
@@ -32,21 +34,31 @@ var _react2 = require("@emotion/react");
  * available [props from Theme-UI](https://theme-ui.com/sx-prop).
 */
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var children = props.children,
+  var bg = props.bg,
+      children = props.children,
       textColor = props.textColor,
       textProps = props.textProps,
-      label = props.label;
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+      label = props.label,
+      isUppercase = props.isUppercase;
+  return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
+    value: {
+      bg: bg
+    }
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     variant: "boxes.chip",
+    sx: isUppercase && {
+      paddingBottom: '3px'
+    },
     ref: ref
   }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
-    sx: {
-      textTransform: 'uppercase'
-    },
-    color: textColor
-  }, textProps), label), children);
+    color: textColor,
+    sx: isUppercase && {
+      textTransform: 'uppercase',
+      fontSize: '11px'
+    }
+  }, textProps), label), children));
 });
 
 Chip.propTypes = {
@@ -60,11 +72,15 @@ Chip.propTypes = {
   label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
   /** Props object that is spread directly into the textfield. */
-  textProps: _propTypes["default"].shape({})
+  textProps: _propTypes["default"].shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: _propTypes["default"].bool
 };
 Chip.defaultProps = {
   textColor: 'white',
-  bg: colors.neutral[10]
+  bg: colors.neutral[10],
+  isUppercase: false
 };
 var _default = Chip;
 exports["default"] = _default;

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

@@ -20,9 +20,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _Chip = _interopRequireDefault(require("../Chip/Chip"));
+var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
 
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
+
+var _Chip = _interopRequireDefault(require("../Chip"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _colors = require("../../styles/colors.js");
 
@@ -61,6 +67,12 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    isUppercase: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -87,15 +99,42 @@ var ChipWithCustomColors = function ChipWithCustomColors() {
 exports.ChipWithCustomColors = ChipWithCustomColors;
 
 var ChipWithIcon = function ChipWithIcon() {
-  return (0, _react2.jsx)(_Chip["default"], {
-    label: "Chip with Icon",
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon Button",
     bg: "navy"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
     ml: "xs",
+    size: "14px"
+  }))), (0, _react2.jsx)("div", {
+    style: {
+      padding: '5px'
+    }
+  }), (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon Button"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _EarthIcon["default"],
+    ml: "xs",
+    size: "14px"
+  }))), (0, _react2.jsx)("div", {
+    style: {
+      padding: '5px'
+    }
+  }), (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon",
+    bg: "green"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _ContentCopyIcon["default"],
+    ml: "xs",
     size: "14px",
     color: "white"
-  }));
+  })));
 };
 
 exports.ChipWithIcon = ChipWithIcon;

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

@@ -45,4 +45,13 @@ test('renders children within Chip component', function () {
   var mockedChildren = _react2.screen.getByRole('button');
 
   expect(mockedChildren).toBeInTheDocument();
+});
+test('renders Chip component with uppercase', function () {
+  var label = 'uppercase';
+  var isUppercase = true;
+  getComponent({
+    label: label,
+    isUppercase: isUppercase
+  });
+  expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.ChipContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultValue = 'inherit';
+
+var ChipContext = /*#__PURE__*/_react["default"].createContext(defaultValue);
+
+exports.ChipContext = ChipContext;

package/lib/cjs/components/IconButton/IconButton.js

@@ -48,6 +48,8 @@ var _utils = require("@react-aria/utils");
 
 var _hooks = require("../../hooks");
 
+var _ChipContext = require("../Chip/ChipContext");
+
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
 var _react2 = require("@emotion/react");
@@ -82,6 +84,9 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
+  var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
+      chipBg = _useContext.bg;
+
   var _usePress = (0, _interactions.usePress)(_objectSpread({
     ref: buttonRef
   }, props)),
@@ -110,7 +115,12 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button'
+    "aria-label": ariaLabel || 'Icon Button',
+    sx: chipBg && isHovered && {
+      'path': {
+        fill: chipBg
+      }
+    }
   }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps)), children);
 
   if (title) {

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

@@ -81,18 +81,19 @@ var collectionTypes = {
 exports.collectionTypes = collectionTypes;
 
 function useListLayout(state) {
+  var ROW_HEIGHT = 81;
   var collator = (0, _i18n.useCollator)({
     usage: 'search',
     sensitivity: 'base'
   });
   var layout = (0, _react.useMemo)(function () {
     return new _layout.ListLayout({
-      estimatedRowHeight: 81,
+      estimatedRowHeight: ROW_HEIGHT,
       estimatedHeadingHeight: 26,
       paddingRight: 4,
       paddingLeft: 4,
-      loaderHeight: 81,
-      placeholderHeight: 81,
+      loaderHeight: ROW_HEIGHT,
+      placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
   }, [collator]);

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

@@ -32,8 +32,6 @@ var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Separator = _interopRequireDefault(require("../Separator"));
-
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -90,7 +88,8 @@ var ListViewItem = function ListViewItem(props) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible
+    isFocused: isDisabled ? false : isFocusVisible,
+    hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -111,9 +110,7 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered)), hasSeparator && (0, _react2.jsx)(_Separator["default"], {
-    m: "0px"
-  }));
+  }, listItemProps), item.rendered)));
 };
 
 ListViewItem.propTypes = {

package/lib/cjs/layouts/ListLayout.stories.js

@@ -301,7 +301,8 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Chip, {
       bg: "success.light",
       textColor: "success.dark",
-      label: "New"
+      label: "New",
+      isUppercase: true
     })) : null)), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignSelf: "center"

package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js

@@ -52,7 +52,7 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_Icon["default"], {
       icon: _LinkVariantIcon["default"],
       color: "#253746",
-      size: 15,
+      size: 12,
       alignSelf: "center",
       mr: "xs"
     }), (0, _react2.jsx)(_Text["default"], {

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

@@ -106,6 +106,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': {
     boxShadow: 'inset 0 0 5px #5873bdbf'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
   }
 });
 
@@ -119,14 +123,27 @@ var listBoxSectionTitle = {
 };
 var chip = {
   cursor: 'pointer',
-  height: '15px',
-  p: '10px',
+  p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
-  borderRadius: '5px'
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
 };
 var inputInContainerSlot = {
   position: 'absolute',

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

@@ -330,7 +330,7 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   height: '22px',
   lineHeight: 1,
-  fontSize: '14px',
+  fontSize: 'sm',
   borderRadius: '15px',
   border: '1px solid',
   borderColor: 'active',

package/lib/components/Button/Button.stories.js

@@ -1,8 +1,3 @@
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
-var _context;
-
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
 import Box from '../Box';
@@ -15,7 +10,9 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
 delete variants.ICON;
 delete variants.ICON_BUTTON;
-delete variants.INVERTED;
+delete variants.INVERTED; // add designer approved variants for devs to use here
+
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 export default {
   title: 'Button',
   component: Button,
@@ -23,11 +20,9 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: _Object$values(variants)
+        options: variantOptions
       },
-      defaultValue: _findInstanceProperty(_context = _Object$values(variants)).call(_context, function (value) {
-        return value === 'default';
-      })
+      defaultValue: 'default'
     },
     children: {
       description: 'Button text.',

package/lib/components/Chip/Chip.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ChipContext } from './ChipContext';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import * as colors from '../../styles/colors';
@@ -12,21 +13,31 @@ import * as colors from '../../styles/colors';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
+  var bg = props.bg,
+      children = props.children,
       textColor = props.textColor,
       textProps = props.textProps,
-      label = props.label;
-  return ___EmotionJSX(Box, _extends({
+      label = props.label,
+      isUppercase = props.isUppercase;
+  return ___EmotionJSX(ChipContext.Provider, {
+    value: {
+      bg: bg
+    }
+  }, ___EmotionJSX(Box, _extends({
     isRow: true,
     variant: "boxes.chip",
+    sx: isUppercase && {
+      paddingBottom: '3px'
+    },
     ref: ref
   }, props), ___EmotionJSX(Text, _extends({
     variant: "label",
-    sx: {
-      textTransform: 'uppercase'
-    },
-    color: textColor
-  }, textProps), label), children);
+    color: textColor,
+    sx: isUppercase && {
+      textTransform: 'uppercase',
+      fontSize: '11px'
+    }
+  }, textProps), label), children));
 });
 Chip.propTypes = {
   /** The text color of the chip. */
@@ -39,10 +50,14 @@ Chip.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
   /** Props object that is spread directly into the textfield. */
-  textProps: PropTypes.shape({})
+  textProps: PropTypes.shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: PropTypes.bool
 };
 Chip.defaultProps = {
   textColor: 'white',
-  bg: colors.neutral[10]
+  bg: colors.neutral[10],
+  isUppercase: false
 };
 export default Chip;

package/lib/components/Chip/Chip.stories.js

@@ -3,8 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import Clear from 'mdi-react/CloseIcon';
-import Chip from '../Chip/Chip';
-import Icon from '../Icon/Icon';
+import ContentCopy from 'mdi-react/ContentCopyIcon';
+import Earth from 'mdi-react/EarthIcon';
+import Chip from '../Chip';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 import { flatColorList } from '../../styles/colors.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -40,6 +43,12 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    isUppercase: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -59,13 +68,40 @@ export var ChipWithCustomColors = function ChipWithCustomColors() {
   });
 };
 export var ChipWithIcon = function ChipWithIcon() {
-  return ___EmotionJSX(Chip, {
-    label: "Chip with Icon",
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Chip, {
+    label: "Chip with Icon Button",
     bg: "navy"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
     ml: "xs",
+    size: "14px"
+  }))), ___EmotionJSX("div", {
+    style: {
+      padding: '5px'
+    }
+  }), ___EmotionJSX(Chip, {
+    label: "Chip with Icon Button"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: Earth,
+    ml: "xs",
+    size: "14px"
+  }))), ___EmotionJSX("div", {
+    style: {
+      padding: '5px'
+    }
+  }), ___EmotionJSX(Chip, {
+    label: "Chip with Icon",
+    bg: "green"
+  }, ___EmotionJSX(Icon, {
+    icon: ContentCopy,
+    ml: "xs",
     size: "14px",
     color: "white"
-  }));
+  })));
 };

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

@@ -31,4 +31,13 @@ test('renders children within Chip component', function () {
   });
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
+});
+test('renders Chip component with uppercase', function () {
+  var label = 'uppercase';
+  var isUppercase = true;
+  getComponent({
+    label: label,
+    isUppercase: isUppercase
+  });
+  expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });

package/lib/components/Chip/ChipContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+var defaultValue = 'inherit';
+export var ChipContext = /*#__PURE__*/React.createContext(defaultValue);

package/lib/components/IconButton/IconButton.js

@@ -14,13 +14,14 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { ChipContext } from '../Chip/ChipContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 /**
  * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
@@ -51,6 +52,9 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     return buttonRef.current;
   });
 
+  var _useContext = useContext(ChipContext),
+      chipBg = _useContext.bg;
+
   var _usePress = usePress(_objectSpread({
     ref: buttonRef
   }, props)),
@@ -80,7 +84,12 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button'
+    "aria-label": ariaLabel || 'Icon Button',
+    sx: chipBg && isHovered && {
+      'path': {
+        fill: chipBg
+      }
+    }
   }, others, mergeProps(hoverProps, focusProps, pressProps)), children);
 
   if (title) {

package/lib/components/ListView/ListView.js

@@ -37,18 +37,19 @@ export var collectionTypes = {
   PLACEHOLDER: 'placeholder'
 };
 export function useListLayout(state) {
+  var ROW_HEIGHT = 81;
   var collator = useCollator({
     usage: 'search',
     sensitivity: 'base'
   });
   var layout = useMemo(function () {
     return new ListLayout({
-      estimatedRowHeight: 81,
+      estimatedRowHeight: ROW_HEIGHT,
       estimatedHeadingHeight: 26,
       paddingRight: 4,
       paddingLeft: 4,
-      loaderHeight: 81,
-      placeholderHeight: 81,
+      loaderHeight: ROW_HEIGHT,
+      placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
   }, [collator]);

package/lib/components/ListViewItem/ListViewItem.js

@@ -8,7 +8,6 @@ import { useGridCell, useGridRow } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
 import { ListViewContext } from '../ListView/ListViewContext';
 import Box from '../Box';
-import Separator from '../Separator';
 import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
@@ -65,7 +64,8 @@ var ListViewItem = function ListViewItem(props) {
   var _useStatusClasses = useStatusClasses(className, {
     isHovered: isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible
+    isFocused: isDisabled ? false : isFocusVisible,
+    hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -86,9 +86,7 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered)), hasSeparator && ___EmotionJSX(Separator, {
-    m: "0px"
-  }));
+  }, listItemProps), item.rendered)));
 };
 
 ListViewItem.propTypes = {

package/lib/layouts/ListLayout.stories.js

@@ -274,7 +274,8 @@ export var Default = function Default() {
     }, ___EmotionJSX(Chip, {
       bg: "success.light",
       textColor: "success.dark",
-      label: "New"
+      label: "New",
+      isUppercase: true
     })) : null)), ___EmotionJSX(Box, {
       isRow: true,
       alignSelf: "center"

package/lib/recipes/InputBoxWithLinkedChip.stories.js

@@ -30,7 +30,7 @@ export var Default = function Default() {
     }, ___EmotionJSX(Icon, {
       icon: Link,
       color: "#253746",
-      size: 15,
+      size: 12,
       alignSelf: "center",
       mr: "xs"
     }), ___EmotionJSX(Text, {

package/lib/styles/variants/boxes.js

@@ -85,6 +85,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.is-focused': {
     boxShadow: 'inset 0 0 5px #5873bdbf'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
   }
 });
 
@@ -98,14 +102,27 @@ var listBoxSectionTitle = {
 };
 var chip = {
   cursor: 'pointer',
-  height: '15px',
-  p: '10px',
+  p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
-  borderRadius: '5px'
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
 };
 var inputInContainerSlot = {
   position: 'absolute',

package/lib/styles/variants/buttons.js

@@ -309,7 +309,7 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   height: '22px',
   lineHeight: 1,
-  fontSize: '14px',
+  fontSize: 'sm',
   borderRadius: '15px',
   border: '1px solid',
   borderColor: 'active',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.14",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",