@atlaskit/editor-plugin-highlight 7.0.1 → 7.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-highlight
 
+## 7.2.0
+
+### Minor Changes
+
+- [`87b12e64ff750`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87b12e64ff750) -
+  Removed usages of LEGACY icon props
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.1.0
+
+### Minor Changes
+
+- [`00e69e0b7c839`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00e69e0b7c839) -
+  Clean up and removal of the `platform-visual-refresh-icons` feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/cjs/ui/FloatingToolbarHighlightColor.js

@@ -18,10 +18,8 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _palette = require("../editor-commands/palette");
-var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
 var _PaletteDropdown = require("./shared/PaletteDropdown");
 var _useDropdownEvents2 = require("./shared/useDropdownEvents");
 /**
@@ -31,12 +29,6 @@ var _useDropdownEvents2 = require("./shared/useDropdownEvents");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var expandIconContainerHighlightStyle = (0, _react2.css)({
-  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
-});
-var highlightIconContainerStyle = (0, _react2.css)({
-  marginTop: "var(--ds-space-negative-050, -4px)"
-});
 var selector = function selector(states) {
   var _states$highlightStat, _states$highlightStat2, _states$highlightStat3;
   return {
@@ -117,7 +109,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       (0, _react2.jsx)("div", {
         css: _styles.triggerWrapperStylesWithPadding
@@ -137,19 +129,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : (0, _react2.jsx)("span", {
-        css: highlightIconContainerStyle
-      }, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: disabled
-      })),
-      iconAfter: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? undefined : (0, _react2.jsx)("span", {
-        css: expandIconContainerHighlightStyle
-      }, (0, _react2.jsx)(_chevronDown.default, {
-        label: "",
-        color: "currentColor",
-        size: "small"
-      }))
+      })))
     }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
     onColorChange: function onColorChange(color) {
       return handleColorChange({

package/dist/cjs/ui/HighlightColorMenuItem.js

@@ -40,7 +40,6 @@ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
   var iconColor = "var(--ds-icon, #000000)";
   return isSelected ? /*#__PURE__*/React.createElement(_checkMark.default, {
     color: iconColor,
-    LEGACY_primaryColor: iconColor,
     label: label
   }) : /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",

package/dist/cjs/ui/PrimaryToolbarHighlightColor.js

