@atlaskit/editor-plugin-table 24.4.16 → 24.4.17

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/FloatingContextualButton/styles.js +50 -1
  3. package/dist/es2019/ui/FloatingContextualButton/styles.js +47 -1
  4. package/dist/esm/ui/FloatingContextualButton/styles.js +51 -1
  5. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 24.4.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [`161922d5b8cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/161922d5b8cee) -
8
+ Fix editor tooltips affected by inline top-layer rendering. Table cell menu tooltips are no longer
9
+ constrained by the button background selector, and layout column drag handles now own their
10
+ wrapper layout without flattening the tooltip's visual surface.
11
+ - Updated dependencies
12
+
3
13
  ## 24.4.16
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/FloatingContextualButton/styles.js CHANGED
@@ -5,11 +5,57 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
9
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
9
10
  var _consts = require("../consts");
10
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
12
 
12
- var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
13
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
14
+ var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
15
+ return (0, _react.css)({
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
17
+ '> div:not([popover])': {
18
+ // Sits behind button to provide surface-color background
19
+ background: "var(--ds-surface, #FFFFFF)",
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
21
+ borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
22
+ display: 'flex',
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
+ height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
25
+ width: "var(--ds-space-250, 20px)",
26
+ flexDirection: 'column'
27
+ },
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
29
+ '&& button': {
30
+ background: "var(--ds-background-neutral, #0515240F)",
31
+ flexDirection: 'column',
32
+ margin: "var(--ds-space-025, 2px)",
33
+ outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
35
+ borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
36
+ padding: 0,
37
+ height: 'calc(100% - 4px)',
38
+ display: 'flex'
39
+ },
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
41
+ '&& button:hover': {
42
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
43
+ },
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
45
+ '&& button:active': {
46
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
47
+ },
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
+ '&& button > span': {
50
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
51
+ },
52
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
53
+ '&& span': {
54
+ pointerEvents: 'none'
55
+ }
56
+ });
57
+ };
58
+ var legacyCellButtonStyles = function legacyCellButtonStyles() {
13
59
  return (0, _react.css)({
14
60
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
15
61
  '> div': {
@@ -53,6 +99,9 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
53
99
  }
54
100
  });
55
101
  };
102
+ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
103
+ return (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
104
+ };
56
105
  var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
57
106
  return (0, _react.css)({
58
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
package/dist/es2019/ui/FloatingContextualButton/styles.js CHANGED
@@ -1,8 +1,53 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { contextualMenuTriggerSize } from '../consts';
5
- export const tableFloatingCellButtonStyles = () => css({
6
+
7
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
8
+ const topLayerTooltipCellButtonStyles = () => css({
9
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
10
+ '> div:not([popover])': {
11
+ // Sits behind button to provide surface-color background
12
+ background: "var(--ds-surface, #FFFFFF)",
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
14
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
15
+ display: 'flex',
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
17
+ height: `${contextualMenuTriggerSize + 2}px`,
18
+ width: "var(--ds-space-250, 20px)",
19
+ flexDirection: 'column'
20
+ },
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
22
+ '&& button': {
23
+ background: "var(--ds-background-neutral, #0515240F)",
24
+ flexDirection: 'column',
25
+ margin: "var(--ds-space-025, 2px)",
26
+ outline: `2px solid ${"var(--ds-surface, #FFFFFF)"}`,
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
28
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
29
+ padding: 0,
30
+ height: 'calc(100% - 4px)',
31
+ display: 'flex'
32
+ },
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
34
+ '&& button:hover': {
35
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
36
+ },
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
38
+ '&& button:active': {
39
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
40
+ },
41
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
42
+ '&& button > span': {
43
+ margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
44
+ },
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
46
+ '&& span': {
47
+ pointerEvents: 'none'
48
+ }
49
+ });
50
+ const legacyCellButtonStyles = () => css({
6
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
7
52
  '> div': {
8
53
  // Sits behind button to provide surface-color background
@@ -44,6 +89,7 @@ export const tableFloatingCellButtonStyles = () => css({
44
89
  pointerEvents: 'none'
45
90
  }
46
91
  });
92
+ export const tableFloatingCellButtonStyles = () => fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
47
93
  export const tableFloatingCellButtonSelectedStyles = () => css({
48
94
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
95
  '&& button': {
package/dist/esm/ui/FloatingContextualButton/styles.js CHANGED
@@ -1,8 +1,55 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { contextualMenuTriggerSize } from '../consts';
5
- export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
6
+
7
+ // Excludes the inlined top-layer tooltip popover from the background box selector so it isn't squished.
8
+ var topLayerTooltipCellButtonStyles = function topLayerTooltipCellButtonStyles() {
9
+ return css({
10
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
11
+ '> div:not([popover])': {
12
+ // Sits behind button to provide surface-color background
13
+ background: "var(--ds-surface, #FFFFFF)",
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
15
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
16
+ display: 'flex',
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
18
+ height: "".concat(contextualMenuTriggerSize + 2, "px"),
19
+ width: "var(--ds-space-250, 20px)",
20
+ flexDirection: 'column'
21
+ },
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
23
+ '&& button': {
24
+ background: "var(--ds-background-neutral, #0515240F)",
25
+ flexDirection: 'column',
26
+ margin: "var(--ds-space-025, 2px)",
27
+ outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
29
+ borderRadius: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
30
+ padding: 0,
31
+ height: 'calc(100% - 4px)',
32
+ display: 'flex'
33
+ },
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
35
+ '&& button:hover': {
36
+ background: "var(--ds-background-neutral-hovered, #0B120E24)"
37
+ },
38
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
39
+ '&& button:active': {
40
+ background: "var(--ds-background-neutral-pressed, #080F214A)"
41
+ },
42
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
43
+ '&& button > span': {
44
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
45
+ },
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
47
+ '&& span': {
48
+ pointerEvents: 'none'
49
+ }
50
+ });
51
+ };
52
+ var legacyCellButtonStyles = function legacyCellButtonStyles() {
6
53
  return css({
7
54
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
8
55
  '> div': {
@@ -46,6 +93,9 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
46
93
  }
47
94
  });
48
95
  };
96
+ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
97
+ return fg('platform-dst-top-layer-tooltip') ? topLayerTooltipCellButtonStyles() : legacyCellButtonStyles();
98
+ };
49
99
  export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles() {
50
100
  return css({
51
101
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "24.4.16",
3
+ "version": "24.4.17",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
30
30
  "@atlaskit/editor-plugin-content-insertion": "^12.0.0",
31
31
  "@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
32
- "@atlaskit/editor-plugin-extension": "15.0.35",
32
+ "@atlaskit/editor-plugin-extension": "15.0.36",
33
33
  "@atlaskit/editor-plugin-guideline": "^12.0.0",
34
34
  "@atlaskit/editor-plugin-interaction": "^23.0.0",
35
35
  "@atlaskit/editor-plugin-limited-mode": "^9.0.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
54
54
  "@atlaskit/primitives": "^22.1.0",
55
- "@atlaskit/tmp-editor-statsig": "^131.0.0",
55
+ "@atlaskit/tmp-editor-statsig": "^132.0.0",
56
56
  "@atlaskit/toggle": "^17.1.0",
57
57
  "@atlaskit/tokens": "^16.2.0",
58
58
  "@atlaskit/tooltip": "^23.1.0",
@@ -159,6 +159,9 @@
159
159
  },
160
160
  "platform_editor_table_cell_menu_update": {
161
161
  "type": "boolean"
162
+ },
163
+ "platform-dst-top-layer-tooltip": {
164
+ "type": "boolean"
162
165
  }
163
166
  },
164
167
  "devDependencies": {