@atlaskit/editor-shared-styles 2.1.4 → 2.1.5

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 +7 -0
  2. package/dist/cjs/selection/utils.js +2 -2
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/selection/utils.js +21 -3
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/selection/utils.js +3 -3
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +2 -2
  9. package/src/selection/__tests__/unit/utils.ts +1 -1
  10. package/src/selection/utils.ts +22 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 2.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a6df7e823d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a6df7e823d8) - [ux] Fixed trello card overflow issue in table cells & fixed merged table cells selection / hover state
8
+ - Updated dependencies
9
+
3
10
  ## 2.1.4
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/selection/utils.js CHANGED
@@ -34,7 +34,7 @@ exports.hideNativeBrowserTextSelectionStyles = hideNativeBrowserTextSelectionSty
34
34
  var getSelectionStyle = function getSelectionStyle(style) {
35
35
  switch (style) {
36
36
  case _types.SelectionStyle.Border:
37
- return "border: ".concat(_consts.akEditorSelectedBorder, ";");
37
+ return "\n border: ".concat(_consts.akEditorSelectedBorder, ";\n\n // Fixes ED-15246: Trello card is visible through a border of a table border\n &::after {\n height: 100%;\n content: '\\00a0';\n background: ").concat(_consts.akEditorSelectedBorderColor, ";\n position: absolute;\n right: -1px;\n top: 0;\n bottom: 0;\n width: 1px;\n border: none;\n display: inline-block;\n }\n ");
38
38
 
39
39
  case _types.SelectionStyle.BoxShadow:
40
40
  return "\n box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
@@ -43,7 +43,7 @@ var getSelectionStyle = function getSelectionStyle(style) {
43
43
  return "background-color: ".concat((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
44
44
 
45
45
  case _types.SelectionStyle.Blanket:
46
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n background-color: ".concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n }");
46
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(_consts.akEditorSmallZIndex, ";\n background-color: ").concat((0, _tokens.token)('color.blanket.selected', '#B3D4FF4C'), "\n }");
47
47
 
48
48
  default:
49
49
  return '';
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/selection/utils.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { token } from '@atlaskit/tokens';
2
- import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
2
+ import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
3
3
  import { SelectionStyle } from './types';
4
4
  /**
5
5
  * Adds correct selection styling for a node
@@ -25,7 +25,23 @@ export const hideNativeBrowserTextSelectionStyles = `
25
25
  const getSelectionStyle = style => {
26
26
  switch (style) {
27
27
  case SelectionStyle.Border:
28
- return `border: ${akEditorSelectedBorder};`;
28
+ return `
29
+ border: ${akEditorSelectedBorder};
30
+
31
+ // Fixes ED-15246: Trello card is visible through a border of a table border
32
+ &::after {
33
+ height: 100%;
34
+ content: '\\00a0';
35
+ background: ${akEditorSelectedBorderColor};
36
+ position: absolute;
37
+ right: -1px;
38
+ top: 0;
39
+ bottom: 0;
40
+ width: 1px;
41
+ border: none;
42
+ display: inline-block;
43
+ }
44
+ `;
29
45
 
30
46
  case SelectionStyle.BoxShadow:
31
47
  return `
@@ -44,14 +60,16 @@ const getSelectionStyle = style => {
44
60
  // in Safari. Looks like it's caused by user-select: all in the emoji element
45
61
  -webkit-user-select: text;
46
62
 
47
- ::after {
63
+ ::before {
48
64
  position: absolute;
49
65
  content: '';
50
66
  left: 0;
51
67
  right: 0;
52
68
  top: 0;
53
69
  bottom: 0;
70
+ width: 100%;
54
71
  pointer-events: none;
72
+ z-index: ${akEditorSmallZIndex};
55
73
  background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
56
74
  }`;
57
75
 
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/selection/utils.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { token } from '@atlaskit/tokens';
2
- import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
2
+ import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
3
3
  import { SelectionStyle } from './types';
4
4
  /**
5
5
  * Adds correct selection styling for a node
@@ -22,7 +22,7 @@ export var hideNativeBrowserTextSelectionStyles = "\n ::selection,*::selection
22
22
  var getSelectionStyle = function getSelectionStyle(style) {
23
23
  switch (style) {
24
24
  case SelectionStyle.Border:
25
- return "border: ".concat(akEditorSelectedBorder, ";");
25
+ return "\n border: ".concat(akEditorSelectedBorder, ";\n\n // Fixes ED-15246: Trello card is visible through a border of a table border\n &::after {\n height: 100%;\n content: '\\00a0';\n background: ").concat(akEditorSelectedBorderColor, ";\n position: absolute;\n right: -1px;\n top: 0;\n bottom: 0;\n width: 1px;\n border: none;\n display: inline-block;\n }\n ");
26
26
 
27
27
  case SelectionStyle.BoxShadow:
28
28
  return "\n box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n border-color: transparent;\n ");
@@ -31,7 +31,7 @@ var getSelectionStyle = function getSelectionStyle(style) {
31
31
  return "background-color: ".concat(token('color.background.selected', akEditorSelectedBgColor), ";");
32
32
 
33
33
  case SelectionStyle.Blanket:
34
- return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::after {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n background-color: ".concat(token('color.blanket.selected', '#B3D4FF4C'), "\n }");
34
+ return "\n position: relative;\n\n // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel\n // in Safari. Looks like it's caused by user-select: all in the emoji element\n -webkit-user-select: text;\n\n ::before {\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n z-index: ".concat(akEditorSmallZIndex, ";\n background-color: ").concat(token('color.blanket.selected', '#B3D4FF4C'), "\n }");
35
35
 
36
36
  default:
37
37
  return '';
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
25
25
  ".": "./src/index.ts"
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/theme": "^12.1.0",
28
+ "@atlaskit/theme": "^12.2.0",
29
29
  "@atlaskit/tokens": "^0.10.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@emotion/react": "^11.7.1"
package/src/selection/__tests__/unit/utils.ts CHANGED
@@ -15,7 +15,7 @@ describe('selection plugin: utils', () => {
15
15
  style: SelectionStyle.Background,
16
16
  regex: /background\-color\:/,
17
17
  },
18
- { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:after/ },
18
+ { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:before/ },
19
19
  ];
20
20
 
21
21
  for (const selectionStyle of selectionStyles) {
package/src/selection/utils.ts CHANGED
@@ -3,7 +3,9 @@ import { token } from '@atlaskit/tokens';
3
3
  import {
4
4
  akEditorSelectedBgColor,
5
5
  akEditorSelectedBorder,
6
+ akEditorSelectedBorderColor,
6
7
  akEditorSelectedBoxShadow,
8
+ akEditorSmallZIndex,
7
9
  } from '../consts';
8
10
 
9
11
  import { SelectionStyle } from './types';
@@ -38,7 +40,23 @@ export const hideNativeBrowserTextSelectionStyles = `
38
40
  const getSelectionStyle = (style: SelectionStyle): string => {
39
41
  switch (style) {
40
42
  case SelectionStyle.Border:
41
- return `border: ${akEditorSelectedBorder};`;
43
+ return `
44
+ border: ${akEditorSelectedBorder};
45
+
46
+ // Fixes ED-15246: Trello card is visible through a border of a table border
47
+ &::after {
48
+ height: 100%;
49
+ content: '\\00a0';
50
+ background: ${akEditorSelectedBorderColor};
51
+ position: absolute;
52
+ right: -1px;
53
+ top: 0;
54
+ bottom: 0;
55
+ width: 1px;
56
+ border: none;
57
+ display: inline-block;
58
+ }
59
+ `;
42
60
  case SelectionStyle.BoxShadow:
43
61
  return `
44
62
  box-shadow: ${akEditorSelectedBoxShadow};
@@ -57,14 +75,16 @@ const getSelectionStyle = (style: SelectionStyle): string => {
57
75
  // in Safari. Looks like it's caused by user-select: all in the emoji element
58
76
  -webkit-user-select: text;
59
77
 
60
- ::after {
78
+ ::before {
61
79
  position: absolute;
62
80
  content: '';
63
81
  left: 0;
64
82
  right: 0;
65
83
  top: 0;
66
84
  bottom: 0;
85
+ width: 100%;
67
86
  pointer-events: none;
87
+ z-index: ${akEditorSmallZIndex};
68
88
  background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
69
89
  }`;
70
90
  default: