@atlaskit/button 23.6.4 → 23.7.0
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 +7 -0
- package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +1 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +3 -1
- package/dist/cjs/new-button/variants/default/link.compiled.css +1 -0
- package/dist/cjs/new-button/variants/default/link.js +3 -1
- package/dist/cjs/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/cjs/new-button/variants/icon/link.js +4 -2
- package/dist/cjs/new-button/variants/shared/button-base.compiled.css +1 -0
- package/dist/cjs/new-button/variants/shared/button-base.js +3 -1
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/cjs/old-button/shared/css.js +2 -1
- package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +1 -0
- package/dist/es2019/new-button/containers/split-button/split-button.js +3 -1
- package/dist/es2019/new-button/variants/default/link.compiled.css +1 -0
- package/dist/es2019/new-button/variants/default/link.js +3 -1
- package/dist/es2019/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/es2019/new-button/variants/icon/link.js +4 -2
- package/dist/es2019/new-button/variants/shared/button-base.compiled.css +1 -0
- package/dist/es2019/new-button/variants/shared/button-base.js +3 -1
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/es2019/old-button/shared/css.js +2 -1
- package/dist/esm/new-button/containers/split-button/split-button.compiled.css +1 -0
- package/dist/esm/new-button/containers/split-button/split-button.js +3 -1
- package/dist/esm/new-button/variants/default/link.compiled.css +1 -0
- package/dist/esm/new-button/variants/default/link.js +3 -1
- package/dist/esm/new-button/variants/icon/link.compiled.css +1 -0
- package/dist/esm/new-button/variants/icon/link.js +4 -2
- package/dist/esm/new-button/variants/shared/button-base.compiled.css +1 -0
- package/dist/esm/new-button/variants/shared/button-base.js +3 -1
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/esm/old-button/shared/css.js +2 -1
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 23.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`b867e641d818d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b867e641d818d) -
|
|
8
|
+
Updated border radius values behind a feature gate `platform-dst-shape-theme-default`.
|
|
9
|
+
|
|
3
10
|
## 23.6.4
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -9,6 +9,7 @@ exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButto
|
|
|
9
9
|
require("./split-button.compiled.css");
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
13
|
var _splitButtonContext = require("./split-button-context");
|
|
13
14
|
var _utils = require("./utils");
|
|
14
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -52,6 +53,7 @@ var buttonStyles = {
|
|
|
52
53
|
primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
|
|
53
54
|
secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
|
|
54
55
|
defaultAppearanceContainer: "_2rkofajl _12ji1l7x _1cwg1n1a _1qu2nqa1 _12y3t94y",
|
|
56
|
+
defaultAppearanceContainerT26Shape: "_2rko1qi0",
|
|
55
57
|
defaultAppearanceDisabledContainer: "_12jibk0g"
|
|
56
58
|
};
|
|
57
59
|
|
|
@@ -64,7 +66,7 @@ var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonCo
|
|
|
64
66
|
_ref2$isDisabled = _ref2.isDisabled,
|
|
65
67
|
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
|
|
66
68
|
return /*#__PURE__*/React.createElement("div", {
|
|
67
|
-
className: (0, _runtime.ax)([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
69
|
+
className: (0, _runtime.ax)([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && buttonStyles.defaultAppearanceContainerT26Shape, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
68
70
|
}, children);
|
|
69
71
|
};
|
|
70
72
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -16,6 +16,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
16
16
|
var _css2 = require("@atlaskit/css");
|
|
17
17
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
18
18
|
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
21
|
var _content = _interopRequireDefault(require("../shared/content"));
|
|
21
22
|
var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
|
|
@@ -24,6 +25,7 @@ var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledb
|
|
|
24
25
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
25
26
|
var styles = {
|
|
26
27
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
28
|
+
baseT26Shape: "_2rko1qi0",
|
|
27
29
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
28
30
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
29
31
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
@@ -134,7 +136,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
134
136
|
interactionName: interactionName
|
|
135
137
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
136
138
|
}, saferRest, {
|
|
137
|
-
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
139
|
+
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
138
140
|
}), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
|
|
139
141
|
type: "icon",
|
|
140
142
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -16,6 +16,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
16
16
|
var _css2 = require("@atlaskit/css");
|
|
17
17
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
18
18
|
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
21
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
21
22
|
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
@@ -26,6 +27,7 @@ var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearanc
|
|
|
26
27
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
27
28
|
var styles = {
|
|
28
29
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
30
|
+
baseT26Shape: "_2rko1qi0",
|
|
29
31
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
30
32
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
31
33
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
@@ -154,7 +156,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
154
156
|
ref: (0, _mergeRefs.default)([localRef, ref, triggerProps.ref].filter(Boolean))
|
|
155
157
|
// Base props only
|
|
156
158
|
,
|
|
157
|
-
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
159
|
+
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
158
160
|
onMouseDownCapture: onMouseDownCapture,
|
|
159
161
|
onMouseUpCapture: onMouseUpCapture,
|
|
160
162
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -187,7 +189,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
187
189
|
// aria-label={preventedAriaLabel}
|
|
188
190
|
"aria-labelledby": ariaLabelledBy,
|
|
189
191
|
ref: (0, _mergeRefs.default)([localRef, ref]),
|
|
190
|
-
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
192
|
+
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
191
193
|
onClick: _onClick,
|
|
192
194
|
onMouseDownCapture: onMouseDownCapture,
|
|
193
195
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -16,6 +16,7 @@ var _css2 = require("@atlaskit/css");
|
|
|
16
16
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
17
17
|
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
|
|
18
18
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
21
|
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
21
22
|
var _splitButtonContext = require("../../containers/split-button/split-button-context");
|
|
@@ -27,6 +28,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
27
28
|
var LOADING_LABEL = ', Loading';
|
|
28
29
|
var styles = {
|
|
29
30
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
31
|
+
baseT26Shape: "_2rko1qi0",
|
|
30
32
|
linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
31
33
|
disabled: "_80om13gf _syaz1gmx _30l31gmx _9h8h1gmx",
|
|
32
34
|
sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
|
|
@@ -169,7 +171,7 @@ function (_ref, ref) {
|
|
|
169
171
|
analyticsContext: analyticsContext,
|
|
170
172
|
role: role,
|
|
171
173
|
ref: (0, _mergeRefs.default)([localRef, ref]),
|
|
172
|
-
xcss: (0, _css2.cx)(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
174
|
+
xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
173
175
|
// TODO: remove me once we kill color fallbacks
|
|
174
176
|
isSelected && appearance === 'danger' && selectedStyles.danger,
|
|
175
177
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -132,7 +132,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
|
|
|
132
132
|
action: 'clicked',
|
|
133
133
|
componentName: 'button',
|
|
134
134
|
packageName: "@atlaskit/button",
|
|
135
|
-
packageVersion: "
|
|
135
|
+
packageVersion: "0.0.0-development",
|
|
136
136
|
analyticsData: analyticsContext
|
|
137
137
|
});
|
|
138
138
|
|
|
@@ -11,6 +11,7 @@ exports.getIconStyle = getIconStyle;
|
|
|
11
11
|
exports.overlayCss = void 0;
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
var _react = require("@emotion/react");
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
15
|
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; }
|
|
15
16
|
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; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
17
|
var gridSize = 8;
|
|
@@ -196,7 +197,7 @@ function getCss(_ref) {
|
|
|
196
197
|
// 0px margin added to css-reset
|
|
197
198
|
alignItems: 'baseline',
|
|
198
199
|
borderWidth: 0,
|
|
199
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
200
|
+
borderRadius: (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') ? "var(--ds-radius-medium, 6px)" : "var(--ds-radius-small, 3px)",
|
|
200
201
|
boxSizing: 'border-box',
|
|
201
202
|
display: 'inline-flex',
|
|
202
203
|
fontSize: 'inherit',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import "./split-button.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { SplitButtonContext } from './split-button-context';
|
|
6
7
|
import { getActions } from './utils';
|
|
7
8
|
const dividerStyles = {
|
|
@@ -44,6 +45,7 @@ const buttonStyles = {
|
|
|
44
45
|
primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
|
|
45
46
|
secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
|
|
46
47
|
defaultAppearanceContainer: "_2rkofajl _12ji1l7x _1cwg1n1a _1qu2nqa1 _12y3t94y",
|
|
48
|
+
defaultAppearanceContainerT26Shape: "_2rko1qi0",
|
|
47
49
|
defaultAppearanceDisabledContainer: "_12jibk0g"
|
|
48
50
|
};
|
|
49
51
|
|
|
@@ -56,7 +58,7 @@ export const SplitButtonContainer = ({
|
|
|
56
58
|
isDisabled = false
|
|
57
59
|
}) => {
|
|
58
60
|
return /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: ax([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
61
|
+
className: ax([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && fg('platform-dst-shape-theme-default') && buttonStyles.defaultAppearanceContainerT26Shape, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
60
62
|
}, children);
|
|
61
63
|
};
|
|
62
64
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -7,11 +7,13 @@ import { forwardRef, useRef } from 'react';
|
|
|
7
7
|
import { cx } from '@atlaskit/css';
|
|
8
8
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
9
9
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Anchor } from '@atlaskit/primitives/compiled';
|
|
11
12
|
import Content from '../shared/content';
|
|
12
13
|
import IconRenderer from '../shared/icon-renderer';
|
|
13
14
|
const styles = {
|
|
14
15
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
16
|
+
baseT26Shape: "_2rko1qi0",
|
|
15
17
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
16
18
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
17
19
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
@@ -123,7 +125,7 @@ const LinkButtonBase = ({
|
|
|
123
125
|
interactionName: interactionName
|
|
124
126
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
125
127
|
}, saferRest, {
|
|
126
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
128
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
127
129
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
128
130
|
type: "icon",
|
|
129
131
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -7,6 +7,7 @@ import { forwardRef, memo, useRef } from 'react';
|
|
|
7
7
|
import { cx } from '@atlaskit/css';
|
|
8
8
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
9
9
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Anchor } from '@atlaskit/primitives/compiled';
|
|
11
12
|
import Tooltip from '@atlaskit/tooltip';
|
|
12
13
|
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
@@ -14,6 +15,7 @@ import Content from '../shared/content';
|
|
|
14
15
|
import IconRenderer from '../shared/icon-renderer';
|
|
15
16
|
const styles = {
|
|
16
17
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
18
|
+
baseT26Shape: "_2rko1qi0",
|
|
17
19
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
18
20
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
19
21
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
@@ -142,7 +144,7 @@ const LinkIconButtonBase = ({
|
|
|
142
144
|
ref: mergeRefs([localRef, ref, triggerProps.ref].filter(Boolean))
|
|
143
145
|
// Base props only
|
|
144
146
|
,
|
|
145
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
147
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
146
148
|
onMouseDownCapture: onMouseDownCapture,
|
|
147
149
|
onMouseUpCapture: onMouseUpCapture,
|
|
148
150
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -174,7 +176,7 @@ const LinkIconButtonBase = ({
|
|
|
174
176
|
// aria-label={preventedAriaLabel}
|
|
175
177
|
"aria-labelledby": ariaLabelledBy,
|
|
176
178
|
ref: mergeRefs([localRef, ref]),
|
|
177
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
179
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
178
180
|
onClick: onClick,
|
|
179
181
|
onMouseDownCapture: onMouseDownCapture,
|
|
180
182
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -7,6 +7,7 @@ import { cx } from '@atlaskit/css';
|
|
|
7
7
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
8
8
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
9
9
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Pressable } from '@atlaskit/primitives/compiled';
|
|
11
12
|
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
12
13
|
import { SplitButtonContext, useSplitButtonContext } from '../../containers/split-button/split-button-context';
|
|
@@ -15,6 +16,7 @@ import renderLoadingOverlay from './loading-overlay';
|
|
|
15
16
|
const LOADING_LABEL = ', Loading';
|
|
16
17
|
const styles = {
|
|
17
18
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
19
|
+
baseT26Shape: "_2rko1qi0",
|
|
18
20
|
linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
19
21
|
disabled: "_80om13gf _syaz1gmx _30l31gmx _9h8h1gmx",
|
|
20
22
|
sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
|
|
@@ -150,7 +152,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(
|
|
|
150
152
|
analyticsContext: analyticsContext,
|
|
151
153
|
role: role,
|
|
152
154
|
ref: mergeRefs([localRef, ref]),
|
|
153
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
155
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
154
156
|
// TODO: remove me once we kill color fallbacks
|
|
155
157
|
isSelected && appearance === 'danger' && selectedStyles.danger,
|
|
156
158
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -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: "
|
|
122
|
+
packageVersion: "0.0.0-development",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
const gridSize = 8;
|
|
4
5
|
const HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
|
|
5
6
|
|
|
@@ -186,7 +187,7 @@ export function getCss({
|
|
|
186
187
|
// 0px margin added to css-reset
|
|
187
188
|
alignItems: 'baseline',
|
|
188
189
|
borderWidth: 0,
|
|
189
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
190
|
+
borderRadius: fg('platform-dst-shape-theme-default') ? "var(--ds-radius-medium, 6px)" : "var(--ds-radius-small, 3px)",
|
|
190
191
|
boxSizing: 'border-box',
|
|
191
192
|
display: 'inline-flex',
|
|
192
193
|
fontSize: 'inherit',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import "./split-button.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { SplitButtonContext } from './split-button-context';
|
|
6
7
|
import { getActions } from './utils';
|
|
7
8
|
var dividerStyles = {
|
|
@@ -44,6 +45,7 @@ var buttonStyles = {
|
|
|
44
45
|
primaryButton: "_traeidpf _anlpidpf _p9ykidpf _bepvidpf",
|
|
45
46
|
secondaryButton: "_1j4hidpf _1553idpf _1qgbidpf _y1n3idpf",
|
|
46
47
|
defaultAppearanceContainer: "_2rkofajl _12ji1l7x _1cwg1n1a _1qu2nqa1 _12y3t94y",
|
|
48
|
+
defaultAppearanceContainerT26Shape: "_2rko1qi0",
|
|
47
49
|
defaultAppearanceDisabledContainer: "_12jibk0g"
|
|
48
50
|
};
|
|
49
51
|
|
|
@@ -56,7 +58,7 @@ export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
|
|
|
56
58
|
_ref2$isDisabled = _ref2.isDisabled,
|
|
57
59
|
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
|
|
58
60
|
return /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: ax([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
61
|
+
className: ax([appearance === 'default' && buttonStyles.defaultAppearanceContainer, appearance === 'default' && fg('platform-dst-shape-theme-default') && buttonStyles.defaultAppearanceContainerT26Shape, appearance === 'default' && isDisabled && buttonStyles.defaultAppearanceDisabledContainer, buttonStyles.splitButton])
|
|
60
62
|
}, children);
|
|
61
63
|
};
|
|
62
64
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
6
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
6
7
|
._v5649dqc{transition:background .1s ease-out}
|
|
@@ -10,11 +10,13 @@ import { forwardRef, useRef } from 'react';
|
|
|
10
10
|
import { cx } from '@atlaskit/css';
|
|
11
11
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
12
12
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
13
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
14
|
import { Anchor } from '@atlaskit/primitives/compiled';
|
|
14
15
|
import Content from '../shared/content';
|
|
15
16
|
import IconRenderer from '../shared/icon-renderer';
|
|
16
17
|
var styles = {
|
|
17
18
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
19
|
+
baseT26Shape: "_2rko1qi0",
|
|
18
20
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
19
21
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
20
22
|
spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
|
|
@@ -125,7 +127,7 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
|
|
|
125
127
|
interactionName: interactionName
|
|
126
128
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
127
129
|
}, saferRest, {
|
|
128
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
130
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'danger' && selectedStyles.danger, isSelected && appearance === 'warning' && selectedStyles.warning, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter, shouldFitContainer && styles.fullWidth)
|
|
129
131
|
}), iconBefore && /*#__PURE__*/React.createElement(Content, {
|
|
130
132
|
type: "icon",
|
|
131
133
|
position: "before",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -10,6 +10,7 @@ import { forwardRef, memo, useRef } from 'react';
|
|
|
10
10
|
import { cx } from '@atlaskit/css';
|
|
11
11
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
12
12
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
13
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
14
|
import { Anchor } from '@atlaskit/primitives/compiled';
|
|
14
15
|
import Tooltip from '@atlaskit/tooltip';
|
|
15
16
|
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
@@ -17,6 +18,7 @@ import Content from '../shared/content';
|
|
|
17
18
|
import IconRenderer from '../shared/icon-renderer';
|
|
18
19
|
var styles = {
|
|
19
20
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
21
|
+
baseT26Shape: "_2rko1qi0",
|
|
20
22
|
linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
21
23
|
disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
|
|
22
24
|
spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
|
|
@@ -145,7 +147,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
145
147
|
ref: mergeRefs([localRef, ref, triggerProps.ref].filter(Boolean))
|
|
146
148
|
// Base props only
|
|
147
149
|
,
|
|
148
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
150
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton, shape === 'circle' && styles.circle),
|
|
149
151
|
onMouseDownCapture: onMouseDownCapture,
|
|
150
152
|
onMouseUpCapture: onMouseUpCapture,
|
|
151
153
|
onKeyDownCapture: onKeyDownCapture,
|
|
@@ -178,7 +180,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
|
|
|
178
180
|
// aria-label={preventedAriaLabel}
|
|
179
181
|
"aria-labelledby": ariaLabelledBy,
|
|
180
182
|
ref: mergeRefs([localRef, ref]),
|
|
181
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
183
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
|
|
182
184
|
onClick: _onClick,
|
|
183
185
|
onMouseDownCapture: onMouseDownCapture,
|
|
184
186
|
onMouseUpCapture: onMouseUpCapture,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
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
3
|
._14mj1kw7:after{border-radius:inherit}
|
|
4
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
5
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
|
|
5
6
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
7
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
@@ -10,6 +10,7 @@ import { cx } from '@atlaskit/css';
|
|
|
10
10
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
11
11
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
12
12
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
13
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
14
|
import { Pressable } from '@atlaskit/primitives/compiled';
|
|
14
15
|
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
15
16
|
import { SplitButtonContext, useSplitButtonContext } from '../../containers/split-button/split-button-context';
|
|
@@ -18,6 +19,7 @@ import renderLoadingOverlay from './loading-overlay';
|
|
|
18
19
|
var LOADING_LABEL = ', Loading';
|
|
19
20
|
var styles = {
|
|
20
21
|
base: "_2rkofajl _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
|
|
22
|
+
baseT26Shape: "_2rko1qi0",
|
|
21
23
|
linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
|
|
22
24
|
disabled: "_80om13gf _syaz1gmx _30l31gmx _9h8h1gmx",
|
|
23
25
|
sharedDisabled: "_bfhk1fvb _irr31fvb _1di61fvb",
|
|
@@ -160,7 +162,7 @@ function (_ref, ref) {
|
|
|
160
162
|
analyticsContext: analyticsContext,
|
|
161
163
|
role: role,
|
|
162
164
|
ref: mergeRefs([localRef, ref]),
|
|
163
|
-
xcss: cx(styles.base, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
165
|
+
xcss: cx(styles.base, fg('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'default' && isInteractive && defaultStyles.interactive, appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && subtleStyles.root, appearance === 'subtle' && isInteractive && subtleStyles.interactive, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
|
|
164
166
|
// TODO: remove me once we kill color fallbacks
|
|
165
167
|
isSelected && appearance === 'danger' && selectedStyles.danger,
|
|
166
168
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -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: "
|
|
128
|
+
packageVersion: "0.0.0-development",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
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; }
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { css } from '@emotion/react';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
7
|
var gridSize = 8;
|
|
7
8
|
var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
|
|
8
9
|
|
|
@@ -186,7 +187,7 @@ export function getCss(_ref) {
|
|
|
186
187
|
// 0px margin added to css-reset
|
|
187
188
|
alignItems: 'baseline',
|
|
188
189
|
borderWidth: 0,
|
|
189
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
190
|
+
borderRadius: fg('platform-dst-shape-theme-default') ? "var(--ds-radius-medium, 6px)" : "var(--ds-radius-small, 3px)",
|
|
190
191
|
boxSizing: 'border-box',
|
|
191
192
|
display: 'inline-flex',
|
|
192
193
|
fontSize: 'inherit',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.7.0",
|
|
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/"
|
|
@@ -99,17 +99,17 @@
|
|
|
99
99
|
"@af/integration-testing": "workspace:^",
|
|
100
100
|
"@af/visual-regression": "workspace:^",
|
|
101
101
|
"@atlaskit/app-provider": "^3.2.0",
|
|
102
|
-
"@atlaskit/checkbox": "^17.
|
|
102
|
+
"@atlaskit/checkbox": "^17.2.0",
|
|
103
103
|
"@atlaskit/docs": "^11.2.0",
|
|
104
104
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
105
105
|
"@atlaskit/form": "^14.3.0",
|
|
106
106
|
"@atlaskit/heading": "^5.2.0",
|
|
107
107
|
"@atlaskit/link": "^3.2.0",
|
|
108
108
|
"@atlaskit/logo": "^19.9.0",
|
|
109
|
-
"@atlaskit/modal-dialog": "^14.
|
|
110
|
-
"@atlaskit/section-message": "^8.
|
|
111
|
-
"@atlaskit/select": "^21.
|
|
112
|
-
"@atlaskit/toggle": "^15.
|
|
109
|
+
"@atlaskit/modal-dialog": "^14.8.0",
|
|
110
|
+
"@atlaskit/section-message": "^8.10.0",
|
|
111
|
+
"@atlaskit/select": "^21.5.0",
|
|
112
|
+
"@atlaskit/toggle": "^15.2.0",
|
|
113
113
|
"@atlassian/ssr-tests": "workspace:^",
|
|
114
114
|
"@testing-library/react": "^13.4.0",
|
|
115
115
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -122,6 +122,9 @@
|
|
|
122
122
|
"platform-feature-flags": {
|
|
123
123
|
"platform_dst_button_chevron_sizing": {
|
|
124
124
|
"type": "boolean"
|
|
125
|
+
},
|
|
126
|
+
"platform-dst-shape-theme-default": {
|
|
127
|
+
"type": "boolean"
|
|
125
128
|
}
|
|
126
129
|
}
|
|
127
130
|
}
|