@atlaskit/button 20.3.6 → 20.3.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/button
 
+## 20.3.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 20.3.7
+
+### Patch Changes
+
+- [#177505](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177505)
+  [`520c68d91d401`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/520c68d91d401) -
+  Updated dividers in Visually refreshed split button to use color.border
+
 ## 20.3.6
 
 ### Patch Changes

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

@@ -1,24 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _splitButtonContext = require("./split-button-context");
 var _utils = require("./utils");
-/**
+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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var heights = {
-  default: "".concat(32 / 14, "em"),
-  compact: "".concat(24 / 14, "em")
-};
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var baseDividerStyles = (0, _react.css)({
   width: "var(--ds-border-width, 1px)",
   position: 'relative',
@@ -27,14 +23,6 @@ var baseDividerStyles = (0, _react.css)({
   // 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
-  height: heights.default
-});
-var compactDividerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: heights.compact
-});
 var dividerDisabledStyles = (0, _react.css)({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed',
@@ -60,12 +48,36 @@ var dividerAppearance = {
     opacity: 0.62
   })
 };
+var dividerRefreshedAppearance = _objectSpread(_objectSpread({}, dividerAppearance), {}, {
+  default: (0, _react.css)({
+    backgroundColor: "var(--ds-border, #091E4224)"
+  }),
+  primary: (0, _react.css)({
+    backgroundColor: "var(--ds-border-inverse, #FFF)",
+    opacity: 0.64
+  })
+});
 var dividerRefreshedOffsetStyles = (0, _react.css)({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
 });
 var dividerHeight = {
-  default: defaultDividerStyles,
-  compact: compactDividerStyles
+  default: (0, _react.css)({
+    height: "".concat(32 / 14, "em")
+  }),
+  compact: (0, _react.css)({
+    height: "".concat(24 / 14, "em")
+  })
+};
+var defaultDividerHeight = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: (0, _react.css)({
+    height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: (0, _react.css)({
+    height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
 };
 /**
  * TODO: Add JSDoc
@@ -78,7 +90,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], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/cjs/new-button/variants/shared/content.js

@@ -24,6 +24,7 @@ var iconStyles = (0, _primitives.xcss)({
   flexShrink: 0,
   alignSelf: 'center',
   fontSize: 0,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   userSelect: 'none'
 });

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

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

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

@@ -329,6 +329,7 @@ function getIconStyle(_ref4) {
     flexShrink: 0,
     alignSelf: 'center',
     fontSize: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0,
     userSelect: 'none'
   });

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

@@ -6,10 +6,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-const heights = {
-  default: `${32 / 14}em`,
-  compact: `${24 / 14}em`
-};
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 const baseDividerStyles = css({
@@ -20,14 +16,6 @@ const baseDividerStyles = css({
   // 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
-  height: heights.default
-});
-const compactDividerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: heights.compact
-});
 const dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed',
@@ -53,12 +41,37 @@ const dividerAppearance = {
     opacity: 0.62
   })
 };
+const dividerRefreshedAppearance = {
+  ...dividerAppearance,
+  default: css({
+    backgroundColor: "var(--ds-border, #091E4224)"
+  }),
+  primary: css({
+    backgroundColor: "var(--ds-border-inverse, #FFF)",
+    opacity: 0.64
+  })
+};
 const dividerRefreshedOffsetStyles = css({
   marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
 });
 const dividerHeight = {
-  default: defaultDividerStyles,
-  compact: compactDividerStyles
+  default: css({
+    height: `${32 / 14}em`
+  }),
+  compact: css({
+    height: `${24 / 14}em`
+  })
+};
+const defaultDividerHeight = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: `calc(${32 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  }),
+  compact: css({
+    height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  })
 };
 /**
  * TODO: Add JSDoc
@@ -71,7 +84,7 @@ export const Divider = ({
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

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

@@ -16,6 +16,7 @@ const iconStyles = xcss({
   flexShrink: 0,
   alignSelf: 'center',
   fontSize: 0,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   userSelect: 'none'
 });

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

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.3.6",
+    packageVersion: "20.3.8",
     analyticsData: analyticsContext
   });
 

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

@@ -347,6 +347,7 @@ export function getIconStyle({
     flexShrink: 0,
     alignSelf: 'center',
     fontSize: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0,
     userSelect: 'none'
   });

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -6,10 +9,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-var heights = {
-  default: "".concat(32 / 14, "em"),
-  compact: "".concat(24 / 14, "em")
-};
 import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 var baseDividerStyles = css({
@@ -20,14 +19,6 @@ var baseDividerStyles = css({
   // 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
-  height: heights.default
-});
-var compactDividerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: heights.compact
-});
 var dividerDisabledStyles = css({
   backgroundColor: "var(--ds-text-disabled, #091E4224)",
   cursor: 'not-allowed',
@@ -53,12 +44,36 @@ var dividerAppearance = {
     opacity: 0.62
   })
 };
+var dividerRefreshedAppearance = _objectSpread(_objectSpread({}, dividerAppearance), {}, {
+  default: css({
+    backgroundColor: "var(--ds-border, #091E4224)"
+  }),
+  primary: css({
+    backgroundColor: "var(--ds-border-inverse, #FFF)",
+    opacity: 0.64
+  })
+});
 var dividerRefreshedOffsetStyles = css({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
 });
 var dividerHeight = {
-  default: defaultDividerStyles,
-  compact: compactDividerStyles
+  default: css({
+    height: "".concat(32 / 14, "em")
+  }),
+  compact: css({
+    height: "".concat(24 / 14, "em")
+  })
+};
+var defaultDividerHeight = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: css({
+    height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
 };
 /**
  * TODO: Add JSDoc
@@ -71,7 +86,7 @@ export var Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/esm/new-button/variants/shared/content.js

@@ -17,6 +17,7 @@ var iconStyles = xcss({
   flexShrink: 0,
   alignSelf: 'center',
   fontSize: 0,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   userSelect: 'none'
 });

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

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

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

@@ -321,6 +321,7 @@ export function getIconStyle(_ref4) {
     flexShrink: 0,
     alignSelf: 'center',
     fontSize: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0,
     userSelect: 'none'
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "20.3.6",
+	"version": "20.3.8",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -87,13 +87,13 @@
 		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/focus-ring": "^2.0.0",
-		"@atlaskit/icon": "^23.1.0",
-		"@atlaskit/interaction-context": "^2.2.0",
+		"@atlaskit/icon": "^23.3.0",
+		"@atlaskit/interaction-context": "^2.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -106,12 +106,12 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/calendar": "^16.0.0",
+		"@atlaskit/app-provider": "^1.5.0",
+		"@atlaskit/calendar": "^16.1.0",
 		"@atlaskit/checkbox": "^15.2.0",
-		"@atlaskit/dropdown-menu": "^12.23.0",
+		"@atlaskit/dropdown-menu": "^12.24.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.1",
 		"@testing-library/react": "^12.1.5",