@atlaskit/button 16.9.3 → 16.9.4

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

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+import React from 'react';
+import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
+import useIconButton from './use-icon-button';
+/**
+ * __Icon Button__
+ *
+ * TODO: Description
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    icon = _ref.icon,
+    children = _ref.children,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    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,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
+   * buttons. It's currently duplicated and mostly the same.
+   */
+  var baseProps = useIconButton({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'button',
+    children: children,
+    icon: icon,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    spacing: spacing
+  });
+  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
+    ref: baseProps.ref,
+    xcss: baseProps.xcss,
+    isDisabled: baseProps.isDisabled,
+    onClick: baseProps.onClick,
+    onMouseDownCapture: baseProps.onMouseDownCapture,
+    onMouseUpCapture: baseProps.onMouseUpCapture,
+    onKeyDownCapture: baseProps.onKeyDownCapture,
+    onKeyUpCapture: baseProps.onKeyUpCapture,
+    onTouchStartCapture: baseProps.onTouchStartCapture,
+    onTouchEndCapture: baseProps.onTouchEndCapture,
+    onPointerDownCapture: baseProps.onPointerDownCapture,
+    onPointerUpCapture: baseProps.onPointerUpCapture,
+    onClickCapture: baseProps.onClickCapture,
+    type: type,
+    testId: testId
+  }), baseProps.children);
+}));
+IconButton.displayName = 'IconButton';
+export default IconButton;

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

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "children", "interactionName", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "testId", "href"];
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import useIconButton from './use-icon-button';
+/**
+ * __Link Button__
+ *
+ * A link button renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var LinkIconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function LinkIconButton(_ref, ref) {
+  var analyticsContext = _ref.analyticsContext,
+    autoFocus = _ref.autoFocus,
+    appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
+    icon = _ref.icon,
+    children = _ref.children,
+    interactionName = _ref.interactionName,
+    overlay = _ref.overlay,
+    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,
+    testId = _ref.testId,
+    href = _ref.href,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var baseProps = useIconButton({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'link',
+    children: children,
+    icon: icon,
+    interactionName: interactionName,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
+    overlay: overlay,
+    ref: ref,
+    spacing: spacing
+  });
+  return (
+    /*#__PURE__*/
+    // TODO: Allow custom components for routing (with context)
+    // https://product-fabric.atlassian.net/browse/DSP-12505
+    React.createElement(Box, _extends({}, rest, {
+      ref: baseProps.ref,
+      xcss: baseProps.xcss,
+      onClick: baseProps.onClick,
+      onMouseDownCapture: baseProps.onMouseDownCapture,
+      onMouseUpCapture: baseProps.onMouseUpCapture,
+      onKeyDownCapture: baseProps.onKeyDownCapture,
+      onKeyUpCapture: baseProps.onKeyUpCapture,
+      onTouchStartCapture: baseProps.onTouchStartCapture,
+      onTouchEndCapture: baseProps.onTouchEndCapture,
+      onPointerDownCapture: baseProps.onPointerDownCapture,
+      onPointerUpCapture: baseProps.onPointerUpCapture,
+      onClickCapture: baseProps.onClickCapture,
+      as: "a",
+      testId: testId
+      /**
+       * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+       * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+       */,
+      href: baseProps.isDisabled ? undefined : href,
+      role: baseProps.isDisabled ? 'link' : undefined,
+      "aria-disabled": baseProps.isDisabled === true ? true : undefined
+    }), baseProps.children)
+  );
+}));
+LinkIconButton.displayName = 'LinkIconButton';
+export default LinkIconButton;

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

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

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Box } from '@atlaskit/primitives';
+import useButtonBase from '../shared/use-button-base';
+import { getFadingStyles, iconStyles } from '../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 = getFadingStyles({
+    hasOverlay: Boolean(overlay)
+  });
+  var baseProps = useButtonBase({
+    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.createElement(Box, {
+      as: "span",
+      xcss: [fadeStyles, 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;
+};
+export default useIconButton;

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

@@ -0,0 +1,27 @@
+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);
+}
+export default 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/esm/new-button/variants/shared/colors.js

@@ -0,0 +1,120 @@
+import * as colors from '@atlaskit/theme/colors';
+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, ")")
+    }
+  }
+};
+export default values;

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

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React, { Fragment, useCallback, useContext, useMemo, useRef } from 'react';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+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 blockEvents from './block-events';
+import { getXCSS, overlayStyles } from './xcss';
+
+// 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 : _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 = useRef();
+  var setRef = useCallback(function (node) {
+    ourRef.current = node;
+    if (ref === null) {
+      return;
+    }
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    }
+
+    // @ts-ignore
+    ref.current = node;
+  }, [ourRef, ref]);
+  useAutoFocus(ourRef, autoFocus);
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var onClick = usePlatformLeafEventHandler({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.9.4",
+    analyticsData: analyticsContext,
+    actionSubject: buttonType
+  });
+  var buttonXCSS = useMemo(function () {
+    return 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.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: overlayStyles
+    }, overlay) : null)
+  }, blockEvents(isEffectivelyDisabled, {
+    onClick: onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture
+  }));
+};
+export default useButtonBase;