@atlaskit/button 16.17.0 → 16.17.1

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.js +16 -12
  3. package/dist/cjs/new-button/variants/shared/use-button-base.js +1 -1
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/es2019/new-button/containers/split-button/split-button.js +16 -12
  6. package/dist/es2019/new-button/variants/shared/use-button-base.js +1 -1
  7. package/dist/es2019/old-button/shared/button-base.js +1 -1
  8. package/dist/esm/new-button/containers/split-button/split-button.js +16 -12
  9. package/dist/esm/new-button/variants/shared/use-button-base.js +1 -1
  10. package/dist/esm/old-button/shared/button-base.js +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 16.17.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#42681](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42681) [`df138bd3900`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df138bd3900) - [ux] Update to divider colors and height in SplitButton (alpha)
8
+
3
9
  ## 16.17.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
7
7
  var _react = require("@emotion/react");
8
- var _constants = require("@atlaskit/theme/constants");
9
8
  var _splitButtonContext = require("./split-button-context");
10
9
  var _utils = require("./utils");
11
10
  /** @jsx jsx */
12
11
 
13
- var fontSize = (0, _constants.fontSize)();
14
- var defaultDividerHeight = 20 / fontSize + 'em';
12
+ var defaultDividerHeight = '16px';
15
13
  var defaultDividerStyles = (0, _react.css)({
16
14
  height: defaultDividerHeight,
17
15
  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
18
16
  });
19
- var compactDividerHeight = 16 / fontSize + 'em';
17
+ var compactDividerHeight = '12px';
20
18
  var compactDividerStyles = (0, _react.css)({
21
19
  height: compactDividerHeight,
22
20
  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
@@ -27,27 +25,32 @@ var baseDividerStyles = (0, _react.css)({
27
25
  position: 'relative',
28
26
  zIndex: 2
29
27
  });
30
- var disabledStyles = (0, _react.css)({
31
- backgroundColor: "var(--ds-border, #091E4224)",
28
+ var dividerDisabledStyles = (0, _react.css)({
29
+ backgroundColor: "var(--ds-text-disabled, #091E4224)",
32
30
  cursor: 'not-allowed'
33
31
  });
34
32
  var navigationDividerStyles = (0, _react.css)({
35
33
  height: compactDividerHeight,
36
34
  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
37
- backgroundColor: "var(--ds-border, #0052cc)"
35
+ backgroundColor: "var(--ds-text-subtle, #0052cc)",
36
+ opacity: 0.62
38
37
  });
39
38
  var dividerAppearance = {
40
39
  default: (0, _react.css)({
41
- backgroundColor: "var(--ds-text, #172B4D)"
40
+ backgroundColor: "var(--ds-text, #172B4D)",
41
+ opacity: 0.51
42
42
  }),
43
43
  primary: (0, _react.css)({
44
- backgroundColor: "var(--ds-text-inverse, #FFF)"
44
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
45
+ opacity: 0.64
45
46
  }),
46
47
  danger: (0, _react.css)({
47
- backgroundColor: "var(--ds-text-inverse, #FFF)"
48
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
49
+ opacity: 0.66
48
50
  }),
49
51
  warning: (0, _react.css)({
50
- backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
52
+ backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
53
+ opacity: 0.52
51
54
  }),
52
55
  navigation: navigationDividerStyles
53
56
  };
@@ -66,13 +69,14 @@ var Divider = exports.Divider = function Divider(_ref) {
66
69
  return (
67
70
  // I find it funny to provide a div for Divider
68
71
  (0, _react.jsx)("div", {
69
- css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
72
+ css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
70
73
  })
71
74
  );
72
75
  };
73
76
  var splitButtonStyles = (0, _react.css)({
74
77
  display: 'inline-flex',
75
78
  position: 'relative',
79
+ alignItems: 'center',
76
80
  whiteSpace: 'nowrap'
77
81
  });
78
82
 
package/dist/cjs/new-button/variants/shared/use-button-base.js CHANGED
@@ -115,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
115
115
  action: 'clicked',
116
116
  componentName: 'button',
117
117
  packageName: "@atlaskit/button",
118
- packageVersion: "16.17.0",
118
+ packageVersion: "16.17.1",
119
119
  analyticsData: analyticsContext,
120
120
  actionSubject: buttonType
121
121
  });
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -118,7 +118,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
118
118
  action: 'clicked',
119
119
  componentName: 'button',
120
120
  packageName: "@atlaskit/button",
121
- packageVersion: "16.17.0",
121
+ packageVersion: "16.17.1",
122
122
  analyticsData: analyticsContext
123
123
  });
