@pingux/astro 1.0.1 → 1.1.0-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,143 @@
 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.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.10...@pingux/astro@1.1.0-alpha.11) (2022-01-28)
+
+
+### Bug Fixes
+
+* [UIP-5177] Icon Button Color Update ([05b8a95](https://gitlab.corp.pingidentity.com/ux/pingux/commit/05b8a95e3fae60e7f655cf2812dfd2104496b1c5))
+
+
+
+
+
+# [1.1.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.9...@pingux/astro@1.1.0-alpha.10) (2022-01-28)
+
+
+### Bug Fixes
+
+* [UIP-5180] File Upload Field Update Document Icon Color ([debaf91](https://gitlab.corp.pingidentity.com/ux/pingux/commit/debaf9100401c822c37fdd16be1a1b1704096f10))
+
+
+
+
+
+# [1.1.0-alpha.9](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.8...@pingux/astro@1.1.0-alpha.9) (2022-01-24)
+
+
+### Bug Fixes
+
+* [UIP-5111] Deprecate List Component ([3cd9b69](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3cd9b699c48ac43e34d9cfd61b07f33b4b7d4fc4))
+
+
+
+
+
+# [1.1.0-alpha.8](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.7...@pingux/astro@1.1.0-alpha.8) (2022-01-24)
+
+
+### Bug Fixes
+
+* [UIP-4995] TextArea Safari resize issue ([33c8af3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/33c8af35fbe82820427b87bdd9ab0744039a6c18))
+
+
+
+
+
+# [1.1.0-alpha.7](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.6...@pingux/astro@1.1.0-alpha.7) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5109] AccordionGroup OverlayPanel Compatibility Fix ([6a78b76](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6a78b76a3c3ab7b9ac78a7dcd6ca74a6449d63c2))
+
+
+
+
+
+# [1.1.0-alpha.6](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.5...@pingux/astro@1.1.0-alpha.6) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5070] Icons for warning and error messages are reversed ([36f0d6e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/36f0d6e1b65662b3c64aa1599012a2967b59e56d))
+
+
+
+
+
+# [1.1.0-alpha.5](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.4...@pingux/astro@1.1.0-alpha.5) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5030] Components shouldn't have a default aria-label ([8927951](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8927951339ef49faa03f5654d9e8f357b136430a))
+
+
+
+
+
+# [1.1.0-alpha.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.3...@pingux/astro@1.1.0-alpha.4) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-4992] Fix SelectField Warnings ([dab3f92](https://gitlab.corp.pingidentity.com/ux/pingux/commit/dab3f9254c5d7b1b124ed24616e4ef68f53af7d0))
+
+
+
+
+
+# [1.1.0-alpha.3](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.2...@pingux/astro@1.1.0-alpha.3) (2022-01-20)
+
+
+### Bug Fixes
+
+* [UIP-5007] ComboBoxField controlled custom input throws an exception ([9651c98](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9651c98da3b3ac158c84f378303a2d331db78cce))
+
+
+
+
+
+# [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

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

@@ -39,6 +39,22 @@ var getComponent = function getComponent() {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
+};
+
 (0, _testAxe["default"])(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -230,4 +246,12 @@ test('default expanded keys expands an accordion item', function () {
 
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var row = _testWrapper.screen.getAllByRole('row');
+
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -77,7 +77,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -106,7 +106,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true
   }, children, (0, _react2.jsx)(_Box["default"], {

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

@@ -20,6 +20,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _AccordionGroup = _interopRequireDefault(require("../AccordionGroup"));
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var testId = 'test-accordion';
@@ -30,6 +32,28 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
@@ -41,7 +65,7 @@ var getComponent = function getComponent() {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -264,4 +288,12 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -100,12 +100,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  (0, _hooks.useAriaLabelWarning)('AccordionItem', ariaLabel);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',
@@ -122,9 +121,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
-  }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,

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

@@ -103,9 +103,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel);
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

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

@@ -93,7 +93,8 @@ exports.TextIconButton = TextIconButton;
 var TextButton = function TextButton() {
   return (0, _react2.jsx)(_["default"], {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
     color: "active"

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

@@ -18,7 +18,8 @@ var _react2 = require("@emotion/react");
 
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/cjs/components/ColorField/ColorField.js

@@ -149,6 +149,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -157,6 +157,12 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
@@ -164,6 +170,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: contains
   }));
 

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
+exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledWithCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
@@ -383,6 +383,30 @@ var ControlledFiltering = function ControlledFiltering() {
 
 exports.ControlledFiltering = ControlledFiltering;
 
+var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledWithCustomValue = ControlledWithCustomValue;
+
 var AllowCustomValue = function AllowCustomValue() {
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",

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

@@ -772,6 +772,50 @@ test('two listbox can not be open at the same time', function () {
     name: 'Tango'
   })).toBeInTheDocument();
 });
+test('should handle selecting custom option', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue(''); // type something
+
+  _userEvent["default"].type(input, 'custom'); // set input value as selected
+
+
+  _userEvent["default"].type(input, '{enter}', {
+    skipClick: true
+  });
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(input).toHaveValue('custom');
+});
+test('onSelectionChange works properly with custom value', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    hasCustomValue: true,
+    onSelectionChange: onSelectionChange,
+    onInputChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
+
+  _userEvent["default"].type(input, 'custom{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
+
+  _userEvent["default"].type(input, '{selectall}{backspace}{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('');
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var _getComponent6, container, results;
 

package/lib/cjs/components/FileInputField/FileItem.js

@@ -61,7 +61,8 @@ var FileItem = function FileItem(props) {
 
       default:
         return {
-          icon: _InsertDriveFileIcon["default"]
+          icon: _InsertDriveFileIcon["default"],
+          color: 'neutral.10'
         };
     }
   }, [status]);

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

@@ -115,7 +115,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.WithTooltip = exports.Inverted = exports.Default = exports["default"] = void 0;
+exports.Disabled = exports.WithTooltip = exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -53,8 +53,10 @@ var _default = {
     isDisabled: {},
     variant: {
       control: {
-        type: 'none'
-      }
+        type: 'select',
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+      },
+      defaultValue: 'iconButton'
     }
   }
 };
@@ -62,7 +64,7 @@ exports["default"] = _default;
 
 var Default = function Default(args) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
-    "aria-label": "my-label"
+    "aria-label": "default icon button"
   }, args), (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]
   }));
