@atlaskit/button 16.10.1 → 16.11.0

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

@@ -45,5 +45,4 @@ var LoadingButton = /*#__PURE__*/_react.default.forwardRef(function LoadingButto
 
 // Tools including enzyme rely on components having a display name
 LoadingButton.displayName = 'LoadingButton';
-var _default = LoadingButton;
-exports.default = _default;
+var _default = exports.default = LoadingButton;

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

@@ -21,6 +21,7 @@ var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _css = require("./css");
 var _getIfVisuallyHiddenChildren = require("./get-if-visually-hidden-children");
 var _excluded = ["analyticsContext", "appearance", "autoFocus", "buttonCss", "children", "className", "href", "component", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onBlur", "onClick", "onFocus", "onMouseDown", "overlay", "shouldFitContainer", "spacing", "tabIndex", "type", "testId"];
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 // eslint-disable-next-line no-duplicate-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,7 +55,7 @@ var getChildren = function getChildren(children, childrenStyles) {
     css: childrenStyles
   }, children) : null;
 };
-var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
+var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props, ref) {
   var analyticsContext = props.analyticsContext,
     _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -117,7 +118,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext
   });
 
@@ -137,7 +138,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
 
   // we are 'disabling' input with a button when there is an overlay
   var hasOverlay = Boolean(overlay);
-  var fadeCss = (0, _react2.css)((0, _css.getFadingCss)({
+  var fadeStyles = (0, _react2.css)((0, _css.getFadingCss)({
     hasOverlay: hasOverlay
   }));
   var isInteractive = !isDisabled && !hasOverlay;
@@ -178,21 +179,20 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
   }, (0, _blockEvents.default)({
     isInteractive: isInteractive
   })), iconBefore ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getIconStyle)({
+    css: [fadeStyles, (0, _css.getIconStyle)({
       spacing: spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && children ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getContentStyle)({
+    css: [fadeStyles, (0, _css.getContentStyle)({
       spacing: spacing
     })]
-  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeCss, (0, _css.getContentStyle)({
+  }, children) : null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.icon-button-spacing-fix_o1zc5') && getChildren(children, [fadeStyles, (0, _css.getContentStyle)({
     spacing: spacing
   })]), iconAfter ? (0, _react2.jsx)("span", {
-    css: [fadeCss, (0, _css.getIconStyle)({
+    css: [fadeStyles, (0, _css.getIconStyle)({
       spacing: spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? (0, _react2.jsx)("span", {
     css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null));
-});
-exports.default = _default;
+});

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

@@ -326,5 +326,4 @@ var values = {
     }
   }
 };
-var _default = values;
-exports.default = _default;
+var _default = exports.default = values;

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

@@ -229,7 +229,7 @@ function getFadingCss(_ref6) {
     transition: 'opacity 0.3s'
   });
 }
-var overlayCss = {
+var overlayCss = exports.overlayCss = {
   // stretching to full width / height of button
   // this is important as we need it to still block
   // event if clicking in the button's own padding
@@ -242,5 +242,4 @@ var overlayCss = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
-};
-exports.overlayCss = overlayCss;
+};

package/dist/cjs/old-button/shared/get-if-visually-hidden-children.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getIfVisuallyHiddenChildren = void 0;
 var _react = require("react");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
+var getIfVisuallyHiddenChildren = exports.getIfVisuallyHiddenChildren = function getIfVisuallyHiddenChildren(children) {
   return children && /*#__PURE__*/(0, _react.isValidElement)(children) && children.type === _visuallyHidden.default;
-};
-exports.getIfVisuallyHiddenChildren = getIfVisuallyHiddenChildren;
+};

package/dist/cjs/utils/appearances.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
-var _default = appearances;
-exports.default = _default;
+var _default = exports.default = appearances;

package/dist/cjs/utils/spacing.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var spacing = ['default', 'compact', 'none'];
-var _default = spacing;
-exports.default = _default;
+var _default = exports.default = spacing;

package/dist/cjs/utils/variants.js

@@ -21,7 +21,7 @@ var LinkButtonRender = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     href: "#"
   }, props), props.children);
 });
