@atlaskit/button 20.3.5 → 20.3.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/button
 
+## 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
+
+- [#178053](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178053)
+  [`cb318c8c28c26`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cb318c8c28c26) -
+  Internal changes to typography.
+
 ## 20.3.5
 
 ### 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/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.5",
+    packageVersion: "20.3.7",
     analyticsData: analyticsContext
   });
 

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

@@ -228,7 +228,7 @@ function getCss(_ref3) {
     fontStyle: 'normal',
     // Chrome recently changed button so that they use 'arial' as the font family
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     // margin for button has been applied to css reset
     maxWidth: '100%',
     // Needed to position overlay

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/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.5",
+    packageVersion: "20.3.7",
     analyticsData: analyticsContext
   });
 

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

@@ -222,7 +222,7 @@ export function getCss({
     fontStyle: 'normal',
     // Chrome recently changed button so that they use 'arial' as the font family
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     // margin for button has been applied to css reset
     maxWidth: '100%',
     // Needed to position overlay

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/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.5",
+    packageVersion: "20.3.7",
     analyticsData: analyticsContext
   });
 

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

@@ -220,7 +220,7 @@ export function getCss(_ref3) {
     fontStyle: 'normal',
     // Chrome recently changed button so that they use 'arial' as the font family
     fontFamily: 'inherit',
-    fontWeight: 500,
+    fontWeight: "var(--ds-font-weight-medium, 500)",
     // margin for button has been applied to css reset
     maxWidth: '100%',
     // Needed to position overlay

package/dist/types/entry-points/new.d.ts

@@ -3,4 +3,4 @@ export { default as LinkButton, type LinkButtonProps } from '../new-button/varia
 export { default as IconButton, type IconButtonProps } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
 export { SplitButton } from '../new-button/containers/split-button';
-export type { Appearance, Spacing } from '../new-button/variants/types';
+export type { Appearance, Spacing, IconProp, IconButtonSpacing, IconButtonAppearance, } from '../new-button/variants/types';

package/dist/types/utils/variants.d.ts

@@ -41,12 +41,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: import("../entry-points/new").IconProp | undefined;
     label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: import("../entry-points/new").IconProp | undefined;
     label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];

package/dist/types-ts4.5/entry-points/new.d.ts

@@ -3,4 +3,4 @@ export { default as LinkButton, type LinkButtonProps } from '../new-button/varia
 export { default as IconButton, type IconButtonProps } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
 export { SplitButton } from '../new-button/containers/split-button';
-export type { Appearance, Spacing } from '../new-button/variants/types';
+export type { Appearance, Spacing, IconProp, IconButtonSpacing, IconButtonAppearance, } from '../new-button/variants/types';

package/dist/types-ts4.5/utils/variants.d.ts

@@ -41,12 +41,12 @@ declare const LinkButtonRender: React.ForwardRefExoticComponent<Omit<LinkButtonP
     href?: string | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const IconButtonRender: React.ForwardRefExoticComponent<Omit<IconButtonProps, "label" | "icon"> & {
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: import("../entry-points/new").IconProp | undefined;
     label?: IconButtonProps['label'];
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const LinkIconButtonRender: React.ForwardRefExoticComponent<Omit<LinkIconButtonProps, "label" | "href" | "icon"> & {
     href?: string | undefined;
-    icon?: import("../new-button/variants/types").IconProp | undefined;
+    icon?: import("../entry-points/new").IconProp | undefined;
     label?: LinkIconButtonProps['label'];
 } & React.RefAttributes<HTMLAnchorElement>>;
 declare const variants: Variant[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "20.3.5",
+	"version": "20.3.7",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -107,7 +107,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/calendar": "^15.1.0",
+		"@atlaskit/calendar": "^16.0.0",
 		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/dropdown-menu": "^12.23.0",
 		"@atlaskit/ssr": "*",