@atlaskit/button 21.1.4 → 21.1.6
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 +15 -0
- package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +58 -118
- package/dist/cjs/new-button/variants/default/button.js +36 -41
- package/dist/cjs/new-button/variants/default/link.compiled.css +119 -0
- package/dist/cjs/new-button/variants/default/link.js +111 -59
- package/dist/cjs/new-button/variants/icon/button.js +128 -143
- package/dist/cjs/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/cjs/new-button/variants/icon/link.js +101 -75
- package/dist/cjs/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/cjs/new-button/variants/shared/button-base.js +223 -0
- package/dist/cjs/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/cjs/new-button/variants/shared/content.js +13 -53
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +54 -117
- package/dist/es2019/new-button/variants/default/button.js +47 -56
- package/dist/es2019/new-button/variants/default/link.compiled.css +119 -0
- package/dist/es2019/new-button/variants/default/link.js +113 -63
- package/dist/es2019/new-button/variants/icon/button.js +117 -133
- package/dist/es2019/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/es2019/new-button/variants/icon/link.js +94 -70
- package/dist/es2019/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/es2019/new-button/variants/shared/button-base.js +203 -0
- package/dist/es2019/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/es2019/new-button/variants/shared/content.js +13 -52
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.compiled.css +34 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +55 -120
- package/dist/esm/new-button/variants/default/button.js +33 -41
- package/dist/esm/new-button/variants/default/link.compiled.css +119 -0
- package/dist/esm/new-button/variants/default/link.js +111 -59
- package/dist/esm/new-button/variants/icon/button.js +128 -143
- package/dist/esm/new-button/variants/icon/link.compiled.css +104 -0
- package/dist/esm/new-button/variants/icon/link.js +98 -72
- package/dist/esm/new-button/variants/shared/button-base.compiled.css +137 -0
- package/dist/esm/new-button/variants/shared/button-base.js +213 -0
- package/dist/esm/new-button/variants/shared/content.compiled.css +19 -0
- package/dist/esm/new-button/variants/shared/content.js +13 -53
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types/new-button/variants/default/button.d.ts +5 -1
- package/dist/types/new-button/variants/default/link.d.ts +22 -8
- package/dist/types/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types/new-button/variants/types.d.ts +26 -6
- package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -5
- package/dist/types-ts4.5/new-button/variants/default/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/default/link.d.ts +22 -8
- package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +11 -4
- package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/button-base.d.ts +45 -0
- package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +5 -1
- package/dist/types-ts4.5/new-button/variants/types.d.ts +26 -6
- package/package.json +17 -15
- package/dist/cjs/new-button/variants/default/use-default-button.js +0 -98
- package/dist/cjs/new-button/variants/icon/use-icon-button.js +0 -88
- package/dist/cjs/new-button/variants/shared/use-button-base.js +0 -639
- package/dist/es2019/new-button/variants/default/use-default-button.js +0 -88
- package/dist/es2019/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/es2019/new-button/variants/shared/use-button-base.js +0 -619
- package/dist/esm/new-button/variants/default/use-default-button.js +0 -88
- package/dist/esm/new-button/variants/icon/use-icon-button.js +0 -81
- package/dist/esm/new-button/variants/shared/use-button-base.js +0 -629
- package/dist/types/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +0 -46
- package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +0 -16
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +0 -46
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 21.1.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 21.1.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#127093](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127093)
|
|
14
|
+
[`1378ea7a99ce1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1378ea7a99ce1) -
|
|
15
|
+
Upgrades `jscodeshift` to handle generics properly.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 21.1.4
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
|
|
2
|
+
._2rko1sit{border-radius:var(--ds-border-radius,3px)}
|
|
3
|
+
._195g1h5n{margin-inline:-.03125rem}
|
|
4
|
+
._195g1n1a{margin-inline:-1px}
|
|
5
|
+
._1mouu2gc{margin-block:var(--ds-space-100,8px)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
|
|
6
|
+
._12y3t94y{outline-width:1px}
|
|
7
|
+
._1bsbe4h9{width:var(--ds-border-width,1px)}
|
|
8
|
+
._1cwg1n1a{outline-offset:-1px}
|
|
9
|
+
._1e0c116y{display:inline-flex}
|
|
10
|
+
._1j4hidpf a, ._1553idpf button{border-end-start-radius:0}
|
|
11
|
+
._1pbykb7n{z-index:1}
|
|
12
|
+
._1qgbidpf a, ._y1n3idpf button{border-start-start-radius:0}
|
|
13
|
+
._1qu2nqa1{outline-style:solid}
|
|
14
|
+
._4cvr1h6o{align-items:center}
|
|
15
|
+
._4t3i1hvu{height:calc(1.5rem - var(--ds-border-width, 1px) - var(--ds-border-width, 1px))}
|
|
16
|
+
._4t3i1k8s{height:1.5rem}
|
|
17
|
+
._4t3i7vkz{height:1pc}
|
|
18
|
+
._4t3im1ee{height:calc(2rem - var(--ds-border-width, 1px) - var(--ds-border-width, 1px))}
|
|
19
|
+
._4t3iviql{height:2rem}
|
|
20
|
+
._80om13gf{cursor:not-allowed}
|
|
21
|
+
._bfhk15cr{background-color:var(--ds-text-inverse,#fff)}
|
|
22
|
+
._bfhk1fxt{background-color:var(--ds-text,#172b4d)}
|
|
23
|
+
._bfhk9xzm{background-color:var(--ds-border-disabled,#091e4224)}
|
|
24
|
+
._bfhkdud1{background-color:var(--ds-text-subtle,#0052cc)}
|
|
25
|
+
._bfhkmuej{background-color:var(--ds-border,#091e4224)}
|
|
26
|
+
._bfhkojnm{background-color:var(--ds-text-disabled,#091e4224)}
|
|
27
|
+
._bfhkveue{background-color:var(--ds-border-inverse,#fff)}
|
|
28
|
+
._kqswh2mm{position:relative}
|
|
29
|
+
._o5721q9c{white-space:nowrap}
|
|
30
|
+
._p9ykidpf a, ._bepvidpf button{border-start-end-radius:0}
|
|
31
|
+
._traeidpf a, ._anlpidpf button{border-end-end-radius:0}
|
|
32
|
+
._tzy419lr{opacity:.62}
|
|
33
|
+
._tzy41uwv{opacity:.51}
|
|
34
|
+
._tzy41wzo{opacity:.64}
|
|
@@ -1,83 +1,46 @@
|
|
|
1
|
+
/* split-button.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
|
-
var
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
|
|
8
|
-
|
|
9
|
-
var
|
|
9
|
+
require("./split-button.compiled.css");
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _runtime = require("@compiled/react/runtime");
|
|
10
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
13
|
var _splitButtonContext = require("./split-button-context");
|
|
12
14
|
var _utils = require("./utils");
|
|
13
|
-
function
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
position: 'relative',
|
|
21
|
-
// This is 1 so it appears above buttons by default.
|
|
22
|
-
// When buttons are selected they have a zIndex of 2 applied.
|
|
23
|
-
// See use-button-base.tsx.
|
|
24
|
-
zIndex: 1
|
|
25
|
-
});
|
|
26
|
-
var dividerDisabledStyles = (0, _react.css)({
|
|
27
|
-
backgroundColor: "var(--ds-text-disabled, #091E4224)",
|
|
28
|
-
cursor: 'not-allowed',
|
|
29
|
-
opacity: 0.51
|
|
30
|
-
});
|
|
31
|
-
var dividerDisabledRefreshedStyles = (0, _react.css)({
|
|
32
|
-
backgroundColor: "var(--ds-border-disabled, #091E4224)",
|
|
33
|
-
cursor: 'not-allowed'
|
|
34
|
-
});
|
|
35
|
-
var dividerAppearance = {
|
|
36
|
-
default: (0, _react.css)({
|
|
37
|
-
backgroundColor: "var(--ds-text, #172B4D)",
|
|
38
|
-
opacity: 0.51
|
|
39
|
-
}),
|
|
40
|
-
primary: (0, _react.css)({
|
|
41
|
-
backgroundColor: "var(--ds-text-inverse, #FFF)",
|
|
42
|
-
opacity: 0.64
|
|
43
|
-
}),
|
|
44
|
-
navigation: (0, _react.css)({
|
|
45
|
-
height: '16px',
|
|
46
|
-
margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
|
|
47
|
-
backgroundColor: "var(--ds-text-subtle, #0052cc)",
|
|
48
|
-
opacity: 0.62
|
|
49
|
-
})
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
var dividerStyles = {
|
|
18
|
+
baseDivider: "_1bsbe4h9 _kqswh2mm _1pbykb7n",
|
|
19
|
+
dividerDisabled: "_bfhkojnm _80om13gf _tzy41uwv",
|
|
20
|
+
dividerDisabledRefreshed: "_bfhk9xzm _80om13gf",
|
|
21
|
+
dividerOffsetRefreshed: "_195g1n1a"
|
|
50
22
|
};
|
|
51
|
-
var
|
|
52
|
-
default:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
var dividerRefreshedOffsetStyles = (0, _react.css)({
|
|
61
|
-
marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
|
|
62
|
-
});
|
|
63
|
-
var dividerHeight = {
|
|
64
|
-
default: (0, _react.css)({
|
|
65
|
-
height: '2rem'
|
|
66
|
-
}),
|
|
67
|
-
compact: (0, _react.css)({
|
|
68
|
-
height: '1.5rem'
|
|
69
|
-
})
|
|
23
|
+
var dividerAppearanceStyles = {
|
|
24
|
+
default: "_bfhk1fxt _tzy41uwv",
|
|
25
|
+
primary: "_bfhk15cr _tzy41wzo",
|
|
26
|
+
navigation: "_1mouu2gc _195g1h5n _4t3i7vkz _bfhkdud1 _tzy419lr"
|
|
27
|
+
};
|
|
28
|
+
var dividerRefreshedAppearanceStyles = {
|
|
29
|
+
default: "_bfhkmuej",
|
|
30
|
+
primary: "_bfhkveue _tzy41wzo",
|
|
31
|
+
navigation: "_1mouu2gc _195g1h5n _4t3i7vkz _bfhkdud1 _tzy419lr"
|
|
70
32
|
};
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
33
|
+
var dividerHeightStyles = {
|
|
34
|
+
default: "_4t3iviql",
|
|
35
|
+
compact: "_4t3i1k8s"
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// The divider height is calculated by subtracting twice the border width from the button height.
|
|
39
|
+
// This ensures the divider does not intersect with the button's border, avoiding visual issues
|
|
40
|
+
// caused by overlapping alpha colors (color.border) at the intersection.
|
|
41
|
+
var defaultDividerHeightStyles = {
|
|
42
|
+
default: "_4t3im1ee",
|
|
43
|
+
compact: "_4t3i1hvu"
|
|
81
44
|
};
|
|
82
45
|
/**
|
|
83
46
|
* TODO: Add JSDoc
|
|
@@ -87,40 +50,17 @@ var Divider = exports.Divider = function Divider(_ref) {
|
|
|
87
50
|
spacing = _ref.spacing,
|
|
88
51
|
_ref$isDisabled = _ref.isDisabled,
|
|
89
52
|
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
(0,
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
53
|
+
var isDefaultDivider = appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh');
|
|
54
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: (0, _runtime.ax)([dividerStyles.baseDivider, isDefaultDivider && defaultDividerHeightStyles[spacing], !isDefaultDivider && dividerHeightStyles[spacing], isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerStyles.dividerDisabledRefreshed, isDisabled && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerStyles.dividerDisabled, !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedAppearanceStyles[appearance], !isDisabled && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerAppearanceStyles[appearance], (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerStyles.dividerOffsetRefreshed])
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
var buttonStyles = {
|
|
59
|
+
splitButton: "_1e0c116y _kqswh2mm _4cvr1h6o _o5721q9c",
|
|
60
|
+
primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
|
|
61
|
+
secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
|
|
62
|
+
defaultAppearanceContainer: "_2rko1sit _12jimuej _1cwg1n1a _1qu2nqa1 _12y3t94y"
|
|
96
63
|
};
|
|
97
|
-
var splitButtonStyles = (0, _react.css)({
|
|
98
|
-
display: 'inline-flex',
|
|
99
|
-
position: 'relative',
|
|
100
|
-
alignItems: 'center',
|
|
101
|
-
whiteSpace: 'nowrap'
|
|
102
|
-
});
|
|
103
|
-
var primaryButtonStyles = (0, _react.css)({
|
|
104
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
105
|
-
'button,a': {
|
|
106
|
-
borderEndEndRadius: 0,
|
|
107
|
-
borderStartEndRadius: 0
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
var secondaryButtonStyles = (0, _react.css)({
|
|
111
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
112
|
-
'button,a': {
|
|
113
|
-
borderEndStartRadius: 0,
|
|
114
|
-
borderStartStartRadius: 0
|
|
115
|
-
}
|
|
116
|
-
});
|
|
117
|
-
var defaultAppearanceContainerStyles = (0, _react.css)({
|
|
118
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
119
|
-
outlineColor: "var(--ds-border, #091E4224)",
|
|
120
|
-
outlineOffset: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")"),
|
|
121
|
-
outlineStyle: 'solid',
|
|
122
|
-
outlineWidth: "var(--ds-border-width, 1px)"
|
|
123
|
-
});
|
|
124
64
|
|
|
125
65
|
/**
|
|
126
66
|
* TODO: Add JSdoc
|
|
@@ -130,8 +70,8 @@ var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonCo
|
|
|
130
70
|
children = _ref2.children,
|
|
131
71
|
_ref2$isDisabled = _ref2.isDisabled,
|
|
132
72
|
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
|
|
133
|
-
return
|
|
134
|
-
|
|
73
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
74
|
+
className: (0, _runtime.ax)([appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && buttonStyles.defaultAppearanceContainer, buttonStyles.splitButton])
|
|
135
75
|
}, children);
|
|
136
76
|
};
|
|
137
77
|
|
|
@@ -155,23 +95,23 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
|
|
|
155
95
|
var _getActions = (0, _utils.getActions)(children),
|
|
156
96
|
PrimaryAction = _getActions.PrimaryAction,
|
|
157
97
|
SecondaryAction = _getActions.SecondaryAction;
|
|
158
|
-
return
|
|
98
|
+
return /*#__PURE__*/React.createElement(SplitButtonContainer, {
|
|
159
99
|
appearance: appearance,
|
|
160
100
|
isDisabled: isDisabled
|
|
161
|
-
},
|
|
101
|
+
}, /*#__PURE__*/React.createElement(_splitButtonContext.SplitButtonContext.Provider, {
|
|
162
102
|
value: {
|
|
163
103
|
appearance: appearance,
|
|
164
104
|
spacing: spacing,
|
|
165
105
|
isDisabled: isDisabled
|
|
166
106
|
}
|
|
167
|
-
},
|
|
168
|
-
|
|
169
|
-
}, PrimaryAction),
|
|
107
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
108
|
+
className: (0, _runtime.ax)([buttonStyles.primaryButton])
|
|
109
|
+
}, PrimaryAction), /*#__PURE__*/React.createElement(Divider, {
|
|
170
110
|
appearance: appearance,
|
|
171
111
|
spacing: spacing,
|
|
172
112
|
isDisabled: isDisabled
|
|
173
|
-
}),
|
|
174
|
-
|
|
113
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: (0, _runtime.ax)([buttonStyles.secondaryButton])
|
|
175
115
|
}, SecondaryAction)));
|
|
176
116
|
};
|
|
177
117
|
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
@@ -194,22 +134,22 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
|
|
|
194
134
|
spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
|
|
195
135
|
_ref4$isDisabled = _ref4.isDisabled,
|
|
196
136
|
isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
|
|
197
|
-
return
|
|
137
|
+
return /*#__PURE__*/React.createElement(SplitButtonContainer, {
|
|
198
138
|
appearance: appearance,
|
|
199
139
|
isDisabled: isDisabled
|
|
200
|
-
},
|
|
140
|
+
}, /*#__PURE__*/React.createElement(_splitButtonContext.SplitButtonContext.Provider, {
|
|
201
141
|
value: {
|
|
202
142
|
appearance: appearance,
|
|
203
143
|
spacing: spacing,
|
|
204
144
|
isDisabled: isDisabled
|
|
205
145
|
}
|
|
206
|
-
},
|
|
207
|
-
|
|
208
|
-
}, primaryAction),
|
|
146
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
className: (0, _runtime.ax)([buttonStyles.primaryButton])
|
|
148
|
+
}, primaryAction), /*#__PURE__*/React.createElement(Divider, {
|
|
209
149
|
appearance: appearance,
|
|
210
150
|
spacing: spacing,
|
|
211
151
|
isDisabled: isDisabled
|
|
212
|
-
}),
|
|
213
|
-
|
|
152
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
153
|
+
className: (0, _runtime.ax)([buttonStyles.secondaryButton])
|
|
214
154
|
}, secondaryAction)));
|
|
215
155
|
};
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
8
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
-
var _react =
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _buttonBase = _interopRequireDefault(require("../shared/button-base"));
|
|
13
|
+
var _content = _interopRequireDefault(require("../shared/content"));
|
|
14
|
+
var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
|
|
13
15
|
var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "type"],
|
|
14
16
|
_excluded2 = ["className", "css", "as", "style"];
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
19
|
/**
|
|
16
20
|
* __Button__
|
|
17
21
|
*
|
|
@@ -32,7 +36,8 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
|
|
|
32
36
|
iconBefore = _ref.iconBefore,
|
|
33
37
|
interactionName = _ref.interactionName,
|
|
34
38
|
isDisabled = _ref.isDisabled,
|
|
35
|
-
isLoading = _ref.isLoading,
|
|
39
|
+
_ref$isLoading = _ref.isLoading,
|
|
40
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
36
41
|
isSelected = _ref.isSelected,
|
|
37
42
|
onClick = _ref.onClick,
|
|
38
43
|
onClickCapture = _ref.onClickCapture,
|
|
@@ -56,20 +61,20 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
|
|
|
56
61
|
_as = unsafeRest.as,
|
|
57
62
|
_style = unsafeRest.style,
|
|
58
63
|
saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
|
|
59
|
-
|
|
60
|
-
ariaLabel: ariaLabel,
|
|
61
|
-
ariaLabelledBy: ariaLabelledBy,
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({
|
|
62
65
|
analyticsContext: analyticsContext,
|
|
66
|
+
ref: ref,
|
|
63
67
|
appearance: appearance,
|
|
64
68
|
autoFocus: autoFocus,
|
|
65
|
-
buttonType: 'button',
|
|
66
|
-
children: children,
|
|
67
|
-
iconAfter: iconAfter,
|
|
68
|
-
iconBefore: iconBefore,
|
|
69
|
-
interactionName: interactionName,
|
|
70
69
|
isDisabled: isDisabled,
|
|
71
70
|
isLoading: isLoading,
|
|
72
71
|
isSelected: isSelected,
|
|
72
|
+
hasIconBefore: Boolean(iconBefore),
|
|
73
|
+
hasIconAfter: Boolean(iconAfter),
|
|
74
|
+
shouldFitContainer: shouldFitContainer,
|
|
75
|
+
spacing: spacing,
|
|
76
|
+
ariaLabel: ariaLabel,
|
|
77
|
+
ariaLabelledBy: ariaLabelledBy,
|
|
73
78
|
onClick: onClick,
|
|
74
79
|
onClickCapture: onClickCapture,
|
|
75
80
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -78,37 +83,27 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
|
|
|
78
83
|
onMouseUpCapture: onMouseUpCapture,
|
|
79
84
|
onPointerDownCapture: onPointerDownCapture,
|
|
80
85
|
onPointerUpCapture: onPointerUpCapture,
|
|
81
|
-
onTouchEndCapture: onTouchEndCapture,
|
|
82
86
|
onTouchStartCapture: onTouchStartCapture,
|
|
83
|
-
|
|
84
|
-
shouldFitContainer: shouldFitContainer,
|
|
85
|
-
spacing: spacing,
|
|
86
|
-
testId: testId
|
|
87
|
-
});
|
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_pressable.default
|
|
89
|
-
// TODO: Remove spread props
|
|
90
|
-
, (0, _extends2.default)({}, saferRest, {
|
|
91
|
-
"aria-label": baseProps['aria-label'],
|
|
92
|
-
"aria-labelledby": baseProps['aria-labelledby'],
|
|
93
|
-
ref: baseProps.ref,
|
|
94
|
-
xcss: baseProps.xcss,
|
|
95
|
-
isDisabled: baseProps.isDisabled,
|
|
96
|
-
onClick: baseProps.onClick,
|
|
97
|
-
onMouseDownCapture: baseProps.onMouseDownCapture,
|
|
98
|
-
onMouseUpCapture: baseProps.onMouseUpCapture,
|
|
99
|
-
onKeyDownCapture: baseProps.onKeyDownCapture,
|
|
100
|
-
onKeyUpCapture: baseProps.onKeyUpCapture,
|
|
101
|
-
onTouchStartCapture: baseProps.onTouchStartCapture,
|
|
102
|
-
onTouchEndCapture: baseProps.onTouchEndCapture,
|
|
103
|
-
onPointerDownCapture: baseProps.onPointerDownCapture,
|
|
104
|
-
onPointerUpCapture: baseProps.onPointerUpCapture,
|
|
105
|
-
onClickCapture: baseProps.onClickCapture,
|
|
106
|
-
type: type,
|
|
87
|
+
onTouchEndCapture: onTouchEndCapture,
|
|
107
88
|
testId: testId,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}),
|
|
89
|
+
componentName: "Button",
|
|
90
|
+
type: type,
|
|
91
|
+
interactionName: interactionName
|
|
92
|
+
}, saferRest), /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
|
|
93
|
+
type: "icon",
|
|
94
|
+
position: "before",
|
|
95
|
+
isLoading: isLoading
|
|
96
|
+
}, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
|
|
97
|
+
icon: iconBefore
|
|
98
|
+
})), children && /*#__PURE__*/_react.default.createElement(_content.default, {
|
|
99
|
+
isLoading: isLoading
|
|
100
|
+
}, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
|
|
101
|
+
type: "icon",
|
|
102
|
+
position: "after",
|
|
103
|
+
isLoading: isLoading
|
|
104
|
+
}, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
|
|
105
|
+
icon: iconAfter
|
|
106
|
+
}))));
|
|
112
107
|
}));
|
|
113
108
|
Button.displayName = 'Button';
|
|
114
109
|
var _default = exports.default = Button;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
|
|
2
|
+
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
|
|
5
|
+
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
|
+
._v5649dqc{transition:background .1s ease-out}
|
|
7
|
+
._189eidpf{border-width:0}
|
|
8
|
+
._1rjc12x7{padding-block:var(--ds-space-075,6px)}
|
|
9
|
+
._1rjcv77o{padding-block:var(--ds-space-025,2px)}
|
|
10
|
+
._1tv3nqa1:after{border-style:solid}
|
|
11
|
+
._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
|
|
12
|
+
._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
|
|
13
|
+
._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
|
|
14
|
+
._11fnglyw:after{pointer-events:none}
|
|
15
|
+
._18postnw:after{position:absolute}
|
|
16
|
+
._1bah1h6o{justify-content:center}
|
|
17
|
+
._1bsb1wug{width:auto}
|
|
18
|
+
._1e0c116y{display:inline-flex}
|
|
19
|
+
._1hmsagmp{text-decoration-line:none!important}
|
|
20
|
+
._1o9zidpf{flex-shrink:0}
|
|
21
|
+
._4bfu1snc{text-decoration-color:currentColor!important}
|
|
22
|
+
._4cvr1q9y{align-items:baseline}
|
|
23
|
+
._4t3i1k8s{height:1.5rem}
|
|
24
|
+
._4t3iviql{height:2rem}
|
|
25
|
+
._80om13gf{cursor:not-allowed}
|
|
26
|
+
._aetrb3bt:after{content:""}
|
|
27
|
+
._aetrglyw:after{content:none}
|
|
28
|
+
._ajmmvv82{text-decoration-style:solid!important}
|
|
29
|
+
._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
|
|
30
|
+
._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
|
|
31
|
+
._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
|
|
32
|
+
._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
|
|
33
|
+
._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
|
|
34
|
+
._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
|
|
35
|
+
._bfhkbeib{background-color:var(--ds-background-selected,#bf2600)}
|
|
36
|
+
._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
|
|
37
|
+
._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
|
|
38
|
+
._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
|
|
39
|
+
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
40
|
+
._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
|
|
41
|
+
._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
|
|
42
|
+
._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
|
|
43
|
+
._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
|
|
44
|
+
._gy1p1b66{column-gap:var(--ds-space-050,4px)}
|
|
45
|
+
._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
|
|
46
|
+
._kqswh2mm{position:relative}
|
|
47
|
+
._p12f1osq{max-width:100%}
|
|
48
|
+
._s7n4nkob{vertical-align:middle}
|
|
49
|
+
._syaz10s3{color:var(--ds-text,#42526e)}
|
|
50
|
+
._syaz15cr{color:var(--ds-text-inverse,#fff)}
|
|
51
|
+
._syaz16q2{color:var(--ds-text-selected,#172b4d)}
|
|
52
|
+
._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
|
|
53
|
+
._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
|
|
54
|
+
._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
|
|
55
|
+
._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
|
|
56
|
+
._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
|
|
57
|
+
._vchhusvi{box-sizing:border-box}
|
|
58
|
+
._y3gn1h6o{text-align:center}
|
|
59
|
+
._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
|
|
60
|
+
._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}._105310s3:visited{color:var(--ds-text,#42526e)}
|
|
61
|
+
._105315cr:visited{color:var(--ds-text-inverse,#fff)}
|
|
62
|
+
._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
|
|
63
|
+
._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
|
|
64
|
+
._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
|
|
65
|
+
._1053al3n:visited{color:var(--ds-text-warning-inverse,#172b4d)}
|
|
66
|
+
._1a3b1r31:focus{text-decoration-color:currentColor}
|
|
67
|
+
._4fprglyw:focus{text-decoration-line:none}
|
|
68
|
+
._5goinqa1:focus{text-decoration-style:solid}
|
|
69
|
+
._f8pj10s3:focus{color:var(--ds-text,#42526e)}
|
|
70
|
+
._f8pj15cr:focus{color:var(--ds-text-inverse,#fff)}
|
|
71
|
+
._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
|
|
72
|
+
._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
|
|
73
|
+
._f8pj1mjl:focus{color:color.text.subtle}
|
|
74
|
+
._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
|
|
75
|
+
._f8pjal3n:focus{color:var(--ds-text-warning-inverse,#172b4d)}
|
|
76
|
+
._1bnxglyw:hover{text-decoration-line:none}
|
|
77
|
+
._30l310s3:hover{color:var(--ds-text,#42526e)}
|
|
78
|
+
._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
|
|
79
|
+
._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
|
|
80
|
+
._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
|
|
81
|
+
._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
|
|
82
|
+
._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
|
|
83
|
+
._30l3al3n:hover{color:var(--ds-text-warning-inverse,#172b4d)}
|
|
84
|
+
._9oik1r31:hover{text-decoration-color:currentColor}
|
|
85
|
+
._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
|
|
86
|
+
._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
|
|
87
|
+
._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
|
|
88
|
+
._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
|
|
89
|
+
._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
|
|
90
|
+
._irr34mfv:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e4214)}
|
|
91
|
+
._irr37gr8:hover{background-color:var(--ds-background-discovery-bold-hovered,#8777d9)}
|
|
92
|
+
._irr3beib:hover{background-color:var(--ds-background-selected,#bf2600)}
|
|
93
|
+
._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
|
|
94
|
+
._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
|
|
95
|
+
._irr3vdtc:hover{background-color:var(--ds-background-selected,#ff991f)}
|
|
96
|
+
._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
|
|
97
|
+
._jf4cnqa1:hover{text-decoration-style:solid}
|
|
98
|
+
._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
|
|
99
|
+
._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
|
|
100
|
+
._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
|
|
101
|
+
._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
|
|
102
|
+
._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
|
|
103
|
+
._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
|
|
104
|
+
._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
|
|
105
|
+
._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
|
|
106
|
+
._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
|
|
107
|
+
._1di6syzs:active{background-color:var(--ds-background-disabled,#091e4208)}
|
|
108
|
+
._1di6vdtc:active{background-color:var(--ds-background-selected,#ff991f)}
|
|
109
|
+
._1di6yycf:active{background-color:var(--ds-background-danger-bold-pressed,#bf2600)}
|
|
110
|
+
._1iohnqa1:active{text-decoration-style:solid}
|
|
111
|
+
._1nrm1r31:active{text-decoration-color:currentColor}
|
|
112
|
+
._9h8h10s3:active{color:var(--ds-text,#42526e)}
|
|
113
|
+
._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
|
|
114
|
+
._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
|
|
115
|
+
._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
|
|
116
|
+
._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
|
|
117
|
+
._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
|
|
118
|
+
._9h8hal3n:active{color:var(--ds-text-warning-inverse,#172b4d)}
|
|
119
|
+
._c2waglyw:active{text-decoration-line:none}
|