@atlaskit/button 17.12.1 → 17.12.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 17.12.2
+
+### Patch Changes
+
+- [#91492](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91492) [`0af5682714ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0af5682714ea) - Refactors internal styling logic of the new button to align to our upcoming styling standards.
+
 ## 17.12.1
 
 ### Patch Changes

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

@@ -5,11 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
 var _react = require("@emotion/react");
-var _xcss = require("../../variants/shared/xcss");
+var _constants = require("@atlaskit/theme/constants");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
 /** @jsx jsx */
 
+var fontSize = (0, _constants.fontSize)();
+var heights = {
+  default: "".concat(32 / fontSize, "em"),
+  compact: "".concat(24 / fontSize, "em"),
+  none: 'auto'
+};
 var baseDividerStyles = (0, _react.css)({
   display: 'inline-flex',
   width: '1px',
@@ -17,10 +23,10 @@ var baseDividerStyles = (0, _react.css)({
   zIndex: 2
 });
 var defaultDividerStyles = (0, _react.css)({
-  height: _xcss.heights.default
+  height: heights.default
 });
 var compactDividerStyles = (0, _react.css)({
-  height: _xcss.heights.compact
+  height: heights.compact
 });
 var dividerDisabledStyles = (0, _react.css)({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",

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

@@ -11,22 +11,337 @@ var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _primitives = require("@atlaskit/primitives");
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _constants = require("@atlaskit/theme/constants");
 var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
-var _xcss = require("./xcss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 buttonStyles = (0, _primitives.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, ".concat(colors.N20A, ")"),
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  // @ts-expect-error
+  color: "var(--ds-text, ".concat(colors.N500, ")"),
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  height: "".concat(32 / fontSize, "em"),
+  lineHeight: "".concat(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, ".concat(colors.N500, ")")
+  }
+});
+var defaultInteractiveStyles = (0, _primitives.xcss)({
+  ':hover': {
+    background: "var(--ds-background-neutral-hovered, #091e4214)",
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.N500, ")"),
+    transitionDuration: '0s, 0.15s'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.B400, ")"),
+    transitionDuration: '0s, 0s'
+  }
+});
+var primaryStyles = (0, _primitives.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)"
+  }
+});
+var primaryInteractiveStyles = (0, _primitives.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)"
+  }
+});
+var warningStyles = (0, _primitives.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)"
+  }
+});
+var warningInteractiveStyles = (0, _primitives.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)"
+  }
+});
+var dangerStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-danger-bold, #DE350B)",
+  color: 'color.text.inverse',
+  ':visited': {
+    color: 'color.text.inverse'
+  }
+});
+var dangerInteractiveStyles = (0, _primitives.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)"
+  }
+});
+var subtleStyles = (0, _primitives.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)"
+  }
+});
+var subtleInteractiveStyles = (0, _primitives.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)"
+  }
+});
+var linkStyles = (0, _primitives.xcss)({
+  // @ts-expect-error
+  color: "var(--ds-link, ".concat(colors.B400, ")"),
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-link, ".concat(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, ".concat(colors.B400, ")")
+  }
+});
+var subtleLinkStyles = (0, _primitives.xcss)({
+  // @ts-expect-error
+  color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  textDecoration: 'none',
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text, ".concat(colors.N400, ")"),
+    background: "var(--ds-background-neutral-subtle, transparent)"
+  },
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
+  }
+});
+
+// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
+var linkDecorationUnsetStyles = (0, _primitives.xcss)({
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'none'
+  },
+  ':active': {
+    textDecoration: 'none'
+  },
+  ':focus': {
+    textDecoration: 'none'
+  }
+});
+var linkDecorationStyles = (0, _primitives.xcss)({
+  ':hover': {
+    textDecoration: 'underline'
+  },
+  ':focus': {
+    textDecoration: 'underline'
+  }
+});
+var disabledStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-disabled, #091E424F)",
+  ':hover': {
+    background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  },
+  ':active': {
+    background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
+    // @ts-expect-error
+    color: "var(--ds-text-disabled, #091E424F)"
+  }
+});
+var selectedStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-selected, ".concat(colors.N700, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+  ':visited': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  }
+});
+var selectedInteractiveStyles = (0, _primitives.xcss)({
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+var selectedWarningStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N800, ")"),
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+  }
+});
+
+// TODO: Remove me once we kill color fallbacks
+var selectedDangerStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-selected, ".concat(colors.R500, ")"),
+  // @ts-expect-error
+  color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.R500, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
+    background: "var(--ds-background-selected, ".concat(colors.R500, ")")
+  }
+});
+var spacingCompactStyles = (0, _primitives.xcss)({
+  columnGap: 'space.050',
+  height: "".concat(24 / fontSize, "em"),
+  lineHeight: "".concat(24 / fontSize, "em"),
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
+var spacingNoneStyles = (0, _primitives.xcss)({
+  columnGap: 'space.0',
+  height: 'auto',
+  lineHeight: 'inherit',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0',
+  verticalAlign: 'baseline'
+});
+var circleStyles = (0, _primitives.xcss)({
+  borderRadius: 'border.radius.circle'
+});
+var fullWidthStyles = (0, _primitives.xcss)({
+  width: '100%'
+});
+var loadingOverlayStyles = (0, _primitives.xcss)({
+  cursor: 'progress'
+});
+var nonInteractiveStyles = (0, _primitives.xcss)({
+  cursor: 'not-allowed'
+});
+var iconButtonStyles = (0, _primitives.xcss)({
+  height: "".concat(32 / fontSize, "em"),
+  width: "".concat(32 / fontSize, "em"),
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+var iconButtonCompactStyles = (0, _primitives.xcss)({
+  width: "".concat(24 / fontSize, "em"),
+  height: "".concat(24 / fontSize, "em")
+});
+var buttonIconBeforeStyles = (0, _primitives.xcss)({
+  paddingInlineStart: 'space.100'
+});
+var buttonIconAfterStyles = (0, _primitives.xcss)({
+  paddingInlineEnd: 'space.100'
+});
+var splitButtonStyles = (0, _primitives.xcss)({
+  ':focus-visible': {
+    zIndex: 'card'
+  }
+});
+var navigationSplitButtonStyles = (0, _primitives.xcss)({
+  width: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  paddingInlineEnd: 'space.075',
+  paddingInlineStart: 'space.075'
+});
 var overlayStyles = (0, _primitives.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'
 });
 
 /**
@@ -47,7 +362,6 @@ var useButtonBase = function useButtonBase(_ref) {
     propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -86,33 +400,17 @@ var useButtonBase = function useButtonBase(_ref) {
   var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  var isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
-  var isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
-  (0, _useAutoFocus.default)(localRef, autoFocus);
-  var buttonXCSS = (0, _react.useMemo)(function () {
-    return (0, _xcss.getXCSS)({
-      appearance: appearance,
-      spacing: spacing,
-      isDisabled: isDisabled,
-      isLoading: isLoading,
-      isSelected: isSelected,
-      isHighlighted: isHighlighted,
-      isActiveOverSelected: isActiveOverSelected,
-      shouldFitContainer: shouldFitContainer,
-      isIconButton: isIconButton,
-      isCircle: isCircle,
-      hasOverlay: Boolean(overlay),
-      isLink: buttonType === 'link',
-      hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter,
-      isSplit: isSplitButton,
-      isNavigationSplit: isNavigationSplitButton
-    });
-  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  var hasOverlay = Boolean(overlay);
+  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: buttonXCSS,
+    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.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {

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

@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.12.1",
+    packageVersion: "17.12.2",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/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';
+const fontSize = getFontSize();
+const heights = {
+  default: `${32 / fontSize}em`,
+  compact: `${24 / fontSize}em`,
+  none: 'auto'
+};
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 const baseDividerStyles = css({