@atlaskit/editor-plugin-breakout 3.0.5 → 3.0.6

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 (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/LayoutButton.js +11 -1
  3. package/dist/es2019/ui/LayoutButton.js +13 -1
  4. package/dist/esm/ui/LayoutButton.js +11 -1
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 3.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#188277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188277)
8
+ [`9e6d67b625ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e6d67b625ac9) -
9
+ [ux] Hides drag controls for all nodes and resize handles on expands and layouts on narrow
10
+ screens.
11
+ - Updated dependencies
12
+
3
13
  ## 3.0.5
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/LayoutButton.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _react = require("react");
9
10
  var _react2 = require("@emotion/react");
10
11
  var _reactIntlNext = require("react-intl-next");
@@ -15,12 +16,14 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
15
16
  var _utils = require("@atlaskit/editor-common/utils");
16
17
  var _state = require("@atlaskit/editor-prosemirror/state");
17
18
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
19
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
20
  var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
19
21
  var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
20
22
  var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
21
23
  var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
22
24
  var _colors = require("@atlaskit/theme/colors");
23
25
  var _constants = require("@atlaskit/theme/constants");
26
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
24
27
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
25
28
  var _removeBreakout = require("../editor-commands/remove-breakout");
26
29
  var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
@@ -48,6 +51,13 @@ var toolbarButtonWrapperStyles = (0, _react2.css)({
48
51
  }
49
52
  }
50
53
  });
54
+ var toolbarButtonNarrowScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
55
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
56
+ '&& button': {
57
+ visibility: 'hidden',
58
+ opacity: 0
59
+ }
60
+ }));
51
61
  function getBreakoutNodeElement(pluginState, selection, editorView) {
52
62
  if (!pluginState.breakoutNode) {
53
63
  return undefined;
@@ -139,7 +149,7 @@ var LayoutButton = function LayoutButton(_ref) {
139
149
  forcePlacement: true,
140
150
  zIndex: belowOtherPopupsZIndex
141
151
  }, (0, _react2.jsx)("div", {
142
- css: toolbarButtonWrapperStyles
152
+ css: [toolbarButtonWrapperStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
143
153
  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
144
154
  title: title,
145
155
  testId: titleMessage.id,
package/dist/es2019/ui/LayoutButton.js CHANGED
@@ -14,12 +14,14 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
14
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
15
15
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
16
16
  import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
17
+ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
17
18
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
18
19
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
19
20
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
20
21
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
21
22
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
22
23
  import { layers } from '@atlaskit/theme/constants';
24
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
23
25
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
26
  import { removeBreakout } from '../editor-commands/remove-breakout';
25
27
  import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -40,6 +42,16 @@ const toolbarButtonWrapperStyles = css({
40
42
  }
41
43
  }
42
44
  });
45
+ const toolbarButtonNarrowScreenStyles = css({
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
47
+ [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
48
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
+ '&& button': {
50
+ visibility: 'hidden',
51
+ opacity: 0
52
+ }
53
+ }
54
+ });
43
55
  function getBreakoutNodeElement(pluginState, selection, editorView) {
44
56
  if (!pluginState.breakoutNode) {
45
57
  return undefined;
@@ -138,7 +150,7 @@ const LayoutButton = ({
138
150
  forcePlacement: true,
139
151
  zIndex: belowOtherPopupsZIndex
140
152
  }, jsx("div", {
141
- css: toolbarButtonWrapperStyles
153
+ css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
142
154
  }, jsx(ToolbarButton, {
143
155
  title: title,
144
156
  testId: titleMessage.id,
package/dist/esm/ui/LayoutButton.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  /**
2
3
  * @jsxRuntime classic
3
4
  * @jsx jsx
@@ -14,12 +15,14 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
15
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
15
16
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
16
17
  import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
18
+ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
17
19
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
18
20
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
19
21
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
20
22
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
21
23
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
22
24
  import { layers } from '@atlaskit/theme/constants';
25
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
23
26
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
27
  import { removeBreakout } from '../editor-commands/remove-breakout';
25
28
  import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -40,6 +43,13 @@ var toolbarButtonWrapperStyles = css({
40
43
  }
41
44
  }
42
45
  });
46
+ var toolbarButtonNarrowScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
47
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
48
+ '&& button': {
49
+ visibility: 'hidden',
50
+ opacity: 0
51
+ }
52
+ }));
43
53
  function getBreakoutNodeElement(pluginState, selection, editorView) {
44
54
  if (!pluginState.breakoutNode) {
45
55
  return undefined;
@@ -131,7 +141,7 @@ var LayoutButton = function LayoutButton(_ref) {
131
141
  forcePlacement: true,
132
142
  zIndex: belowOtherPopupsZIndex
133
143
  }, jsx("div", {
134
- css: toolbarButtonWrapperStyles
144
+ css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
135
145
  }, jsx(ToolbarButton, {
136
146
  title: title,
137
147
  testId: titleMessage.id,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "3.0.5",
3
+ "version": "3.0.6",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,12 +42,12 @@
42
42
  "@atlaskit/editor-plugin-width": "^4.0.0",
43
43
  "@atlaskit/editor-prosemirror": "7.0.0",
44
44
  "@atlaskit/editor-shared-styles": "^3.5.0",
45
- "@atlaskit/icon": "^27.3.0",
45
+ "@atlaskit/icon": "^27.5.0",
46
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
48
48
  "@atlaskit/theme": "^19.0.0",
49
49
  "@atlaskit/tmp-editor-statsig": "^9.8.0",
50
- "@atlaskit/tokens": "^5.5.0",
50
+ "@atlaskit/tokens": "^5.6.0",
51
51
  "@atlaskit/tooltip": "^20.3.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@emotion/react": "^11.7.1",