@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.
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
|
|
@@ -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
|
-
|
|
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
|
|
@@ -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
|
-
|
|
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': {
|
|
@@ -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
|
-
|
|
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.
|
|
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.
|
|
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": "^
|
|
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": {
|