@atlaskit/reactions 22.7.3 → 22.7.4
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 +9 -0
- package/dist/cjs/analytics/index.js +1 -1
- package/dist/cjs/components/Trigger/Trigger.js +43 -19
- package/dist/es2019/analytics/index.js +1 -1
- package/dist/es2019/components/Trigger/Trigger.js +43 -19
- package/dist/esm/analytics/index.js +1 -1
- package/dist/esm/components/Trigger/Trigger.js +43 -19
- package/package.json +3 -3
- package/dist/cjs/components/Trigger/styles.js +0 -50
- package/dist/es2019/components/Trigger/styles.js +0 -42
- package/dist/esm/components/Trigger/styles.js +0 -45
- package/dist/types/components/Trigger/styles.d.ts +0 -5
- package/dist/types-ts4.5/components/Trigger/styles.d.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/reactions
|
|
2
2
|
|
|
3
|
+
## 22.7.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#113286](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113286)
|
|
8
|
+
[`3099017035f37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3099017035f37) -
|
|
9
|
+
Migrate native HTML buttons to Pressable primitive.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 22.7.3
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
|
|
|
11
11
|
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; }
|
|
12
12
|
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; }
|
|
13
13
|
var packageName = "@atlaskit/reactions";
|
|
14
|
-
var packageVersion = "22.7.
|
|
14
|
+
var packageVersion = "22.7.4";
|
|
15
15
|
/**
|
|
16
16
|
* TODO: move to utility package?
|
|
17
17
|
* A random sampling function
|
|
@@ -8,10 +8,9 @@ exports.Trigger = exports.RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TOOLTIP_
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
|
-
var
|
|
11
|
+
var _primitives = require("@atlaskit/primitives");
|
|
12
12
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
13
13
|
var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
|
|
14
|
-
var _styles = require("./styles");
|
|
15
14
|
/** @jsx jsx */
|
|
16
15
|
|
|
17
16
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -21,6 +20,39 @@ var _styles = require("./styles");
|
|
|
21
20
|
*/
|
|
22
21
|
var RENDER_TOOLTIP_TRIGGER_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
|
|
23
22
|
var RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
|
|
23
|
+
var triggerStyles = (0, _primitives.xcss)({
|
|
24
|
+
minWidth: '32px',
|
|
25
|
+
height: '24px',
|
|
26
|
+
padding: 'space.0',
|
|
27
|
+
borderWidth: 'border.width',
|
|
28
|
+
borderStyle: 'solid',
|
|
29
|
+
borderRadius: 'border.radius.circle',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
justifyContent: 'center',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
lineHeight: '16px'
|
|
34
|
+
});
|
|
35
|
+
var enabledTriggerStyles = (0, _primitives.xcss)({
|
|
36
|
+
borderColor: 'color.border',
|
|
37
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
38
|
+
':hover': {
|
|
39
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
40
|
+
},
|
|
41
|
+
':active': {
|
|
42
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
var disabledTriggerStyles = (0, _primitives.xcss)({
|
|
46
|
+
borderColor: 'color.border.disabled',
|
|
47
|
+
backgroundColor: 'color.background.disabled'
|
|
48
|
+
});
|
|
49
|
+
var miniModeStyles = (0, _primitives.xcss)({
|
|
50
|
+
minWidth: '24px',
|
|
51
|
+
padding: 'space.050',
|
|
52
|
+
border: 'none',
|
|
53
|
+
borderRadius: 'border.radius'
|
|
54
|
+
});
|
|
55
|
+
|
|
24
56
|
/**
|
|
25
57
|
* Render an emoji button to open the reactions select picker
|
|
26
58
|
*/
|
|
@@ -40,23 +72,15 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
|
|
|
40
72
|
return (0, _react2.jsx)(_tooltip.default, {
|
|
41
73
|
testId: RENDER_TOOLTIP_TRIGGER_TESTID,
|
|
42
74
|
content: tooltipContent
|
|
43
|
-
}, (0, _react2.jsx)(
|
|
44
|
-
testId: RENDER_TRIGGER_BUTTON_TESTID
|
|
45
|
-
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
47
|
-
,
|
|
48
|
-
css: (0, _styles.triggerStyle)({
|
|
49
|
-
miniMode: miniMode,
|
|
50
|
-
disabled: disabled
|
|
51
|
-
}),
|
|
52
|
-
appearance: "subtle",
|
|
75
|
+
}, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
|
|
76
|
+
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
77
|
+
xcss: [triggerStyles, disabled ? disabledTriggerStyles : enabledTriggerStyles, miniMode && miniModeStyles],
|
|
53
78
|
onClick: handleMouseDown,
|
|
54
|
-
|
|
55
|
-
iconBefore: (0, _react2.jsx)(_emojiAdd.default, {
|
|
56
|
-
size: "small",
|
|
57
|
-
label: "Add reaction"
|
|
58
|
-
}),
|
|
59
|
-
spacing: "none",
|
|
79
|
+
isDisabled: disabled,
|
|
60
80
|
ref: ref
|
|
61
|
-
}, ariaAttributes))
|
|
81
|
+
}, ariaAttributes), (0, _react2.jsx)(_emojiAdd.default, {
|
|
82
|
+
primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
|
|
83
|
+
size: "small",
|
|
84
|
+
label: "Add reaction"
|
|
85
|
+
})));
|
|
62
86
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createAndFireEvent } from '@atlaskit/analytics-next';
|
|
2
2
|
import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
|
|
3
3
|
const packageName = "@atlaskit/reactions";
|
|
4
|
-
const packageVersion = "22.7.
|
|
4
|
+
const packageVersion = "22.7.4";
|
|
5
5
|
/**
|
|
6
6
|
* TODO: move to utility package?
|
|
7
7
|
* A random sampling function
|
|
@@ -3,16 +3,48 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
|
-
import
|
|
6
|
+
import { Pressable, xcss } from '@atlaskit/primitives';
|
|
7
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
8
8
|
import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
|
|
9
|
-
import { triggerStyle } from './styles';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Test id for the tooltip
|
|
13
12
|
*/
|
|
14
13
|
export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
|
|
15
14
|
export const RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
|
|
15
|
+
const triggerStyles = xcss({
|
|
16
|
+
minWidth: '32px',
|
|
17
|
+
height: '24px',
|
|
18
|
+
padding: 'space.0',
|
|
19
|
+
borderWidth: 'border.width',
|
|
20
|
+
borderStyle: 'solid',
|
|
21
|
+
borderRadius: 'border.radius.circle',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
justifyContent: 'center',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
lineHeight: '16px'
|
|
26
|
+
});
|
|
27
|
+
const enabledTriggerStyles = xcss({
|
|
28
|
+
borderColor: 'color.border',
|
|
29
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
30
|
+
':hover': {
|
|
31
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
32
|
+
},
|
|
33
|
+
':active': {
|
|
34
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
const disabledTriggerStyles = xcss({
|
|
38
|
+
borderColor: 'color.border.disabled',
|
|
39
|
+
backgroundColor: 'color.background.disabled'
|
|
40
|
+
});
|
|
41
|
+
const miniModeStyles = xcss({
|
|
42
|
+
minWidth: '24px',
|
|
43
|
+
padding: 'space.050',
|
|
44
|
+
border: 'none',
|
|
45
|
+
borderRadius: 'border.radius'
|
|
46
|
+
});
|
|
47
|
+
|
|
16
48
|
/**
|
|
17
49
|
* Render an emoji button to open the reactions select picker
|
|
18
50
|
*/
|
|
@@ -32,23 +64,15 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
32
64
|
return jsx(Tooltip, {
|
|
33
65
|
testId: RENDER_TOOLTIP_TRIGGER_TESTID,
|
|
34
66
|
content: tooltipContent
|
|
35
|
-
}, jsx(
|
|
36
|
-
testId: RENDER_TRIGGER_BUTTON_TESTID
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
39
|
-
,
|
|
40
|
-
css: triggerStyle({
|
|
41
|
-
miniMode,
|
|
42
|
-
disabled
|
|
43
|
-
}),
|
|
44
|
-
appearance: "subtle",
|
|
67
|
+
}, jsx(Pressable, _extends({
|
|
68
|
+
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
69
|
+
xcss: [triggerStyles, disabled ? disabledTriggerStyles : enabledTriggerStyles, miniMode && miniModeStyles],
|
|
45
70
|
onClick: handleMouseDown,
|
|
46
|
-
|
|
47
|
-
iconBefore: jsx(EmojiAddIcon, {
|
|
48
|
-
size: "small",
|
|
49
|
-
label: "Add reaction"
|
|
50
|
-
}),
|
|
51
|
-
spacing: "none",
|
|
71
|
+
isDisabled: disabled,
|
|
52
72
|
ref: ref
|
|
53
|
-
}, ariaAttributes)
|
|
73
|
+
}, ariaAttributes), jsx(EmojiAddIcon, {
|
|
74
|
+
primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
|
|
75
|
+
size: "small",
|
|
76
|
+
label: "Add reaction"
|
|
77
|
+
})));
|
|
54
78
|
});
|
|
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
import { createAndFireEvent } from '@atlaskit/analytics-next';
|
|
5
5
|
import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
|
|
6
6
|
var packageName = "@atlaskit/reactions";
|
|
7
|
-
var packageVersion = "22.7.
|
|
7
|
+
var packageVersion = "22.7.4";
|
|
8
8
|
/**
|
|
9
9
|
* TODO: move to utility package?
|
|
10
10
|
* A random sampling function
|
|
@@ -3,16 +3,48 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
|
-
import
|
|
6
|
+
import { Pressable, xcss } from '@atlaskit/primitives';
|
|
7
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
8
8
|
import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
|
|
9
|
-
import { triggerStyle } from './styles';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Test id for the tooltip
|
|
13
12
|
*/
|
|
14
13
|
export var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
|
|
15
14
|
export var RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
|
|
15
|
+
var triggerStyles = xcss({
|
|
16
|
+
minWidth: '32px',
|
|
17
|
+
height: '24px',
|
|
18
|
+
padding: 'space.0',
|
|
19
|
+
borderWidth: 'border.width',
|
|
20
|
+
borderStyle: 'solid',
|
|
21
|
+
borderRadius: 'border.radius.circle',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
justifyContent: 'center',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
lineHeight: '16px'
|
|
26
|
+
});
|
|
27
|
+
var enabledTriggerStyles = xcss({
|
|
28
|
+
borderColor: 'color.border',
|
|
29
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
30
|
+
':hover': {
|
|
31
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
32
|
+
},
|
|
33
|
+
':active': {
|
|
34
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
var disabledTriggerStyles = xcss({
|
|
38
|
+
borderColor: 'color.border.disabled',
|
|
39
|
+
backgroundColor: 'color.background.disabled'
|
|
40
|
+
});
|
|
41
|
+
var miniModeStyles = xcss({
|
|
42
|
+
minWidth: '24px',
|
|
43
|
+
padding: 'space.050',
|
|
44
|
+
border: 'none',
|
|
45
|
+
borderRadius: 'border.radius'
|
|
46
|
+
});
|
|
47
|
+
|
|
16
48
|
/**
|
|
17
49
|
* Render an emoji button to open the reactions select picker
|
|
18
50
|
*/
|
|
@@ -32,23 +64,15 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
32
64
|
return jsx(Tooltip, {
|
|
33
65
|
testId: RENDER_TOOLTIP_TRIGGER_TESTID,
|
|
34
66
|
content: tooltipContent
|
|
35
|
-
}, jsx(
|
|
36
|
-
testId: RENDER_TRIGGER_BUTTON_TESTID
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
39
|
-
,
|
|
40
|
-
css: triggerStyle({
|
|
41
|
-
miniMode: miniMode,
|
|
42
|
-
disabled: disabled
|
|
43
|
-
}),
|
|
44
|
-
appearance: "subtle",
|
|
67
|
+
}, jsx(Pressable, _extends({
|
|
68
|
+
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
69
|
+
xcss: [triggerStyles, disabled ? disabledTriggerStyles : enabledTriggerStyles, miniMode && miniModeStyles],
|
|
45
70
|
onClick: handleMouseDown,
|
|
46
|
-
|
|
47
|
-
iconBefore: jsx(EmojiAddIcon, {
|
|
48
|
-
size: "small",
|
|
49
|
-
label: "Add reaction"
|
|
50
|
-
}),
|
|
51
|
-
spacing: "none",
|
|
71
|
+
isDisabled: disabled,
|
|
52
72
|
ref: ref
|
|
53
|
-
}, ariaAttributes)
|
|
73
|
+
}, ariaAttributes), jsx(EmojiAddIcon, {
|
|
74
|
+
primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
|
|
75
|
+
size: "small",
|
|
76
|
+
label: "Add reaction"
|
|
77
|
+
})));
|
|
54
78
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/reactions",
|
|
3
|
-
"version": "22.7.
|
|
3
|
+
"version": "22.7.4",
|
|
4
4
|
"description": "Reactions component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"@atlaskit/modal-dialog": "^12.14.0",
|
|
44
44
|
"@atlaskit/motion": "^1.7.0",
|
|
45
45
|
"@atlaskit/popper": "^6.1.0",
|
|
46
|
-
"@atlaskit/primitives": "^8.
|
|
46
|
+
"@atlaskit/primitives": "^8.1.0",
|
|
47
47
|
"@atlaskit/spinner": "^16.2.0",
|
|
48
48
|
"@atlaskit/tabs": "^16.2.0",
|
|
49
49
|
"@atlaskit/theme": "^12.11.0",
|
|
50
|
-
"@atlaskit/tokens": "^1.
|
|
50
|
+
"@atlaskit/tokens": "^1.53.0",
|
|
51
51
|
"@atlaskit/tooltip": "^18.5.0",
|
|
52
52
|
"@atlaskit/ufo": "^0.2.0",
|
|
53
53
|
"@atlaskit/util-service-support": "^6.2.0",
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.triggerStyle = exports.DISABLED_BUTTON_COLOR = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
var _constants = require("@atlaskit/theme/constants");
|
|
12
|
-
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; }
|
|
13
|
-
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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
-
var DISABLED_BUTTON_COLOR = exports.DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(_colors.N70, ")"), " !important");
|
|
15
|
-
var triggerStyle = exports.triggerStyle = function triggerStyle(_ref) {
|
|
16
|
-
var _ref$miniMode = _ref.miniMode,
|
|
17
|
-
miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
|
|
18
|
-
_ref$disabled = _ref.disabled,
|
|
19
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
20
|
-
return (0, _react.css)(_objectSpread(_objectSpread(_objectSpread({
|
|
21
|
-
minWidth: '32px',
|
|
22
|
-
height: '24px',
|
|
23
|
-
padding: 0,
|
|
24
|
-
border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
|
|
25
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
26
|
-
borderRadius: '20px',
|
|
27
|
-
display: 'flex',
|
|
28
|
-
justifyContent: 'center',
|
|
29
|
-
alignItems: 'center',
|
|
30
|
-
lineHeight: '16px'
|
|
31
|
-
}, miniMode && {
|
|
32
|
-
minWidth: '24px',
|
|
33
|
-
padding: "var(--ds-space-050, 4px)",
|
|
34
|
-
border: 'none',
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
36
|
-
borderRadius: "".concat((0, _constants.borderRadius)(), "px")
|
|
37
|
-
}), disabled && {
|
|
38
|
-
color: DISABLED_BUTTON_COLOR,
|
|
39
|
-
cursor: 'not-allowed'
|
|
40
|
-
}), {}, {
|
|
41
|
-
'&:hover': {
|
|
42
|
-
background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
|
|
43
|
-
},
|
|
44
|
-
'&:focus': {
|
|
45
|
-
boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
|
|
46
|
-
transitionDuration: '0s, 0.2s',
|
|
47
|
-
outline: 'none'
|
|
48
|
-
}
|
|
49
|
-
}));
|
|
50
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
|
-
import { css } from '@emotion/react';
|
|
4
|
-
import { N70, N20, N40, B100 } from '@atlaskit/theme/colors';
|
|
5
|
-
import { borderRadius } from '@atlaskit/theme/constants';
|
|
6
|
-
export const DISABLED_BUTTON_COLOR = `${`var(--ds-text-disabled, ${N70})`} !important`;
|
|
7
|
-
export const triggerStyle = ({
|
|
8
|
-
miniMode = false,
|
|
9
|
-
disabled = false
|
|
10
|
-
}) => css({
|
|
11
|
-
minWidth: '32px',
|
|
12
|
-
height: '24px',
|
|
13
|
-
padding: 0,
|
|
14
|
-
border: `1px solid ${`var(--ds-border, ${N40})`}`,
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
16
|
-
borderRadius: '20px',
|
|
17
|
-
display: 'flex',
|
|
18
|
-
justifyContent: 'center',
|
|
19
|
-
alignItems: 'center',
|
|
20
|
-
lineHeight: '16px',
|
|
21
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
22
|
-
...(miniMode && {
|
|
23
|
-
minWidth: '24px',
|
|
24
|
-
padding: "var(--ds-space-050, 4px)",
|
|
25
|
-
border: 'none',
|
|
26
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
27
|
-
borderRadius: `${borderRadius()}px`
|
|
28
|
-
}),
|
|
29
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
30
|
-
...(disabled && {
|
|
31
|
-
color: DISABLED_BUTTON_COLOR,
|
|
32
|
-
cursor: 'not-allowed'
|
|
33
|
-
}),
|
|
34
|
-
'&:hover': {
|
|
35
|
-
background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
|
|
36
|
-
},
|
|
37
|
-
'&:focus': {
|
|
38
|
-
boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
|
|
39
|
-
transitionDuration: '0s, 0.2s',
|
|
40
|
-
outline: 'none'
|
|
41
|
-
}
|
|
42
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
/** @jsx jsx */
|
|
5
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
-
import { css } from '@emotion/react';
|
|
7
|
-
import { N70, N20, N40, B100 } from '@atlaskit/theme/colors';
|
|
8
|
-
import { borderRadius } from '@atlaskit/theme/constants';
|
|
9
|
-
export var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(N70, ")"), " !important");
|
|
10
|
-
export var triggerStyle = function triggerStyle(_ref) {
|
|
11
|
-
var _ref$miniMode = _ref.miniMode,
|
|
12
|
-
miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
|
|
13
|
-
_ref$disabled = _ref.disabled,
|
|
14
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
15
|
-
return css(_objectSpread(_objectSpread(_objectSpread({
|
|
16
|
-
minWidth: '32px',
|
|
17
|
-
height: '24px',
|
|
18
|
-
padding: 0,
|
|
19
|
-
border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
21
|
-
borderRadius: '20px',
|
|
22
|
-
display: 'flex',
|
|
23
|
-
justifyContent: 'center',
|
|
24
|
-
alignItems: 'center',
|
|
25
|
-
lineHeight: '16px'
|
|
26
|
-
}, miniMode && {
|
|
27
|
-
minWidth: '24px',
|
|
28
|
-
padding: "var(--ds-space-050, 4px)",
|
|
29
|
-
border: 'none',
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
31
|
-
borderRadius: "".concat(borderRadius(), "px")
|
|
32
|
-
}), disabled && {
|
|
33
|
-
color: DISABLED_BUTTON_COLOR,
|
|
34
|
-
cursor: 'not-allowed'
|
|
35
|
-
}), {}, {
|
|
36
|
-
'&:hover': {
|
|
37
|
-
background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"))
|
|
38
|
-
},
|
|
39
|
-
'&:focus': {
|
|
40
|
-
boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
|
|
41
|
-
transitionDuration: '0s, 0.2s',
|
|
42
|
-
outline: 'none'
|
|
43
|
-
}
|
|
44
|
-
}));
|
|
45
|
-
};
|