@atlaskit/editor-plugin-layout 7.0.25 → 7.0.27

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 (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/ui/LayoutBlockMenuItem.compiled.css +2 -0
  3. package/dist/cjs/ui/LayoutBlockMenuItem.js +15 -5
  4. package/dist/es2019/ui/LayoutBlockMenuItem.compiled.css +2 -0
  5. package/dist/es2019/ui/LayoutBlockMenuItem.js +15 -5
  6. package/dist/esm/ui/LayoutBlockMenuItem.compiled.css +2 -0
  7. package/dist/esm/ui/LayoutBlockMenuItem.js +15 -5
  8. package/dist/types/ui/LayoutBlockMenuItem.d.ts +4 -0
  9. package/dist/types-ts4.5/ui/LayoutBlockMenuItem.d.ts +4 -0
  10. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 7.0.27
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 7.0.26
10
+
11
+ ### Patch Changes
12
+
13
+ - [`47211917d90fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47211917d90fc) -
14
+ Editor 5281 fix block menu icon cut off when zoom
15
+
3
16
  ## 7.0.25
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/ui/LayoutBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/cjs/ui/LayoutBlockMenuItem.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* LayoutBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.createLayoutBlockMenuItem = void 0;
9
+ require("./LayoutBlockMenuItem.compiled.css");
10
+ var _runtime = require("@compiled/react/runtime");
8
11
  var _react = _interopRequireDefault(require("react"));
9
12
  var _reactIntlNext = require("react-intl-next");
10
13
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -12,6 +15,9 @@ var _messages = require("@atlaskit/editor-common/messages");
12
15
  var _editorToolbar = require("@atlaskit/editor-toolbar");
13
16
  var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
14
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
+ var styles = {
19
+ svgOverflow: "_1wrmewfl _172sewfl"
20
+ };
15
21
  var NODE_NAME = 'layoutSection';
16
22
  var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
17
23
  var api = _ref.api;
@@ -36,14 +42,18 @@ var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
36
42
 
37
43
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
38
44
  // Adds size="small" to icons for better visual consistency in block menu.
39
- // To clean up: remove conditional, keep only size="small" version.
45
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
46
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
40
47
  var iconSize = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
48
+ var icon = /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
49
+ label: "",
50
+ size: iconSize
51
+ });
41
52
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
42
53
  onClick: handleClick,
43
- elemBefore: /*#__PURE__*/_react.default.createElement(_layoutTwoColumns.default, {
44
- label: "",
45
- size: iconSize
46
- })
54
+ elemBefore: (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/_react.default.createElement("span", {
55
+ className: (0, _runtime.ax)([styles.svgOverflow])
56
+ }, icon) : icon
47
57
  }, formatMessage(_messages.blockMenuMessages.layout));
48
58
  };
49
59
  var createLayoutBlockMenuItem = exports.createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
package/dist/es2019/ui/LayoutBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/es2019/ui/LayoutBlockMenuItem.js CHANGED
@@ -1,3 +1,6 @@
1
+ /* LayoutBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import "./LayoutBlockMenuItem.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { useIntl } from 'react-intl-next';
3
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -5,6 +8,9 @@ import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
8
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
6
9
  import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
7
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
+ const styles = {
12
+ svgOverflow: "_1wrmewfl _172sewfl"
13
+ };
8
14
  const NODE_NAME = 'layoutSection';
9
15
  const LayoutBlockMenuItem = ({
10
16
  api
@@ -32,14 +38,18 @@ const LayoutBlockMenuItem = ({
32
38
 
33
39
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
34
40
  // Adds size="small" to icons for better visual consistency in block menu.
35
- // To clean up: remove conditional, keep only size="small" version.
41
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
42
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
36
43
  const iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
44
+ const icon = /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
45
+ label: "",
46
+ size: iconSize
47
+ });
37
48
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
38
49
  onClick: handleClick,
39
- elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
40
- label: "",
41
- size: iconSize
42
- })
50
+ elemBefore: fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
51
+ className: ax([styles.svgOverflow])
52
+ }, icon) : icon
43
53
  }, formatMessage(blockMenuMessages.layout));
44
54
  };
45
55
  export const createLayoutBlockMenuItem = api => {
package/dist/esm/ui/LayoutBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/esm/ui/LayoutBlockMenuItem.js CHANGED
@@ -1,3 +1,6 @@
1
+ /* LayoutBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import "./LayoutBlockMenuItem.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { useIntl } from 'react-intl-next';
3
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -5,6 +8,9 @@ import { blockMenuMessages } from '@atlaskit/editor-common/messages';
5
8
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
6
9
  import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
7
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
+ var styles = {
12
+ svgOverflow: "_1wrmewfl _172sewfl"
13
+ };
8
14
  var NODE_NAME = 'layoutSection';
9
15
  var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
10
16
  var api = _ref.api;
@@ -29,14 +35,18 @@ var LayoutBlockMenuItem = function LayoutBlockMenuItem(_ref) {
29
35
 
30
36
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
31
37
  // Adds size="small" to icons for better visual consistency in block menu.
32
- // To clean up: remove conditional, keep only size="small" version.
38
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
39
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
33
40
  var iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
41
+ var icon = /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
42
+ label: "",
43
+ size: iconSize
44
+ });
34
45
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
35
46
  onClick: handleClick,
36
- elemBefore: /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
37
- label: "",
38
- size: iconSize
39
- })
47
+ elemBefore: fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
48
+ className: ax([styles.svgOverflow])
49
+ }, icon) : icon
40
50
  }, formatMessage(blockMenuMessages.layout));
41
51
  };
42
52
  export var createLayoutBlockMenuItem = function createLayoutBlockMenuItem(api) {
package/dist/types/ui/LayoutBlockMenuItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
7
  import type { LayoutPlugin } from '../layoutPluginType';
package/dist/types-ts4.5/ui/LayoutBlockMenuItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
7
  import type { LayoutPlugin } from '../layoutPluginType';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "7.0.25",
3
+ "version": "7.0.27",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,8 @@
29
29
  ],
30
30
  "atlaskit:src": "src/index.ts",
31
31
  "dependencies": {
32
- "@atlaskit/adf-schema": "^52.0.0",
32
+ "@atlaskit/adf-schema": "^52.2.0",
33
+ "@atlaskit/css": "^0.19.0",
33
34
  "@atlaskit/editor-plugin-analytics": "^7.0.0",
34
35
  "@atlaskit/editor-plugin-block-menu": "^6.1.0",
35
36
  "@atlaskit/editor-plugin-decorations": "^7.0.0",
@@ -45,13 +46,13 @@
45
46
  "@atlaskit/icon": "^32.0.0",
46
47
  "@atlaskit/icon-lab": "^5.17.0",
47
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
- "@atlaskit/tmp-editor-statsig": "^32.0.0",
49
+ "@atlaskit/tmp-editor-statsig": "^33.0.0",
49
50
  "@atlaskit/tokens": "^11.0.0",
50
51
  "@babel/runtime": "^7.0.0",
51
52
  "@emotion/react": "^11.7.1"
52
53
  },
53
54
  "peerDependencies": {
54
- "@atlaskit/editor-common": "^111.20.0",
55
+ "@atlaskit/editor-common": "^111.26.0",
55
56
  "react": "^18.2.0",
56
57
  "react-intl-next": "npm:react-intl@^5.18.1"
57
58
  },