@pingux/astro 1.1.0-alpha.0 → 1.1.0-alpha.12

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

@@ -22,8 +22,6 @@ var _collections = require("@react-stately/collections");
 
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 
 var _index = require("../../index");
@@ -66,15 +64,18 @@ var Default = function Default(_ref) {
   var state = (0, _hooks.useOverlayPanelState)();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
   );
 };
 
@@ -106,7 +107,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     onPress: innerState.close
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
@@ -121,7 +122,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '12px'
     }
-  }, (0, _react2.jsx)(_Button["default"], {
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: closeOuterPanel
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
@@ -164,14 +165,14 @@ var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
     margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: innerState.open
   }, "Open Inner Panel"), inner)));
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -192,14 +193,14 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     //
     // For a custom width, provide the width via the 'sx' prop
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       sx: {
         width: '720px'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"

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

@@ -17,6 +17,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)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+};
+
+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)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -39,4 +46,12 @@ test('should render a popover with no arrow', function () {
   var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
 
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/cjs/components/TextArea/TextArea.js

@@ -29,7 +29,11 @@ var _react2 = require("@emotion/react");
  */
 var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_themeUi.Textarea, (0, _extends2["default"])({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

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

@@ -59,7 +59,8 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
@@ -69,23 +70,24 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _tooltip2.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -160,7 +162,10 @@ TooltipTrigger.propTypes = {
   placement: _propTypes["default"].string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: _propTypes["default"].string
+  trigger: _propTypes["default"].string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: _propTypes["default"].shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',

package/lib/cjs/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   Checkbox: true,
   CheckboxField: true,
   Chip: true,
+  CodeView: true,
   ComboBoxField: true,
   CopyText: true,
   ColorField: true,
@@ -183,6 +184,13 @@ _Object$defineProperty(exports, "Chip", {
   }
 });
 
+_Object$defineProperty(exports, "CodeView", {
+  enumerable: true,
+  get: function get() {
+    return _CodeView["default"];
+  }
+});
+
 _Object$defineProperty(exports, "ComboBoxField", {
   enumerable: true,
   get: function get() {
@@ -785,6 +793,8 @@ _forEachInstanceProperty(_context13 = _Object$keys(_Chip)).call(_context13, func
   });
 });
 
+var _CodeView = _interopRequireDefault(require("./components/CodeView"));
+
 var _ComboBoxField = _interopRequireDefault(require("./components/ComboBoxField"));
 
 var _CopyText = _interopRequireDefault(require("./components/CopyText"));

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

@@ -27,11 +27,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

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

@@ -89,7 +89,7 @@ var iconButton = {
   width: 'inherit',
   height: 'inherit',
   path: {
-    fill: 'neutral.20'
+    fill: 'neutral.40'
   },
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -104,6 +104,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -241,6 +245,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -532,6 +540,8 @@ var _default = {
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+require("a11y-syntax-highlighting/dist/prism/a11y-light.min.css");
+
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+var _default = {
+  wrapper: wrapper,
+  lineNo: lineNo
+};
+exports["default"] = _default;

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

@@ -34,6 +34,8 @@ var _accordion = _interopRequireDefault(require("./accordion"));
 
 var _boxes = _interopRequireDefault(require("./boxes"));
 
+var _codeView = _interopRequireDefault(require("./codeView"));
+
 var _images = _interopRequireDefault(require("./images"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
@@ -77,6 +79,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = _objectSpread(_objectSpread({
   accordion: _accordion["default"],
   boxes: _boxes["default"],
+  codeView: _codeView["default"],
   images: _images["default"],
   imageUpload: _imageUpload["default"],
   loader: _loader["default"],

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

@@ -4,7 +4,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { Link, Box } from '../../index';
+import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
@@ -26,6 +26,22 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))))));
+};
+
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -166,4 +182,10 @@ test('default expanded keys expands an accordion item', function () {
   var row = screen.getAllByRole('row');
   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 = screen.getAllByRole('row');
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

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

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -76,7 +76,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), ___EmotionJSX(Box, {
     isRow: true
   }, children, ___EmotionJSX(Box, {

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

@@ -7,6 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
+import { OverlayPanel } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -16,6 +17,28 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
@@ -27,7 +50,7 @@ var getComponent = function getComponent() {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
-  }, ___EmotionJSX(Text, null, "Render me!"))));
+  }, ___EmotionJSX(Text, null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -197,4 +220,10 @@ 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 = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -11,7 +11,7 @@ import { useAccordionItem } from '@react-aria/accordion';
 import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { useStatusClasses } from '../../hooks';
 import { AccordionContext } from '../../context/AccordionContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -72,12 +72,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  useAriaLabelWarning('AccordionItem', ariaLabel);
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',
@@ -94,9 +93,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
-  }))), ___EmotionJSX(Box, _extends({
+  }))), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useAriaLabelWarning, useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -70,9 +70,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('Button', ariaLabel);
   return ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

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

@@ -62,7 +62,8 @@ export var TextIconButton = function TextIconButton() {
 export var TextButton = function TextButton() {
   return ___EmotionJSX(Button, {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

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

@@ -7,7 +7,8 @@ import Button from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {