@atlaskit/button 16.9.3 → 16.10.0

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

@@ -0,0 +1,120 @@
+import * as colors from '@atlaskit/theme/colors';
+const 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, ${colors.N20A})`,
+      hover: 'color.background.neutral.hovered',
+      active: 'color.background.neutral.pressed',
+      // @ts-expect-error
+      disabled: `var(--ds-background-disabled, ${colors.N20A})`,
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${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, ${colors.N20A})`,
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${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, ${colors.N20A})`,
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${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, ${colors.N20A})`,
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${colors.R500})`
+    },
+    link: {
+      default: 'color.background.neutral.subtle',
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${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, ${colors.N700})`
+    },
+    'subtle-link': {
+      default: 'color.background.neutral.subtle',
+      // @ts-expect-error
+      selected: `var(--ds-background-selected, ${colors.N700})`
+    }
+  },
+  color: {
+    default: {
+      default: 'color.text',
+      active: 'color.text',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: `var(--ds-text-selected, ${colors.N20})`
+    },
+    primary: {
+      default: 'color.text.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: `var(--ds-text-selected, ${colors.N20})`
+    },
+    warning: {
+      default: 'color.text.warning.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: `var(--ds-text-selected, ${colors.N800})`
+    },
+    danger: {
+      default: 'color.text.inverse',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: `var(--ds-text-selected, ${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, ${colors.N20})`
+    },
+    subtle: {
+      default: 'color.text',
+      active: 'color.text',
+      disabled: 'color.text.disabled',
+      // @ts-expect-error
+      selected: `var(--ds-text-selected, ${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, ${colors.N20})`
+    }
+  }
+};
+export default values;

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

@@ -0,0 +1,120 @@
+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
+ */
+const useButtonBase = ({
+  analyticsContext,
+  appearance = 'default',
+  autoFocus = false,
+  buttonType,
+  interactionName,
+  isDisabled = false,
+  isSelected = false,
+  // TODO: Separate Icon Button styling from button base
+  isIconButton = false,
+  // TODO: Separate icon slot styling from button base
+  hasIconBefore = false,
+  hasIconAfter = false,
+  children,
+  onClick: providedOnClick = noop,
+  onMouseDownCapture,
+  onMouseUpCapture,
+  onKeyDownCapture,
+  onKeyUpCapture,
+  onTouchStartCapture,
+  onTouchEndCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onClickCapture,
+  overlay,
+  ref,
+  shouldFitContainer = false,
+  spacing = 'default'
+}) => {
+  const ourRef = useRef();
+  const setRef = useCallback(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);
+  const interactionContext = useContext(InteractionContext);
+  const handleClick = useCallback((e, analyticsEvent) => {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  const onClick = usePlatformLeafEventHandler({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: 'button',
+    packageName: "@atlaskit/button",
+    packageVersion: "16.10.0",
+    analyticsData: analyticsContext,
+    actionSubject: buttonType
+  });
+  const buttonXCSS = useMemo(() => getXCSS({
+    appearance,
+    spacing,
+    isDisabled,
+    isSelected,
+    shouldFitContainer,
+    isIconButton,
+    hasOverlay: Boolean(overlay),
+    isLink: buttonType === 'link',
+    hasIconBefore,
+    hasIconAfter
+  }), [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  const isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  return {
+    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,
+      onMouseDownCapture,
+      onMouseUpCapture,
+      onKeyDownCapture,
+      onKeyUpCapture,
+      onTouchStartCapture,
+      onTouchEndCapture,
+      onPointerDownCapture,
+      onPointerUpCapture,
+      onClickCapture
+    })
+  };
+};
+export default useButtonBase;

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

@@ -0,0 +1,182 @@
+import { xcss } from '@atlaskit/primitives';
+import { fontSize as getFontSize } from '@atlaskit/theme/constants';
+import colors from './colors';
+const fontSize = getFontSize();
+const heights = {
+  default: `${32 / fontSize}em`,
+  compact: `${24 / fontSize}em`,
+  none: 'auto'
+};
+const paddingInline = {
+  default: {
+    default: 'space.150',
+    withIcon: 'space.100'
+  },
+  compact: {
+    default: 'space.150',
+    withIcon: 'space.100'
+  },
+  none: {
+    default: 'space.0',
+    withIcon: 'space.0'
+  }
+};
+const gap = {
+  compact: 'space.050',
+  default: 'space.050',
+  none: 'space.0'
+};
+const verticalAlign = {
+  default: 'middle',
+  compact: 'middle',
+  none: 'baseline'
+};
+function getColor({
+  group,
+  key
+}) {
+  return group[key] || group.default;
+}
+function getColors({
+  appearance,
+  interactionState = 'default',
+  isDisabled,
+  isSelected,
+  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;
+  // Disabled colors overrule everything else
+  key = isDisabled ? 'disabled' : key;
+  return {
+    backgroundColor: getColor({
+      group: colors.background[appearance],
+      key
+    }),
+    color: `${getColor({
+      group: colors.color[appearance],
+      key
+    })}`
+  };
+}
+export function getXCSS({
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected,
+  isIconButton,
+  shouldFitContainer,
+  isLink,
+  hasOverlay,
+  hasIconBefore,
+  hasIconAfter
+}) {
+  const baseColors = getColors({
+    appearance,
+    isSelected,
+    isDisabled
+  });
+  const combinedBaseColorStyles = isLink ? {
+    ...baseColors,
+    textDecoration: 'none',
+    // Disabling visited styles (by re-declaring the base colors)
+    ':visited': baseColors
+  } : 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'];
+  return xcss({
+    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,
+    paddingBlock: 'space.0',
+    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
+    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    columnGap: gap[spacing],
+    verticalAlign: verticalAlign[spacing],
+    width,
+    // justifyContent required for shouldFitContainer buttons with an icon inside
+    justifyContent: 'center',
+    ...combinedBaseColorStyles,
+    ...(isDisabled || hasOverlay ? {
+      cursor: 'not-allowed'
+    } : {}),
+    ':hover': {
+      ...getColors({
+        appearance,
+        isSelected,
+        isDisabled,
+        interactionState: 'hover',
+        hasOverlay
+      }),
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none',
+      // background, box-shadow
+      transitionDuration: '0s, 0.15s'
+    },
+    ':active': {
+      ...getColors({
+        appearance,
+        isSelected,
+        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'
+  });
+}
+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/{shared → old-button/shared}/button-base.js

@@ -69,10 +69,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     // Pulling out so it doesn't spread on rendered component
     shouldFitContainer,
     spacing = 'default',
-    // Don't set unnecessary tabIndex for focus if using standard <button> or <a>
-    // html elements. Set to `0` for custom components to ensure other elements can
-    // be focused (although the custom component could be a <button> or <a>...)
-    tabIndex = !props.component && getBooleanFF('platform.design-system-team.clove-sprint-a11y-button_5rz5j') ? undefined : 0,
+    tabIndex = 0,
     type = !href ? 'button' : undefined,
     testId,
     ...rest
@@ -105,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.9.3",
+    packageVersion: "16.10.0",
     analyticsData: analyticsContext
   });
 

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

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

package/dist/es2019/utils/appearances.js

@@ -0,0 +1,2 @@
+const appearances = ['default', 'primary', 'link', 'subtle', 'subtle-link', 'warning', 'danger'];
+export default appearances;

package/dist/es2019/utils/spacing.js

@@ -0,0 +1,2 @@
+const spacing = ['default', 'compact', 'none'];
+export default spacing;

package/dist/es2019/utils/variants.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @repo/internal/react/no-unsafe-spread-props */
+import React, { forwardRef } from 'react';
+import Button from '../new-button/variants/default/button';
+import LinkButton from '../new-button/variants/default/link';
+// Add required default props to variants
+const LinkButtonRender = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
+  ref: ref,
+  href: "#"
+}, props), props.children));
+export const variants = [{
+  name: 'Button',
+  Component: Button,
+  elementType: HTMLButtonElement
+}, {
+  name: 'LinkButton',
+  Component: LinkButtonRender,
+  elementType: HTMLAnchorElement
+}];
+export default variants;

