@atlaskit/editor-toolbar 2.0.9 → 2.0.11

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/dist/cjs/ui/ColorPalette/Color.compiled.css +2 -1
  3. package/dist/cjs/ui/ColorPalette/Color.js +28 -0
  4. package/dist/cjs/ui/ColorPalette/index.js +4 -0
  5. package/dist/es2019/ui/ColorPalette/Color.compiled.css +2 -1
  6. package/dist/es2019/ui/ColorPalette/Color.js +28 -0
  7. package/dist/es2019/ui/ColorPalette/index.js +4 -0
  8. package/dist/esm/ui/ColorPalette/Color.compiled.css +2 -1
  9. package/dist/esm/ui/ColorPalette/Color.js +28 -0
  10. package/dist/esm/ui/ColorPalette/index.js +4 -0
  11. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 2.0.11
4
+
5
+ ### Patch Changes
6
+
7
+ - [`262d8099a9e63`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/262d8099a9e63) -
8
+ [ux] [EDITOR-7851] address minor UI fixes for platform_editor_lovability_text_bg_color experiment
9
+ behind platform_editor_lovability_text_bg_color_patch_1
10
+
11
+ ## 2.0.10
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 2.0.9
4
18
 
5
19
  ### Patch Changes
@@ -23,7 +37,7 @@
23
37
  ### Patch Changes
24
38
 
25
39
  - [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
26
- Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
40
+ Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform
27
41
  gating.
28
42
  - Updated dependencies
29
43
 
package/dist/cjs/ui/ColorPalette/Color.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._19bvidpf{padding-left:0}
package/dist/cjs/ui/ColorPalette/Color.js CHANGED
@@ -11,9 +11,12 @@ require("./Color.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
14
16
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
15
17
  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
18
  var buttonWrapperStyles = null;
19
+ var buttonWrapperStylesNew = null;
17
20
  var buttonStyles = null;
18
21
 
19
22
  /**
@@ -48,6 +51,31 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
48
51
  e.preventDefault();
49
52
  onKeyDown(value, label, e);
50
53
  }, [onKeyDown, value, label]);
54
+ if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
55
+ return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
56
+ content: label
57
+ }, /*#__PURE__*/_react.default.createElement("span", {
58
+ className: (0, _runtime.ax)(["_2rko1qi0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
59
+ }, /*#__PURE__*/_react.default.createElement("button", {
60
+ type: "button",
61
+ "aria-label": label,
62
+ role: "radio",
63
+ "aria-checked": isSelected,
64
+ onClick: handleClick,
65
+ onKeyDown: handleKeyDown,
66
+ onMouseDown: handleMouseDown,
67
+ tabIndex: tabIndex,
68
+ style: {
69
+ backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
70
+ border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor)
71
+ },
72
+ autoFocus: autoFocus,
73
+ className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3i1ejb _1bsb1ejb _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
74
+ }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMark.default, {
75
+ color: checkMarkColor,
76
+ label: ""
77
+ }), decorator)));
78
+ }
51
79
  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
52
80
  content: label
53
81
  }, /*#__PURE__*/_react.default.createElement("span", {
package/dist/cjs/ui/ColorPalette/index.js CHANGED
@@ -9,7 +9,9 @@ exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _chromatism = _interopRequireDefault(require("chromatism"));
11
11
  var _reactIntl = require("react-intl");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _compiled = require("@atlaskit/primitives/compiled");
14
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
13
15
  var _tokens = require("@atlaskit/tokens");
14
16
  var _Color = require("./Color");
15
17
  var _getColorMessage = _interopRequireDefault(require("./getColorMessage"));
@@ -68,6 +70,7 @@ var ColorPalette = function ColorPalette(_ref) {
68
70
  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
69
71
  tokenTheme = _useThemeObserver.colorMode;
70
72
  var useIconToken = !!hexToPaletteColor;
73
+ var columnSpace = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? 'space.050' : undefined;
71
74
 
72
75
  // Refs for keyboard navigation
73
76
  var paletteRef = (0, _react.useRef)(null);
@@ -259,6 +262,7 @@ var ColorPalette = function ColorPalette(_ref) {
259
262
  }, colorsPerRow.map(function (row, rowIndex) {
260
263
  return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
261
264
  rowSpace: "space.050",
265
+ space: columnSpace,
262
266
  key: "row-first-color-".concat(row[0].value),
263
267
  role: "radiogroup"
264
268
  }, row.map(function (_ref2, colIndex) {
package/dist/es2019/ui/ColorPalette/Color.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._19bvidpf{padding-left:0}
package/dist/es2019/ui/ColorPalette/Color.js CHANGED
@@ -3,8 +3,11 @@ import "./Color.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useCallback, memo } from 'react';
5
5
  import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
6
8
  import Tooltip from '@atlaskit/tooltip';
7
9
  const buttonWrapperStyles = null;
10
+ const buttonWrapperStylesNew = null;
8
11
  const buttonStyles = null;
9
12
 
10
13
  /**
@@ -39,6 +42,31 @@ export const Color = /*#__PURE__*/memo(({
39
42
  e.preventDefault();
40
43
  onKeyDown(value, label, e);
41
44
  }, [onKeyDown, value, label]);
45
+ if (expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1')) {
46
+ return /*#__PURE__*/React.createElement(Tooltip, {
47
+ content: label
48
+ }, /*#__PURE__*/React.createElement("span", {
49
+ className: ax(["_2rko1qi0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
50
+ }, /*#__PURE__*/React.createElement("button", {
51
+ type: "button",
52
+ "aria-label": label,
53
+ role: "radio",
54
+ "aria-checked": isSelected,
55
+ onClick: handleClick,
56
+ onKeyDown: handleKeyDown,
57
+ onMouseDown: handleMouseDown,
58
+ tabIndex: tabIndex,
59
+ style: {
60
+ backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
61
+ border: `${"var(--ds-border-width, 1px)"} solid ${borderColor}`
62
+ },
63
+ autoFocus: autoFocus,
64
+ className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3i1ejb _1bsb1ejb _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
65
+ }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
66
+ color: checkMarkColor,
67
+ label: ""
68
+ }), decorator)));
69
+ }
42
70
  return /*#__PURE__*/React.createElement(Tooltip, {
43
71
  content: label
44
72
  }, /*#__PURE__*/React.createElement("span", {
package/dist/es2019/ui/ColorPalette/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { useMemo, useCallback, useRef, useEffect } from 'react';
2
2
  import chromatism from 'chromatism';
3
3
  import { useIntl } from 'react-intl';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { Grid, Inline } from '@atlaskit/primitives/compiled';
6
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
5
7
  import { useThemeObserver } from '@atlaskit/tokens';
6
8
  import { Color } from './Color';
7
9
  import getColorMessage from './getColorMessage';
@@ -62,6 +64,7 @@ const ColorPalette = ({
62
64
  colorMode: tokenTheme
63
65
  } = useThemeObserver();
64
66
  const useIconToken = !!hexToPaletteColor;
67
+ const columnSpace = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1') ? 'space.050' : undefined;
65
68
 
66
69
  // Refs for keyboard navigation
67
70
  const paletteRef = useRef(null);
@@ -254,6 +257,7 @@ const ColorPalette = ({
254
257
  role: "group"
255
258
  }, colorsPerRow.map((row, rowIndex) => /*#__PURE__*/React.createElement(Inline, {
256
259
  rowSpace: "space.050",
260
+ space: columnSpace,
257
261
  key: `row-first-color-${row[0].value}`,
258
262
  role: "radiogroup"
259
263
  }, row.map(({
package/dist/esm/ui/ColorPalette/Color.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
3
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6d1j28{border-color:transparent}
6
7
  ._19bvidpf{padding-left:0}
package/dist/esm/ui/ColorPalette/Color.js CHANGED
@@ -3,8 +3,11 @@ import "./Color.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useCallback, memo } from 'react';
5
5
  import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
6
8
  import Tooltip from '@atlaskit/tooltip';
7
9
  var buttonWrapperStyles = null;
10
+ var buttonWrapperStylesNew = null;
8
11
  var buttonStyles = null;
9
12
 
10
13
  /**
@@ -39,6 +42,31 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
39
42
  e.preventDefault();
40
43
  onKeyDown(value, label, e);
41
44
  }, [onKeyDown, value, label]);
45
+ if (expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1')) {
46
+ return /*#__PURE__*/React.createElement(Tooltip, {
47
+ content: label
48
+ }, /*#__PURE__*/React.createElement("span", {
49
+ className: ax(["_2rko1qi0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858u1l7x _jyzf1l7x _4cvx1l7x"])
50
+ }, /*#__PURE__*/React.createElement("button", {
51
+ type: "button",
52
+ "aria-label": label,
53
+ role: "radio",
54
+ "aria-checked": isSelected,
55
+ onClick: handleClick,
56
+ onKeyDown: handleKeyDown,
57
+ onMouseDown: handleMouseDown,
58
+ tabIndex: tabIndex,
59
+ style: {
60
+ backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
61
+ border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor)
62
+ },
63
+ autoFocus: autoFocus,
64
+ className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3i1ejb _1bsb1ejb _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
65
+ }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
66
+ color: checkMarkColor,
67
+ label: ""
68
+ }), decorator)));
69
+ }
42
70
  return /*#__PURE__*/React.createElement(Tooltip, {
43
71
  content: label
44
72
  }, /*#__PURE__*/React.createElement("span", {
package/dist/esm/ui/ColorPalette/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import React, { useMemo, useCallback, useRef, useEffect } from 'react';
2
2
  import chromatism from 'chromatism';
3
3
  import { useIntl } from 'react-intl';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { Grid, Inline } from '@atlaskit/primitives/compiled';
6
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
5
7
  import { useThemeObserver } from '@atlaskit/tokens';
6
8
  import { Color } from './Color';
7
9
  import getColorMessage from './getColorMessage';
@@ -60,6 +62,7 @@ var ColorPalette = function ColorPalette(_ref) {
60
62
  var _useThemeObserver = useThemeObserver(),
61
63
  tokenTheme = _useThemeObserver.colorMode;
62
64
  var useIconToken = !!hexToPaletteColor;
65
+ var columnSpace = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1') ? 'space.050' : undefined;
63
66
 
64
67
  // Refs for keyboard navigation
65
68
  var paletteRef = useRef(null);
@@ -251,6 +254,7 @@ var ColorPalette = function ColorPalette(_ref) {
251
254
  }, colorsPerRow.map(function (row, rowIndex) {
252
255
  return /*#__PURE__*/React.createElement(Inline, {
253
256
  rowSpace: "space.050",
257
+ space: columnSpace,
254
258
  key: "row-first-color-".concat(row[0].value),
255
259
  role: "radiogroup"
256
260
  }, row.map(function (_ref2, colIndex) {
package/package.json CHANGED
@@ -3,13 +3,13 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "2.0.9",
6
+ "version": "2.0.11",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "react-compiler": {
10
10
  "enabled": true,
11
11
  "gating": {
12
- "source": "@atlassian/react-compiler-gating",
12
+ "source": "@atlaskit/react-compiler-gating",
13
13
  "importSpecifierName": "isReactCompilerActivePlatform"
14
14
  }
15
15
  },
@@ -37,10 +37,10 @@
37
37
  "@atlaskit/platform-feature-flags": "^2.0.0",
38
38
  "@atlaskit/popup": "^5.0.0",
39
39
  "@atlaskit/primitives": "^20.0.0",
40
- "@atlaskit/tmp-editor-statsig": "^113.0.0",
40
+ "@atlaskit/react-compiler-gating": "^0.2.0",
41
+ "@atlaskit/tmp-editor-statsig": "^114.0.0",
41
42
  "@atlaskit/tokens": "^15.0.0",
42
43
  "@atlaskit/tooltip": "^23.0.0",
43
- "@atlassian/react-compiler-gating": "^0.2.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@compiled/react": "^0.20.0",
46
46
  "chromatism": "^2.6.0"
@@ -97,6 +97,9 @@
97
97
  },
98
98
  "cc_blocks_changeboarding": {
99
99
  "type": "boolean"
100
+ },
101
+ "platform_editor_lovability_text_bg_color_patch_1": {
102
+ "type": "boolean"
100
103
  }
101
104
  }
102
105
  }