@pingux/astro 1.33.0-alpha.5 → 1.33.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.33.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.32.1...@pingux/astro@1.33.0) (2022-10-27)
+
+
+### Bug Fixes
+
+* [UIP-5698] uiLibraryOverride Theme Link and Icon Button Update ([1f9924e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1f9924e30bb152de2089969865b7f0bf0f079dc1))
+* [UIP-5706] Accordion Grid - add aria-expanded and change focus style ([13ae129](https://gitlab.corp.pingidentity.com/ux/pingux/commit/13ae129b877c5a50797622f22f119771eef45e18))
+* [UIP-5723] Help hint improvements ([24acce7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/24acce7318af5f77574d97c3eb0d4ead7af10654))
+* [UIP-5739] PasswordField fix error on mount ([bdcd21f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/bdcd21f4e437bd985b7846b659637256fae79f64))
+* [UIP-5783] Disabled Box: replace inputs with image and text ([ee91ad3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ee91ad30aa3954bad76085f813677341d609a3c7))
+
+
+### Features
+
+* [UIP-5644] Text component and recipe improvements ([a68ef47](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a68ef479985adf8cc9b078b0c10eb3db48cf4152))
+
+
+
+
+
 ## [1.32.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.32.0...@pingux/astro@1.32.1) (2022-10-25)
 
 

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -24,6 +24,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
@@ -63,6 +65,7 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tooltipProps = props.tooltipProps,
       iconButtonProps = props.iconButtonProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var tooltipId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
     ref: ref,
     direction: "top"
@@ -70,9 +73,15 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
-  }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
+  }, iconButtonProps, {
+    "aria-describedby": tooltipId
+  }), (0, _react2.jsx)(_Icon["default"], {
     icon: HelpIcon
-  })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, tooltipProps, children));
+  })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
+    role: "tooltip",
+    "aria-live": "polite",
+    id: tooltipId
+  }), children));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the tooltip element. */

package/lib/cjs/components/Modal/Modal.js

@@ -126,7 +126,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useDialog = (0, _dialog.useDialog)(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
-      titleProps = _useDialog.titleProps;
+      titleProps = _useDialog.titleProps; // Prevents extra dialog focus from being called.
+
+
+  dialogProps.onMouseDown = function (e) {
+    return e.preventDefault();
+  };
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isDarkMode: others.variant === 'modal.dark'

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -18,6 +18,13 @@ var _react2 = require("@emotion/react");
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props, (0, _react2.jsx)(_index.CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -219,4 +226,21 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   var button = _testWrapper.screen.queryByRole('button');
 
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+
+  var checkbox = _testWrapper.screen.getByRole('checkbox');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -57,6 +57,11 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
@@ -123,8 +128,14 @@ var forms = {
     }
   }
 };
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _theme["default"].links.app)
+  }
+};
 var _default = {
   buttons: buttons,
-  forms: forms
+  forms: forms,
+  links: links
 };
 exports["default"] = _default;

package/lib/components/HelpHint/HelpHint.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["children", "tooltipProps", "iconButtonProps"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import Icon from '../Icon';
@@ -34,6 +35,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       iconButtonProps = props.iconButtonProps,
       others = _objectWithoutProperties(props, _excluded);
 
+  var tooltipId = uuid();
   return ___EmotionJSX(TooltipTrigger, _extends({
     ref: ref,
     direction: "top"
@@ -41,9 +43,15 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
-  }, iconButtonProps), ___EmotionJSX(Icon, {
+  }, iconButtonProps, {
+    "aria-describedby": tooltipId
+  }), ___EmotionJSX(Icon, {
     icon: HelpIcon
-  })), ___EmotionJSX(Tooltip, tooltipProps, children));
+  })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
+    role: "tooltip",
+    "aria-live": "polite",
+    id: tooltipId
+  }), children));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the tooltip element. */

package/lib/components/Modal/Modal.js

@@ -86,7 +86,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useDialog = useDialog(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
-      titleProps = _useDialog.titleProps;
+      titleProps = _useDialog.titleProps; // Prevents extra dialog focus from being called.
+
+
+  dialogProps.onMouseDown = function (e) {
+    return e.preventDefault();
+  };
 
   var _useStatusClasses = useStatusClasses(className, {
     isDarkMode: others.variant === 'modal.dark'

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -2,13 +2,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../../utils/testUtils/testAxe';
 import { render, screen, queryByAttribute } from '../../../utils/testUtils/testWrapper';
-import { OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
+import { CheckboxField, OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props, ___EmotionJSX(CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -185,4 +192,16 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   });
   var button = screen.queryByRole('button');
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+  var checkbox = screen.getByRole('checkbox');
+  userEvent.click(checkbox);
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+  userEvent.click(checkbox);
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -38,6 +38,11 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, theme.buttons.primary)
   },
@@ -104,7 +109,13 @@ var forms = {
     }
   }
 };
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, theme.links.app)
+  }
+};
 export default {
   buttons: buttons,
-  forms: forms
+  forms: forms,
+  links: links
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.33.0-alpha.5",
+  "version": "1.33.1-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",