@atlaskit/editor-common 98.2.5 → 98.2.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 98.2.6
+
+### Patch Changes
+
+- [#100162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100162)
+  [`e80e57fc37719`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80e57fc37719) -
+  [ux] ED-26089: Add 4px gap to main nav bar items
+
 ## 98.2.5
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "98.2.5";
+var packageVersion = "98.2.6";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "buttonGroupStyle", {
     return _plugins.buttonGroupStyle;
   }
 });
+Object.defineProperty(exports, "buttonGroupStyleBeforeVisualRefresh", {
+  enumerable: true,
+  get: function get() {
+    return _plugins.buttonGroupStyleBeforeVisualRefresh;
+  }
+});
 Object.defineProperty(exports, "calcTableWidth", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/plugins.js

@@ -3,11 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.triggerWrapperStylesWithPadding = exports.triggerWrapperStyles = exports.separatorStyles = exports.disableBlueBorderStyles = exports.buttonGroupStyle = void 0;
+exports.wrapperStyle = exports.triggerWrapperStylesWithPadding = exports.triggerWrapperStyles = exports.separatorStyles = exports.disableBlueBorderStyles = exports.buttonGroupStyleBeforeVisualRefresh = exports.buttonGroupStyle = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+var buttonGroupStyleBeforeVisualRefresh = exports.buttonGroupStyleBeforeVisualRefresh = (0, _react.css)({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.css)({
   display: 'inline-flex',
   alignItems: 'center',
@@ -21,6 +38,11 @@ var buttonGroupStyle = exports.buttonGroupStyle = (0, _react.css)({
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "98.2.5";
+var packageVersion = "98.2.6";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -10,9 +10,11 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
@@ -38,6 +40,21 @@ var colorPickerExpandContainer = (0, _primitives.xcss)({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+var colorPickerExpandContainerVisualRefresh = (0, _primitives.xcss)({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+var colorPickerButtonStyle = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -212,12 +229,69 @@ var ColorPickerButton = function ColorPickerButton(props) {
       }
     });
   };
+  var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
+    var _props$size4, _props$size5, _props$size6;
+    return (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: "1px solid ".concat(_uiColor.DEFAULT_BORDER_COLOR),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  };
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
   }, (0, _react2.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, (0, _react2.jsx)(_standardButton.default, {
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.jsx)("div", {
+    css: colorPickerButtonStyle
+  }, (0, _react2.jsx)(_new.default, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, (0, _react2.jsx)(_primitives.Inline, {
+    alignBlock: "start"
+  }, (0, _react2.jsx)("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), (0, _react2.jsx)(_primitives.Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, (0, _react2.jsx)(_chevronDown2.default, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: _chevronDown.default,
+    label: "color-picker-chevron-down"
+  }))))) : (0, _react2.jsx)(_standardButton.default, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -231,7 +305,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "98.2.5";
+const packageVersion = "98.2.6";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/index.js

@@ -30,7 +30,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

package/dist/es2019/styles/shared/plugins.js

@@ -1,6 +1,23 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+export const buttonGroupStyleBeforeVisualRefresh = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const buttonGroupStyle = css({
   display: 'inline-flex',
   alignItems: 'center',
@@ -14,6 +31,11 @@ export const buttonGroupStyle = css({
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "98.2.5";
+const packageVersion = "98.2.6";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -8,10 +8,12 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss, Inline } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -30,6 +32,21 @@ const colorPickerExpandContainer = xcss({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+const colorPickerExpandContainerVisualRefresh = xcss({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+const colorPickerButtonStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: `${"var(--ds-background-selected, #E9F2FF)"}`
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -192,12 +209,69 @@ const ColorPickerButton = props => {
       }
     });
   };
+  const buttonStyleVisualRefresh = () => {
+    var _props$size4, _props$size5, _props$size6;
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: `${!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''}`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: `1px solid ${DEFAULT_BORDER_COLOR}`,
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: `${"var(--ds-space-025, 2px)"}`
+      }
+    });
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
     content: title,
     position: "top"
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('platform-visual-refresh-icons') ? jsx("div", {
+    css: colorPickerButtonStyle
   }, jsx(Button, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, jsx(Inline, {
+    alignBlock: "start"
+  }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), jsx(Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, jsx(ChevronDownIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: LegacyExpandIcon,
+    label: "color-picker-chevron-down"
+  }))))) : jsx(LegacyButton, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -211,7 +285,6 @@ const ColorPickerButton = props => {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "98.2.5";
+var packageVersion = "98.2.6";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/index.js

@@ -30,7 +30,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

package/dist/esm/styles/shared/plugins.js

@@ -1,6 +1,23 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, -- Ignored via go/DSP-18766
+export var buttonGroupStyleBeforeVisualRefresh = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div': {
+    display: 'flex'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([disabled])::after': {
+      border: 'none' // remove blue border when an item has been selected
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var buttonGroupStyle = css({
   display: 'inline-flex',
   alignItems: 'center',
@@ -14,6 +31,11 @@ export var buttonGroupStyle = css({
     '&:not([disabled])::after': {
       border: 'none' // remove blue border when an item has been selected
     }
+  },
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[role=group]': {
+    gap: "var(--ds-space-050, 4px)"
   }
 });
 

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "98.2.5";
+var packageVersion = "98.2.6";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -9,10 +9,12 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
+import LegacyButton from '@atlaskit/button/standard-button';
 import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss, Inline } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -31,6 +33,21 @@ var colorPickerExpandContainer = xcss({
   marginLeft: 'space.negative.050',
   marginRight: 'space.negative.050'
 });
+var colorPickerExpandContainerVisualRefresh = xcss({
+  marginTop: 'space.negative.025',
+  marginRight: 'space.negative.050'
+});
+var colorPickerButtonStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    '&::after': {
+      border: 'none'
+    },
+    '&:hover': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+    }
+  }
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -205,12 +222,69 @@ var ColorPickerButton = function ColorPickerButton(props) {
       }
     });
   };
+  var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
+    var _props$size4, _props$size5, _props$size6;
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        border: "1px solid ".concat(DEFAULT_BORDER_COLOR),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
+        marginTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
     content: title,
     position: "top"
+  },
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('platform-visual-refresh-icons') ? jsx("div", {
+    css: colorPickerButtonStyle
   }, jsx(Button, {
+    appearance: 'subtle',
+    ref: buttonRef,
+    "aria-label": title,
+    "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
+    spacing: "compact",
+    onClick: togglePopup,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        togglePopup();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "data-selected-color": props.currentColor,
+    isSelected: isPopupOpen
+  }, jsx(Inline, {
+    alignBlock: "start"
+  }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: buttonStyleVisualRefresh
+  }), jsx(Box, {
+    xcss: colorPickerExpandContainerVisualRefresh
+  }, jsx(ChevronDownIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    LEGACY_fallbackIcon: LegacyExpandIcon,
+    label: "color-picker-chevron-down"
+  }))))) : jsx(LegacyButton, {
     appearance: 'subtle',
     ref: buttonRef,
     "aria-label": title,
@@ -224,7 +298,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     }
-    // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
     css: buttonStyle,

package/dist/types/styles/index.d.ts

@@ -27,7 +27,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle, } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

package/dist/types/styles/shared/plugins.d.ts

@@ -1,3 +1,4 @@
+export declare const buttonGroupStyleBeforeVisualRefresh: import("@emotion/react").SerializedStyles;
 export declare const buttonGroupStyle: import("@emotion/react").SerializedStyles;
 export declare const separatorStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/styles/index.d.ts

@@ -27,7 +27,7 @@ export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, res
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles } from './shared/embedCard';
-export { buttonGroupStyle, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
+export { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, disableBlueBorderStyles, separatorStyles, wrapperStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, } from './shared/plugins';
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames, expandIconContainerStyle, } from './shared/expand';
 export { sharedExpandStyles } from '../ui/Expand/sharedStyles';

package/dist/types-ts4.5/styles/shared/plugins.d.ts

@@ -1,3 +1,4 @@
+export declare const buttonGroupStyleBeforeVisualRefresh: import("@emotion/react").SerializedStyles;
 export declare const buttonGroupStyle: import("@emotion/react").SerializedStyles;
 export declare const separatorStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "98.2.5",
+	"version": "98.2.6",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"