@atlaskit/editor-shared-styles 2.1.2 → 2.1.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-shared-styles
 
+## 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
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 2.1.3
+
+### Patch Changes
+
+- [`450a17a332a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/450a17a332a) - [ux] ED-14654: Lower z-index values on editor elements so they do not stick out of the editor and interfere with consuming products
+- [`30c74c32783`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30c74c32783) - [ux] ED-15234: reverts ED-14654 because causing header zindex issues
+
 ## 2.1.2
 
 ### Patch Changes

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/version.json

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

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/version.json

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

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/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.1.2",
+  "version": "2.1.5",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     ".": "./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"
@@ -33,7 +33,7 @@
   "peerDependencies": {},
   "devDependencies": {
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {

package/report.api.md

@@ -0,0 +1,260 @@
+## API Report File for "@atlaskit/editor-shared-styles"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { SerializedStyles } from '@emotion/react';
+
+export declare const akEditorActiveBackground = '#42526E';
+
+export declare const akEditorActiveForeground = '#FFFFFF';
+
+export declare const akEditorBlockquoteBorderColor = '#DFE1E6';
+
+export declare const akEditorBreakoutPadding = 96;
+
+export declare const akEditorCodeBackground = '#F4F5F7';
+
+export declare const akEditorCodeBlockPadding = '12px';
+
+export declare const akEditorCodeFontFamily: string;
+
+export declare const akEditorCodeInlinePadding = '2px 4px';
+
+export declare const akEditorContextPanelWidth = 320;
+
+export declare const akEditorDefaultLayoutWidth = 760;
+
+export declare const akEditorDeleteBackground = '#FFEBE6';
+
+export declare const akEditorDeleteBackgroundShaded = '#FFEBE6';
+
+export declare const akEditorDeleteBackgroundWithOpacity =
+  'rgba(255, 189, 173, 0.5)';
+
+export declare const akEditorDeleteBorder = '#FF5630';
+
+export declare const akEditorDeleteIconColor = '#DE350B';
+
+export declare const akEditorDropdownActiveBackground = '#091E42';
+
+export declare const akEditorFloatingDialogZIndex: number;
+
+export declare const akEditorFloatingOverlapPanelZIndex: number;
+
+export declare const akEditorFloatingPanelZIndex: 400;
+
+export declare const akEditorFocus = '#4C9AFF';
+
+export declare const akEditorFullPageDefaultFontSize = 16;
+
+export declare const akEditorFullPageMaxWidth = 680;
+
+export declare const akEditorFullWidthLayoutLineLength = 1792;
+
+export declare const akEditorFullWidthLayoutWidth = 1800;
+
+export declare const akEditorGridLineZIndex = 9999;
+
+export declare const akEditorGutterPadding = 32;
+
+export declare const akEditorInactiveForeground = '#42526E';
+
+export declare const akEditorLineHeight = 1.714;
+
+export declare const akEditorMediaResizeHandlerPadding = 4;
+
+export declare const akEditorMediaResizeHandlerPaddingWide = 12;
+
+export declare const akEditorMentionSelected = '#7A869A';
+
+export declare const akEditorMenuZIndex: 500;
+
+export declare const akEditorMobileBreakoutPoint = 720;
+
+export declare const akEditorMobileMaxWidth = 0;
+
+export declare const akEditorPopupBackground = '#253858';
+
+export declare const akEditorPopupText = '#DEEBFF';
+
+export declare const akEditorPrimaryButton = '#0052CC';
+
+export declare const akEditorRuleBackground = '#EBECF0';
+
+export declare const akEditorRuleBorderRadius = '1px';
+
+export declare const akEditorSelectedBgColor = '#DEEBFF';
+
+export declare const akEditorSelectedBlanketColor = '#B3D4FF';
+
+export declare const akEditorSelectedBlanketOpacity = 0.3;
+
+export declare const akEditorSelectedBorder: string;
+
+export declare const akEditorSelectedBorderBoldSize = 2;
+
+export declare const akEditorSelectedBorderColor = '#0065FF';
+
+export declare const akEditorSelectedBorderSize = 1;
+
+export declare const akEditorSelectedBoxShadow: string;
+
+export declare const akEditorSelectedIconColor = '#0052CC';
+
+export declare const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+
+export declare const akEditorShadowZIndex = 2;
+
+export declare const akEditorSmallZIndex: number;
+
+export declare const akEditorStickyHeaderZIndex = 11;
+
+export declare const akEditorSubtleAccent = '#DFE1E6';
+
+export declare const akEditorSwoopCubicBezier = 'cubic-bezier(0.15, 1, 0.3, 1)';
+
+export declare const akEditorTableBorder = '#C1C7D0';
+
+export declare const akEditorTableBorderDark = '#3B475C';
+
+export declare const akEditorTableBorderDelete = '#FF5630';
+
+export declare const akEditorTableBorderRadius = '3px';
+
+export declare const akEditorTableBorderSelected = '#0065FF';
+
+export declare const akEditorTableCellBackgroundOpacity = 0.5;
+
+export declare const akEditorTableCellDelete = '#FFEBE6';
+
+export declare const akEditorTableCellMinWidth = 48;
+
+export declare const akEditorTableCellSelected = '#B3D4FF';
+
+export declare const akEditorTableFloatingControls = '#F4F5F7';
+
+export declare const akEditorTableLegacyCellMinWidth = 128;
+
+export declare const akEditorTableNumberColumnWidth = 42;
+
+export declare const akEditorTableToolbar = '#F4F5F7';
+
+export declare const akEditorTableToolbarDark = '#283447';
+
+export declare const akEditorTableToolbarDelete = '#FFBDAD';
+
+export declare const akEditorTableToolbarSelected = '#4C9AFF';
+
+export declare const akEditorTableToolbarSize = 11;
+
+export declare const akEditorToolbarKeylineHeight = 2;
+
+export declare const akEditorUnitZIndex = 1;
+
+export declare const akEditorWideLayoutWidth = 960;
+
+export declare const akLayoutGutterOffset: number;
+
+export declare const akRichMediaResizeZIndex: number;
+
+export declare const ATLASSIAN_NAVIGATION_HEIGHT = '56px';
+
+export declare const blockNodesVerticalMargin = '0.75rem';
+
+export declare const breakoutWideScaleRatio = 1.33;
+
+export declare const DEFAULT_EMBED_CARD_HEIGHT = 480;
+
+export declare const DEFAULT_EMBED_CARD_WIDTH = 680;
+
+export declare const editorFontSize: ({
+  theme,
+}: {
+  theme: EditorTheme;
+}) => number;
+
+export declare type EditorTheme = {
+  baseFontSize?: number;
+};
+
+/**
+ * Adds correct selection styling for a node
+ * Pass in which selection style properties you want and it will return css string of necessary styles
+ *
+ * eg.
+ *  .expand.ak-editor-selected-node {
+ *    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+ *  }
+ *
+ */
+export declare const getSelectionStyles: (
+  selectionStyles: Array<SelectionStyle>,
+) => string;
+
+export declare const getTableCellBackgroundDarkModeColors: string;
+
+export declare const gridMediumMaxWidth = 1024;
+
+export declare const hideNativeBrowserTextSelectionStyles =
+  '\n  ::selection,*::selection {\n    background-color: transparent;\n  }\n  ::-moz-selection,*::-moz-selection {\n    background-color: transparent;\n  }\n';
+
+export declare const overflowShadow: ({
+  background,
+  width,
+}: {
+  background: string;
+  width: string;
+}) => SerializedStyles;
+
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+
+export declare const relativeSize: (
+  multiplier: number,
+) => ({ theme }: { theme: EditorTheme }) => number;
+
+/**
+ * These are generic selection styles for all nodes
+ * If you have custom behaviour needed for a node, add that in the plugin's styles
+ * file in editor-core
+ */
+export declare enum SelectionStyle {
+  Border = 0,
+  BoxShadow = 1,
+  Background = 2,
+  Blanket = 3,
+}
+
+export declare const VIEWPORT_SIZES: {
+  laptopHiDPI: {
+    width: number;
+    height: number;
+  };
+  laptopMDPI: {
+    width: number;
+    height: number;
+  };
+  tabletL: {
+    width: number;
+    height: number;
+  };
+  tabletS: {
+    width: number;
+    height: number;
+  };
+  mobileM: {
+    width: number;
+    height: number;
+  };
+  mobileS: {
+    width: number;
+    height: number;
+  };
+  mobileXS: {
+    width: number;
+    height: number;
+  };
+};
+
+export {};
+```

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/tsconfig.json

@@ -1,8 +1,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./",
-    "noImplicitAny": true
+    "baseUrl": "./"
   },
   "include": [
     "./src/**/*.ts",