@atlaskit/button 17.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,38 +1,62 @@
 # @atlaskit/button
 
+## 17.1.0
+
+### Minor Changes
+
+- [#60205](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60205) [`d8f830e29011`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d8f830e29011) - [ux] Assistive technologies now define ButtonGroup as a group. Additionally `label` and `titleId` props introduced to label the current group.
+
 ## 17.0.0
 
 ### Major Changes
 
-- [#60024](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60024) [`c6418d429d47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6418d429d47) - New Button goes Open Beta!
+- [#60024](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60024) [`c6418d429d47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6418d429d47) - New Button goes open beta!
 
-  Check out the exports under `@atlaskit/button/new` and the [docs](/components/button/button-new/examples) for our new approach.
+#### Breaking changes
 
-  ## Button
+Removed all `UNSAFE_` exports and `/unsafe` entrypoint.
 
-  [Read the docs here.](/components/button/button-new/examples)
+```js
+import { UNSAFE_BUTTON } from '@atlaskit/button' ❌
+import Button from '@atlaskit/button/new' ✅
 
-  ```js
-  import Button from '@atlaskit/button/new';
-  import { LinkButton } from '@atlaskit/button/new';
-  ```
+import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe' ❌
+import Button from '@atlaskit/button/new' ✅
+```
 
-  ## Icon button
+See new features for new exports and entrypoint ⤵
 
-  [Read the docs here.](/components/button/icon-button/examples)
+#### New features
 
-  ```js
-  import { IconButton } from '@atlaskit/button/new';
-  import { LinkIconButton } from '@atlaskit/button/new';
-  ```
+New Button goes open beta!
 
-  ## Split button
+Check out the exports under `@atlaskit/button/new` and the [docs](/components/button/button-new/examples) for our new approach.
 
-  [Read the docs here.](/components/button/split-button/examples)
+##### Button
 
-  ```js
-  import { SplitButton } from '@atlaskit/button/new';
-  ```
+[Read the docs here.](/components/button/button-new/examples)
+
+```js
+import Button from '@atlaskit/button/new';
+import { LinkButton } from '@atlaskit/button/new';
+```
+
+##### Icon button
+
+[Read the docs here.](/components/button/icon-button/examples)
+
+```js
+import { IconButton } from '@atlaskit/button/new';
+import { LinkIconButton } from '@atlaskit/button/new';
+```
+
+##### Split button
+
+[Read the docs here.](/components/button/split-button/examples)
+
+```js
+import { SplitButton } from '@atlaskit/button/new';
+```
 
 ## 16.18.1
 

package/dist/cjs/containers/button-group.js

@@ -22,10 +22,15 @@ var buttonGroupStyles = (0, _react2.css)({
 function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    label = _ref.label,
+    titleId = _ref.titleId;
   return (0, _react2.jsx)("div", {
     css: buttonGroupStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    role: "group",
+    "aria-label": label,
+    "aria-labelledby": titleId
   }, _react.default.Children.map(_react.default.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -117,7 +117,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/cjs/old-button/shared/button-base.js

@@ -118,7 +118,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/containers/button-group.js

@@ -12,11 +12,16 @@ const buttonGroupStyles = css({
 export default function ButtonGroup({
   appearance,
   children,
-  testId
+  testId,
+  label,
+  titleId
 }) {
   return jsx("div", {
     css: buttonGroupStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    role: "group",
+    "aria-label": label,
+    "aria-labelledby": titleId
   }, React.Children.map(React.Children.toArray(children), (child, idx) => {
     if (!child) {
       return null;

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -98,7 +98,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/es2019/old-button/shared/button-base.js

@@ -103,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/containers/button-group.js

@@ -12,10 +12,15 @@ var buttonGroupStyles = css({
 export default function ButtonGroup(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    label = _ref.label,
+    titleId = _ref.titleId;
   return jsx("div", {
     css: buttonGroupStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    role: "group",
+    "aria-label": label,
+    "aria-labelledby": titleId
   }, React.Children.map(React.Children.toArray(children), function (child, idx) {
     if (!child) {
       return null;

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -109,7 +109,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });

package/dist/esm/old-button/shared/button-base.js

@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.0.0",
+    packageVersion: "17.1.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/containers/button-group.d.ts

@@ -15,5 +15,15 @@ export type ButtonGroupProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 };
-export default function ButtonGroup({ appearance, children, testId, }: ButtonGroupProps): jsx.JSX.Element;
+export default function ButtonGroup({ appearance, children, testId, label, titleId, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -15,5 +15,15 @@ export type ButtonGroupProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 };
-export default function ButtonGroup({ appearance, children, testId, }: ButtonGroupProps): jsx.JSX.Element;
+export default function ButtonGroup({ appearance, children, testId, label, titleId, }: ButtonGroupProps): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"