package/dist/esm/entry-points/button-group.js

@@ -1 +1 @@
-export { default } from '../button-group';
+export { default } from '../containers/button-group';

package/dist/esm/entry-points/custom-theme-button.js

@@ -1 +1 @@
-export { default, Theme } from '../custom-theme-button';
+export { default, Theme } from '../old-button/custom-theme-button';

package/dist/esm/entry-points/loading-button.js

@@ -1 +1 @@
-export { default } from '../loading-button';
+export { default } from '../old-button/loading-button';

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

@@ -0,0 +1,4 @@
+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';

package/dist/esm/entry-points/standard-button.js

@@ -3,4 +3,4 @@
  * https://product-fabric.atlassian.net/browse/DSP-3222
  */
 import '@emotion/react';
-export { default } from '../button';
+export { default } from '../old-button/button';

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

@@ -0,0 +1 @@
+export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';

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

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["analyticsContext", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "iconAfter", "children", "shouldFitContainer", "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 useDefaultButton from './use-default-button';
+/**
+ * __Button__
+ *
+ * @warning __UNSAFE__ Button is not yet safe for production use.
+ *
+ * A button triggers an event or action.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+var Button = /*#__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,
+    iconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    children = _ref.children,
+    shouldFitContainer = _ref.shouldFitContainer,
+    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);
+  var baseProps = useDefaultButton({
+    analyticsContext: analyticsContext,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    buttonType: 'button',
+    children: children,
+    iconBefore: iconBefore,
+    iconAfter: iconAfter,
+    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,
+    shouldFitContainer: shouldFitContainer,
+    spacing: spacing
+  });
+  return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
+  // TODO: Remove spread props
+  , _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);
+}));
+Button.displayName = 'Button';
+export default Button;