@atlaskit/button 17.0.0 → 17.2.0

package/CHANGELOG.md

@@ -1,38 +1,68 @@
 # @atlaskit/button
 
+## 17.2.0
+
+### Minor Changes
+
+- [#64419](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64419) [`6e9ab538f37b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e9ab538f37b) - Export ButtonGroupProps type
+
+## 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.2.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.2.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.2.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.2.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.2.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.2.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/entry-points/button-group.d.ts

@@ -1 +1,2 @@
 export { default } from '../containers/button-group';
+export type { ButtonGroupProps } from '../containers/button-group';

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@ export type { LoadingButtonProps, LoadingButtonOwnProps, } from './entry-points/
 export { default as CustomThemeButton, Theme, } from './entry-points/custom-theme-button';
 export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './entry-points/custom-theme-button';
 export { default as ButtonGroup } from './entry-points/button-group';
+export type { ButtonGroupProps } from './entry-points/button-group';

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/dist/types-ts4.5/entry-points/button-group.d.ts

@@ -1 +1,2 @@
 export { default } from '../containers/button-group';
+export type { ButtonGroupProps } from '../containers/button-group';

package/dist/types-ts4.5/index.d.ts

@@ -6,3 +6,4 @@ export type { LoadingButtonProps, LoadingButtonOwnProps, } from './entry-points/
 export { default as CustomThemeButton, Theme, } from './entry-points/custom-theme-button';
 export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './entry-points/custom-theme-button';
 export { default as ButtonGroup } from './entry-points/button-group';
+export type { ButtonGroupProps } from './entry-points/button-group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.0.0",
+  "version": "17.2.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -85,10 +85,10 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.15.0",
+    "@atlaskit/primitives": "^1.16.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -103,7 +103,6 @@
     "@atlaskit/app-provider": "^0.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",