@atlaskit/button 17.20.0 → 17.22.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/button
 
+## 17.22.0
+
+### Minor Changes
+
+- [`5081c9ca53507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5081c9ca53507) -
+  Correctly handle render props for icons in order to prevent unintentional renders.
+
+## 17.21.0
+
+### Minor Changes
+
+- [#112202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112202)
+  [`60baf23d5f27d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/60baf23d5f27d) -
+  Testing a new visual appearance behind a feature flag. If successful it'll be released at a later
+  date.
+
 ## 17.20.0
 
 ### Minor Changes

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
@@ -23,7 +24,7 @@ var heights = {
 };
 var baseDividerStyles = (0, _react.css)({
   display: 'inline-flex',
-  width: '1px',
+  width: "var(--ds-border-width, 1px)",
   position: 'relative',
   zIndex: 2
 });
@@ -56,6 +57,9 @@ var dividerAppearance = {
   }),
   navigation: navigationDividerStyles
 };
+var dividerRefreshedOffsetStyles = (0, _react.css)({
+  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
+});
 var dividerHeight = {
   default: defaultDividerStyles,
   compact: compactDividerStyles
@@ -71,7 +75,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]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -95,13 +99,22 @@ var secondaryButtonStyles = (0, _react.css)({
     borderStartStartRadius: 0
   }
 });
+var defaultAppearanceContainerStyles = (0, _react.css)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  outlineColor: "var(--ds-border, #091E4224)",
+  outlineOffset: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")"),
+  outlineStyle: 'solid',
+  outlineWidth: "var(--ds-border-width, 1px)"
+});
+
 /**
  * TODO: Add JSdoc
  */
 var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
-  var children = _ref2.children;
+  var appearance = _ref2.appearance,
+    children = _ref2.children;
   return (0, _react.jsx)("div", {
-    css: splitButtonStyles
+    css: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -125,7 +138,9 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
   var _getActions = (0, _utils.getActions)(children),
     PrimaryAction = _getActions.PrimaryAction,
     SecondaryAction = _getActions.SecondaryAction;
-  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+  return (0, _react.jsx)(SplitButtonContainer, {
+    appearance: appearance
+  }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
       spacing: spacing,
@@ -153,7 +168,9 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
     spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
-  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+  return (0, _react.jsx)(SplitButtonContainer, {
+    appearance: appearance
+  }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
       spacing: spacing,

package/dist/cjs/new-button/variants/default/use-default-button.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 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); }
@@ -29,8 +30,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
-    IconAfter = _ref.iconAfter,
-    IconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    iconBefore = _ref.iconBefore,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -61,24 +62,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
-    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, IconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/_react.default.createElement(_content.default, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
+    }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -104,8 +103,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
 var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
@@ -26,7 +27,7 @@ var useIconButton = function useIconButton(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    Icon = _ref.icon,
+    icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
@@ -61,10 +62,9 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/_react.default.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

package/dist/cjs/new-button/variants/shared/icon-renderer.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon,
+    size = _ref.size;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/_react.default.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+var _default = exports.default = IconRenderer;

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

@@ -33,27 +33,25 @@ var buttonStyles = (0, _primitives.xcss)({
   alignItems: 'baseline',
   justifyContent: 'center',
   columnGap: 'space.050',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
-  // @ts-expect-error
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text, ".concat(colors.N500, ")"),
   flexShrink: 0,
   height: "".concat(32 / fontSize, "em"),
   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)',
+  transition: 'background 0.1s ease-out',
   verticalAlign: 'middle',
-  ':visited': {
-    // @ts-expect-error
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: "var(--ds-text, ".concat(colors.N500, ")")
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
   }
 });
-var baseButtonStyles = (0, _primitives.xcss)({
+var hardCodedButtonStyles = (0, _primitives.xcss)({
   fontFamily: 'inherit',
   fontSize: 'inherit',
   fontStyle: 'normal',
@@ -71,16 +69,46 @@ var defaultInteractiveStyles = (0, _primitives.xcss)({
     background: "var(--ds-background-neutral-hovered, #091e4214)",
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: "var(--ds-text, ".concat(colors.N500, ")"),
-    transitionDuration: '0s, 0.15s'
+    color: "var(--ds-text, ".concat(colors.N500, ")")
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    color: "var(--ds-text, ".concat(colors.B400, ")"),
-    transitionDuration: '0s, 0s'
+    color: "var(--ds-text, ".concat(colors.B400, ")")
+  }
+});
+var defaultInteractiveRefreshedStyles = (0, _primitives.xcss)({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
+    color: 'color.text.subtle'
+  }
+});
+var defaultStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
+  // @ts-expect-error — using tokens for explicit fallback usage.
+  color: "var(--ds-text, ".concat(colors.N500, ")"),
+  ':visited': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  }
+});
+var defaultRefreshedStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: 'color.text.subtle',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border'
+  },
+  ':visited': {
+    color: 'color.text.subtle'
   }
 });
 var primaryStyles = (0, _primitives.xcss)({
@@ -168,6 +196,13 @@ var subtleStyles = (0, _primitives.xcss)({
     color: "var(--ds-text, #42526E)"
   }
 });
+var subtleRefreshedStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  color: 'color.text.subtle',
+  ':visited': {
+    color: 'color.text.subtle'
+  }
+});
 var subtleInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -180,6 +215,16 @@ var subtleInteractiveStyles = (0, _primitives.xcss)({
     color: "var(--ds-text, #42526E)"
   }
 });
