@atlaskit/button 20.3.6 → 20.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.js +32 -20
  3. package/dist/cjs/old-button/shared/button-base.js +1 -1
  4. package/dist/es2019/new-button/containers/split-button/split-button.js +28 -15
  5. package/dist/es2019/old-button/shared/button-base.js +1 -1
  6. package/dist/esm/new-button/containers/split-button/split-button.js +30 -15
  7. package/dist/esm/old-button/shared/button-base.js +1 -1
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 20.3.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#177505](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177505)
8
+ [`520c68d91d401`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/520c68d91d401) -
9
+ Updated dividers in Visually refreshed split button to use color.border
10
+
3
11
  ## 20.3.6
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -1,24 +1,20 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
7
9
  var _react = require("@emotion/react");
8
10
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
11
  var _splitButtonContext = require("./split-button-context");
10
12
  var _utils = require("./utils");
11
- /**
13
+ 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; }
14
+ 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; } /**
12
15
  * @jsxRuntime classic
13
16
  * @jsx jsx
14
- */
15
-
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
-
18
- var heights = {
19
- default: "".concat(32 / 14, "em"),
20
- compact: "".concat(24 / 14, "em")
21
- };
17
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
22
18
  var baseDividerStyles = (0, _react.css)({
23
19
  width: "var(--ds-border-width, 1px)",
24
20
  position: 'relative',
@@ -27,14 +23,6 @@ var baseDividerStyles = (0, _react.css)({
27
23
  // See use-button-base.tsx.
28
24
  zIndex: 1
29
25
  });
30
- var defaultDividerStyles = (0, _react.css)({
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
32
- height: heights.default
33
- });
34
- var compactDividerStyles = (0, _react.css)({
35
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
36
- height: heights.compact
37
- });
38
26
  var dividerDisabledStyles = (0, _react.css)({
39
27
  backgroundColor: "var(--ds-text-disabled, #091E4224)",
40
28
  cursor: 'not-allowed',
@@ -60,12 +48,36 @@ var dividerAppearance = {
60
48
  opacity: 0.62
61
49
  })
62
50
  };
51
+ var dividerRefreshedAppearance = _objectSpread(_objectSpread({}, dividerAppearance), {}, {
52
+ default: (0, _react.css)({
53
+ backgroundColor: "var(--ds-border, #091E4224)"
54
+ }),
55
+ primary: (0, _react.css)({
56
+ backgroundColor: "var(--ds-border-inverse, #FFF)",
57
+ opacity: 0.64
58
+ })
59
+ });
63
60
  var dividerRefreshedOffsetStyles = (0, _react.css)({
64
61
  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
65
62
  });
66
63
  var dividerHeight = {
67
- default: defaultDividerStyles,
68
- compact: compactDividerStyles
64
+ default: (0, _react.css)({
65
+ height: "".concat(32 / 14, "em")
66
+ }),
67
+ compact: (0, _react.css)({
68
+ height: "".concat(24 / 14, "em")
69
+ })
70
+ };
71
+ var defaultDividerHeight = {
72
+ // The divider height is calculated by subtracting twice the border width from the button height.
73
+ // This ensures the divider does not intersect with the button's border, avoiding visual issues
74
+ // caused by overlapping alpha colors (color.border) at the intersection.
75
+ default: (0, _react.css)({
76
+ height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
77
+ }),
78
+ compact: (0, _react.css)({
79
+ height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
80
+ })
69
81
  };
70
82
  /**
71
83
  * TODO: Add JSDoc
@@ -78,7 +90,7 @@ var Divider = exports.Divider = function Divider(_ref) {
78
90
  return (
79
91
  // I find it funny to provide a div for Divider
80
92
  (0, _react.jsx)("div", {
81
- 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]
93
+ 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]
82
94
  })
83
95
  );
84
96
  };
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
133
133
  action: 'clicked',
134
134
  componentName: 'button',
135
135
  packageName: "@atlaskit/button",
136
- packageVersion: "20.3.6",
136
+ packageVersion: "20.3.7",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -6,10 +6,6 @@
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
- const heights = {
10
- default: `${32 / 14}em`,
11
- compact: `${24 / 14}em`
12
- };
13
9
  import { SplitButtonContext } from './split-button-context';
14
10
  import { getActions } from './utils';
15
11
  const baseDividerStyles = css({
@@ -20,14 +16,6 @@ const baseDividerStyles = css({
20
16
  // See use-button-base.tsx.
21
17
  zIndex: 1
22
18
  });
23
- const defaultDividerStyles = css({
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
25
- height: heights.default
26
- });
27
- const compactDividerStyles = css({
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
- height: heights.compact
30
- });
31
19
  const dividerDisabledStyles = css({
32
20
  backgroundColor: "var(--ds-text-disabled, #091E4224)",
33
21
  cursor: 'not-allowed',
@@ -53,12 +41,37 @@ const dividerAppearance = {
53
41
  opacity: 0.62
54
42
  })
55
43
  };
44
+ const dividerRefreshedAppearance = {
45
+ ...dividerAppearance,
46
+ default: css({
47
+ backgroundColor: "var(--ds-border, #091E4224)"
48
+ }),
49
+ primary: css({
50
+ backgroundColor: "var(--ds-border-inverse, #FFF)",
51
+ opacity: 0.64
52
+ })
53
+ };
56
54
  const dividerRefreshedOffsetStyles = css({
57
55
  marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
58
56
  });
59
57
  const dividerHeight = {
60
- default: defaultDividerStyles,
61
- compact: compactDividerStyles
58
+ default: css({
59
+ height: `${32 / 14}em`
60
+ }),
61
+ compact: css({
62
+ height: `${24 / 14}em`
63
+ })
64
+ };
65
+ const defaultDividerHeight = {
66
+ // The divider height is calculated by subtracting twice the border width from the button height.
67
+ // This ensures the divider does not intersect with the button's border, avoiding visual issues
68
+ // caused by overlapping alpha colors (color.border) at the intersection.
69
+ default: css({
70
+ height: `calc(${32 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
71
+ }),
72
+ compact: css({
73
+ height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
74
+ })
62
75
  };
63
76
  /**
64
77
  * TODO: Add JSDoc
@@ -71,7 +84,7 @@ export const Divider = ({
71
84
  return (
72
85
  // I find it funny to provide a div for Divider
73
86
  jsx("div", {
74
- css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
87
+ 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]
75
88
  })
76
89
  );
77
90
  };
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
119
119
  action: 'clicked',
120
120
  componentName: 'button',
121
121
  packageName: "@atlaskit/button",
122
- packageVersion: "20.3.6",
122
+ packageVersion: "20.3.7",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
package/dist/esm/new-button/containers/split-button/split-button.js CHANGED
@@ -1,3 +1,6 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ 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; }
3
+ 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; }
1
4
  /**
2
5
  * @jsxRuntime classic
3
6
  * @jsx jsx
@@ -6,10 +9,6 @@
6
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
10
  import { css, jsx } from '@emotion/react';
8
11
  import { fg } from '@atlaskit/platform-feature-flags';
9
- var heights = {
10
- default: "".concat(32 / 14, "em"),
11
- compact: "".concat(24 / 14, "em")
12
- };
13
12
  import { SplitButtonContext } from './split-button-context';
14
13
  import { getActions } from './utils';
15
14
  var baseDividerStyles = css({
@@ -20,14 +19,6 @@ var baseDividerStyles = css({
20
19
  // See use-button-base.tsx.
21
20
  zIndex: 1
22
21
  });
23
- var defaultDividerStyles = css({
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
25
- height: heights.default
26
- });
27
- var compactDividerStyles = css({
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
- height: heights.compact
30
- });
31
22
  var dividerDisabledStyles = css({
32
23
  backgroundColor: "var(--ds-text-disabled, #091E4224)",
33
24
  cursor: 'not-allowed',
@@ -53,12 +44,36 @@ var dividerAppearance = {
53
44
  opacity: 0.62
54
45
  })
55
46
  };
47
+ var dividerRefreshedAppearance = _objectSpread(_objectSpread({}, dividerAppearance), {}, {
48
+ default: css({
49
+ backgroundColor: "var(--ds-border, #091E4224)"
50
+ }),
51
+ primary: css({
52
+ backgroundColor: "var(--ds-border-inverse, #FFF)",
53
+ opacity: 0.64
54
+ })
55
+ });
56
56
  var dividerRefreshedOffsetStyles = css({
57
57
  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
58
58
  });
59
59
  var dividerHeight = {
60
- default: defaultDividerStyles,
61
- compact: compactDividerStyles
60
+ default: css({
61
+ height: "".concat(32 / 14, "em")
62
+ }),
63
+ compact: css({
64
+ height: "".concat(24 / 14, "em")
65
+ })
66
+ };
67
+ var defaultDividerHeight = {
68
+ // The divider height is calculated by subtracting twice the border width from the button height.
69
+ // This ensures the divider does not intersect with the button's border, avoiding visual issues
70
+ // caused by overlapping alpha colors (color.border) at the intersection.
71
+ default: css({
72
+ height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
73
+ }),
74
+ compact: css({
75
+ height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
76
+ })
62
77
  };
63
78
  /**
64
79
  * TODO: Add JSDoc
@@ -71,7 +86,7 @@ export var Divider = function Divider(_ref) {
71
86
  return (
72
87
  // I find it funny to provide a div for Divider
73
88
  jsx("div", {
74
- css: [baseDividerStyles, dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && dividerAppearance[appearance], fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
89
+ 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]
75
90
  })
76
91
  );
77
92
  };
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
125
125
  action: 'clicked',
126
126
  componentName: 'button',
127
127
  packageName: "@atlaskit/button",
128
- packageVersion: "20.3.6",
128
+ packageVersion: "20.3.7",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "20.3.6",
3
+ "version": "20.3.7",
4
4
  "description": "A button triggers an event or action. They let users know what will happen next.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"