124
124
 
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -1,16 +1,14 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import { fontSize as getFontSize } from '@atlaskit/theme/constants';
5
4
  import { SplitButtonContext } from './split-button-context';
6
5
  import { getActions } from './utils';
7
- const fontSize = getFontSize();
8
- const defaultDividerHeight = 20 / fontSize + 'em';
6
+ const defaultDividerHeight = '16px';
9
7
  const defaultDividerStyles = css({
10
8
  height: defaultDividerHeight,
11
9
  margin: `${"var(--ds-space-075, 6px)"} -0.5px`
12
10
  });
13
- const compactDividerHeight = 16 / fontSize + 'em';
11
+ const compactDividerHeight = '12px';
14
12
  const compactDividerStyles = css({
15
13
  height: compactDividerHeight,
16
14
  margin: `${"var(--ds-space-050, 4px)"} -0.5px`
@@ -21,27 +19,32 @@ const baseDividerStyles = css({
21
19
  position: 'relative',
22
20
  zIndex: 2
23
21
  });
24
- const disabledStyles = css({
25
- backgroundColor: "var(--ds-border, #091E4224)",
22
+ const dividerDisabledStyles = css({
23
+ backgroundColor: "var(--ds-text-disabled, #091E4224)",
26
24
  cursor: 'not-allowed'
27
25
  });
28
26
  const navigationDividerStyles = css({
29
27
  height: compactDividerHeight,
30
28
  margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
31
- backgroundColor: "var(--ds-border, #0052cc)"
29
+ backgroundColor: "var(--ds-text-subtle, #0052cc)",
30
+ opacity: 0.62
32
31
  });
33
32
  const dividerAppearance = {
34
33
  default: css({
35
- backgroundColor: "var(--ds-text, #172B4D)"
34
+ backgroundColor: "var(--ds-text, #172B4D)",
35
+ opacity: 0.51
36
36
  }),
37
37
  primary: css({
38
- backgroundColor: "var(--ds-text-inverse, #FFF)"
38
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
39
+ opacity: 0.64
39
40
  }),
40
41
  danger: css({
41
- backgroundColor: "var(--ds-text-inverse, #FFF)"
42
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
43
+ opacity: 0.66
42
44
  }),
43
45
  warning: css({
44
- backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
46
+ backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
47
+ opacity: 0.52
45
48
  }),
46
49
  navigation: navigationDividerStyles
47
50
  };
@@ -60,13 +63,14 @@ export const Divider = ({
60
63
  return (
61
64
  // I find it funny to provide a div for Divider
62
65
  jsx("div", {
63
- css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
66
+ css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
64
67
  })
65
68
  );
66
69
  };
67
70
  const splitButtonStyles = css({
68
71
  display: 'inline-flex',
69
72
  position: 'relative',
73
+ alignItems: 'center',
70
74
  whiteSpace: 'nowrap'
71
75
  });
72
76
 
package/dist/es2019/new-button/variants/shared/use-button-base.js CHANGED
@@ -97,7 +97,7 @@ const useButtonBase = ({
97
97
  action: 'clicked',
98
98
  componentName: 'button',
99
99
  packageName: "@atlaskit/button",
100
- packageVersion: "16.17.0",
100
+ packageVersion: "16.17.1",
101
101
  analyticsData: analyticsContext,
102
102
  actionSubject: buttonType
103
103
  });
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -103,7 +103,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
103
103
  action: 'clicked',
104
104
  componentName: 'button',
105
105
  packageName: "@atlaskit/button",
106
- packageVersion: "16.17.0",
106
+ packageVersion: "16.17.1",
107
107
  analyticsData: analyticsContext
108
108
  });
109
109
 
package/dist/esm/new-button/containers/split-button/split-button.js CHANGED
@@ -1,16 +1,14 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import { fontSize as getFontSize } from '@atlaskit/theme/constants';
5
4
  import { SplitButtonContext } from './split-button-context';
6
5
  import { getActions } from './utils';
7
- var fontSize = getFontSize();
8
- var defaultDividerHeight = 20 / fontSize + 'em';
6
+ var defaultDividerHeight = '16px';
9
7
  var defaultDividerStyles = css({
10
8
  height: defaultDividerHeight,
11
9
  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
12
10
  });
13
- var compactDividerHeight = 16 / fontSize + 'em';
11
+ var compactDividerHeight = '12px';
14
12
  var compactDividerStyles = css({
15
13
  height: compactDividerHeight,
16
14
  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
@@ -21,27 +19,32 @@ var baseDividerStyles = css({
21
19
  position: 'relative',
22
20
  zIndex: 2
23
21
  });
24
- var disabledStyles = css({
25
- backgroundColor: "var(--ds-border, #091E4224)",
22
+ var dividerDisabledStyles = css({
23
+ backgroundColor: "var(--ds-text-disabled, #091E4224)",
26
24
  cursor: 'not-allowed'
27
25
  });
28
26
  var navigationDividerStyles = css({
29
27
  height: compactDividerHeight,
30
28
  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
31
- backgroundColor: "var(--ds-border, #0052cc)"
29
+ backgroundColor: "var(--ds-text-subtle, #0052cc)",
30
+ opacity: 0.62
32
31
  });
33
32
  var dividerAppearance = {
34
33
  default: css({
35
- backgroundColor: "var(--ds-text, #172B4D)"
34
+ backgroundColor: "var(--ds-text, #172B4D)",
35
+ opacity: 0.51
36
36
  }),
37
37
  primary: css({
38
- backgroundColor: "var(--ds-text-inverse, #FFF)"
38
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
39
+ opacity: 0.64
39
40
  }),
40
41
  danger: css({
41
- backgroundColor: "var(--ds-text-inverse, #FFF)"
42
+ backgroundColor: "var(--ds-text-inverse, #FFF)",
43
+ opacity: 0.66
42
44
  }),
43
45
  warning: css({
44
- backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
46
+ backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
47
+ opacity: 0.52
45
48
  }),
46
49
  navigation: navigationDividerStyles
47
50
  };
@@ -60,13 +63,14 @@ export var Divider = function Divider(_ref) {
60
63
  return (
61
64
  // I find it funny to provide a div for Divider
62
65
  jsx("div", {
63
- css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
66
+ css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? dividerDisabledStyles : undefined]
64
67
  })
65
68
  );
66
69
  };
67
70
  var splitButtonStyles = css({
68
71
  display: 'inline-flex',
69
72
  position: 'relative',
73
+ alignItems: 'center',
70
74
  whiteSpace: 'nowrap'
71
75
  });
72
76
 
package/dist/esm/new-button/variants/shared/use-button-base.js CHANGED
@@ -107,7 +107,7 @@ var useButtonBase = function useButtonBase(_ref) {
107
107
  action: 'clicked',
108
108
  componentName: 'button',
109
109
  packageName: "@atlaskit/button",
110
- packageVersion: "16.17.0",
110
+ packageVersion: "16.17.1",
111
111
  analyticsData: analyticsContext,
112
112
  actionSubject: buttonType
113
113
  });
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
109
109
  action: 'clicked',
110
110
  componentName: 'button',
111
111
  packageName: "@atlaskit/button",
112
- packageVersion: "16.17.0",
112
+ packageVersion: "16.17.1",
113
113
  analyticsData: analyticsContext
114
114
  });
115
115
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "16.17.0",
3
+ "version": "16.17.1",
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/"