@atlaskit/button 18.1.0 → 18.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/button
 
+## 18.2.0
+
+### Minor Changes
+
+- [#117552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117552)
+  [`89ed46b28e349`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89ed46b28e349) -
+  [ux] Updates the old-button component behind a feature flag with new visual changes as per the
+  JIRA visual refresh project.
+
+### Patch Changes
+
+- [#117552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117552)
+  [`6eabeed917202`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6eabeed917202) -
+  Fix dividers being under selected button when the new visual appearance feature gate is enabled.
+
 ## 18.1.0
 
 ### Minor Changes

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

@@ -21,10 +21,12 @@ var heights = {
   none: 'auto'
 };
 var baseDividerStyles = (0, _react.css)({
-  display: 'inline-flex',
   width: "var(--ds-border-width, 1px)",
   position: 'relative',
-  zIndex: 2
+  // This is 1 so it appears above buttons by default.
+  // When buttons are selected they have a zIndex of 2 applied.
+  // See use-button-base.tsx.
+  zIndex: 1
 });
 var defaultDividerStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -36,13 +38,12 @@ var compactDividerStyles = (0, _react.css)({
 });
 var dividerDisabledStyles = (0, _react.css)({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
-  cursor: 'not-allowed'
+  cursor: 'not-allowed',
+  opacity: 0.51
 });
-var navigationDividerStyles = (0, _react.css)({
-  height: '16px',
-  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
-  backgroundColor: "var(--ds-text-subtle, #0052cc)",
-  opacity: 0.62
+var dividerDisabledRefreshedStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-border-disabled, #091E4224)",
+  cursor: 'not-allowed'
 });
 var dividerAppearance = {
   default: (0, _react.css)({
@@ -53,7 +54,12 @@ var dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  navigation: navigationDividerStyles
+  navigation: (0, _react.css)({
+    height: '16px',
+    margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+    backgroundColor: "var(--ds-text-subtle, #0052cc)",
+    opacity: 0.62
+  })
 };
 var dividerRefreshedOffsetStyles = (0, _react.css)({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
@@ -73,7 +79,7 @@ var Divider = exports.Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     (0, _react.jsx)("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -110,9 +116,11 @@ var defaultAppearanceContainerStyles = (0, _react.css)({
  */
 var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
   var appearance = _ref2.appearance,
-    children = _ref2.children;
+    children = _ref2.children,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
   return (0, _react.jsx)("div", {
-    css: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
+    css: [appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -137,7 +145,8 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
     PrimaryAction = _getActions.PrimaryAction,
     SecondaryAction = _getActions.SecondaryAction;
   return (0, _react.jsx)(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
@@ -167,7 +176,8 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
   return (0, _react.jsx)(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
     value: {
       appearance: appearance,

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

@@ -339,6 +339,12 @@ var selectedRefreshedStyles = (0, _primitives.xcss)({
     color: 'color.text.selected'
   }
 });
+var selectedInsideSplitButtonStyles = (0, _primitives.xcss)({
+  // This is 2 so it appears above the split button divider when selected.
+  // See split-button.tsx.
+  // @ts-expect-error — We need a local zindex just for button.
+  zIndex: 2
+});
 var selectedInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     // @ts-expect-error
@@ -553,7 +559,7 @@ var useButtonBase = function useButtonBase(_ref) {
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
-  var appearance = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var appearance = isDefaultAppearanceSplitButton && (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? 'subtle' : (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 isInteractive = !isDisabled && !isLoading;
@@ -563,13 +569,13 @@ var useButtonBase = function useButtonBase(_ref) {
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [(0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, 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,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, isLoading ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "span",

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

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

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

@@ -11,11 +11,13 @@ exports.getIconStyle = getIconStyle;
 exports.overlayCss = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var gridSize = (0, _constants.gridSize)();
+var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
 
 // ## Button layout
 //
@@ -61,6 +63,108 @@ var innerMargin = {
   content: "0 ".concat(gridSize / 4, "px"),
   icon: "0 ".concat(gridSize / 4, "px")
 };
+var defaultAfterStyles = {
+  borderRadius: 'inherit',
+  inset: "var(--ds-space-0, 0px)",
+  borderStyle: 'solid',
+  borderWidth: "var(--ds-border-width, 1px)",
+  pointerEvents: 'none',
+  position: 'absolute'
+};
+var defaultStyles = {
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text, #172B4D)",
+  '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
+    content: '""',
+    borderColor: "var(--ds-border, #091E4224)"
+  }),
+  '&:hover': {
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
+  }
+};
+var primaryStyles = {
+  background: "var(--ds-background-brand-bold, #0C66E4)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+  },
+  '&:active': {
+    background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  }
+};
+var linkStyles = {
+  background: 'transparent',
+  color: "var(--ds-link, #0C66E4)",
+  '&:hover': {
+    color: "var(--ds-link, #0C66E4)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, #0055CC)",
+    textDecoration: 'underline'
+  }
+};
+var subtleStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  }
+};
+var subtleLinkStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: 'transparent',
+    color: "var(--ds-text-subtle, #44546F)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    background: 'transparent',
+    color: "var(--ds-text, #172B4D)",
+    textDecoration: 'underline'
+  }
+};
+var warningStyles = {
+  background: "var(--ds-background-warning-bold, #F5CD47)",
+  color: "var(--ds-text-warning-inverse, #172B4D)",
+  '&:hover': {
+    background: "var(--ds-background-warning-bold-hovered, #E2B203)"
+  },
+  '&:active': {
+    background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  }
+};
+var dangerStyles = {
+  background: "var(--ds-background-danger-bold, #C9372C)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
+  },
+  '&:active': {
+    background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  }
+};
+var selectedStyles = {
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: "var(--ds-text-selected, #0C66E4)",
+  '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
+    content: '""',
+    borderColor: "var(--ds-border-selected, #0C66E4)"
+  })
+};
+var hasOverlayStyles = {
+  '&[data-has-overlay="true"]': {
+    cursor: 'default',
+    textDecoration: 'none'
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key,
@@ -98,7 +202,7 @@ function getCss(_ref3) {
     key: isSelected ? 'selected' : 'default',
     mode: mode
   });
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
@@ -118,7 +222,7 @@ function getCss(_ref3) {
     textDecoration: 'none',
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap'
-  }, baseColors), {}, {
+  }, !(0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && baseColors), {}, {
     cursor: 'pointer',
     height: heights[spacing],
     lineHeight: lineHeights[spacing],
@@ -126,10 +230,8 @@ function getCss(_ref3) {
     verticalAlign: verticalAlign[spacing],
     width: shouldFitContainer ? '100%' : 'auto',
     // justifyContent required for shouldFitContainer buttons with an icon inside
-    justifyContent: 'center',
-    // Note: we cannot disable pointer events when there is an overlay.
-    // That would be easy for styling, but it would start letting events through on disabled buttons
-
+    justifyContent: 'center'
+  }, !(0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && _objectSpread(_objectSpread({
     // Disabling visited styles (just using the base colors)
     '&:visited': _objectSpread({}, baseColors),
     '&:hover': _objectSpread(_objectSpread({}, getColors({
@@ -170,17 +272,33 @@ function getCss(_ref3) {
     })), {}, {
       cursor: 'not-allowed',
       textDecoration: 'none'
-    }),
-    '&[data-has-overlay="true"]': {
-      cursor: 'default',
-      textDecoration: 'none'
-    },
+    })
+  }, hasOverlayStyles), {}, {
     // disabling hover and active color changes when there is an overlay, but the button is not disabled
     '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': _objectSpread({}, getColors({
       appearance: appearance,
       key: isSelected ? 'selected' : 'default',
       mode: mode
-    })),
+    }))
+  })), (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
+    '&[disabled]': {
+      color: "var(--ds-text-disabled, #091E424F)",
+      backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
+      cursor: 'not-allowed',
+      textDecoration: 'none',
+      '&:hovered': {
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+      },
+      '&:active': {
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+      }
+    }
+  }, hasOverlayStyles), {}, {
+    // disabling hover and active color changes when there is an overlay, but the button is not disabled
+    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
+      background: 'inherit'
+    }
+  }))), {}, {
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,

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

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 const heights = {
   default: `${32 / 14}em`,
   compact: `${24 / 14}em`,
@@ -14,10 +14,12 @@ const heights = {
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 const baseDividerStyles = css({
-  display: 'inline-flex',
   width: "var(--ds-border-width, 1px)",
   position: 'relative',
-  zIndex: 2
+  // This is 1 so it appears above buttons by default.
+  // When buttons are selected they have a zIndex of 2 applied.
+  // See use-button-base.tsx.
+  zIndex: 1
 });
 const defaultDividerStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -29,13 +31,12 @@ const compactDividerStyles = css({
 });
 const dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
-  cursor: 'not-allowed'
+  cursor: 'not-allowed',
+  opacity: 0.51
 });
-const navigationDividerStyles = css({
-  height: '16px',
-  margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
-  backgroundColor: "var(--ds-text-subtle, #0052cc)",
-  opacity: 0.62
+const dividerDisabledRefreshedStyles = css({
+  backgroundColor: "var(--ds-border-disabled, #091E4224)",
+  cursor: 'not-allowed'
 });
 const dividerAppearance = {
   default: css({
@@ -46,7 +47,12 @@ const dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  navigation: navigationDividerStyles
+  navigation: css({
+    height: '16px',
+    margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
+    backgroundColor: "var(--ds-text-subtle, #0052cc)",
+    opacity: 0.62
+  })
 };
 const dividerRefreshedOffsetStyles = css({
   marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
@@ -66,7 +72,7 @@ export const Divider = ({
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -103,10 +109,11 @@ const defaultAppearanceContainerStyles = css({
  */
 export const SplitButtonContainer = ({
   appearance,
-  children
+  children,
+  isDisabled = false
 }) => {
   return jsx("div", {
-    css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
+    css: [appearance === 'default' && !isDisabled && fg('platform.design-system-team.component-visual-refresh_t8zbo') && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -130,7 +137,8 @@ export const SplitButton = ({
     SecondaryAction
   } = getActions(children);
   return jsx(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance,
@@ -158,7 +166,8 @@ export const SplitButtonWithSlots = ({
   isDisabled = false
 }) => {
   return jsx(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance,

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

@@ -2,7 +2,7 @@ import React, { Fragment, useRef } from 'react';
 import { uid } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -326,6 +326,12 @@ const selectedRefreshedStyles = xcss({
     color: 'color.text.selected'
   }
 });
+const selectedInsideSplitButtonStyles = xcss({
+  // This is 2 so it appears above the split button divider when selected.
+  // See split-button.tsx.
+  // @ts-expect-error — We need a local zindex just for button.
+  zIndex: 2
+});
 const selectedInteractiveStyles = xcss({
   ':hover': {
     // @ts-expect-error
@@ -532,7 +538,7 @@ const useButtonBase = ({
   const isSplitButton = Boolean(splitButtonContext);
   const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
-  const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  const appearance = isDefaultAppearanceSplitButton && fg('platform.design-system-team.component-visual-refresh_t8zbo') ? 'subtle' : (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 isInteractive = !isDisabled && !isLoading;
@@ -542,13 +548,13 @@ const useButtonBase = ({
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, 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,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && fg('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
       as: "span",

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

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

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

@@ -1,10 +1,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import {
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 const gridSize = getGridSize();
+const HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
 
 // ## Button layout
 //
@@ -50,6 +52,110 @@ const innerMargin = {
   content: `0 ${gridSize / 4}px`,
   icon: `0 ${gridSize / 4}px`
 };
+const defaultAfterStyles = {
+  borderRadius: 'inherit',
+  inset: "var(--ds-space-0, 0px)",
+  borderStyle: 'solid',
+  borderWidth: "var(--ds-border-width, 1px)",
+  pointerEvents: 'none',
+  position: 'absolute'
+};
+const defaultStyles = {
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text, #172B4D)",
+  '&:not([disabled])::after': {
+    ...defaultAfterStyles,
+    content: '""',
+    borderColor: "var(--ds-border, #091E4224)"
+  },
+  '&:hover': {
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
+  }
+};
+const primaryStyles = {
+  background: "var(--ds-background-brand-bold, #0C66E4)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+  },
+  '&:active': {
+    background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  }
+};
+const linkStyles = {
+  background: 'transparent',
+  color: "var(--ds-link, #0C66E4)",
+  '&:hover': {
+    color: "var(--ds-link, #0C66E4)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, #0055CC)",
+    textDecoration: 'underline'
+  }
+};
+const subtleStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  }
+};
+const subtleLinkStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: 'transparent',
+    color: "var(--ds-text-subtle, #44546F)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    background: 'transparent',
+    color: "var(--ds-text, #172B4D)",
+    textDecoration: 'underline'
+  }
+};
+const warningStyles = {
+  background: "var(--ds-background-warning-bold, #F5CD47)",
+  color: "var(--ds-text-warning-inverse, #172B4D)",
+  '&:hover': {
+    background: "var(--ds-background-warning-bold-hovered, #E2B203)"
+  },
+  '&:active': {
+    background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  }
+};
+const dangerStyles = {
+  background: "var(--ds-background-danger-bold, #C9372C)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
+  },
+  '&:active': {
+    background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  }
+};
+const selectedStyles = {
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: "var(--ds-text-selected, #0C66E4)",
+  '&:not([disabled])::after': {
+    ...defaultAfterStyles,
+    content: '""',
+    borderColor: "var(--ds-border-selected, #0C66E4)"
+  }
+};
+const hasOverlayStyles = {
+  '&[data-has-overlay="true"]': {
+    cursor: 'default',
+    textDecoration: 'none'
+  }
+};
 function getColor({
   group,
   key,
@@ -111,7 +217,7 @@ export function getCss({
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap',
     // dynamic styles
-    ...baseColors,
+    ...(!fg('platform.design-system-team.component-visual-refresh_t8zbo') && baseColors),
     cursor: 'pointer',
     height: heights[spacing],
     lineHeight: lineHeights[spacing],
@@ -123,66 +229,92 @@ export function getCss({
     // Note: we cannot disable pointer events when there is an overlay.
     // That would be easy for styling, but it would start letting events through on disabled buttons
 
-    // Disabling visited styles (just using the base colors)
-    '&:visited': {
-      ...baseColors
-    },
-    '&:hover': {
-      ...getColors({
-        appearance,
-        key: isSelected ? 'selected' : 'hover',
-        mode
-      }),
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'inherit',
-      // background, box-shadow
-      transitionDuration: '0s, 0.15s'
-    },
-    // giving active styles preference by listing them after focus
-    '&:active': {
-      ...getColors({
-        appearance,
-        key: isSelected ? 'selected' : 'active',
-        mode
-      }),
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    },
-    // preventDefault prevents regular active styles from applying in Firefox
-    '&[data-firefox-is-active="true"]': {
-      ...getColors({
-        appearance,
-        key: isSelected ? 'selected' : 'active',
-        mode
-      }),
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    },
-    // Giving disabled styles preference over active by listing them after.
-    // Not using '&:disabled' because :disabled is not a valid state for all element types
-    // so we are targeting the attribute
-    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
-    '&[disabled]': {
-      // always using 'disabled' even when selected
-      ...getColors({
-        appearance,
-        key: 'disabled',
-        mode
-      }),
-      cursor: 'not-allowed',
-      textDecoration: 'none'
-    },
-    '&[data-has-overlay="true"]': {
-      cursor: 'default',
-      textDecoration: 'none'
-    },
-    // disabling hover and active color changes when there is an overlay, but the button is not disabled
-    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
-      ...getColors({
-        appearance,
-        key: isSelected ? 'selected' : 'default',
-        mode
-      })
-    },
+    ...(!fg('platform.design-system-team.component-visual-refresh_t8zbo') && {
+      // Disabling visited styles (just using the base colors)
+      '&:visited': {
+        ...baseColors
+      },
+      '&:hover': {
+        ...getColors({
+          appearance,
+          key: isSelected ? 'selected' : 'hover',
+          mode
+        }),
+        textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'inherit',
+        // background, box-shadow
+        transitionDuration: '0s, 0.15s'
+      },
+      // giving active styles preference by listing them after focus
+      '&:active': {
+        ...getColors({
+          appearance,
+          key: isSelected ? 'selected' : 'active',
+          mode
+        }),
+        // background, box-shadow
+        transitionDuration: '0s, 0s'
+      },
+      // preventDefault prevents regular active styles from applying in Firefox
+      '&[data-firefox-is-active="true"]': {
+        ...getColors({
+          appearance,
+          key: isSelected ? 'selected' : 'active',
+          mode
+        }),
+        // background, box-shadow
+        transitionDuration: '0s, 0s'
+      },
+      // Giving disabled styles preference over active by listing them after.
+      // Not using '&:disabled' because :disabled is not a valid state for all element types
+      // so we are targeting the attribute
+      // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
+      '&[disabled]': {
+        // always using 'disabled' even when selected
+        ...getColors({
+          appearance,
+          key: 'disabled',
+          mode
+        }),
+        cursor: 'not-allowed',
+        textDecoration: 'none'
+      },
+      ...hasOverlayStyles,
+      // disabling hover and active color changes when there is an overlay, but the button is not disabled
+      '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
+        ...getColors({
+          appearance,
+          key: isSelected ? 'selected' : 'default',
+          mode
+        })
+      }
+    }),
+    // dynamic colours for visual refresh:
+    ...(fg('platform.design-system-team.component-visual-refresh_t8zbo') && (isSelected ? selectedStyles : {
+      ...(appearance === 'default' && defaultStyles),
+      ...(appearance === 'primary' && primaryStyles),
+      ...(appearance === 'link' && linkStyles),
+      ...(appearance === 'subtle' && subtleStyles),
+      ...(appearance === 'subtle-link' && subtleLinkStyles),
+      ...(appearance === 'warning' && warningStyles),
+      ...(appearance === 'danger' && dangerStyles),
+      '&[disabled]': {
+        color: "var(--ds-text-disabled, #091E424F)",
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
+        cursor: 'not-allowed',
+        textDecoration: 'none',
+        '&:hovered': {
+          backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+        },
+        '&:active': {
+          backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+        }
+      },
+      ...hasOverlayStyles,
+      // disabling hover and active color changes when there is an overlay, but the button is not disabled
+      '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
+        background: 'inherit'
+      }
+    })),
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,

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

@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 var heights = {
   default: "".concat(32 / 14, "em"),
   compact: "".concat(24 / 14, "em"),
@@ -14,10 +14,12 @@ var heights = {
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 var baseDividerStyles = css({
-  display: 'inline-flex',
   width: "var(--ds-border-width, 1px)",
   position: 'relative',
-  zIndex: 2
+  // This is 1 so it appears above buttons by default.
+  // When buttons are selected they have a zIndex of 2 applied.
+  // See use-button-base.tsx.
+  zIndex: 1
 });
 var defaultDividerStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -29,13 +31,12 @@ var compactDividerStyles = css({
 });
 var dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
-  cursor: 'not-allowed'
+  cursor: 'not-allowed',
+  opacity: 0.51
 });
-var navigationDividerStyles = css({
-  height: '16px',
-  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
-  backgroundColor: "var(--ds-text-subtle, #0052cc)",
-  opacity: 0.62
+var dividerDisabledRefreshedStyles = css({
+  backgroundColor: "var(--ds-border-disabled, #091E4224)",
+  cursor: 'not-allowed'
 });
 var dividerAppearance = {
   default: css({
@@ -46,7 +47,12 @@ var dividerAppearance = {
     backgroundColor: "var(--ds-text-inverse, #FFF)",
     opacity: 0.64
   }),
-  navigation: navigationDividerStyles
+  navigation: css({
+    height: '16px',
+    margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+    backgroundColor: "var(--ds-text-subtle, #0052cc)",
+    opacity: 0.62
+  })
 };
 var dividerRefreshedOffsetStyles = css({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
@@ -66,7 +72,7 @@ export var Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -103,9 +109,11 @@ var defaultAppearanceContainerStyles = css({
  */
 export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
   var appearance = _ref2.appearance,
-    children = _ref2.children;
+    children = _ref2.children,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
   return jsx("div", {
-    css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
+    css: [appearance === 'default' && !isDisabled && fg('platform.design-system-team.component-visual-refresh_t8zbo') && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -130,7 +138,8 @@ export var SplitButton = function SplitButton(_ref3) {
     PrimaryAction = _getActions.PrimaryAction,
     SecondaryAction = _getActions.SecondaryAction;
   return jsx(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
@@ -160,7 +169,8 @@ export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
   return jsx(SplitButtonContainer, {
-    appearance: appearance
+    appearance: appearance,
+    isDisabled: isDisabled
   }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance: appearance,

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

@@ -5,7 +5,7 @@ import React, { Fragment, useRef } from 'react';
 import { uid } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -329,6 +329,12 @@ var selectedRefreshedStyles = xcss({
     color: 'color.text.selected'
   }
 });
+var selectedInsideSplitButtonStyles = xcss({
+  // This is 2 so it appears above the split button divider when selected.
+  // See split-button.tsx.
+  // @ts-expect-error — We need a local zindex just for button.
+  zIndex: 2
+});
 var selectedInteractiveStyles = xcss({
   ':hover': {
     // @ts-expect-error
@@ -543,7 +549,7 @@ var useButtonBase = function useButtonBase(_ref) {
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
-  var appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var appearance = isDefaultAppearanceSplitButton && fg('platform.design-system-team.component-visual-refresh_t8zbo') ? 'subtle' : (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 isInteractive = !isDisabled && !isLoading;
@@ -553,13 +559,13 @@ var useButtonBase = function useButtonBase(_ref) {
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, 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,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && fg('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
       as: "span",

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

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

package/dist/esm/old-button/shared/css.js

@@ -3,11 +3,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import {
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var gridSize = getGridSize();
+var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
 
 // ## Button layout
 //
@@ -53,6 +55,108 @@ var innerMargin = {
   content: "0 ".concat(gridSize / 4, "px"),
   icon: "0 ".concat(gridSize / 4, "px")
 };
+var defaultAfterStyles = {
+  borderRadius: 'inherit',
+  inset: "var(--ds-space-0, 0px)",
+  borderStyle: 'solid',
+  borderWidth: "var(--ds-border-width, 1px)",
+  pointerEvents: 'none',
+  position: 'absolute'
+};
+var defaultStyles = {
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: "var(--ds-text, #172B4D)",
+  '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
+    content: '""',
+    borderColor: "var(--ds-border, #091E4224)"
+  }),
+  '&:hover': {
+    background: "var(--ds-background-neutral-hovered, #091E4224)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-pressed, #091E424F)"
+  }
+};
+var primaryStyles = {
+  background: "var(--ds-background-brand-bold, #0C66E4)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-brand-bold-hovered, #0055CC)"
+  },
+  '&:active': {
+    background: "var(--ds-background-brand-bold-pressed, #09326C)"
+  }
+};
+var linkStyles = {
+  background: 'transparent',
+  color: "var(--ds-link, #0C66E4)",
+  '&:hover': {
+    color: "var(--ds-link, #0C66E4)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, #0055CC)",
+    textDecoration: 'underline'
+  }
+};
+var subtleStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  },
+  '&:active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  }
+};
+var subtleLinkStyles = {
+  background: 'transparent',
+  color: "var(--ds-text-subtle, #44546F)",
+  '&:hover': {
+    background: 'transparent',
+    color: "var(--ds-text-subtle, #44546F)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    background: 'transparent',
+    color: "var(--ds-text, #172B4D)",
+    textDecoration: 'underline'
+  }
+};
+var warningStyles = {
+  background: "var(--ds-background-warning-bold, #F5CD47)",
+  color: "var(--ds-text-warning-inverse, #172B4D)",
+  '&:hover': {
+    background: "var(--ds-background-warning-bold-hovered, #E2B203)"
+  },
+  '&:active': {
+    background: "var(--ds-background-warning-bold-pressed, #CF9F02)"
+  }
+};
+var dangerStyles = {
+  background: "var(--ds-background-danger-bold, #C9372C)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  '&:hover': {
+    background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
+  },
+  '&:active': {
+    background: "var(--ds-background-danger-bold-pressed, #5D1F1A)"
+  }
+};
+var selectedStyles = {
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: "var(--ds-text-selected, #0C66E4)",
+  '&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
+    content: '""',
+    borderColor: "var(--ds-border-selected, #0C66E4)"
+  })
+};
+var hasOverlayStyles = {
+  '&[data-has-overlay="true"]': {
+    cursor: 'default',
+    textDecoration: 'none'
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key,
@@ -90,7 +194,7 @@ export function getCss(_ref3) {
     key: isSelected ? 'selected' : 'default',
     mode: mode
   });
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     // 0px margin added to css-reset
     alignItems: 'baseline',
     borderWidth: 0,
@@ -110,7 +214,7 @@ export function getCss(_ref3) {
     textDecoration: 'none',
     transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
     whiteSpace: 'nowrap'
-  }, baseColors), {}, {
+  }, !fg('platform.design-system-team.component-visual-refresh_t8zbo') && baseColors), {}, {
     cursor: 'pointer',
     height: heights[spacing],
     lineHeight: lineHeights[spacing],
@@ -118,10 +222,8 @@ export function getCss(_ref3) {
     verticalAlign: verticalAlign[spacing],
     width: shouldFitContainer ? '100%' : 'auto',
     // justifyContent required for shouldFitContainer buttons with an icon inside
-    justifyContent: 'center',
-    // Note: we cannot disable pointer events when there is an overlay.
-    // That would be easy for styling, but it would start letting events through on disabled buttons
-
+    justifyContent: 'center'
+  }, !fg('platform.design-system-team.component-visual-refresh_t8zbo') && _objectSpread(_objectSpread({
     // Disabling visited styles (just using the base colors)
     '&:visited': _objectSpread({}, baseColors),
     '&:hover': _objectSpread(_objectSpread({}, getColors({
@@ -162,17 +264,33 @@ export function getCss(_ref3) {
     })), {}, {
       cursor: 'not-allowed',
       textDecoration: 'none'
-    }),
-    '&[data-has-overlay="true"]': {
-      cursor: 'default',
-      textDecoration: 'none'
-    },
+    })
+  }, hasOverlayStyles), {}, {
     // disabling hover and active color changes when there is an overlay, but the button is not disabled
     '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': _objectSpread({}, getColors({
       appearance: appearance,
       key: isSelected ? 'selected' : 'default',
       mode: mode
-    })),
+    }))
+  })), fg('platform.design-system-team.component-visual-refresh_t8zbo') && (isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
+    '&[disabled]': {
+      color: "var(--ds-text-disabled, #091E424F)",
+      backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent',
+      cursor: 'not-allowed',
+      textDecoration: 'none',
+      '&:hovered': {
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+      },
+      '&:active': {
+        backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #091E4208)" : 'transparent'
+      }
+    }
+  }, hasOverlayStyles), {}, {
+    // disabling hover and active color changes when there is an overlay, but the button is not disabled
+    '&[data-has-overlay="true"]:not([disabled]):hover, &[data-has-overlay="true"]:not([disabled]):active': {
+      background: 'inherit'
+    }
+  }))), {}, {
     '&::-moz-focus-inner': {
       border: 0,
       margin: 0,

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -17,9 +17,10 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
 /**
  * TODO: Add JSdoc
  */
-export declare const SplitButtonContainer: ({ appearance, children, }: {
+export declare const SplitButtonContainer: ({ appearance, children, isDisabled, }: {
     appearance: SplitButtonAppearance;
     children: ReactNode;
+    isDisabled?: boolean | undefined;
 }) => jsx.JSX.Element;
 /**
  * __Split Button__

package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts

@@ -17,9 +17,10 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
 /**
  * TODO: Add JSdoc
  */
-export declare const SplitButtonContainer: ({ appearance, children, }: {
+export declare const SplitButtonContainer: ({ appearance, children, isDisabled, }: {
     appearance: SplitButtonAppearance;
     children: ReactNode;
+    isDisabled?: boolean | undefined;
 }) => jsx.JSX.Element;
 /**
  * __Split Button__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "18.1.0",
+	"version": "18.2.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -155,7 +155,7 @@
 		"@atlaskit/app-provider": "^1.3.0",
 		"@atlaskit/calendar": "^14.3.0",
 		"@atlaskit/checkbox": "^13.5.0",
-		"@atlaskit/dropdown-menu": "^12.12.0",
+		"@atlaskit/dropdown-menu": "^12.14.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.2.0",
 		"@atlaskit/visual-regression": "*",