+var subtleInteractiveRefreshedStyles = (0, _primitives.xcss)({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+    color: 'color.text.subtle'
+  }
+});
 var linkStyles = (0, _primitives.xcss)({
   // @ts-expect-error
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -265,6 +310,9 @@ var disabledStyles = (0, _primitives.xcss)({
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
+  },
+  '::after': {
+    content: 'none'
   }
 });
 var selectedStyles = (0, _primitives.xcss)({
@@ -279,6 +327,17 @@ var selectedStyles = (0, _primitives.xcss)({
     color: "var(--ds-text-selected, ".concat(colors.N20, ")")
   }
 });
+var selectedRefreshedStyles = (0, _primitives.xcss)({
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: 'color.text.selected',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border.selected'
+  },
+  ':visited': {
+    color: 'color.text.selected'
+  }
+});
 var selectedInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     // @ts-expect-error
@@ -458,7 +517,7 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
     isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
     _ref$isCircle = _ref.isCircle,
@@ -495,16 +554,18 @@ var useButtonBase = function useButtonBase(_ref) {
   });
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
-  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  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 spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
   var hasOverlay = Boolean(overlay);
   var isInteractive = !isDisabled && !isLoading && !hasOverlay;
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  var isSelected = propIsSelected && !isDisabled;
   (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 : baseButtonStyles, 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 === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, 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,
+    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,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks

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: "17.20.0",
+    packageVersion: "17.22.0",
     analyticsData: analyticsContext
   });
 

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

@@ -5,6 +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 { fontSize as getFontSize } from '@atlaskit/theme/constants';
 const fontSize = getFontSize();
 const heights = {
@@ -16,7 +17,7 @@ import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 const baseDividerStyles = css({
   display: 'inline-flex',
-  width: '1px',
+  width: "var(--ds-border-width, 1px)",
   position: 'relative',
   zIndex: 2
 });
@@ -49,6 +50,9 @@ const dividerAppearance = {
   }),
   navigation: navigationDividerStyles
 };
+const dividerRefreshedOffsetStyles = css({
+  marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
+});
 const dividerHeight = {
   default: defaultDividerStyles,
   compact: compactDividerStyles
@@ -64,7 +68,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]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -88,14 +92,23 @@ const secondaryButtonStyles = css({
     borderStartStartRadius: 0
   }
 });
+const defaultAppearanceContainerStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  outlineColor: "var(--ds-border, #091E4224)",
+  outlineOffset: `calc(0px - ${"var(--ds-border-width, 1px)"})`,
+  outlineStyle: 'solid',
+  outlineWidth: "var(--ds-border-width, 1px)"
+});
+
 /**
  * TODO: Add JSdoc
  */
 export const SplitButtonContainer = ({
+  appearance,
   children
 }) => {
   return jsx("div", {
-    css: splitButtonStyles
+    css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -118,7 +131,9 @@ export const SplitButton = ({
     PrimaryAction,
     SecondaryAction
   } = getActions(children);
-  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+  return jsx(SplitButtonContainer, {
+    appearance: appearance
+  }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance,
       spacing,
@@ -144,7 +159,9 @@ export const SplitButtonWithSlots = ({
   spacing = 'default',
   isDisabled = false
 }) => {
-  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+  return jsx(SplitButtonContainer, {
+    appearance: appearance
+  }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance,
       spacing,

package/dist/es2019/new-button/variants/default/use-default-button.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,8 +20,8 @@ const useDefaultButton = ({
   autoFocus,
   buttonType,
   children,
-  iconAfter: IconAfter,
-  iconBefore: IconBefore,
+  iconAfter,
+  iconBefore,
   interactionName,
   isDisabled,
   isLoading = false,
@@ -51,24 +52,22 @@ const useDefaultButton = ({
     ariaLabel,
     ariaLabelledBy,
     buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName,
     isDisabled,
@@ -94,8 +93,8 @@ const useDefaultButton = ({
     ref,
     shouldFitContainer,
     spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,7 +20,7 @@ const useIconButton = ({
   ariaLabelledBy,
   autoFocus,
   buttonType,
-  icon: Icon,
+  icon,
   interactionName,
   isDisabled,
   isLoading,
@@ -55,10 +56,9 @@ const useIconButton = ({
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,

package/dist/es2019/new-button/variants/shared/icon-renderer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+const IconRenderer = ({
+  icon: Icon,
+  size
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+export default IconRenderer;