@atlaskit/smart-card 17.1.0 → 17.3.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/smart-card
 
+## 17.3.1
+
+### Patch Changes
+
+- [`66dc86e0331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66dc86e0331) - Flexible UI: Check for null element
+
+## 17.3.0
+
+### Minor Changes
+
+- [`dab29fc6697`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dab29fc6697) - [ux] Flexible UI: AvatarGroup sizing updated for small and medium size
+
+### Patch Changes
+
+- [`25408fac413`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25408fac413) - Flexible UI: Add MetadataBlock example
+
+## 17.2.1
+
+### Patch Changes
+
+- [`1d701660954`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d701660954) - Refactored deleteAction into a re-usable action component
+
+## 17.2.0
+
+### Minor Changes
+
+- [`3200ce3abc5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3200ce3abc5) - Flexible UI: Add MetadataBlock
+
 ## 17.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "EmbedResizeMessageListener", {
     return _EmbedResizeMessageListener.EmbedResizeMessageListener;
   }
 });
+Object.defineProperty(exports, "MetadataBlock", {
+  enumerable: true,
+  get: function get() {
+    return _blocks.MetadataBlock;
+  }
+});
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.1.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/actions/{delete-action → action}/index.js

@@ -11,22 +11,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
-
 var _core = require("@emotion/core");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
-
 var _constants = require("../../../../../constants");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _utils = require("../../utils");
 
-var _messages = require("../../../../../messages");
-
 var _token = require("../../../../../utils/token");
 
 var _utils2 = require("../../../../../utils");
@@ -46,38 +40,59 @@ var getWidth = function getWidth(size) {
   }
 };
 
-var getStyles = function getStyles(size) {
+var getIconStyles = function getIconStyles(size) {
   return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getWidth(size)));
 };
 
-var DeleteAction = function DeleteAction(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
-      content = _ref.content,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-action-delete-action' : _ref$testId;
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return (0, _core.jsx)("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+var Action = function Action(_ref2) {
+  var _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
+      content = _ref2.content,
+      onClick = _ref2.onClick,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? _constants.SmartLinkSize.Medium : _ref2$size,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
+      tooltipMessage = _ref2.tooltipMessage;
 
   if (!onClick) {
     return null;
   }
 
+  var iconBefore = iconPosition === 'before' ? (0, _core.jsx)(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  var iconAfter = iconPosition === 'after' ? (0, _core.jsx)(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
   return (0, _core.jsx)(_tooltip.default, {
-    content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+    content: tooltipMessage
   }, (0, _core.jsx)(_customThemeButton.default, {
     spacing: "none",
     appearance: appearance,
     testId: testId,
-    onClick: (0, _utils2.handleOnClick)(onClick)
-  }, content || (0, _core.jsx)("span", {
-    css: getStyles(size),
-    "data-testid": "".concat(testId, "-icon")
-  }, (0, _core.jsx)(_cross.default, {
-    label: "Delete"
-  }))));
+    onClick: (0, _utils2.handleOnClick)(onClick),
+    iconBefore: iconBefore,
+    iconAfter: iconAfter
+  }, content));
 };
 
-var _default = DeleteAction;
+var _default = Action;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/index.js

@@ -12,5 +12,7 @@ var _utils = require("./utils");
 // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