@@ -18,10 +18,8 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _palette = require("../editor-commands/palette");
-var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
 var _PaletteDropdown = require("./shared/PaletteDropdown");
 var _useDropdownEvents2 = require("./shared/useDropdownEvents");
 /**
@@ -112,7 +110,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       (0, _react2.jsx)("div", {
         css: _styles.triggerWrapperStylesWithPadding
@@ -132,15 +130,6 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : (0, _react2.jsx)(_compiled.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: highlightDisabled
-      }), (0, _react2.jsx)("span", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: _styles.expandIconWrapperStyle
-      }, (0, _react2.jsx)(_chevronDown.default, {
-        label: "",
-        size: "small"
       })))
     }),
     onColorChange: function onColorChange(color) {

package/dist/es2019/ui/FloatingToolbarHighlightColor.js

@@ -5,7 +5,7 @@
 import { useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -17,18 +17,10 @@ import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import HighlightIcon from '@atlaskit/icon/core/highlight';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setPalette } from '../editor-commands/palette';
-import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
-const expandIconContainerHighlightStyle = css({
-  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
-});
-const highlightIconContainerStyle = css({
-  marginTop: "var(--ds-space-negative-050, -4px)"
-});
 const selector = states => {
   var _states$highlightStat, _states$highlightStat2, _states$highlightStat3;
   return {
@@ -116,7 +108,7 @@ const FloatingToolbarHighlightColor = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: fg('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       jsx("div", {
         css: triggerWrapperStylesWithPadding
@@ -136,19 +128,7 @@ const FloatingToolbarHighlightColor = ({
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : jsx("span", {
-        css: highlightIconContainerStyle
-      }, jsx(EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: disabled
-      })),
-      iconAfter: fg('platform-visual-refresh-icons') ? undefined : jsx("span", {
-        css: expandIconContainerHighlightStyle
-      }, jsx(ChevronDownIcon, {
-        label: "",
-        color: "currentColor",
-        size: "small"
-      }))
+      })))
     }, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar)),
     onColorChange: color => handleColorChange({
       color,

package/dist/es2019/ui/HighlightColorMenuItem.js

@@ -29,7 +29,6 @@ const TextColorIconDecorator = ({
   const iconColor = "var(--ds-icon, #000000)";
   return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: iconColor,
-    LEGACY_primaryColor: iconColor,
     label: label
   }) : /*#__PURE__*/React.createElement(Box, {
     as: "span",

package/dist/es2019/ui/PrimaryToolbarHighlightColor.js

@@ -12,15 +12,13 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
 import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
-import { disableBlueBorderStyles, expandIconContainerStyle, expandIconWrapperStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
+import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import HighlightIcon from '@atlaskit/icon/core/highlight';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { setPalette } from '../editor-commands/palette';
-import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
 const selector = states => {
@@ -111,7 +109,7 @@ const PrimaryToolbarHighlightColor = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: fg('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       jsx("div", {
         css: triggerWrapperStylesWithPadding
@@ -131,15 +129,6 @@ const PrimaryToolbarHighlightColor = ({
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : jsx(Flex, null, jsx(EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: highlightDisabled
-      }), jsx("span", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: expandIconWrapperStyle
-      }, jsx(ChevronDownIcon, {
-        label: "",
-        size: "small"
       })))
     }),
     onColorChange: color => handleColorChange({

package/dist/esm/ui/FloatingToolbarHighlightColor.js

@@ -5,7 +5,7 @@
 import { useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -17,18 +17,10 @@ import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import HighlightIcon from '@atlaskit/icon/core/highlight';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setPalette } from '../editor-commands/palette';
-import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
-var expandIconContainerHighlightStyle = css({
-  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
-});
-var highlightIconContainerStyle = css({
-  marginTop: "var(--ds-space-negative-050, -4px)"
-});
 var selector = function selector(states) {
   var _states$highlightStat, _states$highlightStat2, _states$highlightStat3;
   return {
@@ -109,7 +101,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: fg('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       jsx("div", {
         css: triggerWrapperStylesWithPadding
@@ -129,19 +121,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : jsx("span", {
-        css: highlightIconContainerStyle
-      }, jsx(EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: disabled
-      })),
-      iconAfter: fg('platform-visual-refresh-icons') ? undefined : jsx("span", {
-        css: expandIconContainerHighlightStyle
-      }, jsx(ChevronDownIcon, {
-        label: "",
-        color: "currentColor",
-        size: "small"
-      }))
+      })))
     }, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar)),
     onColorChange: function onColorChange(color) {
       return handleColorChange({

package/dist/esm/ui/HighlightColorMenuItem.js

@@ -31,7 +31,6 @@ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
   var iconColor = "var(--ds-icon, #000000)";
   return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: iconColor,
-    LEGACY_primaryColor: iconColor,
     label: label
   }) : /*#__PURE__*/React.createElement(Box, {
     as: "span",

package/dist/esm/ui/PrimaryToolbarHighlightColor.js

@@ -12,15 +12,13 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
 import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
-import { disableBlueBorderStyles, expandIconContainerStyle, expandIconWrapperStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
+import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import HighlightIcon from '@atlaskit/icon/core/highlight';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { setPalette } from '../editor-commands/palette';
-import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
 var selector = function selector(states) {
@@ -104,7 +102,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: fg('platform-visual-refresh-icons') ?
+      iconBefore:
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       jsx("div", {
         css: triggerWrapperStylesWithPadding
@@ -124,15 +122,6 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
         label: "",
         color: "currentColor",
         size: "small"
-      }))) : jsx(Flex, null, jsx(EditorHighlightIcon, {
-        selectedColor: activeColorToken,
-        disabled: highlightDisabled
-      }), jsx("span", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: expandIconWrapperStyle
-      }, jsx(ChevronDownIcon, {
-        label: "",
-        size: "small"
       })))
     }),
     onColorChange: function onColorChange(color) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "7.0.1",
+	"version": "7.2.0",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,24 +39,24 @@
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^8.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^8.0.0",
-		"@atlaskit/editor-plugin-text-formatting": "^7.0.0",
+		"@atlaskit/editor-plugin-text-formatting": "^7.2.0",
 		"@atlaskit/editor-plugin-toolbar": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.18.0",
+		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.3.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.11.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.0.0",
+		"@atlaskit/editor-common": "^111.7.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},