@atlaskit/editor-shared-styles 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-shared-styles
 
+## 2.2.0
+
+### Minor Changes
+
+- [`73d9a2fa116`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73d9a2fa116) - ED-15568 Restore table's FloatingContextualMenu, extract utils/UI components
+
+## 2.1.5
+
+### Patch Changes
+
+- [`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
+- Updated dependencies
+
 ## 2.1.4
 
 ### Patch Changes

package/dist/cjs/scrollbar-styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollbarStyles = void 0;
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var akGridSize = (0, _constants.gridSize)() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+exports.scrollbarStyles = scrollbarStyles;

package/dist/cjs/selection/utils.js

@@ -34,7 +34,7 @@ exports.hideNativeBrowserTextSelectionStyles = hideNativeBrowserTextSelectionSty
 var getSelectionStyle = function getSelectionStyle(style) {
   switch (style) {
     case _types.SelectionStyle.Border:
-      return "border: ".concat(_consts.akEditorSelectedBorder, ";");
+      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      ");
 
     case _types.SelectionStyle.BoxShadow:
       return "\n        box-shadow: ".concat(_consts.akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
@@ -43,7 +43,7 @@ var getSelectionStyle = function getSelectionStyle(style) {
       return "background-color: ".concat((0, _tokens.token)('color.background.selected', _consts.akEditorSelectedBgColor), ";");
 
     case _types.SelectionStyle.Blanket:
-      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        }");
+      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        }");
 
     default:
       return '';

package/dist/cjs/shortcut/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "shortcutStyle", {
+  enumerable: true,
+  get: function get() {
+    return _shortcut.shortcutStyle;
+  }
+});
+
+var _shortcut = require("./shortcut");

package/dist/cjs/shortcut/shortcut.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortcutStyle = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _consts = require("../consts");
+
+var _templateObject;
+
+var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), (0, _tokens.token)('color.text.subtle', _colors.N100), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
+exports.shortcutStyle = shortcutStyle;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.4",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/es2019/scrollbar-styles.js

@@ -0,0 +1,29 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+const akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+export const scrollbarStyles = `
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    height: ${akGridSize};
+    width: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    border-radius: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+  }
+`;

package/dist/es2019/selection/utils.js

@@ -1,5 +1,5 @@
 import { token } from '@atlaskit/tokens';
-import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
+import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
 /**
  * Adds correct selection styling for a node
@@ -25,7 +25,23 @@ export const hideNativeBrowserTextSelectionStyles = `
 const getSelectionStyle = style => {
   switch (style) {
     case SelectionStyle.Border:
-      return `border: ${akEditorSelectedBorder};`;
+      return `
+        border: ${akEditorSelectedBorder};
+
+        // Fixes ED-15246: Trello card is visible through a border of a table border
+        &::after {
+          height: 100%;
+          content: '\\00a0';
+          background: ${akEditorSelectedBorderColor};
+          position: absolute;
+          right: -1px;
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          border: none;
+          display: inline-block;
+        }
+      `;
 
     case SelectionStyle.BoxShadow:
       return `
@@ -44,14 +60,16 @@ const getSelectionStyle = style => {
         // in Safari. Looks like it's caused by user-select: all in the emoji element
         -webkit-user-select: text;
 
-        ::after {
+        ::before {
           position: absolute;
           content: '';
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
+          width: 100%;
           pointer-events: none;
+          z-index: ${akEditorSmallZIndex};
           background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
         }`;
 

package/dist/es2019/shortcut/index.js

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/es2019/shortcut/shortcut.js

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+export const shortcutStyle = css`
+  background-color: ${token('color.background.neutral', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
+  color: ${token('color.text.subtle', N100)};
+  border-radius: ${borderRadius()}px;
+  padding: 4px;
+  line-height: 12px;
+  font-size: ${relativeFontSizeToBase16(11.67)};
+  align-self: flex-end;
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    display: none;
+  }
+`;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.4",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/esm/scrollbar-styles.js

@@ -0,0 +1,5 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+var akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat(token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");

package/dist/esm/selection/utils.js

@@ -1,5 +1,5 @@
 import { token } from '@atlaskit/tokens';
-import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBoxShadow } from '../consts';
+import { akEditorSelectedBgColor, akEditorSelectedBorder, akEditorSelectedBorderColor, akEditorSelectedBoxShadow, akEditorSmallZIndex } from '../consts';
 import { SelectionStyle } from './types';
 /**
  * Adds correct selection styling for a node
@@ -22,7 +22,7 @@ export var hideNativeBrowserTextSelectionStyles = "\n  ::selection,*::selection
 var getSelectionStyle = function getSelectionStyle(style) {
   switch (style) {
     case SelectionStyle.Border:
-      return "border: ".concat(akEditorSelectedBorder, ";");
+      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      ");
 
     case SelectionStyle.BoxShadow:
       return "\n        box-shadow: ".concat(akEditorSelectedBoxShadow, ";\n        border-color: transparent;\n        ");
@@ -31,7 +31,7 @@ var getSelectionStyle = function getSelectionStyle(style) {
       return "background-color: ".concat(token('color.background.selected', akEditorSelectedBgColor), ";");
 
     case SelectionStyle.Blanket:
-      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        }");
+      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        }");
 
     default:
       return '';

package/dist/esm/shortcut/index.js

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/esm/shortcut/shortcut.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), token('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), token('color.text.subtle', N100), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.4",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/types/scrollbar-styles.d.ts

@@ -0,0 +1 @@
+export declare const scrollbarStyles: string;

package/dist/types/shortcut/index.d.ts

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/types/shortcut/shortcut.d.ts

@@ -0,0 +1 @@
+export declare const shortcutStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,10 +22,12 @@
   "af:exports": {
     "./consts": "./src/consts/index.ts",
     "./selection": "./src/selection/index.ts",
+    "./shortcut": "./src/shortcut/index.ts",
+    "./scrollbar": "./src/scrollbar-styles.ts",
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"

package/scrollbar/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/editor-shared-styles/scrollbar",
+  "main": "../dist/cjs/scrollbar-styles.js",
+  "module": "../dist/esm/scrollbar-styles.js",
+  "module:es2019": "../dist/es2019/scrollbar-styles.js",
+  "sideEffects": false,
+  "types": "../dist/types/scrollbar-styles.d.ts"
+}

package/shortcut/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/editor-shared-styles/shortcut",
+  "main": "../dist/cjs/shortcut/index.js",
+  "module": "../dist/esm/shortcut/index.js",
+  "module:es2019": "../dist/es2019/shortcut/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/shortcut/index.d.ts"
+}

package/src/scrollbar-styles.ts

@@ -0,0 +1,40 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+const akGridSize = gridSize() + 'px';
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+export const scrollbarStyles = `
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    height: ${akGridSize};
+    width: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${token(
+      'color.background.neutral.subtle',
+      'rgba(0, 0, 0, 0)',
+    )};
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: ${token(
+      'color.background.neutral.bold',
+      'rgba(0, 0, 0, 0.2)',
+    )};
+    border-radius: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: ${token(
+      'color.background.neutral.bold.hovered',
+      'rgba(0, 0, 0, 0.4)',
+    )};
+  }
+`;

package/src/selection/__tests__/unit/utils.ts

@@ -15,7 +15,7 @@ describe('selection plugin: utils', () => {
         style: SelectionStyle.Background,
         regex: /background\-color\:/,
       },
-      { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:after/ },
+      { name: 'blanket', style: SelectionStyle.Blanket, regex: /\:\:before/ },
     ];
 
     for (const selectionStyle of selectionStyles) {

package/src/selection/utils.ts

@@ -3,7 +3,9 @@ import { token } from '@atlaskit/tokens';
 import {
   akEditorSelectedBgColor,
   akEditorSelectedBorder,
+  akEditorSelectedBorderColor,
   akEditorSelectedBoxShadow,
+  akEditorSmallZIndex,
 } from '../consts';
 
 import { SelectionStyle } from './types';
@@ -38,7 +40,23 @@ export const hideNativeBrowserTextSelectionStyles = `
 const getSelectionStyle = (style: SelectionStyle): string => {
   switch (style) {
     case SelectionStyle.Border:
-      return `border: ${akEditorSelectedBorder};`;
+      return `
+        border: ${akEditorSelectedBorder};
+
+        // Fixes ED-15246: Trello card is visible through a border of a table border
+        &::after {
+          height: 100%;
+          content: '\\00a0';
+          background: ${akEditorSelectedBorderColor};
+          position: absolute;
+          right: -1px;
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          border: none;
+          display: inline-block;
+        }
+      `;
     case SelectionStyle.BoxShadow:
       return `
         box-shadow: ${akEditorSelectedBoxShadow};
@@ -57,14 +75,16 @@ const getSelectionStyle = (style: SelectionStyle): string => {
         // in Safari. Looks like it's caused by user-select: all in the emoji element
         -webkit-user-select: text;
 
-        ::after {
+        ::before {
           position: absolute;
           content: '';
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
+          width: 100%;
           pointer-events: none;
+          z-index: ${akEditorSmallZIndex};
           background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
         }`;
     default:

package/src/shortcut/index.ts

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/src/shortcut/shortcut.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+
+export const shortcutStyle = css`
+  background-color: ${token(
+    'color.background.neutral',
+    'rgba(223, 225, 229, 0.5)',
+  )}; /* N60 at 50% */
+  color: ${token('color.text.subtle', N100)};
+  border-radius: ${borderRadius()}px;
+  padding: 4px;
+  line-height: 12px;
+  font-size: ${relativeFontSizeToBase16(11.67)};
+  align-self: flex-end;
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    display: none;
+  }
+`;