-var variants = [{
+var variants = exports.variants = [{
   name: 'Button',
   Component: _button.default,
   elementType: HTMLButtonElement
@@ -30,6 +30,4 @@ var variants = [{
   Component: LinkButtonRender,
   elementType: HTMLAnchorElement
 }];
-exports.variants = variants;
-var _default = variants;
-exports.default = _default;
+var _default = exports.default = variants;

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

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/react';
 const 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/es2019/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/es2019/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/es2019/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/es2019/new-button/containers/split-button/split-button-context.js

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

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

@@ -0,0 +1,129 @@
+/** @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';
+const fontSize = getFontSize();
+const defaultDividerHeight = 20 / fontSize + 'em';
+const defaultDividerStyles = css({
+  height: defaultDividerHeight,
+  margin: `${"var(--ds-space-075, 6px)"} -0.5px`
+});
+const compactDividerHeight = 16 / fontSize + 'em';
+const compactDividerStyles = css({
+  height: compactDividerHeight,
+  margin: `${"var(--ds-space-050, 4px)"} -0.5px`
+});
+const baseDividerStyles = css({
+  display: 'inline-flex',
+  width: '1px',
+  position: 'relative',
+  zIndex: 2
+});
+const disabledStyles = css({
+  backgroundColor: "var(--ds-border, #091E4224)",
+  cursor: 'not-allowed'
+});
+const navigationDividerStyles = css({
+  height: compactDividerHeight,
+  margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
+  backgroundColor: "var(--ds-border, #0052cc)"
+});
+const 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
+};
+const dividerHeight = {
+  default: defaultDividerStyles,
+  compact: compactDividerStyles
+};
+/**
+ * TODO: Add JSDoc
+ */
+export const Divider = ({
+  appearance,
+  spacing,
+  isDisabled = false
+}) => {
+  return (
+    // I find it funny to provide a div for Divider
+    jsx("div", {
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+    })
+  );
+};
+const splitButtonStyles = css({
+  display: 'inline-flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+});
+
+/**
+ * TODO: Add JSdoc
+ */
+export const SplitButtonContainer = ({
+  children
+}) => {
+  return jsx("div", {
+    css: splitButtonStyles
+  }, children);
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export const SplitButton = ({
+  children,
+  appearance = 'default',
+  spacing = 'default',
+  isDisabled = false
+}) => {
+  const {
+    PrimaryAction,
+    SecondaryAction
+  } = getActions(children);
+  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+    value: {
+      appearance,
+      spacing,
+      isDisabled
+    }
+  }, PrimaryAction, jsx(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), SecondaryAction));
+};
+/**
+ * TODO: Decide on API
+ */
+export const SplitButtonWithSlots = ({
+  primaryAction,
+  secondaryAction,
+  appearance = 'default',
+  spacing = 'default',
+  isDisabled = false
+}) => {
+  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+    value: {
+      appearance,
+      spacing,
+      isDisabled
+    }
+  }, primaryAction, jsx(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), secondaryAction));
+};

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

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

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

@@ -0,0 +1,12 @@
+import { Children } from 'react';
+export const getActions = children => {
+  const [PrimaryAction, SecondaryAction] = Children.toArray(children);
+  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,
+    SecondaryAction
+  };
+};

package/dist/es2019/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__
  *
@@ -37,23 +36,20 @@ const useDefaultButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  const hasOverlay = Boolean(overlay);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
     autoFocus,
     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,
     isDisabled,

package/dist/es2019/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__
  *
@@ -37,9 +36,7 @@ const useIconButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const fadeStyles = getFadingStyles({
-    hasOverlay: Boolean(overlay)
-  });
+  const hasOverlay = Boolean(overlay);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -49,9 +46,9 @@ const useIconButton = ({
      * 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,
     isDisabled,

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

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

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

@@ -4,12 +4,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
 
+const 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__
  *
@@ -25,11 +37,11 @@ import { getXCSS, overlayStyles } from './xcss';
  */
 const useButtonBase = ({
   analyticsContext,
-  appearance = 'default',
+  appearance: propAppearance = 'default',
   autoFocus = false,
   buttonType,
   interactionName,
-  isDisabled = false,
+  isDisabled: propIsDisabled = false,
   isSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
@@ -50,9 +62,17 @@ const useButtonBase = ({
   overlay,
   ref,
   shouldFitContainer = false,
-  spacing = 'default'
+  spacing: propSpacing = 'default'
 }) => {
   const ourRef = useRef();
+  const splitButtonContext = useSplitButtonContext();
+  const isSplitButton = Boolean(splitButtonContext);
+  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  const appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  const isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
+  const isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
   const setRef = useCallback(node => {
     ourRef.current = node;
     if (ref === null) {
@@ -77,7 +97,7 @@ const useButtonBase = ({
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.1",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -86,13 +106,17 @@ const useButtonBase = ({
     spacing,
     isDisabled,
     isSelected,
+    isHighlighted,
+    isActiveOverSelected,
     shouldFitContainer,
     isIconButton,
     hasOverlay: Boolean(overlay),
     isLink: buttonType === 'link',
     hasIconBefore,
-    hasIconAfter
-  }), [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+    hasIconAfter,
+    isSplit: isSplitButton,
+    isNavigationSplit: isNavigationSplitButton
+  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return {
     ref: setRef,