@atlaskit/link-datasource 2.11.7 → 2.11.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 2.11.9
+
+### Patch Changes
+
+- [#133592](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133592)
+  [`4f2ae93fd3ff1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f2ae93fd3ff1) -
+  [ux] Makes IssueLikeTable td cells have a consistent minHeight of 40px and border of 1px, and
+  fixes several visual bugs with the edit view of InlineEdit cell
+- Updated dependencies
+
+## 2.11.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.11.7
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/index.js

@@ -11,10 +11,10 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
 var _form = require("@atlaskit/form");
-var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-circle"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
 var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
+var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _colors = require("@atlaskit/theme/colors");
@@ -60,7 +60,7 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
     });
   }
   if (lastValidationResult.type === 'valid') {
-    return (0, _react2.jsx)(_checkCircle.default, {
+    return (0, _react2.jsx)(_successCheckCircle.default, {
       label: "label",
       color: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
       LEGACY_size: "medium",

package/dist/cjs/ui/issue-like-table/edit-type/text/index.js

@@ -15,7 +15,11 @@ var TextEditType = function TextEditType(props) {
   }, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, props, {
     autoFocus: true,
     isCompact: true,
-    testId: "inline-edit-text"
+    testId: "inline-edit-text",
+    style: {
+      // We need 8px left padding to match read only version, but there is already 1px of border
+      padding: "var(--ds-space-100, 8px)".concat(" calc(", "var(--ds-space-100, 8px)", " - 1px)")
+    }
   })));
 };
 var _default = exports.default = TextEditType;

package/dist/cjs/ui/issue-like-table/styled.js

@@ -81,10 +81,12 @@ var TableCell = exports.TableCell = _styled.default.td((_styled$td = {}, (0, _de
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
   border: 0,
   minWidth: 'auto',
+  height: '32px',
   verticalAlign: 'inherit',
-  boxSizing: 'border-box',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  boxSizing: 'content-box',
+  // Due to padding, content-box makes td height 40px equal to InlineEdit on height of 32px
+  borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
   overflow: 'hidden'
 }), (0, _defineProperty2.default)(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -103,10 +105,11 @@ var InlineEditableTableCell = exports.InlineEditableTableCell = _styled.default.
   padding: "var(--ds-space-0, 0)".concat(" ", "var(--ds-space-0, 0)"),
   border: 0,
   minWidth: 'auto',
+  height: '40px',
   verticalAlign: 'inherit',
-  boxSizing: 'border-box',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  boxSizing: 'content-box',
+  borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
   overflow: 'hidden'
 }), (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
   borderRight: 0

package/dist/cjs/ui/issue-like-table/table-cell-content/index.js

@@ -15,10 +15,13 @@ var _editType = require("../edit-type");
 var _renderType = require("../render-type");
 var _truncateTextTag = require("../truncate-text-tag");
 var _inlineEdit = require("./inline-edit");
-var truncateTextStyles = (0, _primitives.xcss)({
+var readViewStyles = (0, _primitives.xcss)({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  width: '100%'
+  width: '100%',
+  // Compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+  minHeight: 'calc(40px - 2px * 2)',
+  alignContent: 'center'
 });
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var columnKey = _ref.columnKey,
@@ -98,7 +101,7 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, renderItem(values)));
   if (!isEditable) {
     return readView;
@@ -149,7 +152,7 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
     testId: "inline-edit-read-view",
     paddingInline: "space.100",
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,

package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -21,7 +21,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var containerStyles = (0, _primitives.xcss)({
+var editContainerStyles = (0, _primitives.xcss)({
   marginBlockStart: 'space.negative.100'
 });
 var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newValue) {
@@ -82,7 +82,7 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     setIsEditing(false);
   }, [item, datasourceTypeWithValues.type, columnKey, onUpdateItem, ari, execute, showErrorFlag, captureError]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: containerStyles
+    xcss: editContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, (0, _editType.editType)(datasourceTypeWithValues), {
     hideActionButtons: true,
     readView: function readView() {

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -10,10 +10,10 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import { ErrorMessage, Field } from '@atlaskit/form';
-import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';

package/dist/es2019/ui/issue-like-table/edit-type/text/index.js

@@ -2,11 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import Textfield from '@atlaskit/textfield';
-const TextEditType = props => /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
-  isDisabled: false
-}, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
-  autoFocus: true,
-  isCompact: true,
-  testId: "inline-edit-text"
-})));
+const TextEditType = props => {
+  return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
+    autoFocus: true,
+    isCompact: true,
+    testId: "inline-edit-text",
+    style: {
+      // We need 8px left padding to match read only version, but there is already 1px of border
+      padding: `${"var(--ds-space-100, 8px)"} calc(${"var(--ds-space-100, 8px)"} - 1px)`
+    }
+  })));
+};
 export default TextEditType;

package/dist/es2019/ui/issue-like-table/styled.js

@@ -87,10 +87,12 @@ export const TableCell = styled.td({
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
     border: 0,
     minWidth: 'auto',
+    height: '32px',
     verticalAlign: 'inherit',
-    boxSizing: 'border-box',
-    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    boxSizing: 'content-box',
+    // Due to padding, content-box makes td height 40px equal to InlineEdit on height of 32px
+    borderRight: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
     overflow: 'hidden'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -120,10 +122,11 @@ export const InlineEditableTableCell = styled.td({
     padding: `${"var(--ds-space-0, 0)"} ${"var(--ds-space-0, 0)"}`,
     border: 0,
     minWidth: 'auto',
+    height: '40px',
     verticalAlign: 'inherit',
-    boxSizing: 'border-box',
-    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    boxSizing: 'content-box',
+    borderRight: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
     overflow: 'hidden'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/ui/issue-like-table/table-cell-content/index.js

@@ -8,10 +8,13 @@ import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
 import { InlineEdit } from './inline-edit';
-const truncateTextStyles = xcss({
+const readViewStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  width: '100%'
+  width: '100%',
+  // Compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+  minHeight: 'calc(40px - 2px * 2)',
+  alignContent: 'center'
 });
 const TooltipWrapper = ({
   columnKey,
@@ -91,7 +94,7 @@ const InlineEditableCell = ({
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, renderItem(values)));
   if (!isEditable) {
     return readView;
@@ -145,7 +148,7 @@ export const TableCellContent = ({
     testId: "inline-edit-read-view",
     paddingInline: "space.100",
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,

package/dist/es2019/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -6,7 +6,7 @@ import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import useErrorLogger from '../../../hooks/useErrorLogger';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
-const containerStyles = xcss({
+const editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
 });
 const mapUpdatedItem = (type, existingItem, columnKey, newValue) => {
@@ -71,7 +71,7 @@ export const InlineEdit = ({
     setIsEditing(false);
   }, [item, datasourceTypeWithValues.type, columnKey, onUpdateItem, ari, execute, showErrorFlag, captureError]);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: containerStyles
+    xcss: editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
     hideActionButtons: true,
     readView: () => readView,

package/dist/esm/ui/assets-modal/search-container/aql-search-input/index.js

@@ -10,10 +10,10 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import { ErrorMessage, Field } from '@atlaskit/form';
-import CheckCircleIcon from '@atlaskit/icon/core/migration/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';

package/dist/esm/ui/issue-like-table/edit-type/text/index.js

@@ -8,7 +8,11 @@ var TextEditType = function TextEditType(props) {
   }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
     autoFocus: true,
     isCompact: true,
-    testId: "inline-edit-text"
+    testId: "inline-edit-text",
+    style: {
+      // We need 8px left padding to match read only version, but there is already 1px of border
+      padding: "var(--ds-space-100, 8px)".concat(" calc(", "var(--ds-space-100, 8px)", " - 1px)")
+    }
   })));
 };
 export default TextEditType;

package/dist/esm/ui/issue-like-table/styled.js

@@ -75,10 +75,12 @@ export var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
   border: 0,
   minWidth: 'auto',
+  height: '32px',
   verticalAlign: 'inherit',
-  boxSizing: 'border-box',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  boxSizing: 'content-box',
+  // Due to padding, content-box makes td height 40px equal to InlineEdit on height of 32px
+  borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
   overflow: 'hidden'
 }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:first-child')), {
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -97,10 +99,11 @@ export var InlineEditableTableCell = styled.td((_styled$td2 = {}, _definePropert
   padding: "var(--ds-space-0, 0)".concat(" ", "var(--ds-space-0, 0)"),
   border: 0,
   minWidth: 'auto',
+  height: '40px',
   verticalAlign: 'inherit',
-  boxSizing: 'border-box',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  boxSizing: 'content-box',
+  borderRight: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
   overflow: 'hidden'
 }), _defineProperty(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
   borderRight: 0

package/dist/esm/ui/issue-like-table/table-cell-content/index.js

@@ -8,10 +8,13 @@ import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
 import { InlineEdit } from './inline-edit';
-var truncateTextStyles = xcss({
+var readViewStyles = xcss({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  width: '100%'
+  width: '100%',
+  // Compensates for 2px from both top and bottom taken by InlneEdit (from transparent border in read-view mode and border+padding in edit view)
+  minHeight: 'calc(40px - 2px * 2)',
+  alignContent: 'center'
 });
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var columnKey = _ref.columnKey,
@@ -91,7 +94,7 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, renderItem(values)));
   if (!isEditable) {
     return readView;
@@ -142,7 +145,7 @@ export var TableCellContent = function TableCellContent(_ref4) {
     testId: "inline-edit-read-view",
     paddingInline: "space.100",
     paddingBlock: "space.050",
-    xcss: truncateTextStyles
+    xcss: readViewStyles
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,

package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -11,7 +11,7 @@ import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import useErrorLogger from '../../../hooks/useErrorLogger';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
-var containerStyles = xcss({
+var editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
 });
 var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newValue) {
@@ -72,7 +72,7 @@ export var InlineEdit = function InlineEdit(_ref) {
     setIsEditing(false);
   }, [item, datasourceTypeWithValues.type, columnKey, onUpdateItem, ari, execute, showErrorFlag, captureError]);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: containerStyles
+    xcss: editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
     hideActionButtons: true,
     readView: function readView() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.11.7",
+	"version": "2.11.9",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,14 +42,14 @@
 		"@atlaskit/avatar-group": "^9.11.0",
 		"@atlaskit/badge": "^16.4.0",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/datetime-picker": "^13.11.0",
+		"@atlaskit/datetime-picker": "^14.0.0",
 		"@atlaskit/dropdown-menu": "^12.17.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/empty-state": "^7.11.0",
 		"@atlaskit/flag": "^15.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/icon-object": "^6.5.0",
 		"@atlaskit/image": "^1.3.0",
 		"@atlaskit/inline-edit": "^13.7.0",
@@ -73,7 +73,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/select": "^17.15.0",
-		"@atlaskit/smart-card": "^27.17.0",
+		"@atlaskit/smart-card": "^27.18.0",
 		"@atlaskit/smart-user-picker": "6.10.2",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tag": "^12.5.0",