@atlaskit/button 17.12.0 → 17.12.2

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

@@ -1,18 +1,334 @@
-import React, { Fragment, useCallback, useMemo, useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { Box, xcss } from '@atlaskit/primitives';
+import * as colors from '@atlaskit/theme/colors';
+import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
-import { getXCSS } from './xcss';
+const fontSize = getFontSize();
+const buttonStyles = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  background: `var(--ds-background-neutral, ${colors.N20A})`,
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  // @ts-expect-error
+  color: `var(--ds-text, ${colors.N500})`,
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  height: `${32 / fontSize}em`,
+  lineHeight: `${32 / fontSize}em`,
+  paddingBlock: 'space.0',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap',
+  ':visited': {
+    // @ts-expect-error
+    color: `var(--ds-text, ${colors.N500})`
+  }
+});
+const defaultInteractiveStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-hovered, #091e4214)",
+    // @ts-expect-error
+    color: `var(--ds-text, ${colors.N500})`,
+    transitionDuration: '0s, 0.15s'
+  },
+  ':active': {
+    background: `var(--ds-background-neutral-pressed, ${colors.B75})`,
+    // @ts-expect-error
+    color: `var(--ds-text, ${colors.B400})`,
+    transitionDuration: '0s, 0s'
+  }
+});
+const primaryStyles = xcss({
+  background: "var(--ds-background-brand-bold, #0052CC)",
+  // @ts-expect-error
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }
+});
+const primaryInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    background: "var(--ds-background-brand-bold-hovered, #0065FF)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    background: "var(--ds-background-brand-bold-pressed, #0747A6)"
+  }
+});
+const warningStyles = xcss({
+  background: "var(--ds-background-warning-bold, #FFAB00)",
+  // @ts-expect-error
+  color: "var(--ds-text-warning-inverse, #172B4D)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  }
+});
+const warningInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)",
+    background: "var(--ds-background-warning-bold-hovered, #FFC400)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)",
+    background: "var(--ds-background-warning-bold-pressed, #FF991F)"
+  }
+});
+const dangerStyles = xcss({
+  background: "var(--ds-background-danger-bold, #DE350B)",
+  color: 'color.text.inverse',
+  ':visited': {
+    color: 'color.text.inverse'
+  }
+});
+const dangerInteractiveStyles = xcss({
+  ':hover': {
+    color: 'color.text.inverse',
+    background: "var(--ds-background-danger-bold-hovered, #FF5630)"
+  },
+  ':active': {
+    color: 'color.text.inverse',
+    background: "var(--ds-background-danger-bold-pressed, #BF2600)"
+  }
+});
+const subtleStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  // @ts-expect-error
+  color: "var(--ds-text, #42526E)",
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  }
+});
+const subtleInteractiveStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  }
+});
+const linkStyles = xcss({
+  // @ts-expect-error
+  color: `var(--ds-link, ${colors.B400})`,
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: `var(--ds-link, ${colors.B300})`,
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-link-pressed, #0055CC)",
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':visited': {
+    // @ts-expect-error
+    color: `var(--ds-link, ${colors.B400})`
+  }
+});
+const subtleLinkStyles = xcss({
+  // @ts-expect-error
+  color: `var(--ds-text-subtle, ${colors.N200})`,
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: `var(--ds-text-subtle, ${colors.N90})`,
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: `var(--ds-text, ${colors.N400})`,
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':visited': {
+    // @ts-expect-error
+    color: `var(--ds-text-subtle, ${colors.N200})`
+  }
+});
+
+// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
+const linkDecorationUnsetStyles = xcss({
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'none'
+  },
+  ':active': {
+    textDecoration: 'none'
+  },
+  ':focus': {
+    textDecoration: 'none'
+  }
+});
+const linkDecorationStyles = xcss({
+  ':hover': {
+    textDecoration: 'underline'
+  },
+  ':focus': {
+    textDecoration: 'underline'
+  }
+});
+const disabledStyles = xcss({
+  background: `var(--ds-background-disabled, ${colors.N20A})`,
+  // @ts-expect-error
+  color: "var(--ds-text-disabled, #091E424F)",
+  ':hover': {
+    background: `var(--ds-background-disabled, ${colors.N20A})`,
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  },
+  ':active': {
+    background: `var(--ds-background-disabled, ${colors.N20A})`,
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  }
+});
+const selectedStyles = xcss({
+  background: `var(--ds-background-selected, ${colors.N700})`,
+  // @ts-expect-error
+  color: `var(--ds-text-selected, ${colors.N20})`,
+  ':visited': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`
+  }
+});
+const selectedInteractiveStyles = xcss({
+  ':hover': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected-hovered, ${colors.N700})`
+  },
+  ':active': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected-pressed, ${colors.N700})`
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+const selectedWarningStyles = xcss({
+  background: `var(--ds-background-selected, ${colors.Y400})`,
+  // @ts-expect-error
+  color: `var(--ds-text-selected, ${colors.N800})`,
+  ':hover': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected, ${colors.Y400})`
+  },
+  ':active': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected, ${colors.Y400})`
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+const selectedDangerStyles = xcss({
+  background: `var(--ds-background-selected, ${colors.R500})`,
+  // @ts-expect-error
+  color: `var(--ds-text-selected, ${colors.N20})`,
+  ':hover': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected, ${colors.R500})`
+  },
+  ':active': {
+    // @ts-expect-error
+    color: `var(--ds-text-selected, ${colors.N20})`,
+    background: `var(--ds-background-selected, ${colors.R500})`
+  }
+});
+const spacingCompactStyles = xcss({
+  columnGap: 'space.050',
+  height: `${24 / fontSize}em`,
+  lineHeight: `${24 / fontSize}em`,
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
+const spacingNoneStyles = xcss({
+  columnGap: 'space.0',
+  height: 'auto',
+  lineHeight: 'inherit',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0',
+  verticalAlign: 'baseline'
+});
+const circleStyles = xcss({
+  borderRadius: 'border.radius.circle'
+});
+const fullWidthStyles = xcss({
+  width: '100%'
+});
+const loadingOverlayStyles = xcss({
+  cursor: 'progress'
+});
+const nonInteractiveStyles = xcss({
+  cursor: 'not-allowed'
+});
+const iconButtonStyles = xcss({
+  height: `${32 / fontSize}em`,
+  width: `${32 / fontSize}em`,
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+const iconButtonCompactStyles = xcss({
+  width: `${24 / fontSize}em`,
+  height: `${24 / fontSize}em`
+});
+const buttonIconBeforeStyles = xcss({
+  paddingInlineStart: 'space.100'
+});
+const buttonIconAfterStyles = xcss({
+  paddingInlineEnd: 'space.100'
+});
+const splitButtonStyles = xcss({
+  ':focus-visible': {
+    zIndex: 'card'
+  }
+});
+const navigationSplitButtonStyles = xcss({
+  width: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  paddingInlineEnd: 'space.075',
+  paddingInlineStart: 'space.075'
+});
 const overlayStyles = xcss({
+  display: 'flex',
   position: 'absolute',
-  insetInlineStart: 'space.0',
+  alignItems: 'center',
+  justifyContent: 'center',
+  insetBlockEnd: 'space.0',
   insetBlockStart: 'space.0',
   insetInlineEnd: 'space.0',
-  insetBlockEnd: 'space.0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
+  insetInlineStart: 'space.0'
 });
 
 /**
@@ -31,7 +347,6 @@ const overlayStyles = xcss({
 const useButtonBase = ({
   appearance: propAppearance = 'default',
   autoFocus = false,
-  buttonType,
   isDisabled: propIsDisabled = false,
   isLoading = false,
   isSelected = false,
@@ -57,51 +372,24 @@ const useButtonBase = ({
   shouldFitContainer = false,
   spacing: propSpacing = 'default'
 }) => {
-  const ourRef = useRef();
+  const localRef = useRef(null);
   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) {
-      return;
-    }
-    if (typeof ref === 'function') {
-      ref(node);
-      return;
-    }
-
-    // @ts-ignore
-    ref.current = node;
-  }, [ourRef, ref]);
-  useAutoFocus(ourRef, autoFocus);
-  const buttonXCSS = useMemo(() => getXCSS({
-    appearance,
-    spacing,
-    isDisabled,
-    isLoading,
-    isSelected,
-    isHighlighted,
-    isActiveOverSelected,
-    shouldFitContainer,
-    isIconButton,
-    isCircle,
-    hasOverlay: Boolean(overlay),
-    isLink: buttonType === 'link',
-    hasIconBefore,
-    hasIconAfter,
-    isSplit: isSplitButton,
-    isNavigationSplit: isNavigationSplitButton
-  }), [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  const hasOverlay = Boolean(overlay);
+  const isInteractive = !isDisabled && !isLoading && !hasOverlay;
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  useAutoFocus(localRef, autoFocus);
   return {
-    ref: setRef,
-    xcss: buttonXCSS,
+    ref: mergeRefs([localRef, ref]),
+    xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'danger' && selectedDangerStyles,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     // Consider overlay buttons to be effectively disabled
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {

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

@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.12.0",
+    packageVersion: "17.12.2",
     analyticsData: analyticsContext
   });
 

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

@@ -1,7 +1,13 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { heights } from '../../variants/shared/xcss';
+import { fontSize as getFontSize } from '@atlaskit/theme/constants';
+var fontSize = getFontSize();
+var heights = {
+  default: "".concat(32 / fontSize, "em"),
+  compact: "".concat(24 / fontSize, "em"),
+  none: 'auto'
+};
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 var baseDividerStyles = css({