@atlaskit/editor-plugin-floating-toolbar 3.0.1 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.0.2
+
+### Patch Changes
+
+- [#121092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121092)
+  [`8cd08b738070d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd08b738070d) -
+  [ux] Implemented full height separator as per design for media and card
+- [#121249](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121249)
+  [`d14ccaecc153a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d14ccaecc153a) -
+  ED-26862 contextual toolbar minor updates
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/cjs/ui/Toolbar.js

@@ -344,7 +344,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         });
       case 'separator':
         return (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
-          key: idx
+          key: idx,
+          fullHeight: item.fullHeight
         });
     }
   };
@@ -478,7 +479,22 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
         marginRight: "var(--ds-space-100, 8px)"
       }
     }
-  }) :
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> div': {
+      height: '40px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
+        marginRight: "var(--ds-space-100, 8px)"
+      }
+    }
+  }) : undefined) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   (0, _react2.css)({
     display: 'flex'
@@ -513,6 +529,11 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       event.preventDefault();
       event.stopPropagation();
     });
+    (0, _defineProperty2.default)(_this, "handleMouseDown", function (event) {
+      // Prevents selection toolbar from closing when clicking on the toolbar
+      event.stopPropagation();
+      event.preventDefault();
+    });
     _this.scrollContainerRef = /*#__PURE__*/_react.default.createRef();
     _this.mountRef = /*#__PURE__*/_react.default.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/_react.default.createRef();
@@ -628,7 +649,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         "data-testid": "editor-floating-toolbar"
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: className
+        className: className,
+        onMouseDown: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? this.handleMouseDown : undefined
       }, (0, _react2.jsx)(_ui.Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
         delay: 250

package/dist/es2019/ui/Toolbar.js

@@ -313,7 +313,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         });
       case 'separator':
         return jsx(Separator, {
-          key: idx
+          key: idx,
+          fullHeight: item.fullHeight
         });
     }
   };
@@ -439,7 +440,22 @@ css({
       marginRight: "var(--ds-space-100, 8px)"
     }
   }
-}) :
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+editorExperiment('platform_editor_controls', 'variant1') ?
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  padding: paddingFeatureFlag ? `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-050, 4px)"}` : `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-600, 48px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    height: '40px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
+      marginRight: "var(--ds-space-100, 8px)"
+    }
+  }
+}) : undefined) :
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css({
   display: 'flex'
@@ -469,6 +485,11 @@ class Toolbar extends Component {
       event.preventDefault();
       event.stopPropagation();
     });
+    _defineProperty(this, "handleMouseDown", event => {
+      // Prevents selection toolbar from closing when clicking on the toolbar
+      event.stopPropagation();
+      event.preventDefault();
+    });
     this.scrollContainerRef = /*#__PURE__*/React.createRef();
     this.mountRef = /*#__PURE__*/React.createRef();
     this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -574,7 +595,8 @@ class Toolbar extends Component {
       "data-testid": "editor-floating-toolbar"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: className
+      className: className,
+      onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.handleMouseDown : undefined
     }, jsx(Announcer, {
       text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250

package/dist/esm/ui/Toolbar.js

@@ -337,7 +337,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         });
       case 'separator':
         return jsx(Separator, {
-          key: idx
+          key: idx,
+          fullHeight: item.fullHeight
         });
     }
   };
@@ -471,7 +472,22 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
         marginRight: "var(--ds-space-100, 8px)"
       }
     }
-  }) :
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  editorExperiment('platform_editor_controls', 'variant1') ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> div': {
+      height: '40px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
+        marginRight: "var(--ds-space-100, 8px)"
+      }
+    }
+  }) : undefined) :
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css({
     display: 'flex'
@@ -506,6 +522,11 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       event.preventDefault();
       event.stopPropagation();
     });
+    _defineProperty(_this, "handleMouseDown", function (event) {
+      // Prevents selection toolbar from closing when clicking on the toolbar
+      event.stopPropagation();
+      event.preventDefault();
+    });
     _this.scrollContainerRef = /*#__PURE__*/React.createRef();
     _this.mountRef = /*#__PURE__*/React.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -621,7 +642,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         "data-testid": "editor-floating-toolbar"
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: className
+        className: className,
+        onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.handleMouseDown : undefined
       }, jsx(Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^17.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.3.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",