@atlaskit/editor-plugin-table 5.5.0 → 5.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.1
+
+### Patch Changes
+
+- [#59829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59829) [`3120b36a9f2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3120b36a9f2c) - Converted spacing values to the corresponding space tokens
+
 ## 5.5.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js

@@ -13,16 +13,16 @@ var _constants = require("@atlaskit/theme/constants");
 var _consts = require("../consts");
 var _templateObject, _templateObject2;
 var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(_colors.N20, ")"), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(_colors.N20, ")"), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
     light: "var(--ds-background-neutral, none)",
     dark: "var(--ds-background-neutral, none)"
-  })(props), "var(--ds-surface, ".concat(_colors.N0, ")"), (0, _components.themed)({
+  })(props), "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(_colors.N0, ")"), (0, _components.themed)({
     light: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
     dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN60, ")")
   })(props), (0, _components.themed)({
     light: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))",
     dark: "var(--ds-background-neutral-pressed, ".concat(_colors.B75, ")")
-  })(props));
+  })(props), "var(--ds-space-negative-050, -4px)");
 };
 var tableFloatingCellButtonSelectedStyles = exports.tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), (0, _components.themed)({

package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js

@@ -18,7 +18,7 @@ export const tableFloatingCellButtonStyles = props => css`
   dark: "var(--ds-background-neutral, none)"
 })(props)};
     flex-direction: column;
-    margin: 2px;
+    margin: ${"var(--ds-space-025, 2px)"};
     outline: 2px solid ${`var(--ds-surface, ${N0})`};
     border-radius: 1px;
     padding: 0;
@@ -38,7 +38,7 @@ export const tableFloatingCellButtonStyles = props => css`
 })(props)};
   }
   && button > span {
-    margin: 0px -4px;
+    margin: 0px ${"var(--ds-space-negative-050, -4px)"};
   }
   && span {
     pointer-events: none;

package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js

@@ -6,16 +6,16 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
 export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), borderRadius(), contextualMenuTriggerSize + 2, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: ", ";\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px ", ";\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(N20, ")"), borderRadius(), contextualMenuTriggerSize + 2, themed({
     light: "var(--ds-background-neutral, none)",
     dark: "var(--ds-background-neutral, none)"
-  })(props), "var(--ds-surface, ".concat(N0, ")"), themed({
+  })(props), "var(--ds-space-025, 2px)", "var(--ds-surface, ".concat(N0, ")"), themed({
     light: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
     dark: "var(--ds-background-neutral-hovered, ".concat(DN60, ")")
   })(props), themed({
     light: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))",
     dark: "var(--ds-background-neutral-pressed, ".concat(B75, ")")
-  })(props));
+  })(props), "var(--ds-space-negative-050, -4px)");
 };
 export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), themed({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/ui/FloatingContextualButton/styles.ts

@@ -23,7 +23,7 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
       dark: token('color.background.neutral', 'none'),
     })(props)};
     flex-direction: column;
-    margin: 2px;
+    margin: ${token('space.025', '2px')};
     outline: 2px solid ${token('elevation.surface', N0)};
     border-radius: 1px;
     padding: 0;
@@ -46,7 +46,7 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
     })(props)};
   }
   && button > span {
-    margin: 0px -4px;
+    margin: 0px ${token('space.negative.050', '-4px')};
   }
   && span {
     pointer-events: none;