@atlaskit/button 16.9.3 → 16.10.0

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
+var _xcss = require("../shared/xcss");
+/**
+ * __Use icon button__
+ *
+ * A React hook that accepts a set of icon Button props,
+ * and processes them to return consistent base props for usage
+ * across IconButton and LinkIconButton variants.
+ *
+ * @private
+ */
+var useIconButton = function useIconButton(_ref) {
+  var analyticsContext = _ref.analyticsContext,
+    appearance = _ref.appearance,
+    autoFocus = _ref.autoFocus,
+    buttonType = _ref.buttonType,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    overlay = _ref.overlay,
+    ref = _ref.ref,
+    shouldFitContainer = _ref.shouldFitContainer,
+    spacing = _ref.spacing;
+  var fadeStyles = (0, _xcss.getFadingStyles)({
+    hasOverlay: Boolean(overlay)
+  });
+  var baseProps = (0, _useButtonBase.default)({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: buttonType,
+    /**
+     * TODO: Have not finished IconButton yet. It also needs a required accessible
+     * label - likely implemented using VisuallyHidden
+     */
+    children: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: [fadeStyles, _xcss.iconStyles]
+    }, icon),
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    isIconButton: true,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing
+  });
+  return baseProps;
+};
+var _default = useIconButton;
+exports.default = _default;

