@atlaskit/smart-card 26.50.11 → 26.50.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 26.50.12
+
+### Patch Changes
+
+- [#85502](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85502) [`65a8e82b8b0c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/65a8e82b8b0c) - [ux] increasing max lines for error messages on flexible block cards
+- Updated dependencies
+
 ## 26.50.11
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11"
+  packageVersion: "26.50.12"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -41,6 +41,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    maxLines: 3,
     message: {
       descriptor: _messages.messages.could_not_load_link
     }

package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -91,7 +91,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
-    maxLines: 2,
+    maxLines: 3,
     message: {
       descriptor: (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -59,7 +59,8 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: description,
-    testId: "".concat(testId, "-message")
+    testId: "".concat(testId, "-message"),
+    maxLines: 3
   }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleNotFoundView);

package/dist/cjs/view/BlockCard/views/flexible/styled.js

@@ -1,17 +1,41 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // in editor prosemirror adds padding-left so we need to overwrite it
 // renderer overwrites the margin-right so we need to add it here
-var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n      margin-right: 0.5rem;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
-var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0.5em;\n\n  [data-smart-element='Title'] {\n    font-weight: 600;\n  }\n"])));
-var footerBlockCss = exports.footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
-var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"));
+var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)({
+  'span[data-smart-element-avatar-group]': {
+    '> ul': {
+      paddingLeft: '0px',
+      marginRight: "var(--ds-space-100, 0.5rem)"
+    }
+  },
+  '[data-smart-element-group]': {
+    lineHeight: '1rem'
+  }
+});
+var titleBlockCss = exports.titleBlockCss = (0, _react.css)({
+  gap: "var(--ds-space-100, 0.5em)",
+  "[data-smart-element='Title']": {
+    fontWeight: 600
+  }
+});
+var footerBlockCss = exports.footerBlockCss = (0, _react.css)({
+  height: '1.5rem',
+  '.actions-button-group': {
+    'button, button:hover, button:focus, button:active': {
+      fontSize: '0.875rem'
+    }
+  }
+});
+var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _react.css)({
+  '& > div': {
+    borderRadius: "var(--ds-border-radius-200, 8px)",
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
+  }
+});

package/dist/cjs/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -10,6 +10,10 @@ var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _react = _interopRequireDefault(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _utils = require("../utils");
+var _react2 = require("@emotion/react");
+var customBlockStyles = (0, _react2.css)({
+  alignItems: 'flex-start'
+});
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -34,7 +38,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     hideIcon: !!title,
     text: title
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptions, {
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: customBlockStyles
+  }, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptions, {
     actions: actions,
     testId: "smart-block-card-footer"
   })));

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11",
+  packageVersion: "26.50.12",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11"
+  packageVersion: "26.50.12"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -28,6 +28,7 @@ const FlexibleErroredView = ({
     primaryColor: `var(--ds-icon-warning, ${R300})`,
     testId: `${testId}-warning-icon`
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 3,
     message: {
       descriptor: messages.could_not_load_link
     }

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -84,7 +84,7 @@ const FlexibleForbiddenView = ({
     primaryColor: `var(--ds-icon-danger, ${R300})`,
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
-    maxLines: 2,
+    maxLines: 3,
     message: {
       descriptor: toMessage(messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext

package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -46,7 +46,8 @@ const FlexibleNotFoundView = ({
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: description,
-    testId: `${testId}-message`
+    testId: `${testId}-message`,
+    maxLines: 3
   }));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

package/dist/es2019/view/BlockCard/views/flexible/styled.js

@@ -3,40 +3,34 @@ import { N40 } from '@atlaskit/theme/colors';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 // renderer overwrites the margin-right so we need to add it here
-export const metadataBlockCss = css`
-  /* primary element group */
-  span[data-smart-element-avatar-group] {
-    > ul {
-      padding-left: 0px;
-      margin-right: 0.5rem;
+export const metadataBlockCss = css({
+  'span[data-smart-element-avatar-group]': {
+    '> ul': {
+      paddingLeft: '0px',
+      marginRight: "var(--ds-space-100, 0.5rem)"
     }
+  },
+  '[data-smart-element-group]': {
+    lineHeight: '1rem'
   }
-  [data-smart-element-group] {
-    line-height: 1rem;
+});
+export const titleBlockCss = css({
+  gap: "var(--ds-space-100, 0.5em)",
+  "[data-smart-element='Title']": {
+    fontWeight: 600
   }
-`;
-export const titleBlockCss = css`
-  gap: 0.5em;
-
-  [data-smart-element='Title'] {
-    font-weight: 600;
-  }
-`;
-export const footerBlockCss = css`
-  height: 1.5rem;
-
-  .actions-button-group {
-    button,
-    button:hover,
-    button:focus,
-    button:active {
-      font-size: 0.875rem;
+});
+export const footerBlockCss = css({
+  height: '1.5rem',
+  '.actions-button-group': {
+    'button, button:hover, button:focus, button:active': {
+      fontSize: '0.875rem'
     }
   }
-`;
-export const flexibleBlockCardStyle = css`
-  & > div {
-    border-radius: ${"var(--ds-border-radius-200, 8px)"};
-    border: 1px solid ${`var(--ds-border, ${N40})`};
+});
+export const flexibleBlockCardStyle = css({
+  '& > div': {
+    borderRadius: "var(--ds-border-radius-200, 8px)",
+    border: `1px solid ${`var(--ds-border, ${N40})`}`
   }
-`;
+});

package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -4,6 +4,10 @@ import React from 'react';
 import FlexibleCard from '../../../../FlexibleCard';
 import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
 import { FlexibleCardUiOptions, PreviewBlockOptions, titleBlockOptions, FooterBlockOptions } from '../utils';
+import { css } from '@emotion/react';
+const customBlockStyles = css({
+  alignItems: 'flex-start'
+});
 const UnresolvedView = ({
   actions,
   cardState,
@@ -27,7 +31,9 @@ const UnresolvedView = ({
 }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
   hideIcon: !!title,
   text: title
-})), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptions, {
+})), /*#__PURE__*/React.createElement(CustomBlock, {
+  overrideCss: customBlockStyles
+}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptions, {
   actions: actions,
   testId: "smart-block-card-footer"
 })));

