@atlaskit/panel 2.5.1 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/components/Panel/Panel.js +4 -2
- package/dist/cjs/components/Panel/PanelStateless.js +3 -1
- package/dist/es2019/components/Panel/Panel.js +4 -2
- package/dist/es2019/components/Panel/PanelStateless.js +3 -1
- package/dist/esm/components/Panel/Panel.js +4 -2
- package/dist/esm/components/Panel/PanelStateless.js +3 -1
- package/dist/types/components/Panel/PanelStateless.d.ts +3 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -14,7 +14,8 @@ var PanelState = function PanelState(_ref) {
|
|
|
14
14
|
var _ref$isDefaultExpande = _ref.isDefaultExpanded,
|
|
15
15
|
isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
|
|
16
16
|
children = _ref.children,
|
|
17
|
-
header = _ref.header
|
|
17
|
+
header = _ref.header,
|
|
18
|
+
ariaLabel = _ref.ariaLabel;
|
|
18
19
|
var _useState = (0, _react.useState)(isDefaultExpanded),
|
|
19
20
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
20
21
|
isExpanded = _useState2[0],
|
|
@@ -25,7 +26,8 @@ var PanelState = function PanelState(_ref) {
|
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement(_PanelStateless.default, {
|
|
26
27
|
header: header,
|
|
27
28
|
isExpanded: isExpanded,
|
|
28
|
-
onChange: handleChange
|
|
29
|
+
onChange: handleChange,
|
|
30
|
+
ariaLabel: ariaLabel
|
|
29
31
|
}, children);
|
|
30
32
|
};
|
|
31
33
|
var _default = exports.default = PanelState;
|
|
@@ -32,7 +32,8 @@ var PanelStateless = function PanelStateless(_ref) {
|
|
|
32
32
|
header = _ref.header,
|
|
33
33
|
_ref$isExpanded = _ref.isExpanded,
|
|
34
34
|
isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
|
|
35
|
-
onChange = _ref.onChange
|
|
35
|
+
onChange = _ref.onChange,
|
|
36
|
+
ariaLabel = _ref.ariaLabel;
|
|
36
37
|
var intl = (0, _reactIntl.useIntl)();
|
|
37
38
|
var i18nExpandText = intl.formatMessage(i18n.expand);
|
|
38
39
|
var i18nCollapseText = intl.formatMessage(i18n.collapse);
|
|
@@ -45,6 +46,7 @@ var PanelStateless = function PanelStateless(_ref) {
|
|
|
45
46
|
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
46
47
|
appearance: "subtle",
|
|
47
48
|
"aria-expanded": isExpanded,
|
|
49
|
+
"aria-label": ariaLabel,
|
|
48
50
|
spacing: "none",
|
|
49
51
|
iconBefore: isExpanded ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
50
52
|
as: "span",
|
|
@@ -3,7 +3,8 @@ import PanelStateless from './PanelStateless';
|
|
|
3
3
|
const PanelState = ({
|
|
4
4
|
isDefaultExpanded = false,
|
|
5
5
|
children,
|
|
6
|
-
header
|
|
6
|
+
header,
|
|
7
|
+
ariaLabel
|
|
7
8
|
}) => {
|
|
8
9
|
const [isExpanded, setisExpanded] = useState(isDefaultExpanded);
|
|
9
10
|
const handleChange = () => {
|
|
@@ -12,7 +13,8 @@ const PanelState = ({
|
|
|
12
13
|
return /*#__PURE__*/React.createElement(PanelStateless, {
|
|
13
14
|
header: header,
|
|
14
15
|
isExpanded: isExpanded,
|
|
15
|
-
onChange: handleChange
|
|
16
|
+
onChange: handleChange,
|
|
17
|
+
ariaLabel: ariaLabel
|
|
16
18
|
}, children);
|
|
17
19
|
};
|
|
18
20
|
export default PanelState;
|
|
@@ -22,7 +22,8 @@ const PanelStateless = ({
|
|
|
22
22
|
children,
|
|
23
23
|
header,
|
|
24
24
|
isExpanded = false,
|
|
25
|
-
onChange
|
|
25
|
+
onChange,
|
|
26
|
+
ariaLabel
|
|
26
27
|
}) => {
|
|
27
28
|
const intl = useIntl();
|
|
28
29
|
const i18nExpandText = intl.formatMessage(i18n.expand);
|
|
@@ -34,6 +35,7 @@ const PanelStateless = ({
|
|
|
34
35
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
35
36
|
appearance: "subtle",
|
|
36
37
|
"aria-expanded": isExpanded,
|
|
38
|
+
"aria-label": ariaLabel,
|
|
37
39
|
spacing: "none",
|
|
38
40
|
iconBefore: isExpanded ? /*#__PURE__*/React.createElement(Box, {
|
|
39
41
|
as: "span",
|
|
@@ -5,7 +5,8 @@ var PanelState = function PanelState(_ref) {
|
|
|
5
5
|
var _ref$isDefaultExpande = _ref.isDefaultExpanded,
|
|
6
6
|
isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
|
|
7
7
|
children = _ref.children,
|
|
8
|
-
header = _ref.header
|
|
8
|
+
header = _ref.header,
|
|
9
|
+
ariaLabel = _ref.ariaLabel;
|
|
9
10
|
var _useState = useState(isDefaultExpanded),
|
|
10
11
|
_useState2 = _slicedToArray(_useState, 2),
|
|
11
12
|
isExpanded = _useState2[0],
|
|
@@ -16,7 +17,8 @@ var PanelState = function PanelState(_ref) {
|
|
|
16
17
|
return /*#__PURE__*/React.createElement(PanelStateless, {
|
|
17
18
|
header: header,
|
|
18
19
|
isExpanded: isExpanded,
|
|
19
|
-
onChange: handleChange
|
|
20
|
+
onChange: handleChange,
|
|
21
|
+
ariaLabel: ariaLabel
|
|
20
22
|
}, children);
|
|
21
23
|
};
|
|
22
24
|
export default PanelState;
|
|
@@ -23,7 +23,8 @@ var PanelStateless = function PanelStateless(_ref) {
|
|
|
23
23
|
header = _ref.header,
|
|
24
24
|
_ref$isExpanded = _ref.isExpanded,
|
|
25
25
|
isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
|
|
26
|
-
onChange = _ref.onChange
|
|
26
|
+
onChange = _ref.onChange,
|
|
27
|
+
ariaLabel = _ref.ariaLabel;
|
|
27
28
|
var intl = useIntl();
|
|
28
29
|
var i18nExpandText = intl.formatMessage(i18n.expand);
|
|
29
30
|
var i18nCollapseText = intl.formatMessage(i18n.collapse);
|
|
@@ -36,6 +37,7 @@ var PanelStateless = function PanelStateless(_ref) {
|
|
|
36
37
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
37
38
|
appearance: "subtle",
|
|
38
39
|
"aria-expanded": isExpanded,
|
|
40
|
+
"aria-label": ariaLabel,
|
|
39
41
|
spacing: "none",
|
|
40
42
|
iconBefore: isExpanded ? /*#__PURE__*/React.createElement(Box, {
|
|
41
43
|
as: "span",
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { type FC, type ReactNode } from 'react';
|
|
2
2
|
export type BasePanelProps = {
|
|
3
|
+
/** Accessible label for the expand/collapse button. Use this when the header is a non-text
|
|
4
|
+
* React node so screen readers announce a meaningful name instead of the icon label. */
|
|
5
|
+
ariaLabel?: string;
|
|
3
6
|
/** Content to be shown inside the panel. */
|
|
4
7
|
children?: ReactNode;
|
|
5
8
|
/** Header to render on the panel. Clicking the header expands and collapses the panel */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/panel",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "A React component rendering a collapsible panel",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
28
28
|
"@atlaskit/primitives": "^22.2.0",
|
|
29
29
|
"@atlaskit/theme": "^28.0.0",
|
|
30
|
-
"@atlaskit/tokens": "^16.
|
|
30
|
+
"@atlaskit/tokens": "^16.6.0",
|
|
31
31
|
"@babel/runtime": "^7.0.0",
|
|
32
32
|
"react-animate-height": "^2.1.0",
|
|
33
33
|
"react-focus-within": "^2.0.1"
|