@atlaskit/button 16.10.1 → 16.11.0

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

@@ -2,7 +2,7 @@ import { xcss } from '@atlaskit/primitives';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 const fontSize = getFontSize();
-const heights = {
+export const heights = {
   default: `${32 / fontSize}em`,
   compact: `${24 / fontSize}em`,
   none: 'auto'
@@ -31,6 +31,19 @@ const verticalAlign = {
   compact: 'middle',
   none: 'baseline'
 };
+const splitBorderStyles = {
+  ':first-of-type': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  ':last-of-type': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  ':focus-visible': {
+    zIndex: 1
+  }
+};
 function getColor({
   group,
   key
@@ -42,12 +55,14 @@ function getColors({
   interactionState = 'default',
   isDisabled,
   isSelected,
+  isHighlighted,
+  isActiveOverSelected,
   hasOverlay
 }) {
   let key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected ? 'selected' : key;
+  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
@@ -66,9 +81,13 @@ export function getXCSS({
   spacing,
   isDisabled,
   isSelected,
+  isHighlighted,
+  isActiveOverSelected,
   isIconButton,
   shouldFitContainer,
   isLink,
+  isSplit,
+  isNavigationSplit,
   hasOverlay,
   hasIconBefore,
   hasIconAfter
@@ -76,6 +95,8 @@ export function getXCSS({
   const baseColors = getColors({
     appearance,
     isSelected,
+    isHighlighted,
+    isActiveOverSelected,
     isDisabled
   });
   const combinedBaseColorStyles = isLink ? {
@@ -83,12 +104,32 @@ export function getXCSS({
     textDecoration: 'none',
     // Disabling visited styles (by re-declaring the base colors)
     ':visited': baseColors
+  } : isNavigationSplit && !isSelected ? {
+    ...baseColors,
+    backgroundColor: 'color.background.neutral.subtle'
   } : baseColors;
   const height = heights[spacing];
   let width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? height : width;
-  const paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  const paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
+  const defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  const defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  const splitButtonStyles = isSplit ? splitBorderStyles : {};
+  const getNavigationSplitButtonPaddings = () => {
+    if (isNavigationSplit) {
+      return {
+        paddingInlineStart: 'space.075',
+        paddingInlineEnd: 'space.075'
+      };
+    }
+    return {
+      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
+      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
+    };
+  };
+  const {
+    paddingInlineStart,
+    paddingInlineEnd
+  } = getNavigationSplitButtonPaddings();
   return xcss({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -107,8 +148,8 @@ export function getXCSS({
     whiteSpace: 'nowrap',
     height,
     paddingBlock: 'space.0',
-    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
-    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    paddingInlineStart,
+    paddingInlineEnd,
     columnGap: gap[spacing],
     verticalAlign: verticalAlign[spacing],
     width,
@@ -121,7 +162,8 @@ export function getXCSS({
     ':hover': {
       ...getColors({
         appearance,
-        isSelected,
+        isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+        isActiveOverSelected,
         isDisabled,
         interactionState: 'hover',
         hasOverlay
@@ -133,50 +175,15 @@ export function getXCSS({
     ':active': {
       ...getColors({
         appearance,
-        isSelected,
+        isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+        isActiveOverSelected,
         isDisabled,
         interactionState: 'active',
         hasOverlay
       }),
       // background, box-shadow
       transitionDuration: '0s, 0s'
-    }
-  });
-}
-export const iconStyles = xcss({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  fontSize: 0,
-  lineHeight: 0,
-  userSelect: 'none'
-});
-export const contentStyles = xcss({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-export function getFadingStyles({
-  hasOverlay
-}) {
-  return xcss({
-    opacity: hasOverlay ? 0 : 1,
-    transition: 'opacity 0.3s'
+    },
+    ...splitButtonStyles
   });
-}
-export const overlayStyles = xcss({
-  position: 'absolute',
-  left: 'space.0',
-  top: 'space.0',
-  right: 'space.0',
-  bottom: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
+}

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -102,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext
   });
 
@@ -122,7 +123,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
 
   // we are 'disabling' input with a button when there is an overlay
   const hasOverlay = Boolean(overlay);
-  const fadeCss = css(getFadingCss({
+  const fadeStyles = css(getFadingCss({
     hasOverlay
   }));
   const isInteractive = !isDisabled && !hasOverlay;
@@ -163,17 +164,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, blockEvents({
     isInteractive
   })), iconBefore ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, !getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? jsx("span", {
-    css: [fadeCss, getContentStyle({
+    css: [fadeStyles, getContentStyle({
       spacing
     })]
-  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, getContentStyle({
+  }, children) : null, getBooleanFF('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, getContentStyle({
     spacing
   })]), iconAfter ? jsx("span", {
-    css: [fadeCss, getIconStyle({
+    css: [fadeStyles, getIconStyle({
       spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {

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

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '> *': {
     flex: '1 0 auto'
   }

package/dist/esm/entry-points/new.js

@@ -1,4 +1,5 @@
 export { default } from '../new-button/variants/default/button';
 export { default as LinkButton } from '../new-button/variants/default/link';
 export { default as IconButton } from '../new-button/variants/icon/button';
-export { default as LinkIconButton } from '../new-button/variants/icon/link';
+export { default as LinkIconButton } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';

package/dist/esm/entry-points/unsafe.js

@@ -1 +1,4 @@
-export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

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

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext } from './split-button-context';

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

@@ -0,0 +1,31 @@
+import { createContext, useContext } from 'react';
+/**
+ * TODO: Add jsdoc
+ */
+export var SplitButtonContext = /*#__PURE__*/createContext(undefined);
+export var useSplitButtonContext = function useSplitButtonContext() {
+  var context = useContext(SplitButtonContext);
+  if (!context) {
+    return undefined;
+  }
+  if (context.appearance === 'navigation') {
+    var newContext = {
+      spacing: 'default',
+      appearance: 'subtle',
+      isDisabled: false,
+      isActiveOverSelected: false,
+      isNavigationSplitButton: true,
+      isHighlighted: context.isHighlighted
+    };
+    return newContext;
+  }
+  var splitButtonContext = {
+    spacing: context.spacing,
+    appearance: context.appearance,
+    isDisabled: context.isDisabled,
+    isActiveOverSelected: true,
+    isNavigationSplitButton: false,
+    isHighlighted: false
+  };
+  return splitButtonContext;
+};

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

@@ -0,0 +1,131 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { fontSize as getFontSize } from '@atlaskit/theme/constants';
+import { SplitButtonContext } from './split-button-context';
+import { getActions } from './utils';
+var fontSize = getFontSize();
+var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerStyles = css({
+  height: defaultDividerHeight,
+  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
+});
+var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerStyles = css({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
+});
+var baseDividerStyles = css({
+  display: 'inline-flex',
+  width: '1px',
+  position: 'relative',
+  zIndex: 2
+});
+var disabledStyles = css({
+  backgroundColor: "var(--ds-border, #091E4224)",
+  cursor: 'not-allowed'
+});
+var navigationDividerStyles = css({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+  backgroundColor: "var(--ds-border, #0052cc)"
+});
+var dividerAppearance = {
+  default: css({
+    backgroundColor: "var(--ds-text, #172B4D)"
+  }),
+  primary: css({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  danger: css({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  warning: css({
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  navigation: navigationDividerStyles
+};
+var dividerHeight = {
+  default: defaultDividerStyles,
+  compact: compactDividerStyles
+};
+/**
+ * TODO: Add JSDoc
+ */
+export var Divider = function Divider(_ref) {
+  var appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  return (
+    // I find it funny to provide a div for Divider
+    jsx("div", {
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+    })
+  );
+};
+var splitButtonStyles = css({
+  display: 'inline-flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+});
+
+/**
+ * TODO: Add JSdoc
+ */
+export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: splitButtonStyles
+  }, children);
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export var SplitButton = function SplitButton(_ref3) {
+  var children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
+    _ref3$spacing = _ref3.spacing,
+    spacing = _ref3$spacing === void 0 ? 'default' : _ref3$spacing,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+  var _getActions = getActions(children),
+    PrimaryAction = _getActions.PrimaryAction,
+    SecondaryAction = _getActions.SecondaryAction;
+  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, PrimaryAction, jsx(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), SecondaryAction));
+};
+/**
+ * TODO: Decide on API
+ */
+export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
+  var primaryAction = _ref4.primaryAction,
+    secondaryAction = _ref4.secondaryAction,
+    _ref4$appearance = _ref4.appearance,
+    appearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    _ref4$spacing = _ref4.spacing,
+    spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
+  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, primaryAction, jsx(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), secondaryAction));
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Children } from 'react';
+export var getActions = function getActions(children) {
+  var _Children$toArray = Children.toArray(children),
+    _Children$toArray2 = _slicedToArray(_Children$toArray, 2),
+    PrimaryAction = _Children$toArray2[0],
+    SecondaryAction = _Children$toArray2[1];
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development' && (!PrimaryAction || !SecondaryAction)) {
+    // TODO: i18n?
+    throw new SyntaxError('SplitButton requires two children to be provided');
+  }
+  return {
+    PrimaryAction: PrimaryAction,
+    SecondaryAction: SecondaryAction
+  };
+};

package/dist/esm/new-button/variants/default/use-default-button.js

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { contentStyles, getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use default button base__
  *
@@ -36,23 +35,20 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
     buttonType: buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
-    }, iconBefore), children && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, contentStyles]
-    }, children), iconAfter && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
+    }, iconBefore), children && /*#__PURE__*/React.createElement(Content, {
+      hasOverlay: hasOverlay
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, iconAfter)),
     interactionName: interactionName,
     isDisabled: isDisabled,

package/dist/esm/new-button/variants/icon/use-icon-button.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@atlaskit/primitives';
+import Content from '../shared/content';
 import useButtonBase from '../shared/use-button-base';
-import { getFadingStyles, iconStyles } from '../shared/xcss';
 /**
  * __Use icon button__
  *
@@ -34,9 +33,7 @@ var useIconButton = function useIconButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  var hasOverlay = Boolean(overlay);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -46,9 +43,9 @@ var useIconButton = function useIconButton(_ref) {
      * TODO: Have not finished IconButton yet. It also needs a required accessible
      * label - likely implemented using VisuallyHidden
      */
-    children: /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: [fadeStyles, iconStyles]
+    children: /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      hasOverlay: hasOverlay
     }, icon),
     interactionName: interactionName,
     isDisabled: isDisabled,

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

@@ -0,0 +1,44 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+var textStyles = xcss({
+  // content can grow and shrink
+  flexGrow: 1,
+  flexShrink: 1,
+  // ellipsis for overflow text
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var iconStyles = xcss({
+  display: 'flex',
+  // icon size cannot grow and shrink
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: 'center',
+  fontSize: 0,
+  lineHeight: 0,
+  userSelect: 'none'
+});
+var commonStyles = xcss({
+  transition: 'opacity 0.3s'
+});
+var fadeStyles = xcss({
+  opacity: 0
+});
+/**
+ * __Content__
+ *
+ * Used for slots within a Button, including icons and text content.
+ */
+var Content = function Content(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    hasOverlay = _ref.hasOverlay;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(hasOverlay ? [fadeStyles] : []))
+  }, children);
+};
+export default Content;

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

@@ -7,12 +7,24 @@ import noop from '@atlaskit/ds-lib/noop';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 // eslint-disable-next-line no-duplicate-imports
 import InteractionContext from '@atlaskit/interaction-context';
-import { Box } from '@atlaskit/primitives';
+import { Box, xcss } from '@atlaskit/primitives';
+import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
-import { getXCSS, overlayStyles } from './xcss';
+import { getXCSS } from './xcss';
 
 // Include modified onClick with analytics
 
+var overlayStyles = xcss({
+  position: 'absolute',
+  insetInlineStart: 'space.0',
+  insetBlockStart: 'space.0',
+  insetInlineEnd: 'space.0',
+  insetBlockEnd: 'space.0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
 /**
  * __Use button base__
  *
@@ -29,13 +41,13 @@ import { getXCSS, overlayStyles } from './xcss';
 var useButtonBase = function useButtonBase(_ref) {
   var analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     buttonType = _ref.buttonType,
     interactionName = _ref.interactionName,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -61,8 +73,16 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
   var ourRef = useRef();
+  var splitButtonContext = useSplitButtonContext();
+  var isSplitButton = Boolean(splitButtonContext);
+  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  var isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
+  var isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
   var setRef = useCallback(function (node) {
     ourRef.current = node;
     if (ref === null) {
@@ -87,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -97,14 +117,18 @@ var useButtonBase = function useButtonBase(_ref) {
       spacing: spacing,
       isDisabled: isDisabled,
       isSelected: isSelected,
+      isHighlighted: isHighlighted,
+      isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter
+      hasIconAfter: hasIconAfter,
+      isSplit: isSplitButton,
+      isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,