@pingux/astro 1.0.0-alpha.18 → 1.0.0-alpha.21

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.21](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.20...@pingux/astro@1.0.0-alpha.21) (2022-01-18)
+
+
+### Features
+
+* [UIP-5066] Add Icon, Chip, and Text with Tooltips ([1681083](https://gitlab.corp.pingidentity.com/ux/pingux/commit/168108386d77ef09635a177a35cb6d68cfad8bc2))
+
+
+
+
+
+# [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)
 
 

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/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);

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

@@ -8,16 +8,20 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
+exports.TextWithTooltip = exports.ChipWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
+var _PersonIcon = _interopRequireDefault(require("mdi-react/PersonIcon"));
+
 var _index = require("../../index");
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Text = _interopRequireDefault(require("../Text"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -80,4 +84,43 @@ Disabled.parameters = {
       story: 'The tooltip can be disabled without disabling the button press events.'
     }
   }
-};
+};
+
+var IconWithTooltip = function IconWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
+    variant: "tooltipIconButton"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PersonIcon["default"]
+  })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.IconWithTooltip = IconWithTooltip;
+
+var ChipWithTooltip = function ChipWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipChip",
+    bg: "neutral.10"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    sx: {
+      textTransform: 'uppercase'
+    },
+    color: "white"
+  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.ChipWithTooltip = ChipWithTooltip;
+
+var TextWithTooltip = function TextWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipInline"
+  }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.TextWithTooltip = TextWithTooltip;