@atlaskit/editor-plugin-floating-toolbar 5.1.2 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 5.1.4
+
+### Patch Changes
+
+- [`e8620c2d72167`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8620c2d72167) -
+  [ux] [ED-28572] Explicitly set overflow dropdown to right aligned with main floating toolbar to
+  ensure consistency position across products
+- Updated dependencies
+
+## 5.1.3
+
+### Patch Changes
+
+- [#192710](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/192710)
+  [`b3b30f3bc4453`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b3b30f3bc4453) -
+  Internal changes to how border radius and border width values are applied. No visual change.
+
 ## 5.1.2
 
 ### Patch Changes

package/dist/cjs/ui/Dropdown.js

@@ -157,7 +157,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
         onMount = _this$props2.onMount,
         pulse = _this$props2.pulse,
         spotlightConfig = _this$props2.spotlightConfig,
-        shouldFitContainer = _this$props2.shouldFitContainer;
+        shouldFitContainer = _this$props2.shouldFitContainer,
+        alignX = _this$props2.alignX;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
@@ -218,6 +219,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
          * https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/137394/overview?commentId=8130003
          */
         (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          alignX: alignX,
           mountTo: mountPoint,
           boundariesElement: boundariesElement,
           scrollableElement: scrollableElement,

package/dist/cjs/ui/ScrollButton.js

@@ -21,14 +21,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var rightSideStyles = (0, _primitives.xcss)({
   borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
   right: 'space.0',
-  borderTopRightRadius: '3px',
-  borderBottomRightRadius: '3px'
+  borderTopRightRadius: 'border.radius.100',
+  borderBottomRightRadius: 'border.radius.100'
 });
 var leftSideStyles = (0, _primitives.xcss)({
   borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
   left: 'space.0',
-  borderTopLeftRadius: '3px',
-  borderBottomLeftRadius: '3px'
+  borderTopLeftRadius: 'border.radius.100',
+  borderBottomLeftRadius: 'border.radius.100'
 });
 var buttonCommonStyles = (0, _primitives.xcss)({
   backgroundColor: 'elevation.surface.overlay',

package/dist/cjs/ui/Toolbar.js

@@ -27,6 +27,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _commands = require("../pm-plugins/toolbar-data/commands");
@@ -96,6 +97,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     api = _ref.api,
     intl = _ref.intl;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
   var renderItem = function renderItem(item, idx) {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
@@ -194,6 +196,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
       case 'overflow-dropdown':
         return (0, _react2.jsx)(_Dropdown.default, {
+          alignX: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_toolbar_aifc', 'isEnabled', true) ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(_messages.default.viewMore),
           icon: (0, _react2.jsx)(_showMoreHorizontal.default, {
@@ -341,7 +344,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           scrollable: scrollable
         });
       case 'separator':
-        if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+        if (isNewEditorToolbarEnabled) {
           return item.fullHeight ? (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
             key: idx,
             fullHeight: true
@@ -365,7 +368,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ? buttonGroupStylesNew : buttonGroupStyles,
+        css: isNewEditorToolbarEnabled ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
         "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
         "data-testid": "editor-floating-toolbar-grouped-buttons"

package/dist/es2019/ui/Dropdown.js

@@ -138,7 +138,8 @@ export default class Dropdown extends Component {
       onMount,
       pulse,
       spotlightConfig,
-      shouldFitContainer
+      shouldFitContainer,
+      alignX
     } = this.props;
     let trigger;
     if (icon) {
@@ -200,6 +201,7 @@ export default class Dropdown extends Component {
        * https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/137394/overview?commentId=8130003
        */
       jsx(UiDropdown, {
+        alignX: alignX,
         mountTo: mountPoint,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,

package/dist/es2019/ui/ScrollButton.js

@@ -10,14 +10,14 @@ import { Box, xcss } from '@atlaskit/primitives';
 const rightSideStyles = xcss({
   borderLeft: `solid ${"var(--ds-border, #091E4224)"} 1px`,
   right: 'space.0',
-  borderTopRightRadius: '3px',
-  borderBottomRightRadius: '3px'
+  borderTopRightRadius: 'border.radius.100',
+  borderBottomRightRadius: 'border.radius.100'
 });
 const leftSideStyles = xcss({
   borderRight: `solid ${"var(--ds-border, #091E4224)"} 1px`,
   left: 'space.0',
-  borderTopLeftRadius: '3px',
-  borderBottomLeftRadius: '3px'
+  borderTopLeftRadius: 'border.radius.100',
+  borderBottomLeftRadius: 'border.radius.100'
 });
 const buttonCommonStyles = xcss({
   backgroundColor: 'elevation.surface.overlay',

package/dist/es2019/ui/Toolbar.js

@@ -20,6 +20,7 @@ import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -86,6 +87,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   intl
 }) => {
   const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
   const renderItem = (item, idx) => {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
@@ -172,6 +174,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         }
       case 'overflow-dropdown':
         return jsx(Dropdown, {
+          alignX: expValEqualsNoExposure('platform_editor_toolbar_aifc', 'isEnabled', true) ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(commonMessages.viewMore),
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -315,7 +318,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           scrollable: scrollable
         });
       case 'separator':
-        if (areToolbarFlagsEnabled()) {
+        if (isNewEditorToolbarEnabled) {
           return item.fullHeight ? jsx(Separator, {
             key: idx,
             fullHeight: true
@@ -337,7 +340,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: areToolbarFlagsEnabled() ? buttonGroupStylesNew : buttonGroupStyles,
+        css: isNewEditorToolbarEnabled ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
         "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
         "data-testid": "editor-floating-toolbar-grouped-buttons"

package/dist/esm/ui/Dropdown.js

@@ -153,7 +153,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         onMount = _this$props2.onMount,
         pulse = _this$props2.pulse,
         spotlightConfig = _this$props2.spotlightConfig,
-        shouldFitContainer = _this$props2.shouldFitContainer;
+        shouldFitContainer = _this$props2.shouldFitContainer,
+        alignX = _this$props2.alignX;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
@@ -214,6 +215,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
          * https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/137394/overview?commentId=8130003
          */
         jsx(UiDropdown, {
+          alignX: alignX,
           mountTo: mountPoint,
           boundariesElement: boundariesElement,
           scrollableElement: scrollableElement,

package/dist/esm/ui/ScrollButton.js

@@ -11,14 +11,14 @@ import { Box, xcss } from '@atlaskit/primitives';
 var rightSideStyles = xcss({
   borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
   right: 'space.0',
-  borderTopRightRadius: '3px',
-  borderBottomRightRadius: '3px'
+  borderTopRightRadius: 'border.radius.100',
+  borderBottomRightRadius: 'border.radius.100'
 });
 var leftSideStyles = xcss({
   borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
   left: 'space.0',
-  borderTopLeftRadius: '3px',
-  borderBottomLeftRadius: '3px'
+  borderTopLeftRadius: 'border.radius.100',
+  borderBottomLeftRadius: 'border.radius.100'
 });
 var buttonCommonStyles = xcss({
   backgroundColor: 'elevation.surface.overlay',

package/dist/esm/ui/Toolbar.js

@@ -27,6 +27,7 @@ import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -90,6 +91,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     api = _ref.api,
     intl = _ref.intl;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
   var renderItem = function renderItem(item, idx) {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
@@ -188,6 +190,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         }
       case 'overflow-dropdown':
         return jsx(Dropdown, {
+          alignX: expValEqualsNoExposure('platform_editor_toolbar_aifc', 'isEnabled', true) ? 'right' : undefined,
           key: idx,
           title: intl.formatMessage(commonMessages.viewMore),
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -335,7 +338,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           scrollable: scrollable
         });
       case 'separator':
-        if (areToolbarFlagsEnabled()) {
+        if (isNewEditorToolbarEnabled) {
           return item.fullHeight ? jsx(Separator, {
             key: idx,
             fullHeight: true
@@ -359,7 +362,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: areToolbarFlagsEnabled() ? buttonGroupStylesNew : buttonGroupStyles,
+        css: isNewEditorToolbarEnabled ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
         "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
         "data-testid": "editor-floating-toolbar-grouped-buttons"

package/dist/types/ui/Dropdown.d.ts

@@ -36,6 +36,7 @@ export interface Props {
     pulse?: boolean;
     spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
     shouldFitContainer?: boolean;
+    alignX?: 'left' | 'right' | 'center';
 }
 export interface State {
     isOpen: boolean;

package/dist/types-ts4.5/ui/Dropdown.d.ts

@@ -36,6 +36,7 @@ export interface Props {
     pulse?: boolean;
     spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
     shouldFitContainer?: boolean;
+    alignX?: 'left' | 'right' | 'center';
 }
 export interface State {
     isOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "5.1.2",
+	"version": "5.1.4",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,7 +25,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.20.0",
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
@@ -41,16 +41,16 @@
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^69.3.0",
-		"@atlaskit/icon": "^27.6.0",
-		"@atlaskit/menu": "^8.0.0",
+		"@atlaskit/icon": "^27.8.0",
+		"@atlaskit/menu": "^8.1.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.10.0",
+		"@atlaskit/tmp-editor-statsig": "^9.21.0",
 		"@atlaskit/tokens": "^5.6.0",
-		"@atlaskit/tooltip": "^20.3.0",
+		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,7 +60,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.12.0",
+		"@atlaskit/editor-common": "^107.16.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},