@pingux/astro 1.0.0-alpha.9 → 1.1.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,175 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.1...@pingux/astro@1.1.0-alpha.2) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5039] IconButton Square Variant ([2fecfac](https://gitlab.corp.pingidentity.com/ux/pingux/commit/2fecfac9d39974eb5dc773d210c3a830d1bd9e2a))
+
+
+
+
+
+# [1.1.0-alpha.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.0...@pingux/astro@1.1.0-alpha.1) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5026] Infinite Loading List requests page 2 instantly ([e6888cf](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e6888cfe91435fae0ab583b0ff22b2c169ba7bcd))
+
+
+
+
+
+# [1.1.0-alpha.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.1...@pingux/astro@1.1.0-alpha.0) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5122] adjust x icon to 14px ([6b4ca54](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6b4ca5418ddaffb6e1a4daaf28b57151a23529cb))
+
+
+### Features
+
+* [UIP-5066] Add Icon, Chip, and Text with Tooltips ([1681083](https://gitlab.corp.pingidentity.com/ux/pingux/commit/168108386d77ef09635a177a35cb6d68cfad8bc2))
+
+
+
+
+
+## [1.0.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0...@pingux/astro@1.0.1) (2022-01-19)
+
+**Note:** Version bump only for package @pingux/astro
+
+
+
+
+
+# [1.0.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.20...@pingux/astro@1.0.0) (2022-01-19)
+
+**Note:** Version bump only for package @pingux/astro
+
+
+
+
+
+# [1.0.0-alpha.20](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.19...@pingux/astro@1.0.0-alpha.20) (2022-01-17)
+
+**Note:** Version bump only for package @pingux/astro
+
+
+
+
+
+# [1.0.0-alpha.19](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.18...@pingux/astro@1.0.0-alpha.19) (2022-01-13)
+
+
+### Bug Fixes
+
+* [UIP-4996] astro stepper redundant tooltip ([d74f102](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d74f1020163703948498436224ef3f9d6458df57))
+
+
+
+
+
+# [1.0.0-alpha.18](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.17...@pingux/astro@1.0.0-alpha.18) (2022-01-13)
+
+
+### Bug Fixes
+
+* [UIP-5107] IconButton - no focus in disabled state ([f301f6d](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f301f6d0cdc8271c992eb3384094cafbd59fa0d5))
+
+
+
+
+
+# [1.0.0-alpha.17](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.16...@pingux/astro@1.0.0-alpha.17) (2022-01-13)
+
+
+### Bug Fixes
+
+* [UIP-4997] Read only style TextAreaField ([a5f62bd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a5f62bd014f2d3d75c2c71625bc31ba5cefbb4df))
+
+
+
+
+
+# [1.0.0-alpha.16](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.15...@pingux/astro@1.0.0-alpha.16) (2022-01-13)
+
+
+### Bug Fixes
+
+* [UIP-4962] accordion grid design improvements ([dcec402](https://gitlab.corp.pingidentity.com/ux/pingux/commit/dcec4025f945968e20386bc20ad011f48532acc7))
+
+
+
+
+
+# [1.0.0-alpha.15](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.14...@pingux/astro@1.0.0-alpha.15) (2022-01-13)
+
+**Note:** Version bump only for package @pingux/astro
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* [UIP-5010] Disabled tabs can be displayed via keyboard ([9115f66](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9115f66c8e921a910934cb8205b29321f2d30fe8))
+
+
+
+
+
 # [1.0.0-alpha.9](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.8...@pingux/astro@1.0.0-alpha.9) (2022-01-07)
 
 

package/README.md

@@ -12,6 +12,11 @@ NPM:
 Yarn: 
 `yarn add @pingux/astro`
 
+## Requirements
+
+- Node: 12+
+- React: 16.8+
+
 ## Usage
 
 All apps should be wrapped in an <AstroWrapper> for full functionality and styling.

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

@@ -108,8 +108,6 @@ var Default = function Default() {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: {
-        pt: '12px',
-        pb: '12px',
         flexGrow: 1
       }
     }, (0, _react2.jsx)(_index.Box, {
@@ -154,20 +152,14 @@ var Default = function Default() {
       sx: {
         mr: '4px',
         height: '26px',
-        width: '26px',
-        'path': {
-          fill: 'active'
-        }
+        width: '26px'
       }
     }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "vertical-lines-icon",
       sx: {
         mr: '4px',
         height: '26px',
-        width: '26px',
-        'path': {
-          fill: 'active'
-        }
+        width: '26px'
       }
     }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
   };
@@ -310,7 +302,8 @@ var Default = function Default() {
         item: item
       }), item.key !== 'Organization' ? (0, _react2.jsx)(_index.Separator, {
         sx: {
-          m: 0
+          m: 0,
+          bg: 'neutral.90'
         }
       }) : null);
     }))

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

@@ -48,14 +48,10 @@ var _focus = require("@react-aria/focus");
 
 var _utils = require("@react-aria/utils");
 
-var _constants = require("./constants");
-
 var _hooks = require("../../hooks");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
 
-var _Box = _interopRequireDefault(require("../Box"));
-
 var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -75,8 +71,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      mode = props.mode,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "mode"]);
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
   var buttonRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -84,20 +79,13 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return buttonRef.current;
   });