-var DeleteAction = (0, _utils.createAction)(_constants.ActionName.DeleteAction);
+// UIActions infer that you do not need to get any data from the context.
+// DataActions infer that the action depends on the data from the context.
+var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
 exports.DeleteAction = DeleteAction;

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAction = void 0;
+exports.createUIAction = exports.createDataAction = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,14 +19,27 @@ var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _deleteAction = _interopRequireDefault(require("./delete-action"));
+var _action = _interopRequireDefault(require("./action"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../../../messages");
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.DeleteAction, {
-  component: _deleteAction.default
+  component: _action.default,
+  props: {
+    testId: 'smart-action-delete-action',
+    icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
+      label: "Delete"
+    }),
+    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+  }
 });
 
 var getContextKey = function getContextKey(name) {
@@ -43,13 +56,12 @@ var getActionData = function getActionData(actionName, contextKey, context) {
   var data = context[contextKey];
 
   switch (actionName) {
-    case _constants.ActionName.DeleteAction:
     default:
       return data;
   }
 };
 
-var createAction = function createAction(name) {
+var createDataAction = function createDataAction(name) {
   var _ref = actionMappings[name] || {},
       BaseAction = _ref.component,
       props = _ref.props;
@@ -67,4 +79,20 @@ var createAction = function createAction(name) {
   };
 };
 
-exports.createAction = createAction;
+exports.createDataAction = createDataAction;
+
+var createUIAction = function createUIAction(name) {
+  var _ref2 = actionMappings[name] || {},
+      BaseAction = _ref2.component,
+      props = _ref2.props;
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    return /*#__PURE__*/_react.default.createElement(BaseAction, (0, _extends2.default)({}, props, overrides));
+  };
+};
+
+exports.createUIAction = createUIAction;

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -19,7 +19,7 @@ var _constants = require("../../../../../constants");
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 0;\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
 
 var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -17,21 +17,21 @@ var _constants = require("../../../../../constants");
 
 var _utils = require("../utils");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 
-var getFlexJustifyContent = function getFlexJustifyContent(align) {
+var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return 'flex-end';
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case _constants.SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 
 var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: ", ";\n  min-width: 10%;\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getFlexJustifyContent(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
 };
 
 exports.getElementGroupStyles = getElementGroupStyles;
@@ -40,6 +40,7 @@ var ElementGroup = function ElementGroup(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? _constants.SmartLinkAlignment.Left : _ref$align,
       children = _ref.children,
+      css = _ref.css,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -49,7 +50,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width;
   return (0, _core.jsx)("div", {
-    css: getElementGroupStyles(direction, size, align, width),
+    css: [getElementGroupStyles(direction, size, align, width), css],
     "data-smart-element-group": true,
     "data-testid": testId
   }, (0, _utils.renderChildren)(children, size));

package/dist/cjs/view/FlexibleCard/components/blocks/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MetadataBlock", {
+  enumerable: true,
+  get: function get() {
+    return _metadataBlock.default;
+  }
+});
 Object.defineProperty(exports, "TitleBlock", {
   enumerable: true,
   get: function get() {
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "TitleBlock", {
   }
 });
 
-var _titleBlock = _interopRequireDefault(require("./title-block"));
+var _titleBlock = _interopRequireDefault(require("./title-block"));
+
+var _metadataBlock = _interopRequireDefault(require("./metadata-block"));

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../utils");
+
+var _block = _interopRequireDefault(require("../block"));
+
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = getLineHeight(size);
+  var gap = (0, _utils.getGapSize)(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return 1.75;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var MetadataBlock = function MetadataBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+var _default = MetadataBlock;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -39,7 +39,7 @@ var actionStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _tag
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage);
 };
 
 var TitleBlockErroredView = function TitleBlockErroredView(_ref) {

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -7,12 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getBaseStyles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -56,22 +56,24 @@ var getDirectionStyles = function getDirectionStyles(direction) {
 var getGapSize = function getGapSize(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case _constants.SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case _constants.SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case _constants.SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
 
+exports.getGapSize = getGapSize;
+
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", ";\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;
@@ -80,6 +82,10 @@ var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;
 };
 
+var isElementNull = function isElementNull(children) {
+  return Boolean(children.type() === null);
+};
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && ((0, _flexible.isFlexibleUiElement)(node) || node.type === _elementGroup.default);
 };
@@ -108,9 +114,13 @@ var renderElementItems = function renderElementItems() {
     var Element = Elements[name];
 
     if (Element) {
-      return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+      var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
-      }, props))]);
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [].concat((0, _toConsumableArray2.default)(acc), [element]);
+      }
     }
 
     return acc;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -7,14 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@emotion/core");
+
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
 var _constants = require("../../../../../constants");
 
+var _templateObject;
+
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -29,13 +49,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  return (0, _core.jsx)("span", {
+    css: getStyles(size)
+  }, (0, _core.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 var _default = AvatarGroup;

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -41,7 +41,7 @@ var getThemeStyles = function getThemeStyles(theme) {
 
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {