@atlaskit/button 16.17.2 → 16.17.3
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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +9 -20
- package/dist/cjs/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.js +9 -20
- package/dist/es2019/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.js +9 -20
- package/dist/esm/new-button/variants/shared/use-button-base.js +1 -1
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/containers/split-button/types.d.ts +1 -1
- package/dist/types-ts4.5/new-button/containers/split-button/types.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 16.17.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#43714](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43714) [`d4c4a73a30a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4c4a73a30a) - [ux] Updates supported SplitButton (closed beta) appearances to be 'default' or 'primary'. Makes dividers full height to match existing uses outside of navigation contexts.
|
|
8
|
+
|
|
3
9
|
## 16.17.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -5,32 +5,29 @@ 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 _xcss = require("../../variants/shared/xcss");
|
|
8
9
|
var _splitButtonContext = require("./split-button-context");
|
|
9
10
|
var _utils = require("./utils");
|
|
10
11
|
/** @jsx jsx */
|
|
11
12
|
|
|
12
|
-
var defaultDividerHeight = '16px';
|
|
13
|
-
var defaultDividerStyles = (0, _react.css)({
|
|
14
|
-
height: defaultDividerHeight,
|
|
15
|
-
margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
|
|
16
|
-
});
|
|
17
|
-
var compactDividerHeight = '12px';
|
|
18
|
-
var compactDividerStyles = (0, _react.css)({
|
|
19
|
-
height: compactDividerHeight,
|
|
20
|
-
margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
|
|
21
|
-
});
|
|
22
13
|
var baseDividerStyles = (0, _react.css)({
|
|
23
14
|
display: 'inline-flex',
|
|
24
15
|
width: '1px',
|
|
25
16
|
position: 'relative',
|
|
26
17
|
zIndex: 2
|
|
27
18
|
});
|
|
19
|
+
var defaultDividerStyles = (0, _react.css)({
|
|
20
|
+
height: _xcss.heights.default
|
|
21
|
+
});
|
|
22
|
+
var compactDividerStyles = (0, _react.css)({
|
|
23
|
+
height: _xcss.heights.compact
|
|
24
|
+
});
|
|
28
25
|
var dividerDisabledStyles = (0, _react.css)({
|
|
29
26
|
backgroundColor: "var(--ds-text-disabled, #091E4224)",
|
|
30
27
|
cursor: 'not-allowed'
|
|
31
28
|
});
|
|
32
29
|
var navigationDividerStyles = (0, _react.css)({
|
|
33
|
-
height:
|
|
30
|
+
height: '16px',
|
|
34
31
|
margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
|
|
35
32
|
backgroundColor: "var(--ds-text-subtle, #0052cc)",
|
|
36
33
|
opacity: 0.62
|
|
@@ -44,14 +41,6 @@ var dividerAppearance = {
|
|
|
44
41
|
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
45
42
|
opacity: 0.64
|
|
46
43
|
}),
|
|
47
|
-
danger: (0, _react.css)({
|
|
48
|
-
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
49
|
-
opacity: 0.66
|
|
50
|
-
}),
|
|
51
|
-
warning: (0, _react.css)({
|
|
52
|
-
backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
|
|
53
|
-
opacity: 0.52
|
|
54
|
-
}),
|
|
55
44
|
navigation: navigationDividerStyles
|
|
56
45
|
};
|
|
57
46
|
var dividerHeight = {
|
|
@@ -69,7 +58,7 @@ var Divider = exports.Divider = function Divider(_ref) {
|
|
|
69
58
|
return (
|
|
70
59
|
// I find it funny to provide a div for Divider
|
|
71
60
|
(0, _react.jsx)("div", {
|
|
72
|
-
css: [baseDividerStyles,
|
|
61
|
+
css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
|
|
73
62
|
})
|
|
74
63
|
);
|
|
75
64
|
};
|
|
@@ -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.
|
|
118
|
+
packageVersion: "16.17.3",
|
|
119
119
|
analyticsData: analyticsContext,
|
|
120
120
|
actionSubject: buttonType
|
|
121
121
|
});
|
|
@@ -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.
|
|
121
|
+
packageVersion: "16.17.3",
|
|
122
122
|
analyticsData: analyticsContext
|
|
123
123
|
});
|
|
124
124
|
|
|
@@ -1,30 +1,27 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
|
|
3
3
|
import { css, jsx } from '@emotion/react';
|
|
4
|
+
import { heights } from '../../variants/shared/xcss';
|
|
4
5
|
import { SplitButtonContext } from './split-button-context';
|
|
5
6
|
import { getActions } from './utils';
|
|
6
|
-
const defaultDividerHeight = '16px';
|
|
7
|
-
const defaultDividerStyles = css({
|
|
8
|
-
height: defaultDividerHeight,
|
|
9
|
-
margin: `${"var(--ds-space-075, 6px)"} -0.5px`
|
|
10
|
-
});
|
|
11
|
-
const compactDividerHeight = '12px';
|
|
12
|
-
const compactDividerStyles = css({
|
|
13
|
-
height: compactDividerHeight,
|
|
14
|
-
margin: `${"var(--ds-space-050, 4px)"} -0.5px`
|
|
15
|
-
});
|
|
16
7
|
const baseDividerStyles = css({
|
|
17
8
|
display: 'inline-flex',
|
|
18
9
|
width: '1px',
|
|
19
10
|
position: 'relative',
|
|
20
11
|
zIndex: 2
|
|
21
12
|
});
|
|
13
|
+
const defaultDividerStyles = css({
|
|
14
|
+
height: heights.default
|
|
15
|
+
});
|
|
16
|
+
const compactDividerStyles = css({
|
|
17
|
+
height: heights.compact
|
|
18
|
+
});
|
|
22
19
|
const dividerDisabledStyles = css({
|
|
23
20
|
backgroundColor: "var(--ds-text-disabled, #091E4224)",
|
|
24
21
|
cursor: 'not-allowed'
|
|
25
22
|
});
|
|
26
23
|
const navigationDividerStyles = css({
|
|
27
|
-
height:
|
|
24
|
+
height: '16px',
|
|
28
25
|
margin: `${"var(--ds-space-100, 8px)"} -0.5px`,
|
|
29
26
|
backgroundColor: "var(--ds-text-subtle, #0052cc)",
|
|
30
27
|
opacity: 0.62
|
|
@@ -38,14 +35,6 @@ const dividerAppearance = {
|
|
|
38
35
|
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
39
36
|
opacity: 0.64
|
|
40
37
|
}),
|
|
41
|
-
danger: css({
|
|
42
|
-
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
43
|
-
opacity: 0.66
|
|
44
|
-
}),
|
|
45
|
-
warning: css({
|
|
46
|
-
backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
|
|
47
|
-
opacity: 0.52
|
|
48
|
-
}),
|
|
49
38
|
navigation: navigationDividerStyles
|
|
50
39
|
};
|
|
51
40
|
const dividerHeight = {
|
|
@@ -63,7 +52,7 @@ export const Divider = ({
|
|
|
63
52
|
return (
|
|
64
53
|
// I find it funny to provide a div for Divider
|
|
65
54
|
jsx("div", {
|
|
66
|
-
css: [baseDividerStyles,
|
|
55
|
+
css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
|
|
67
56
|
})
|
|
68
57
|
);
|
|
69
58
|
};
|
|
@@ -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.
|
|
106
|
+
packageVersion: "16.17.3",
|
|
107
107
|
analyticsData: analyticsContext
|
|
108
108
|
});
|
|
109
109
|
|
|
@@ -1,30 +1,27 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
|
|
3
3
|
import { css, jsx } from '@emotion/react';
|
|
4
|
+
import { heights } from '../../variants/shared/xcss';
|
|
4
5
|
import { SplitButtonContext } from './split-button-context';
|
|
5
6
|
import { getActions } from './utils';
|
|
6
|
-
var defaultDividerHeight = '16px';
|
|
7
|
-
var defaultDividerStyles = css({
|
|
8
|
-
height: defaultDividerHeight,
|
|
9
|
-
margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
|
|
10
|
-
});
|
|
11
|
-
var compactDividerHeight = '12px';
|
|
12
|
-
var compactDividerStyles = css({
|
|
13
|
-
height: compactDividerHeight,
|
|
14
|
-
margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
|
|
15
|
-
});
|
|
16
7
|
var baseDividerStyles = css({
|
|
17
8
|
display: 'inline-flex',
|
|
18
9
|
width: '1px',
|
|
19
10
|
position: 'relative',
|
|
20
11
|
zIndex: 2
|
|
21
12
|
});
|
|
13
|
+
var defaultDividerStyles = css({
|
|
14
|
+
height: heights.default
|
|
15
|
+
});
|
|
16
|
+
var compactDividerStyles = css({
|
|
17
|
+
height: heights.compact
|
|
18
|
+
});
|
|
22
19
|
var dividerDisabledStyles = css({
|
|
23
20
|
backgroundColor: "var(--ds-text-disabled, #091E4224)",
|
|
24
21
|
cursor: 'not-allowed'
|
|
25
22
|
});
|
|
26
23
|
var navigationDividerStyles = css({
|
|
27
|
-
height:
|
|
24
|
+
height: '16px',
|
|
28
25
|
margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
|
|
29
26
|
backgroundColor: "var(--ds-text-subtle, #0052cc)",
|
|
30
27
|
opacity: 0.62
|
|
@@ -38,14 +35,6 @@ var dividerAppearance = {
|
|
|
38
35
|
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
39
36
|
opacity: 0.64
|
|
40
37
|
}),
|
|
41
|
-
danger: css({
|
|
42
|
-
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
43
|
-
opacity: 0.66
|
|
44
|
-
}),
|
|
45
|
-
warning: css({
|
|
46
|
-
backgroundColor: "var(--ds-text-warning-inverse, #172B4D)",
|
|
47
|
-
opacity: 0.52
|
|
48
|
-
}),
|
|
49
38
|
navigation: navigationDividerStyles
|
|
50
39
|
};
|
|
51
40
|
var dividerHeight = {
|
|
@@ -63,7 +52,7 @@ export var Divider = function Divider(_ref) {
|
|
|
63
52
|
return (
|
|
64
53
|
// I find it funny to provide a div for Divider
|
|
65
54
|
jsx("div", {
|
|
66
|
-
css: [baseDividerStyles,
|
|
55
|
+
css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
|
|
67
56
|
})
|
|
68
57
|
);
|
|
69
58
|
};
|
|
@@ -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.
|
|
110
|
+
packageVersion: "16.17.3",
|
|
111
111
|
analyticsData: analyticsContext,
|
|
112
112
|
actionSubject: buttonType
|
|
113
113
|
});
|
|
@@ -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.
|
|
112
|
+
packageVersion: "16.17.3",
|
|
113
113
|
analyticsData: analyticsContext
|
|
114
114
|
});
|
|
115
115
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Appearance, Spacing } from '../../variants/types';
|
|
2
|
-
export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'
|
|
2
|
+
export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
|
|
3
3
|
export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
|
|
4
4
|
export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Appearance, Spacing } from '../../variants/types';
|
|
2
|
-
export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'
|
|
2
|
+
export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary'>;
|
|
3
3
|
export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
|
|
4
4
|
export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;
|
package/package.json
CHANGED