@@ -70,20 +72,9 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var Inverted = function Inverted() {
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
-    variant: "inverted"
-  }, (0, _react2.jsx)(_Icon["default"], {
-    icon: _CreateIcon["default"]
-  }));
-};
-
-exports.Inverted = Inverted;
-
 var WithTooltip = function WithTooltip() {
   return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
+    "aria-label": "icon button with tooltip",
     title: "Edit"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]
@@ -94,7 +85,7 @@ exports.WithTooltip = WithTooltip;
 
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
+    "aria-label": "disabled icon button",
     isDisabled: true
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]

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

@@ -29,7 +29,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -162,10 +163,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(_testWrapper.screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js

@@ -113,7 +113,8 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/cjs/components/List/List.js

@@ -20,6 +20,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
 /**
@@ -29,6 +31,7 @@ var _react2 = require("@emotion/react");
 var List = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, ["children"]);
+  (0, _hooks.useDeprecationWarning)('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     role: "list",

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

@@ -20,11 +20,16 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Separator = _interopRequireDefault(require("../Separator"));
 
+var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'List',
-  component: [_["default"], _ListItem["default"]]
+  title: 'Deprecated/List',
+  component: [_["default"], _ListItem["default"]],
+  decorators: [function (Story, context) {
+    return (0, _withDeprecationWarning["default"])(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
+  }]
 };
 exports["default"] = _default;
 

package/lib/cjs/components/ListBox/ListBox.js

@@ -55,8 +55,6 @@ var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
 
-var _hooks = require("../../hooks");
-
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -120,12 +118,11 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
-  var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('ListBox', ariaLabel);
+      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -149,7 +146,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails

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

@@ -44,11 +44,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };