@atlaskit/editor-plugin-highlight 1.11.2 → 1.11.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/FloatingToolbarHighlightColor.js +15 -10
  3. package/dist/es2019/ui/FloatingToolbarHighlightColor.js +16 -11
  4. package/dist/esm/ui/FloatingToolbarHighlightColor.js +16 -11
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 1.11.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#114293](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114293)
8
+ [`7bc5c84260d3d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7bc5c84260d3d) -
9
+ [ux] [ED-23902] Moving dropdown caret of floating toolbar Highlight button to the right hand side
10
+ of the button
11
+
3
12
  ## 1.11.2
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -11,11 +11,9 @@ var _react2 = require("@emotion/react");
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _hooks = require("@atlaskit/editor-common/hooks");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
- var _styles = require("@atlaskit/editor-common/styles");
15
14
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
16
15
  var _editorPalette = require("@atlaskit/editor-palette");
17
16
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
18
- var _primitives = require("@atlaskit/primitives");
19
17
  var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
20
18
  var _PaletteDropdown = require("./shared/PaletteDropdown");
21
19
  var _useDropdownEvents2 = require("./shared/useDropdownEvents");
@@ -23,6 +21,12 @@ var _useDropdownEvents2 = require("./shared/useDropdownEvents");
23
21
 
24
22
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
23
 
24
+ var expandIconContainerStyle = (0, _react2.css)({
25
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
26
+ });
27
+ var highlightIconContainerStyle = (0, _react2.css)({
28
+ marginTop: "var(--ds-space-negative-050, -4px)"
29
+ });
26
30
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
27
31
  var pluginInjectionApi = _ref.pluginInjectionApi,
28
32
  formatMessage = _ref.intl.formatMessage;
@@ -55,9 +59,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
55
59
  // Get the design token for the active color (if it exists) to modify the toolbar
56
60
  // icon, but show the nice rainbow if none is selected
57
61
  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
58
- return (0, _react2.jsx)(_primitives.Flex, {
59
- alignItems: "center"
60
- }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
62
+ return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
61
63
  isOpen: isDropdownOpen && !highlightState.disabled,
62
64
  activeColor: highlightState.activeColor,
63
65
  trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
@@ -72,14 +74,17 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
72
74
  onClick: handleClick,
73
75
  onKeyDown: handleKeyDown,
74
76
  ref: toolbarItemRef,
75
- iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
77
+ iconBefore: (0, _react2.jsx)("span", {
78
+ css: highlightIconContainerStyle
79
+ }, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
76
80
  selectedColor: activeColorToken,
77
81
  disabled: highlightState.disabled
78
- }), (0, _react2.jsx)("span", {
79
- css: _styles.expandIconWrapperStyle
82
+ })),
83
+ iconAfter: (0, _react2.jsx)("span", {
84
+ css: expandIconContainerStyle
80
85
  }, (0, _react2.jsx)(_chevronDown.default, {
81
86
  label: ""
82
- })))
87
+ }))
83
88
  }, formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
84
89
  onColorChange: function onColorChange(color) {
85
90
  return handleColorChange(color);
@@ -87,6 +92,6 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
87
92
  isOpenedByKeyboard: isOpenedByKeyboard,
88
93
  handleClickOutside: handleClickOutside,
89
94
  handleEscapeKeydown: handleEscapeKeydown
90
- }));
95
+ });
91
96
  };
92
97
  var FloatingToolbarHighlightColorWithIntl = exports.FloatingToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarHighlightColor);
package/dist/es2019/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -2,18 +2,22 @@
2
2
  import { useRef, useState } from 'react';
3
3
 
4
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
5
- import { jsx } from '@emotion/react';
5
+ import { css, jsx } from '@emotion/react';
6
6
  import { injectIntl } from 'react-intl-next';
7
7
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
8
8
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
9
- import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
10
9
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
10
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
12
11
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
13
- import { Flex } from '@atlaskit/primitives';
14
12
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
15
13
  import { PaletteDropdown } from './shared/PaletteDropdown';
16
14
  import { useDropdownEvents } from './shared/useDropdownEvents';
15
+ const expandIconContainerStyle = css({
16
+ margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
17
+ });
18
+ const highlightIconContainerStyle = css({
19
+ marginTop: "var(--ds-space-negative-050, -4px)"
20
+ });
17
21
  const FloatingToolbarHighlightColor = ({
18
22
  pluginInjectionApi,
19
23
  intl: {
@@ -48,9 +52,7 @@ const FloatingToolbarHighlightColor = ({
48
52
  // Get the design token for the active color (if it exists) to modify the toolbar
49
53
  // icon, but show the nice rainbow if none is selected
50
54
  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
51
- return jsx(Flex, {
52
- alignItems: "center"
53
- }, jsx(PaletteDropdown, {
55
+ return jsx(PaletteDropdown, {
54
56
  isOpen: isDropdownOpen && !highlightState.disabled,
55
57
  activeColor: highlightState.activeColor,
56
58
  trigger: jsx(ToolbarButton, {
@@ -65,19 +67,22 @@ const FloatingToolbarHighlightColor = ({
65
67
  onClick: handleClick,
66
68
  onKeyDown: handleKeyDown,
67
69
  ref: toolbarItemRef,
68
- iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
70
+ iconBefore: jsx("span", {
71
+ css: highlightIconContainerStyle
72
+ }, jsx(EditorHighlightIcon, {
69
73
  selectedColor: activeColorToken,
70
74
  disabled: highlightState.disabled
71
- }), jsx("span", {
72
- css: expandIconWrapperStyle
75
+ })),
76
+ iconAfter: jsx("span", {
77
+ css: expandIconContainerStyle
73
78
  }, jsx(ExpandIcon, {
74
79
  label: ""
75
- })))
80
+ }))
76
81
  }, formatMessage(messages.highlightFloatingToolbar)),
77
82
  onColorChange: color => handleColorChange(color),
78
83
  isOpenedByKeyboard: isOpenedByKeyboard,
79
84
  handleClickOutside: handleClickOutside,
80
85
  handleEscapeKeydown: handleEscapeKeydown
81
- }));
86
+ });
82
87
  };
83
88
  export const FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);
package/dist/esm/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -3,18 +3,22 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import { useRef, useState } from 'react';
4
4
 
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { jsx } from '@emotion/react';
6
+ import { css, jsx } from '@emotion/react';
7
7
  import { injectIntl } from 'react-intl-next';
8
8
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
9
9
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
10
- import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
11
10
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
12
11
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
13
12
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
14
- import { Flex } from '@atlaskit/primitives';
15
13
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
16
14
  import { PaletteDropdown } from './shared/PaletteDropdown';
17
15
  import { useDropdownEvents } from './shared/useDropdownEvents';
16
+ var expandIconContainerStyle = css({
17
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
18
+ });
19
+ var highlightIconContainerStyle = css({
20
+ marginTop: "var(--ds-space-negative-050, -4px)"
21
+ });
18
22
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
19
23
  var pluginInjectionApi = _ref.pluginInjectionApi,
20
24
  formatMessage = _ref.intl.formatMessage;
@@ -47,9 +51,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
47
51
  // Get the design token for the active color (if it exists) to modify the toolbar
48
52
  // icon, but show the nice rainbow if none is selected
49
53
  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
50
- return jsx(Flex, {
51
- alignItems: "center"
52
- }, jsx(PaletteDropdown, {
54
+ return jsx(PaletteDropdown, {
53
55
  isOpen: isDropdownOpen && !highlightState.disabled,
54
56
  activeColor: highlightState.activeColor,
55
57
  trigger: jsx(ToolbarButton, {
@@ -64,14 +66,17 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
64
66
  onClick: handleClick,
65
67
  onKeyDown: handleKeyDown,
66
68
  ref: toolbarItemRef,
67
- iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
69
+ iconBefore: jsx("span", {
70
+ css: highlightIconContainerStyle
71
+ }, jsx(EditorHighlightIcon, {
68
72
  selectedColor: activeColorToken,
69
73
  disabled: highlightState.disabled
70
- }), jsx("span", {
71
- css: expandIconWrapperStyle
74
+ })),
75
+ iconAfter: jsx("span", {
76
+ css: expandIconContainerStyle
72
77
  }, jsx(ExpandIcon, {
73
78
  label: ""
74
- })))
79
+ }))
75
80
  }, formatMessage(messages.highlightFloatingToolbar)),
76
81
  onColorChange: function onColorChange(color) {
77
82
  return handleColorChange(color);
@@ -79,6 +84,6 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
79
84
  isOpenedByKeyboard: isOpenedByKeyboard,
80
85
  handleClickOutside: handleClickOutside,
81
86
  handleEscapeKeydown: handleEscapeKeydown
82
- }));
87
+ });
83
88
  };
84
89
  export var FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "1.11.2",
3
+ "version": "1.11.3",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,7 +38,7 @@
38
38
  ".": "./src/index.ts"
39
39
  },
40
40
  "dependencies": {
41
- "@atlaskit/editor-common": "^83.4.0",
41
+ "@atlaskit/editor-common": "^83.5.0",
42
42
  "@atlaskit/editor-palette": "1.6.0",
43
43
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
44
44
  "@atlaskit/editor-plugin-background-color": "^1.3.0",
@@ -50,6 +50,7 @@
50
50
  "@atlaskit/icon": "^22.5.0",
51
51
  "@atlaskit/platform-feature-flags": "^0.3.0",
52
52
  "@atlaskit/primitives": "^10.0.0",
53
+ "@atlaskit/tokens": "^1.53.0",
53
54
  "@babel/runtime": "^7.0.0",
54
55
  "@emotion/react": "^11.7.1"
55
56
  },
@@ -58,7 +59,6 @@
58
59
  "react-intl-next": "npm:react-intl@^5.18.1"
59
60
  },
60
61
  "devDependencies": {
61
- "@atlaskit/tokens": "^1.53.0",
62
62
  "typescript": "~5.4.2"
63
63
  },
64
64
  "techstack": {