package/dist/es2019/view/LinkUrl/index.js

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11",
+  packageVersion: "26.50.12",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11"
+  packageVersion: "26.50.12"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -32,6 +32,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 3,
     message: {
       descriptor: messages.could_not_load_link
     }

package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -82,7 +82,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
-    maxLines: 2,
+    maxLines: 3,
     message: {
       descriptor: toMessage(messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext

package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -50,7 +50,8 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: description,
-    testId: "".concat(testId, "-message")
+    testId: "".concat(testId, "-message"),
+    maxLines: 3
   }));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

package/dist/esm/view/BlockCard/views/flexible/styled.js

@@ -1,11 +1,36 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 // renderer overwrites the margin-right so we need to add it here
-export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n      margin-right: 0.5rem;\n    }\n  }\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
-export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5em;\n\n  [data-smart-element='Title'] {\n    font-weight: 600;\n  }\n"])));
-export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
-export var flexibleBlockCardStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"));
+export var metadataBlockCss = css({
+  'span[data-smart-element-avatar-group]': {
+    '> ul': {
+      paddingLeft: '0px',
+      marginRight: "var(--ds-space-100, 0.5rem)"
+    }
+  },
+  '[data-smart-element-group]': {
+    lineHeight: '1rem'
+  }
+});
+export var titleBlockCss = css({
+  gap: "var(--ds-space-100, 0.5em)",
+  "[data-smart-element='Title']": {
+    fontWeight: 600
+  }
+});
+export var footerBlockCss = css({
+  height: '1.5rem',
+  '.actions-button-group': {
+    'button, button:hover, button:focus, button:active': {
+      fontSize: '0.875rem'
+    }
+  }
+});
+export var flexibleBlockCardStyle = css({
+  '& > div': {
+    borderRadius: "var(--ds-border-radius-200, 8px)",
+    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
+  }
+});

package/dist/esm/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -4,6 +4,10 @@ import React from 'react';
 import FlexibleCard from '../../../../FlexibleCard';
 import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
 import { FlexibleCardUiOptions, PreviewBlockOptions, titleBlockOptions, FooterBlockOptions } from '../utils';
+import { css } from '@emotion/react';
+var customBlockStyles = css({
+  alignItems: 'flex-start'
+});
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -28,7 +32,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
     hideIcon: !!title,
     text: title
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptions, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: customBlockStyles
+  }, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptions, {
     actions: actions,
     testId: "smart-block-card-footer"
   })));

package/dist/esm/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.11",
+  packageVersion: "26.50.12",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/FlexibleCard/components/elements/text/types.d.ts

@@ -11,7 +11,7 @@ export type TextProps = ElementProps & {
      */
     content?: string;
     /**
-     * The maximum number of lines the text should span over. Maximum is 2.
+     * The maximum number of lines the text should span over. Maximum is 2 unless its an error message.
      */
     maxLines?: number;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/elements/text/types.d.ts

@@ -11,7 +11,7 @@ export type TextProps = ElementProps & {
      */
     content?: string;
     /**
-     * The maximum number of lines the text should span over. Maximum is 2.
+     * The maximum number of lines the text should span over. Maximum is 2 unless its an error message.
      */
     maxLines?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.50.11",
+  "version": "26.50.12",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.14.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/primitives": "^5.2.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",