-  var ButtonBase = (0, _react.useMemo)(function () {
-    return mode === _constants.modes.ICON ? _Box["default"] : _themeUi.Button;
-  }, [mode]);
-  var elementType = (0, _react.useMemo)(function () {
-    if (mode === _constants.modes.ICON) return 'div';
-    return 'button';
-  }, [mode]);
 
   var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
   var _useButton = (0, _button.useButton)(_objectSpread({
-    elementType: elementType
+    elementType: 'button'
   }, props), buttonRef),
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
@@ -114,12 +102,9 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
-  (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` will be deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
-    isActive: props.variant === 'icon'
-  });
   var ariaLabel = props['aria-label'];
   (0, _hooks.useAriaLabelWarning)('Button', ariaLabel);
-  return (0, _react2.jsx)(ButtonBase, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
     "aria-label": ariaLabel || 'Button',
     ref: buttonRef,
     className: classNames,
@@ -202,15 +187,11 @@ Button.propTypes = {
   onPressUp: _propTypes["default"].func,
 
   /** The styling variation of the button. */
-  variant: _propTypes["default"].string,
-
-  /** The behavioral pattern to apply to the button. */
-  mode: _propTypes["default"].oneOf(['default', 'icon'])
+  variant: _propTypes["default"].string
 };
 Button.defaultProps = {
   isDisabled: false,
-  variant: 'default',
-  mode: 'default'
+  variant: 'default'
 };
 Button.displayName = 'Button';
 var _default = Button;

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/Button/Button.test.js

@@ -8,16 +8,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
-
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _ = _interopRequireDefault(require("."));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _react2 = require("@emotion/react");
 
 var testId = 'test-button';
@@ -28,15 +24,6 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
-};
-
-var getIconButton = function getIconButton() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
-    variant: "icon"
-  }), (0, _react2.jsx)(_Icon["default"], {
-    icon: _AddCircleIcon["default"]
-  })));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -134,15 +121,4 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
-});
-test('passing in an icon makes the button parent a div', function () {
-  getIconButton({
-    mode: 'icon'
-  });
-
-  var button = _testWrapper.screen.getByRole('button');
-
-  expect(button).toBeInTheDocument();
-  expect(button).toBeVisible();
-  expect(button).toBeInstanceOf(HTMLDivElement);
 });

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/{DropdownField/index.js → Chip/ChipContext.js}

@@ -8,11 +8,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-_Object$defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _DropdownField["default"];
-  }
-});
+exports.ChipContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultValue = 'inherit';
+
+var ChipContext = /*#__PURE__*/_react["default"].createContext(defaultValue);
 
-var _DropdownField = _interopRequireDefault(require("./DropdownField"));
+exports.ChipContext = ChipContext;

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

@@ -40,6 +40,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _themeUi = require("theme-ui");
 
+var _button = require("@react-aria/button");
+
 var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
@@ -48,6 +50,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,11 +86,12 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _usePress = (0, _interactions.usePress)(_objectSpread({
-    ref: buttonRef
-  }, props)),
-      isPressed = _usePress.isPressed,
-      pressProps = _usePress.pressProps;
+  var _useButton = (0, _button.useButton)(_objectSpread({}, props), buttonRef),
+      buttonProps = _useButton.buttonProps,
+      isPressed = _useButton.isPressed;
+
+  var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
+      chipBg = _useContext.bg;
 
   var _useHover = (0, _interactions.useHover)(props),
       hoverProps = _useHover.hoverProps,
@@ -110,8 +115,13 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button'
-  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps)), children);
+    "aria-label": ariaLabel || 'Icon Button',
+    sx: chipBg && isHovered && {
+      'path': {
+        fill: chipBg
+      }
+    }
+  }, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps, others)), children);
 
   if (title) {
     return (0, _react2.jsx)(_TooltipTrigger["default"], {