package/dist/cjs/new-button/variants/shared/block-events.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = blockEvents;
+function abort(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+var tabKeyCode = 9;
+function onKey(event) {
+  // Allowing tab so that a user can move focus away
+  if (event.keyCode === tabKeyCode) {
+    return;
+  }
+  abort(event);
+}
+function blockEvents(shouldBlockEvents, events) {
+  return shouldBlockEvents ? {
+    onMouseDownCapture: abort,
+    onMouseUpCapture: abort,
+    onKeyDownCapture: onKey,
+    onKeyUpCapture: onKey,
+    onTouchStartCapture: abort,
+    onTouchEndCapture: abort,
+    onPointerDownCapture: abort,
+    onPointerUpCapture: abort,
+    onClickCapture: abort,
+    // Just smashing the existing onClick for good measure
+    onClick: abort
+  } : events;
+}

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

@@ -0,0 +1,130 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var values = {
+  // Default appearance
+  background: {
+    default: {
+      /**
+       * Some colors need specific fallback colors specified
+       * to match the original Button when no theme is active.
+       *
+       * This is because the `xcss` automatic token fallbacks use
+       * the legacy themes, which do not match original colors.
+       */
+      // @ts-expect-error
+      default: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
+      hover: 'color.background.neutral.hovered',
+      active: 'color.background.neutral.pressed',
+      // @ts-expect-error
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+    },
+    primary: {
+      default: 'color.background.brand.bold',
+      hover: 'color.background.brand.bold.hovered',
+      active: 'color.background.brand.bold.pressed',
+      // @ts-expect-error
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+    },
+    warning: {
+      default: 'color.background.warning.bold',
+      hover: 'color.background.warning.bold.hovered',
+      active: 'color.background.warning.bold.pressed',
+      // @ts-expect-error
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+    },
+    danger: {
+      default: 'color.background.danger.bold',
+      hover: 'color.background.danger.bold.hovered',
+      active: 'color.background.danger.bold.pressed',
+      // @ts-expect-error
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.R500, ")")
+    },
+    link: {
+      default: 'color.background.neutral.subtle',
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+    },
+    subtle: {
+      default: 'color.background.neutral.subtle',
+      hover: 'color.background.neutral.subtle.hovered',
+      active: 'color.background.neutral.subtle.pressed',
+      // @ts-expect-error
+      disabled: "var(--ds-background-neutral-subtle, none)",
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+    },
+    'subtle-link': {
+      default: 'color.background.neutral.subtle',
+      // @ts-expect-error
+      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+    }
+  },
+  color: {
+    default: {
+      default: 'color.text',
+      active: 'color.text',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+    },
+    primary: {
+      default: 'color.text.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+    },
+    warning: {
+      default: 'color.text.warning.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N800, ")")
+    },
+    danger: {
+      default: 'color.text.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")")
+    },
+    link: {
+      default: 'color.link',
+      hover: 'color.link',
+      active: 'color.link.pressed',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+    },
+    subtle: {
+      default: 'color.text',
+      active: 'color.text',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+    },
+    'subtle-link': {
+      default: 'color.text.subtle',
+      hover: 'color.text.subtle',
+      active: 'color.text',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+    }
+  }
+};
+var _default = values;
+exports.default = _default;

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _primitives = require("@atlaskit/primitives");
+var _blockEvents = _interopRequireDefault(require("./block-events"));
+var _xcss = require("./xcss");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line no-duplicate-imports
+// Include modified onClick with analytics
+
+/**
+ * __Use button base__
+ *
+ * A React hook that accepts a set of common Button props,
+ * and processes them to return consistent base props for usage
+ * across various Button components.
+ *
+ * It also:
+ * - Implements auto focus when enabled.
+ * - Appends the `onClick` event with UFO analytics tracking.
+ *
+ * @private
+ */
+var useButtonBase = function useButtonBase(_ref) {
+  var analyticsContext = _ref.analyticsContext,
+    _ref$appearance = _ref.appearance,
+    appearance = _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,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isIconButton = _ref.isIconButton,
+    isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
+    _ref$hasIconBefore = _ref.hasIconBefore,
+    hasIconBefore = _ref$hasIconBefore === void 0 ? false : _ref$hasIconBefore,
+    _ref$hasIconAfter = _ref.hasIconAfter,
+    hasIconAfter = _ref$hasIconAfter === void 0 ? false : _ref$hasIconAfter,
+    children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    overlay = _ref.overlay,
+    ref = _ref.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;
+  var ourRef = (0, _react.useRef)();
+  var setRef = (0, _react.useCallback)(function (node) {
+    ourRef.current = node;
+    if (ref === null) {
+      return;
+    }
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    }
+
+    // @ts-ignore
+    ref.current = node;
+  }, [ourRef, ref]);
+  (0, _useAutoFocus.default)(ourRef, autoFocus);
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.10.0",
+    analyticsData: analyticsContext,
+    actionSubject: buttonType
+  });
+  var buttonXCSS = (0, _react.useMemo)(function () {
+    return (0, _xcss.getXCSS)({
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      shouldFitContainer: shouldFitContainer,
+      isIconButton: isIconButton,
+      hasOverlay: Boolean(overlay),
+      isLink: buttonType === 'link',
+      hasIconBefore: hasIconBefore,
+      hasIconAfter: hasIconAfter
+    });
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  return _objectSpread({
+    ref: setRef,
+    xcss: buttonXCSS,
+    // Consider overlay buttons to be effectively disabled
+    isDisabled: isEffectivelyDisabled,
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      xcss: _xcss.overlayStyles
+    }, overlay) : null)
+  }, (0, _blockEvents.default)(isEffectivelyDisabled, {
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture
+  }));
+};
+var _default = useButtonBase;
+exports.default = _default;

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

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contentStyles = void 0;
+exports.getFadingStyles = getFadingStyles;
+exports.getXCSS = getXCSS;
+exports.overlayStyles = exports.iconStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("@atlaskit/theme/constants");
+var _colors = _interopRequireDefault(require("./colors"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var fontSize = (0, _constants.fontSize)();
+var heights = {
+  default: "".concat(32 / fontSize, "em"),
+  compact: "".concat(24 / fontSize, "em"),
+  none: 'auto'
+};
+var paddingInline = {
+  default: {
+    default: 'space.150',
+    withIcon: 'space.100'
+  },
+  compact: {
+    default: 'space.150',
+    withIcon: 'space.100'
+  },
+  none: {
+    default: 'space.0',
+    withIcon: 'space.0'
+  }
+};
+var gap = {
+  compact: 'space.050',
+  default: 'space.050',
+  none: 'space.0'
+};
+var verticalAlign = {
+  default: 'middle',
+  compact: 'middle',
+  none: 'baseline'
+};
+function getColor(_ref) {
+  var group = _ref.group,
+    key = _ref.key;
+  return group[key] || group.default;
+}
+function getColors(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$interactionStat = _ref2.interactionState,
+    interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected,
+    hasOverlay = _ref2.hasOverlay;
+  var key = interactionState;
+  // Overlay does not change color on interaction, revert to 'default' or resting state
+  key = hasOverlay ? 'default' : key;
+  key = isSelected ? 'selected' : key;
+  // Disabled colors overrule everything else
+  key = isDisabled ? 'disabled' : key;
+  return {
+    backgroundColor: getColor({
+      group: _colors.default.background[appearance],
+      key: key
+    }),
+    color: "".concat(getColor({
+      group: _colors.default.color[appearance],
+      key: key
+    }))
+  };
+}
+function getXCSS(_ref3) {
+  var appearance = _ref3.appearance,
+    spacing = _ref3.spacing,
+    isDisabled = _ref3.isDisabled,
+    isSelected = _ref3.isSelected,
+    isIconButton = _ref3.isIconButton,
+    shouldFitContainer = _ref3.shouldFitContainer,
+    isLink = _ref3.isLink,
+    hasOverlay = _ref3.hasOverlay,
+    hasIconBefore = _ref3.hasIconBefore,
+    hasIconAfter = _ref3.hasIconAfter;
+  var baseColors = getColors({
+    appearance: appearance,
+    isSelected: isSelected,
+    isDisabled: isDisabled
+  });
+  var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
+    textDecoration: 'none',
+    // Disabling visited styles (by re-declaring the base colors)
+    ':visited': baseColors
+  }) : baseColors;
+  var height = heights[spacing];
+  var width = shouldFitContainer ? '100%' : 'auto';
+  width = isIconButton ? height : width;
+  var paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  var paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
+    alignItems: 'center',
+    borderWidth: 'border.width.0',
+    borderRadius: 'border.radius.100',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: 'inherit',
+    fontStyle: 'normal',
+    fontFamily: 'inherit',
+    fontWeight: 500,
+    maxWidth: '100%',
+    // Needed to position overlay
+    position: 'relative',
+    textAlign: 'center',
+    transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+    whiteSpace: 'nowrap',
+    height: height,
+    paddingBlock: 'space.0',
+    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
+    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    columnGap: gap[spacing],
+    verticalAlign: verticalAlign[spacing],
+    width: width,
+    // justifyContent required for shouldFitContainer buttons with an icon inside
+    justifyContent: 'center'
+  }, combinedBaseColorStyles), isDisabled || hasOverlay ? {
+    cursor: 'not-allowed'
+  } : {}), {}, {
+    ':hover': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      isSelected: isSelected,
+      isDisabled: isDisabled,
+      interactionState: 'hover',
+      hasOverlay: hasOverlay
+    })), {}, {
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none',
+      // background, box-shadow
+      transitionDuration: '0s, 0.15s'
+    }),
+    ':active': _objectSpread(_objectSpread({}, getColors({
+      appearance: appearance,
+      isSelected: isSelected,
+      isDisabled: isDisabled,
+      interactionState: 'active',
+      hasOverlay: hasOverlay
+    })), {}, {
+      // background, box-shadow
+      transitionDuration: '0s, 0s'
+    })
+  }));
+}
+var iconStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  // icon size cannot grow and shrink
+  flexGrow: 0,
+  flexShrink: 0,
+  alignSelf: 'center',
+  fontSize: 0,
+  lineHeight: 0,
+  userSelect: 'none'
+});
+exports.iconStyles = iconStyles;
+var contentStyles = (0, _primitives.xcss)({
+  // content can grow and shrink
+  flexGrow: 1,
+  flexShrink: 1,
+  // ellipsis for overflow text
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+exports.contentStyles = contentStyles;
+function getFadingStyles(_ref4) {
+  var hasOverlay = _ref4.hasOverlay;
+  return (0, _primitives.xcss)({
+    opacity: hasOverlay ? 0 : 1,
+    transition: 'opacity 0.3s'
+  });
+}
+var overlayStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  left: 'space.0',
+  top: 'space.0',
+  right: 'space.0',
+  bottom: 'space.0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+exports.overlayStyles = overlayStyles;

package/dist/cjs/new-button/variants/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/{custom-theme-button → old-button/custom-theme-button}/custom-theme-button.js

@@ -19,8 +19,8 @@ var _theme = _interopRequireWildcard(require("./theme"));
 var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getInteractionState(_ref) {
   var _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,

package/dist/cjs/{custom-theme-button → old-button/custom-theme-button}/theme.js

@@ -11,8 +11,8 @@ exports.getSpecifiers = getSpecifiers;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _components = require("@atlaskit/theme/components");
 var _css = require("../shared/css");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var stateToSelectorMap = {
   focus: '&:focus',
   focusSelected: '&:focus',

package/dist/cjs/{shared → old-button/shared}/button-base.js

@@ -84,7 +84,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     _props$spacing = props.spacing,
     spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
     _props$tabIndex = props.tabIndex,
-    tabIndex = _props$tabIndex === void 0 ? !props.component && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0 : _props$tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
     _props$type = props.type,
     type = _props$type === void 0 ? !href ? 'button' : undefined : _props$type,
     testId = props.testId,
@@ -117,7 +117,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.9.3",
+    packageVersion: "16.10.0",
     analyticsData: analyticsContext
   });
 

package/dist/cjs/{shared → old-button/shared}/css.js

@@ -13,8 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = _interopRequireDefault(require("./colors"));
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gridSize = (0, _constants.gridSize)();
 var fontSize = (0, _constants.fontSize)();
 

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});