@pingux/astro 1.0.0-alpha.17 → 1.0.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 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.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)
 
 

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.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/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");
@@ -84,15 +86,13 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
+  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 _usePress = (0, _interactions.usePress)(_objectSpread({
-    ref: buttonRef
-  }, props)),
-      isPressed = _usePress.isPressed,
-      pressProps = _usePress.pressProps;
-
   var _useHover = (0, _interactions.useHover)(props),
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
@@ -121,7 +121,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps)), children);
+  }, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps, others)), children);
 
   if (title) {
     return (0, _react2.jsx)(_TooltipTrigger["default"], {

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

@@ -46,7 +46,6 @@ test('default icon button', function () {
 
   expect(button).toHaveAttribute('data-testid', testId);
   expect(button).toBeInstanceOf(HTMLButtonElement);
-  expect(button).toHaveAttribute('tabindex', '0');
   expect(button).toBeInTheDocument();
 });
 test('icon button hover', function () {

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

@@ -56,7 +56,6 @@ var Default = function Default(args) {
     isRow: true,
     alignSelf: "center"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    variant: "icon",
     size: 26
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _MoreVertIcon["default"],
@@ -91,7 +90,6 @@ var WithSubtitle = function WithSubtitle(args) {
     isRow: true,
     alignSelf: "center"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    variant: "icon",
     size: 26
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _MoreVertIcon["default"],

package/lib/cjs/components/Stepper/Stepper.js

@@ -119,6 +119,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       textValue: textValue,
       title: step,
+      "aria-label": textValue,
       content: item.rendered,
       separator: !isFirst && line
     });

package/lib/cjs/components/Tab/Tab.js

@@ -63,7 +63,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabLabelProps = itemProps.tabLabelProps,
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
-      otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content"]);
+      titleAttr = itemProps.titleAttr,
+      otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"]);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
   var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
@@ -106,7 +107,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     variant: "tab"
   }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps, {
-    ref: tabRef
+    ref: tabRef,
+    title: titleAttr || undefined
   }), icon, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "tabLabel"
   }, tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);