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

package/CHANGELOG.md

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

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

@@ -128,6 +128,16 @@ test('form wrapper will have default max label column width when no custom width
 
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 40% auto');
 });
+test('passing read only prop applys the is-read-only class to the textarea', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+});
 test('form wrapper will have a max label column width when custom width set', function () {
   var labelMode = 'left';
   var containerProps = {

package/lib/cjs/styles/forms/input.js

@@ -152,6 +152,10 @@ input.container = (_input$container = {
       backgroundColor: 'accent.95',
       border: 'none'
     },
+    '> textarea': {
+      backgroundColor: 'accent.95',
+      border: 'none'
+    },
     '&:after': {
       display: 'none'
     }

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

@@ -37,10 +37,10 @@ var accordionBody = {
 var accordionGridHeader = {
   cursor: 'pointer',
   lineHeight: '30px',
-  px: 'md',
+  pl: 'sm',
   outline: 'none',
   display: 'flex',
-  justifyContent: 'flex-start',
+  justifyContent: 'center',
   flexShrink: 0,
   wordBreak: 'inherit',
   whiteSpace: 'nowrap',
@@ -54,12 +54,9 @@ var accordionGridHeader = {
     WebkitBoxShadow: 'focus',
     MozBoxShadow: 'focus'
   },
-  padding: '0px',
+  minHeight: '64px',
   '&.is-hovered': {
-    color: 'active',
-    '& div > div > div > span': {
-      color: 'active'
-    }
+    backgroundColor: 'accent.99'
   },
   '&.is-pressed': {
     color: 'accent.20',
@@ -70,6 +67,7 @@ var accordionGridHeader = {
 };
 var accordionGridBody = {
   display: 'none !important',
+  pl: 'sm',
   width: '100%',
   '&.is-selected': {
     display: 'flex !important'

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

@@ -83,8 +83,6 @@ export var Default = function Default() {
     return ___EmotionJSX(Box, {
       isRow: true,
       sx: {
-        pt: '12px',
-        pb: '12px',
         flexGrow: 1
       }
     }, ___EmotionJSX(Box, {
@@ -129,20 +127,14 @@ export var Default = function Default() {
       sx: {
         mr: '4px',
         height: '26px',
-        width: '26px',
-        'path': {
-          fill: 'active'
-        }
+        width: '26px'
       }
     }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
       "aria-label": "vertical-lines-icon",
       sx: {
         mr: '4px',
         height: '26px',
-        width: '26px',
-        'path': {
-          fill: 'active'
-        }
+        width: '26px'
       }
     }, ___EmotionJSX(MoreVertIcon, null)))));
   };
@@ -285,7 +277,8 @@ export var Default = function Default() {
         item: item
       }), item.key !== 'Organization' ? ___EmotionJSX(Separator, {
         sx: {
-          m: 0
+          m: 0,
+          bg: 'neutral.90'
         }
       }) : null);
     }))

package/lib/components/IconButton/IconButton.js

@@ -17,8 +17,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
+import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
-import { Pressable, useHover, usePress } from '@react-aria/interactions';
+import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import { ChipContext } from '../Chip/ChipContext';
@@ -52,15 +53,13 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     return buttonRef.current;
   });
 
+  var _useButton = useButton(_objectSpread({}, props), buttonRef),
+      buttonProps = _useButton.buttonProps,
+      isPressed = _useButton.isPressed;
+
   var _useContext = useContext(ChipContext),
       chipBg = _useContext.bg;
 
-  var _usePress = usePress(_objectSpread({
-    ref: buttonRef
-  }, props)),
-      isPressed = _usePress.isPressed,
-      pressProps = _usePress.pressProps;
-
   var _useHover = useHover(props),
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
@@ -90,7 +89,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: chipBg
       }
     }
-  }, others, mergeProps(hoverProps, focusProps, pressProps)), children);
+  }, mergeProps(hoverProps, focusProps, buttonProps, others)), children);
 
   if (title) {
     return ___EmotionJSX(TooltipTrigger, {

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

@@ -32,7 +32,6 @@ test('default icon button', function () {
   var button = screen.getByRole('button');
   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/components/TextAreaField/TextAreaField.test.js

@@ -99,6 +99,14 @@ test('form wrapper will have default max label column width when no custom width
   var textAreaContainer = screen.getByTestId(testId);
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 40% auto');
 });
+test('passing read only prop applys the is-read-only class to the textarea', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+  var textArea = screen.getByLabelText(defaultProps.label);
+  expect(textArea).toHaveClass('is-read-only');
+});
 test('form wrapper will have a max label column width when custom width set', function () {
   var labelMode = 'left';
   var containerProps = {

package/lib/styles/forms/input.js

@@ -128,6 +128,10 @@ input.container = (_input$container = {
       backgroundColor: 'accent.95',
       border: 'none'
     },
+    '> textarea': {
+      backgroundColor: 'accent.95',
+      border: 'none'
+    },
     '&:after': {
       display: 'none'
     }

package/lib/styles/variants/accordion.js

@@ -28,10 +28,10 @@ var accordionBody = {
 var accordionGridHeader = {
   cursor: 'pointer',
   lineHeight: '30px',
-  px: 'md',
+  pl: 'sm',
   outline: 'none',
   display: 'flex',
-  justifyContent: 'flex-start',
+  justifyContent: 'center',
   flexShrink: 0,
   wordBreak: 'inherit',
   whiteSpace: 'nowrap',
@@ -45,12 +45,9 @@ var accordionGridHeader = {
     WebkitBoxShadow: 'focus',
     MozBoxShadow: 'focus'
   },
-  padding: '0px',
+  minHeight: '64px',
   '&.is-hovered': {
-    color: 'active',
-    '& div > div > div > span': {
-      color: 'active'
-    }
+    backgroundColor: 'accent.99'
   },
   '&.is-pressed': {
     color: 'accent.20',
@@ -61,6 +58,7 @@ var accordionGridHeader = {
 };
 var accordionGridBody = {
   display: 'none !important',
+  pl: 'sm',
   width: '100%',
   '&.is-selected': {
     display: 'flex !important'

package/package.json

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