@atlaskit/button 16.17.7 → 16.17.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 16.17.9
+
+### Patch Changes
+
+- [#57808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57808) [`b99d50f91202`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b99d50f91202) - Internal changes to styling on SplitButton (closed beta) to fix issues with border radius when wrapper elements are used.
+
+## 16.17.8
+
+### Patch Changes
+
+- [#56967](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56967) [`d491c321ae12`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d491c321ae12) - Remove use of aria-busy
+
 ## 16.17.7
 
 ### Patch Changes

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -68,7 +68,20 @@ var splitButtonStyles = (0, _react.css)({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+var primaryButtonStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+var secondaryButtonStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -78,12 +91,17 @@ var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonCo
     css: splitButtonStyles
   }, children);
 };
+
 /**
  * __Split Button__
  *
  * @private __UNSAFE__ SplitButton is not yet safe for production use.
  *
- * TODO: Add description when adding docs
+ * A split button lets people perform an action or choose from a small group of similar actions.
+ *
+ * - [Examples](https://atlassian.design/components/button/split-button/examples)
+ * - [Code](https://atlassian.design/components/button/split-button/code)
+ * - [Usage](https://atlassian.design/components/button/split-button/usage)
  */
 var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
   var children = _ref3.children,
@@ -102,11 +120,15 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, PrimaryAction, (0, _react.jsx)(Divider, {
+  }, (0, _react.jsx)("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), (0, _react.jsx)(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), (0, _react.jsx)("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -126,9 +148,13 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, primaryAction, (0, _react.jsx)(Divider, {
+  }, (0, _react.jsx)("div", {
+    css: primaryButtonStyles
+  }, primaryAction), (0, _react.jsx)(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), (0, _react.jsx)("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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

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

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -48,14 +48,6 @@ var verticalAlign = {
   none: 'baseline'
 };
 var splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }

package/dist/cjs/old-button/custom-theme-button/custom-theme-button.js

@@ -184,8 +184,10 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       var buttonStyles = _ref4.buttonStyles;
       return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, restProps, {
         ref: ref,
-        overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, restProps) : null,
-        "aria-busy": isLoading,
+        overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, restProps) : null
+        // No need to render aria-disabled when it is false
+        ,
+        "aria-disabled": isLoading || undefined,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

package/dist/cjs/old-button/loading-button.js

@@ -29,8 +29,10 @@ var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButto
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
-    appearance: appearance,
-    "aria-busy": isLoading,
+    appearance: appearance
+    // No need to render aria-disabled when it is false
+    ,
+    "aria-disabled": isLoading || undefined,
     isDisabled: isDisabled,
     isSelected: isSelected,
     overlay: isLoading ? /*#__PURE__*/_react.default.createElement(_loadingSpinner.default, {

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: "16.17.7",
+    packageVersion: "16.17.9",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/old-button/shared/loading-spinner.js

@@ -31,6 +31,7 @@ function LoadingSpinner(_ref2) {
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
     size: size,
+    label: ", Loading",
     appearance: getSpinnerAppearance({
       appearance: appearance,
       isDisabled: isDisabled,

package/dist/es2019/new-button/containers/split-button/split-button.js

@@ -62,7 +62,20 @@ const splitButtonStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+const primaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+const secondaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -73,12 +86,17 @@ export const SplitButtonContainer = ({
     css: splitButtonStyles
   }, children);
 };
+
 /**
  * __Split Button__
  *
  * @private __UNSAFE__ SplitButton is not yet safe for production use.
  *
- * TODO: Add description when adding docs
+ * A split button lets people perform an action or choose from a small group of similar actions.
+ *
+ * - [Examples](https://atlassian.design/components/button/split-button/examples)
+ * - [Code](https://atlassian.design/components/button/split-button/code)
+ * - [Usage](https://atlassian.design/components/button/split-button/usage)
  */
 export const SplitButton = ({
   children,
@@ -96,11 +114,15 @@ export const SplitButton = ({
       spacing,
       isDisabled
     }
-  }, PrimaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -118,9 +140,13 @@ export const SplitButtonWithSlots = ({
       spacing,
       isDisabled
     }
-  }, primaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, primaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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

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

package/dist/es2019/new-button/variants/shared/xcss.js

@@ -37,14 +37,6 @@ const verticalAlign = {
   none: 'baseline'
 };
 const splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }

package/dist/es2019/old-button/custom-theme-button/custom-theme-button.js

@@ -150,8 +150,10 @@ const CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef
     buttonStyles
   }) => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
     ref: ref,
-    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
-    "aria-busy": isLoading,
+    overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null
+    // No need to render aria-disabled when it is false
+    ,
+    "aria-disabled": isLoading || undefined,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onMouseDown: onMouseDown,

package/dist/es2019/old-button/loading-button.js

@@ -20,8 +20,10 @@ const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton({
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
-    appearance: appearance,
-    "aria-busy": isLoading,
+    appearance: appearance
+    // No need to render aria-disabled when it is false
+    ,
+    "aria-disabled": isLoading || undefined,
     isDisabled: isDisabled,
     isSelected: isSelected,
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {

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: "16.17.7",
+    packageVersion: "16.17.9",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/old-button/shared/loading-spinner.js

@@ -25,6 +25,7 @@ export default function LoadingSpinner({
   const size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Spinner, {
     size: size,
+    label: ", Loading",
     appearance: getSpinnerAppearance({
       appearance,
       isDisabled,

package/dist/esm/new-button/containers/split-button/split-button.js

@@ -62,7 +62,20 @@ var splitButtonStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-
+var primaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  }
+});
+var secondaryButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'button,a': {
+    borderEndStartRadius: 0,
+    borderStartStartRadius: 0
+  }
+});
 /**
  * TODO: Add JSdoc
  */
@@ -72,12 +85,17 @@ export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
     css: splitButtonStyles
   }, children);
 };
+
 /**
  * __Split Button__
  *
  * @private __UNSAFE__ SplitButton is not yet safe for production use.
  *
- * TODO: Add description when adding docs
+ * A split button lets people perform an action or choose from a small group of similar actions.
+ *
+ * - [Examples](https://atlassian.design/components/button/split-button/examples)
+ * - [Code](https://atlassian.design/components/button/split-button/code)
+ * - [Usage](https://atlassian.design/components/button/split-button/usage)
  */
 export var SplitButton = function SplitButton(_ref3) {
   var children = _ref3.children,
@@ -96,11 +114,15 @@ export var SplitButton = function SplitButton(_ref3) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, PrimaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, PrimaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), SecondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, SecondaryAction)));
 };
 /**
  * TODO: Decide on API
@@ -120,9 +142,13 @@ export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
       spacing: spacing,
       isDisabled: isDisabled
     }
-  }, primaryAction, jsx(Divider, {
+  }, jsx("div", {
+    css: primaryButtonStyles
+  }, primaryAction), jsx(Divider, {
     appearance: appearance,
     spacing: spacing,
     isDisabled: isDisabled
-  }), secondaryAction));
+  }), jsx("div", {
+    css: secondaryButtonStyles
+  }, secondaryAction)));
 };

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

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

package/dist/esm/new-button/variants/shared/xcss.js

@@ -40,14 +40,6 @@ var verticalAlign = {
   none: 'baseline'
 };
 var splitBorderStyles = {
-  ':first-of-type': {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  ':last-of-type': {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  },
   ':focus-visible': {
     zIndex: 1
   }

package/dist/esm/old-button/custom-theme-button/custom-theme-button.js

@@ -174,8 +174,10 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       var buttonStyles = _ref4.buttonStyles;
       return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, restProps, {
         ref: ref,
-        overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null,
-        "aria-busy": isLoading,
+        overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, restProps) : null
+        // No need to render aria-disabled when it is false
+        ,
+        "aria-disabled": isLoading || undefined,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onMouseDown: onMouseDown,

package/dist/esm/old-button/loading-button.js

@@ -22,8 +22,10 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(_ref, r
   // Button already has React.memo, so just leaning on that
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     ref: ref,
-    appearance: appearance,
-    "aria-busy": isLoading,
+    appearance: appearance
+    // No need to render aria-disabled when it is false
+    ,
+    "aria-disabled": isLoading || undefined,
     isDisabled: isDisabled,
     isSelected: isSelected,
     overlay: isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {

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: "16.17.7",
+    packageVersion: "16.17.9",
     analyticsData: analyticsContext
   });
 

package/dist/esm/old-button/shared/loading-spinner.js

@@ -24,6 +24,7 @@ export default function LoadingSpinner(_ref2) {
   var size = spacing === 'default' ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Spinner, {
     size: size,
+    label: ", Loading",
     appearance: getSpinnerAppearance({
       appearance: appearance,
       isDisabled: isDisabled,

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
 type DividerProps = {
     appearance: SplitButtonContextAppearance;
     spacing: SplitButtonSpacing;
@@ -17,23 +17,16 @@ export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProp
 export declare const SplitButtonContainer: ({ children }: {
     children: ReactNode;
 }) => jsx.JSX.Element;
-type SplitButtonProps = {
-    /**
-     * Only two children are allowed.
-     * First child is the primary action, second child is the secondary action.
-     * The assumption is that for both children trees there is a button reading the context.
-     */
-    children: ReactNode;
-    appearance?: SplitButtonAppearance;
-    spacing?: SplitButtonSpacing;
-    isDisabled?: boolean;
-};
 /**
  * __Split Button__
  *
  * @private __UNSAFE__ SplitButton is not yet safe for production use.
  *
- * TODO: Add description when adding docs
+ * A split button lets people perform an action or choose from a small group of similar actions.
+ *
+ * - [Examples](https://atlassian.design/components/button/split-button/examples)
+ * - [Code](https://atlassian.design/components/button/split-button/code)
+ * - [Usage](https://atlassian.design/components/button/split-button/usage)
  */
 export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
 type SplitButtonWithSlotsProps = {

package/dist/types/new-button/containers/split-button/types.d.ts

@@ -1,4 +1,24 @@
-import type { Appearance, Spacing } from '../../variants/types';
-export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
+import { type ReactNode } from 'react';
+export type SplitButtonAppearance = 'default' | 'primary';
 export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
-export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;
+export type SplitButtonSpacing = 'default' | 'compact';
+export type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    /**
+     * The style variation for child buttons. Will override any appearance set on a child button.
+     */
+    appearance?: SplitButtonAppearance;
+    /**
+     * Controls the amount of padding in the child buttons.
+     */
+    spacing?: SplitButtonSpacing;
+    /**
+     * Whether all child buttons should be disabled.
+     */
+    isDisabled?: boolean;
+};

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonProps, SplitButtonSpacing } from './types';
 type DividerProps = {
     appearance: SplitButtonContextAppearance;
     spacing: SplitButtonSpacing;
@@ -17,23 +17,16 @@ export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProp
 export declare const SplitButtonContainer: ({ children }: {
     children: ReactNode;
 }) => jsx.JSX.Element;
-type SplitButtonProps = {
-    /**
-     * Only two children are allowed.
-     * First child is the primary action, second child is the secondary action.
-     * The assumption is that for both children trees there is a button reading the context.
-     */
-    children: ReactNode;
-    appearance?: SplitButtonAppearance;
-    spacing?: SplitButtonSpacing;
-    isDisabled?: boolean;
-};
 /**
  * __Split Button__
  *
  * @private __UNSAFE__ SplitButton is not yet safe for production use.
  *
- * TODO: Add description when adding docs
+ * A split button lets people perform an action or choose from a small group of similar actions.
+ *
+ * - [Examples](https://atlassian.design/components/button/split-button/examples)
+ * - [Code](https://atlassian.design/components/button/split-button/code)
+ * - [Usage](https://atlassian.design/components/button/split-button/usage)
  */
 export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
 type SplitButtonWithSlotsProps = {

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

@@ -1,4 +1,24 @@
-import type { Appearance, Spacing } from '../../variants/types';
-export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
+import { type ReactNode } from 'react';
+export type SplitButtonAppearance = 'default' | 'primary';
 export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
-export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;
+export type SplitButtonSpacing = 'default' | 'compact';
+export type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    /**
+     * The style variation for child buttons. Will override any appearance set on a child button.
+     */
+    appearance?: SplitButtonAppearance;
+    /**
+     * Controls the amount of padding in the child buttons.
+     */
+    spacing?: SplitButtonSpacing;
+    /**
+     * Whether all child buttons should be disabled.
+     */
+    isDisabled?: boolean;
+};

package/extract-react-types/new-button/containers/split-button/split-button-props.tsx

@@ -0,0 +1,5 @@
+import type { SplitButtonProps } from '../../../../src/new-button/containers/split-button/types';
+
+export default function SplitProps(props: SplitButtonProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.17.7",
+  "version": "16.17.9",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
           "title": "Split button",
           "id": "split-button",
           "status": {
-            "type": "draft"
+            "type": "closed-beta"
           },
           "sortKey": 4
         }
@@ -85,7 +85,7 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/interaction-context": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.12.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.29.0",