@atlaskit/editor-toolbar 0.19.18 → 0.19.20
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/ui/ToolbarButtonGroup.compiled.css +6 -1
- package/dist/cjs/ui/ToolbarButtonGroup.js +16 -0
- package/dist/cjs/ui/ToolbarSection.js +1 -2
- package/dist/es2019/ui/ToolbarButtonGroup.compiled.css +6 -1
- package/dist/es2019/ui/ToolbarButtonGroup.js +16 -0
- package/dist/es2019/ui/ToolbarSection.js +1 -2
- package/dist/esm/ui/ToolbarButtonGroup.compiled.css +6 -1
- package/dist/esm/ui/ToolbarButtonGroup.js +16 -0
- package/dist/esm/ui/ToolbarSection.js +1 -2
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.19.20
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`b43aaf2b5d0ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b43aaf2b5d0ff) -
|
|
8
|
+
Remove platform_editor_toolbar_aifc_undo_redo_confluence feature gate
|
|
9
|
+
|
|
10
|
+
## 0.19.19
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`2126e50c0c9e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2126e50c0c9e4) -
|
|
15
|
+
[ux] [EDITOR-4926] update ToolbarButtonGroup UI and remove unwanted tooltip from AI dropdown
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 0.19.18
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
|
|
2
|
+
._zulpv77o{gap:var(--ds-space-025,2px)}
|
|
2
3
|
._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
.
|
|
4
|
+
._19pe1b66 [data-toolbar-component=button]{padding-inline:var(--ds-space-050,4px)}
|
|
5
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
6
|
+
._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
|
|
4
7
|
._1e0c1txw{display:flex}
|
|
5
8
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
6
9
|
._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
|
|
7
10
|
._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
|
|
11
|
+
._eurs1b66 [data-toolbar-component=button]{padding-right:var(--ds-space-050,4px)}
|
|
8
12
|
._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
|
|
13
|
+
._pdav12x7 [data-toolbar-component=button]{padding-left:var(--ds-space-075,6px)}
|
|
9
14
|
._t1diidpf button{border-top-right-radius:0}
|
|
10
15
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
11
16
|
._xk07idpf button{border-top-left-radius:0}
|
|
@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var React = _react;
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
13
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
14
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
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); }
|
|
15
16
|
var styles = {
|
|
16
17
|
container: "_1e0c1txw",
|
|
@@ -19,12 +20,27 @@ var styles = {
|
|
|
19
20
|
firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
|
|
20
21
|
lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
|
|
21
22
|
};
|
|
23
|
+
var stylesNew = {
|
|
24
|
+
container: "_zulpv77o _1e0c1txw _14jy1dpa",
|
|
25
|
+
firstChild: "_1qq0idpf _3nesidpf _pdav12x7 _eurs1b66",
|
|
26
|
+
lastChild: "_19pe1b66 _15rdidpf _i84vidpf"
|
|
27
|
+
};
|
|
22
28
|
var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
|
|
23
29
|
var children = _ref.children;
|
|
24
30
|
var items = _react.Children.toArray(children);
|
|
25
31
|
var FirstChild = items.at(0);
|
|
26
32
|
var LastChild = items.at(-1);
|
|
27
33
|
var middleChildren = items.slice(1, -1);
|
|
34
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_split_button_ui', 'isEnabled', true)) {
|
|
35
|
+
return /*#__PURE__*/React.createElement(_compiled.Box, {
|
|
36
|
+
xcss: stylesNew.container,
|
|
37
|
+
"data-toolbar-component": "button-group"
|
|
38
|
+
}, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: (0, _runtime.ax)([stylesNew.firstChild])
|
|
40
|
+
}, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
|
|
41
|
+
className: (0, _runtime.ax)([stylesNew.lastChild])
|
|
42
|
+
}, LastChild)));
|
|
43
|
+
}
|
|
28
44
|
return /*#__PURE__*/React.createElement(_compiled.Box, {
|
|
29
45
|
xcss: styles.container,
|
|
30
46
|
"data-toolbar-component": "button-group"
|
|
@@ -10,7 +10,6 @@ require("./ToolbarSection.compiled.css");
|
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
12
|
var _css = require("@atlaskit/css");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
15
14
|
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); }
|
|
16
15
|
var SeparatorPosition = exports.SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
|
|
@@ -28,7 +27,7 @@ var ToolbarSeparator = function ToolbarSeparator() {
|
|
|
28
27
|
"data-toolbar-component": "separator",
|
|
29
28
|
role: "separator",
|
|
30
29
|
"aria-orientation": "vertical",
|
|
31
|
-
className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x",
|
|
30
|
+
className: (0, _runtime.ax)(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x", "_1p9bv77o"])
|
|
32
31
|
});
|
|
33
32
|
};
|
|
34
33
|
var ToolbarSection = exports.ToolbarSection = function ToolbarSection(_ref) {
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
|
|
2
|
+
._zulpv77o{gap:var(--ds-space-025,2px)}
|
|
2
3
|
._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
.
|
|
4
|
+
._19pe1b66 [data-toolbar-component=button]{padding-inline:var(--ds-space-050,4px)}
|
|
5
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
6
|
+
._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
|
|
4
7
|
._1e0c1txw{display:flex}
|
|
5
8
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
6
9
|
._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
|
|
7
10
|
._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
|
|
11
|
+
._eurs1b66 [data-toolbar-component=button]{padding-right:var(--ds-space-050,4px)}
|
|
8
12
|
._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
|
|
13
|
+
._pdav12x7 [data-toolbar-component=button]{padding-left:var(--ds-space-075,6px)}
|
|
9
14
|
._t1diidpf button{border-top-right-radius:0}
|
|
10
15
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
11
16
|
._xk07idpf button{border-top-left-radius:0}
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { Children, Fragment } from 'react';
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
8
|
const styles = {
|
|
8
9
|
container: "_1e0c1txw",
|
|
9
10
|
firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
|
|
@@ -11,6 +12,11 @@ const styles = {
|
|
|
11
12
|
firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
|
|
12
13
|
lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
|
|
13
14
|
};
|
|
15
|
+
const stylesNew = {
|
|
16
|
+
container: "_zulpv77o _1e0c1txw _14jy1dpa",
|
|
17
|
+
firstChild: "_1qq0idpf _3nesidpf _pdav12x7 _eurs1b66",
|
|
18
|
+
lastChild: "_19pe1b66 _15rdidpf _i84vidpf"
|
|
19
|
+
};
|
|
14
20
|
export const ToolbarButtonGroup = ({
|
|
15
21
|
children
|
|
16
22
|
}) => {
|
|
@@ -18,6 +24,16 @@ export const ToolbarButtonGroup = ({
|
|
|
18
24
|
const FirstChild = items.at(0);
|
|
19
25
|
const LastChild = items.at(-1);
|
|
20
26
|
const middleChildren = items.slice(1, -1);
|
|
27
|
+
if (expValEquals('platform_editor_toolbar_split_button_ui', 'isEnabled', true)) {
|
|
28
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
29
|
+
xcss: stylesNew.container,
|
|
30
|
+
"data-toolbar-component": "button-group"
|
|
31
|
+
}, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
32
|
+
className: ax([stylesNew.firstChild])
|
|
33
|
+
}, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: ax([stylesNew.lastChild])
|
|
35
|
+
}, LastChild)));
|
|
36
|
+
}
|
|
21
37
|
return /*#__PURE__*/React.createElement(Box, {
|
|
22
38
|
xcss: styles.container,
|
|
23
39
|
"data-toolbar-component": "button-group"
|
|
@@ -3,7 +3,6 @@ import "./ToolbarSection.compiled.css";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { cx } from '@atlaskit/css';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
8
7
|
export let SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
|
|
9
8
|
SeparatorPosition["START"] = "start";
|
|
@@ -20,7 +19,7 @@ const ToolbarSeparator = () => {
|
|
|
20
19
|
"data-toolbar-component": "separator",
|
|
21
20
|
role: "separator",
|
|
22
21
|
"aria-orientation": "vertical",
|
|
23
|
-
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x",
|
|
22
|
+
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x", "_1p9bv77o"])
|
|
24
23
|
});
|
|
25
24
|
};
|
|
26
25
|
export const ToolbarSection = ({
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
|
|
2
|
+
._zulpv77o{gap:var(--ds-space-025,2px)}
|
|
2
3
|
._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
|
|
3
|
-
.
|
|
4
|
+
._19pe1b66 [data-toolbar-component=button]{padding-inline:var(--ds-space-050,4px)}
|
|
5
|
+
._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
6
|
+
._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
|
|
4
7
|
._1e0c1txw{display:flex}
|
|
5
8
|
._1jiyidpf button{border-bottom-left-radius:0}
|
|
6
9
|
._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
|
|
7
10
|
._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
|
|
11
|
+
._eurs1b66 [data-toolbar-component=button]{padding-right:var(--ds-space-050,4px)}
|
|
8
12
|
._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
|
|
13
|
+
._pdav12x7 [data-toolbar-component=button]{padding-left:var(--ds-space-075,6px)}
|
|
9
14
|
._t1diidpf button{border-top-right-radius:0}
|
|
10
15
|
._u6eridpf button{border-bottom-right-radius:0}
|
|
11
16
|
._xk07idpf button{border-top-left-radius:0}
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { Children, Fragment } from 'react';
|
|
6
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
7
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
8
|
var styles = {
|
|
8
9
|
container: "_1e0c1txw",
|
|
9
10
|
firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
|
|
@@ -11,12 +12,27 @@ var styles = {
|
|
|
11
12
|
firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
|
|
12
13
|
lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
|
|
13
14
|
};
|
|
15
|
+
var stylesNew = {
|
|
16
|
+
container: "_zulpv77o _1e0c1txw _14jy1dpa",
|
|
17
|
+
firstChild: "_1qq0idpf _3nesidpf _pdav12x7 _eurs1b66",
|
|
18
|
+
lastChild: "_19pe1b66 _15rdidpf _i84vidpf"
|
|
19
|
+
};
|
|
14
20
|
export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
|
|
15
21
|
var children = _ref.children;
|
|
16
22
|
var items = Children.toArray(children);
|
|
17
23
|
var FirstChild = items.at(0);
|
|
18
24
|
var LastChild = items.at(-1);
|
|
19
25
|
var middleChildren = items.slice(1, -1);
|
|
26
|
+
if (expValEquals('platform_editor_toolbar_split_button_ui', 'isEnabled', true)) {
|
|
27
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
28
|
+
xcss: stylesNew.container,
|
|
29
|
+
"data-toolbar-component": "button-group"
|
|
30
|
+
}, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: ax([stylesNew.firstChild])
|
|
32
|
+
}, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: ax([stylesNew.lastChild])
|
|
34
|
+
}, LastChild)));
|
|
35
|
+
}
|
|
20
36
|
return /*#__PURE__*/React.createElement(Box, {
|
|
21
37
|
xcss: styles.container,
|
|
22
38
|
"data-toolbar-component": "button-group"
|
|
@@ -3,7 +3,6 @@ import "./ToolbarSection.compiled.css";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { cx } from '@atlaskit/css';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
8
7
|
export var SeparatorPosition = /*#__PURE__*/function (SeparatorPosition) {
|
|
9
8
|
SeparatorPosition["START"] = "start";
|
|
@@ -20,7 +19,7 @@ var ToolbarSeparator = function ToolbarSeparator() {
|
|
|
20
19
|
"data-toolbar-component": "separator",
|
|
21
20
|
role: "separator",
|
|
22
21
|
"aria-orientation": "vertical",
|
|
23
|
-
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x",
|
|
22
|
+
className: ax(["_195gu2gc _4t3igktf _1bsbt94y _bfhk1l7x", "_1p9bv77o"])
|
|
24
23
|
});
|
|
25
24
|
};
|
|
26
25
|
export var ToolbarSection = function ToolbarSection(_ref) {
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.19.
|
|
6
|
+
"version": "0.19.20",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"team": "Editor: Jenga",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
31
31
|
"@atlaskit/popup": "^4.13.0",
|
|
32
32
|
"@atlaskit/primitives": "^18.0.0",
|
|
33
|
-
"@atlaskit/tmp-editor-statsig": "^22.
|
|
33
|
+
"@atlaskit/tmp-editor-statsig": "^22.1.0",
|
|
34
34
|
"@atlaskit/tokens": "^11.0.0",
|
|
35
35
|
"@atlaskit/tooltip": "^20.14.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
@@ -81,9 +81,6 @@
|
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
"platform-feature-flags": {
|
|
84
|
-
"platform_editor_toolbar_aifc_undo_redo_confluence": {
|
|
85
|
-
"type": "boolean"
|
|
86
|
-
},
|
|
87
84
|
"platform_editor_toolbar_highlight_bug_fix": {
|
|
88
85
|
"type": "boolean"
|
|
89
86
|
}
|