@atlaskit/editor-toolbar 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.6.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`d0de8927cce08`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0de8927cce08) -
8
+ [ux] [ED-29049] this change updates the specificity for toolbar button group styles to prevent the
9
+ table selector buttons from inheriting incorrect border radius. this is behind the experiment
10
+ platform_editor_toolbar_aifc_patch_2.
11
+ - [`e5001e144b74e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5001e144b74e) -
12
+ Internal changes to how border radius is applied.
13
+
3
14
  ## 0.6.2
4
15
 
5
16
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
3
  ._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1e0c1txw{display:flex}
@@ -14,7 +14,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
14
14
  var _uiContext = require("../hooks/ui-context");
15
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); }
16
16
  var styles = {
17
- button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
17
+ button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
18
18
  enabled: "_irr3166n _1di61dty",
19
19
  disabled: "_syaz1lh4 _80om13gf",
20
20
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
@@ -1,6 +1,11 @@
1
1
 
2
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
2
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
3
+ ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
4
+ ._1e0c1txw{display:flex}
3
5
  ._1jiyidpf button{border-bottom-left-radius:0}
6
+ ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
7
+ ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
4
9
  ._t1diidpf button{border-top-right-radius:0}
5
10
  ._u6eridpf button{border-bottom-right-radius:0}
6
11
  ._xk07idpf button{border-top-left-radius:0}
@@ -11,11 +11,14 @@ 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",
17
18
  firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
18
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
19
+ lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
20
+ firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
21
+ lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
19
22
  };
20
23
  var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
21
24
  var children = _ref.children;
@@ -23,7 +26,15 @@ var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGrou
23
26
  var FirstChild = items.at(0);
24
27
  var LastChild = items.at(-1);
25
28
  var middleChildren = items.slice(1, -1);
26
- return /*#__PURE__*/React.createElement(_compiled.Box, {
29
+ var isToolbarPatch2Enabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
30
+ return isToolbarPatch2Enabled ? /*#__PURE__*/React.createElement(_compiled.Box, {
31
+ xcss: styles.container,
32
+ "data-toolbar-component": "button-group"
33
+ }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
34
+ className: (0, _runtime.ax)([styles.firstChildNew])
35
+ }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
36
+ className: (0, _runtime.ax)([styles.lastChildNew])
37
+ }, LastChild))) : /*#__PURE__*/React.createElement(_compiled.Box, {
27
38
  xcss: styles.container,
28
39
  "data-toolbar-component": "button-group"
29
40
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -1,6 +1,6 @@
1
1
 
2
2
  ._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
3
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1bsbgktf{width:20px}
6
6
  ._1e0c1txw{display:flex}
@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireDefault(require("react"));
12
12
  var _compiled = require("@atlaskit/primitives/compiled");
13
13
  var styles = {
14
- colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
14
+ colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
15
15
  };
16
16
  var ToolbarColorSwatch = exports.ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
17
17
  var children = _ref.children,
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
3
  ._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1e0c1txw{display:flex}
@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
6
6
  import { Pressable } from '@atlaskit/primitives/compiled';
7
7
  import { useToolbarUI } from '../hooks/ui-context';
8
8
  const styles = {
9
- button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
9
+ button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
10
10
  enabled: "_irr3166n _1di61dty",
11
11
  disabled: "_syaz1lh4 _80om13gf",
12
12
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
@@ -1,6 +1,11 @@
1
1
 
2
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
2
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
3
+ ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
4
+ ._1e0c1txw{display:flex}
3
5
  ._1jiyidpf button{border-bottom-left-radius:0}
6
+ ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
7
+ ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
4
9
  ._t1diidpf button{border-top-right-radius:0}
5
10
  ._u6eridpf button{border-bottom-right-radius:0}
6
11
  ._xk07idpf button{border-top-left-radius:0}
@@ -4,10 +4,13 @@ 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",
10
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
11
+ lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
12
+ firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
13
+ lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
11
14
  };
12
15
  export const ToolbarButtonGroup = ({
13
16
  children
@@ -16,7 +19,15 @@ export const ToolbarButtonGroup = ({
16
19
  const FirstChild = items.at(0);
17
20
  const LastChild = items.at(-1);
18
21
  const middleChildren = items.slice(1, -1);
19
- return /*#__PURE__*/React.createElement(Box, {
22
+ const isToolbarPatch2Enabled = expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
23
+ return isToolbarPatch2Enabled ? /*#__PURE__*/React.createElement(Box, {
24
+ xcss: styles.container,
25
+ "data-toolbar-component": "button-group"
26
+ }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
27
+ className: ax([styles.firstChildNew])
28
+ }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
29
+ className: ax([styles.lastChildNew])
30
+ }, LastChild))) : /*#__PURE__*/React.createElement(Box, {
20
31
  xcss: styles.container,
21
32
  "data-toolbar-component": "button-group"
22
33
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -1,6 +1,6 @@
1
1
 
2
2
  ._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
3
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1bsbgktf{width:20px}
6
6
  ._1e0c1txw{display:flex}
@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
5
  import { Box } from '@atlaskit/primitives/compiled';
6
6
  const styles = {
7
- colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
7
+ colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
8
8
  };
9
9
  export const ToolbarColorSwatch = ({
10
10
  children,
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
3
  ._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1e0c1txw{display:flex}
@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
6
6
  import { Pressable } from '@atlaskit/primitives/compiled';
7
7
  import { useToolbarUI } from '../hooks/ui-context';
8
8
  var styles = {
9
- button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
9
+ button: "_zulp12x7 _2rko12b0 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
10
10
  enabled: "_irr3166n _1di61dty",
11
11
  disabled: "_syaz1lh4 _80om13gf",
12
12
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
@@ -1,6 +1,11 @@
1
1
 
2
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._1e0c1txw{display:flex}
2
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
3
+ ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
4
+ ._1e0c1txw{display:flex}
3
5
  ._1jiyidpf button{border-bottom-left-radius:0}
6
+ ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
7
+ ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
4
9
  ._t1diidpf button{border-top-right-radius:0}
5
10
  ._u6eridpf button{border-bottom-right-radius:0}
6
11
  ._xk07idpf button{border-top-left-radius:0}
@@ -4,10 +4,13 @@ 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",
10
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
11
+ lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
12
+ firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
13
+ lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
11
14
  };
12
15
  export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
13
16
  var children = _ref.children;
@@ -15,7 +18,15 @@ export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
15
18
  var FirstChild = items.at(0);
16
19
  var LastChild = items.at(-1);
17
20
  var middleChildren = items.slice(1, -1);
18
- return /*#__PURE__*/React.createElement(Box, {
21
+ var isToolbarPatch2Enabled = expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
22
+ return isToolbarPatch2Enabled ? /*#__PURE__*/React.createElement(Box, {
23
+ xcss: styles.container,
24
+ "data-toolbar-component": "button-group"
25
+ }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
26
+ className: ax([styles.firstChildNew])
27
+ }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
28
+ className: ax([styles.lastChildNew])
29
+ }, LastChild))) : /*#__PURE__*/React.createElement(Box, {
19
30
  xcss: styles.container,
20
31
  "data-toolbar-component": "button-group"
21
32
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -1,6 +1,6 @@
1
1
 
2
2
  ._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
3
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
4
4
  ._1bah1h6o{justify-content:center}
5
5
  ._1bsbgktf{width:20px}
6
6
  ._1e0c1txw{display:flex}
@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
5
  import { Box } from '@atlaskit/primitives/compiled';
6
6
  var styles = {
7
- colorSwatch: "_19it7r9e _2rkoiti9 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
7
+ colorSwatch: "_19it7r9e _2rko12b0 _1e0c1txw _1bah1h6o _4cvr1h6o _1bsbgktf _4t3igktf _18u0r5cr _2hwxr5cr"
8
8
  };
9
9
  export var ToolbarColorSwatch = function ToolbarColorSwatch(_ref) {
10
10
  var children = _ref.children,
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.6.2",
6
+ "version": "0.6.3",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "team": "Editor: Jenga",
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
32
32
  "@atlaskit/popup": "^4.3.0",
33
33
  "@atlaskit/primitives": "^14.12.0",
34
- "@atlaskit/tmp-editor-statsig": "^12.0.0",
34
+ "@atlaskit/tmp-editor-statsig": "^12.1.0",
35
35
  "@atlaskit/tokens": "^6.1.0",
36
36
  "@atlaskit/tooltip": "^20.4.0",
37
37
  "@babel/runtime": "^7.0.0",